diff --git a/public/img/Onboarding/CardIndex1.svg b/public/img/Onboarding/CardIndex1.svg new file mode 100644 index 0000000..638c595 --- /dev/null +++ b/public/img/Onboarding/CardIndex1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Onboarding/CardIndex2.svg b/public/img/Onboarding/CardIndex2.svg new file mode 100644 index 0000000..c53e3d2 --- /dev/null +++ b/public/img/Onboarding/CardIndex2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Onboarding/CardIndex3.svg b/public/img/Onboarding/CardIndex3.svg new file mode 100644 index 0000000..bb49244 --- /dev/null +++ b/public/img/Onboarding/CardIndex3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Onboarding/main1.svg b/public/img/Onboarding/main1.svg new file mode 100644 index 0000000..f04ddf2 --- /dev/null +++ b/public/img/Onboarding/main1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/Onboarding/main2.svg b/public/img/Onboarding/main2.svg new file mode 100644 index 0000000..2b0b6ce --- /dev/null +++ b/public/img/Onboarding/main2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 7153792..02a87d8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,12 +17,16 @@ import TermsOfService from 'pages/Signup/TermsOfService'; import SignupSuccess from 'pages/Signup/SignupSuccess'; import { RecoilRoot } from 'recoil'; import Answer from 'pages/Answer'; +import { Onboarding } from 'pages/Onboarding'; function App() { return ( + {/* OnboardingPage */} + } /> + {/* MainPage */} } /> } /> diff --git a/src/assets/common.ts b/src/assets/common.ts index 55fb2ca..f53db5d 100644 --- a/src/assets/common.ts +++ b/src/assets/common.ts @@ -85,3 +85,8 @@ export const StyledLink = styled(Link)<{ color?: string }>` text-decoration: none; color: ${({ color }) => (color ? color : Palette.Black)}; `; + +export const Img = styled.img` + width: 100%; + height: 100%; +`; diff --git a/src/components/Onboarding/WithCard.tsx b/src/components/Onboarding/WithCard.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/PostDetail/CommentInputBox.tsx b/src/components/PostDetail/CommentInputBox.tsx index 9454b6a..c9da68c 100644 --- a/src/components/PostDetail/CommentInputBox.tsx +++ b/src/components/PostDetail/CommentInputBox.tsx @@ -8,7 +8,7 @@ import { useState, useEffect, useRef } from 'react'; import closure from 'store/closure'; import { editCommentApi, postCommentApi } from 'network/apis/commentApi'; import { useRecoilState, useResetRecoilState } from 'recoil'; -import { editCommentState } from 'recoil/atom'; +import { editCommentState } from 'store/recoil/atom'; const CommentInputBox = ({ idx }: { idx: number }) => { const userType = closure.getUserType(); diff --git a/src/components/PostDetail/CommentModal.tsx b/src/components/PostDetail/CommentModal.tsx index 23d5aab..75bd1fb 100644 --- a/src/components/PostDetail/CommentModal.tsx +++ b/src/components/PostDetail/CommentModal.tsx @@ -6,7 +6,7 @@ import edit from 'assets/icons/edit.svg'; import deleteComment from 'assets/icons/delete-comment.svg'; import report from 'assets/icons/report.svg'; import { useRecoilState } from 'recoil'; -import { editCommentState } from 'recoil/atom'; +import { editCommentState } from 'store/recoil/atom'; import { commentType } from 'types'; import { deleteCommentApi } from 'network/apis/commentApi'; diff --git a/src/components/common/Card.tsx b/src/components/common/Card.tsx index 7c81774..23a72fb 100644 --- a/src/components/common/Card.tsx +++ b/src/components/common/Card.tsx @@ -14,7 +14,7 @@ import closure from 'store/closure'; import { questionType } from 'types'; import { Ref, forwardRef } from 'react'; import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'; -import { questionState } from 'recoil/atom'; +import { questionState } from 'store/recoil/atom'; interface cardProps { category?: string; diff --git a/src/components/common/WriteConfirmBar.tsx b/src/components/common/WriteConfirmBar.tsx index b528763..7399dbc 100644 --- a/src/components/common/WriteConfirmBar.tsx +++ b/src/components/common/WriteConfirmBar.tsx @@ -5,9 +5,9 @@ import { Palette } from 'styles/Palette'; import Typo from 'styles/Typo'; import { useLocation } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; -import { writeState } from 'recoil/atom'; -import { postQuestionApi } from 'network/question'; -import { postAnswerApi } from 'network/answerApi'; +import { writeState } from 'store/recoil/atom'; +import { postQuestionApi } from 'network/apis/question'; +import { postAnswerApi } from 'network/apis/answerApi'; const WriteConfirmBar = ({ postIdx }: { postIdx?: number }) => { const navigate = useNavigate(); @@ -59,7 +59,7 @@ const WriteConfirmBar = ({ postIdx }: { postIdx?: number }) => { return ( - { diff --git a/src/pages/Ask/WriteQuestion/index.tsx b/src/pages/Ask/WriteQuestion/index.tsx index a3f6e59..e016664 100644 --- a/src/pages/Ask/WriteQuestion/index.tsx +++ b/src/pages/Ask/WriteQuestion/index.tsx @@ -8,7 +8,7 @@ import styled from 'styled-components'; import { Palette } from 'styles/Palette'; import Typo from 'styles/Typo'; import { useSetRecoilState } from 'recoil'; -import { writeState } from 'recoil/atom'; +import { writeState } from 'store/recoil/atom'; const WriteQuestion = () => { const [selectedCtg, setSelectedCtg] = useState('DAILY'); diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx new file mode 100644 index 0000000..a99c803 --- /dev/null +++ b/src/pages/Onboarding/index.tsx @@ -0,0 +1,218 @@ +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import { Column, Img, StyledLink } from 'assets/common'; +import { styled } from 'styled-components'; +import { Palette } from 'styles/Palette'; +import Typo from 'styles/Typo'; +import Slider, { Settings } from 'react-slick'; +import { useRef, useState } from 'react'; + +interface cardComponentsInterface { + img: string; + text: React.ReactNode; +} + +const cardComponents: cardComponentsInterface[] = [ + { + img: 'CardIndex1', + text: ( + <> + Juitcy는 익명의 시니어 시니 + 와, +
+ 익명의 주니어 쥬니를 + 연결합니다. + + ), + }, + { + img: 'CardIndex2', + text: ( + <> + 쥬니는 삶의 고민을 털어 + 놓고, + + ), + }, + { + img: 'CardIndex3', + text: ( + <> + 시니는 삶의 지혜가 담긴 + 답변을 남깁니다. + + ), + }, +]; + +export const Onboarding = () => { + const [currentSlide, setCurrentSlide] = useState(0); + const sliderRef = useRef(null); + + // 다음 버튼 클릭 시 슬라이드를 넘김 + const handleNextSlide = () => { + if (sliderRef.current) { + sliderRef.current.slickNext(); + } + if (currentSlide === 2) setCurrentSlide(3); + else if (currentSlide === 3) setCurrentSlide(4); + }; + + const settings: Settings = { + dots: true, + fade: true, + infinite: false, + speed: 1000, + slidesToShow: 1, + slidesToScroll: 1, + afterChange: (index: number) => { + setCurrentSlide(index); + }, + }; + + return ( + + {/* 카드 슬라이드있는 온보딩 */} + + + 쥬니어와 시니어를 잇다 +
+ +
+
+
+ + {cardComponents.map( + (card: cardComponentsInterface, index: number) => ( +
+ +
+ +
+ {card.text} +
+
+ ), + )} +
+
+
+ {/* 카드슬라이드 없는 온보딩 */} + +
+
+ +
+
+
+
+
+ + 존재만으로 서로의 삶에 온기를 더하는 세대 공감 문답 커뮤니티, + 쥬잇씨 + +
+
+ +
+
+
+
+ + + + {currentSlide === 4 ? '시작' : '다음'} + + + 바로 로그인하기 + +
+ ); +}; + +const Container = styled.div` + width: 100%; + padding: 79px 30px 42px 30px; + display: flex; + flex-direction: column; + justify-content: space-between; + + .img-container { + width: 121px; + margin: 0 0 30px 0; + } + .slider-container { + height: 100%; + } +`; +const StyledButton = styled.div` + width: 100%; + background: ${Palette.Orange}; + color: ${Palette.White}; + padding: 10px 0; + text-align: center; + border-radius: 10px; +`; + +const StyledSlider = styled(Slider)` + width: 100%; + height: fit-contents; + + border-radius: 10px; + background: ${Palette.White}; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1); + padding: 40px 0 30px 0; + text-align: center; + margin-bottom: 30px; + + .slick-dots { + bottom: -40px; + } + + .card-img-container { + width: 100%; + display: flex; + justify-content: center; + } +`; + +const TextContainer = styled.div` + text-align: center; + display: flex; + flex-direction: column; + gap: 20px; + + //카드 텍스트 + .bevrNG { + text-decoration-color: ${Palette.Gray5}; + text-decoration: underline; + } +`; + +const WithCard = styled.div<{ index?: number }>` + display: ${({ index }) => (index === 3 || index === 4 ? 'none' : 'block')}; + height: 510px; +`; +const WithoutCard = styled.div<{ index?: number }>` + display: ${({ index }) => + index === 0 || index === 1 || index === 2 ? 'none' : 'block'}; + height: 510px; + + .main-img-container { + height: 80%; + width: 80%; + } + .main1 { + display: ${({ index }) => (index !== 3 ? 'none' : 'block')}; + } + .main2 { + display: ${({ index }) => (index !== 4 ? 'none' : 'block')}; + } + .main2-container { + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + padding: 50px 0 0 0; + } +`; diff --git a/src/recoil/atom.ts b/src/store/recoil/atom.ts similarity index 100% rename from src/recoil/atom.ts rename to src/store/recoil/atom.ts