Merge pull request #28 from whatever-mentoring/feature/onboarding

feat: 온보딩 페이지 생성

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 (
     <RecoilRoot>
       <BrowserRouter>
         <Routes>
+          {/* OnboardingPage */}
+          <Route path="/onBoarding" element={<Onboarding />} />
+
           {/* MainPage */}
           <Route path="/" element={<Main />} />
           <Route path="/post/:idx" element={<PostDetail />} />

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%;
+`;

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();

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';
 

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;

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 (
     <Container>
-       <BtnDib
+      <BtnDib
         color={Palette.Gray05}
         borderClr={Palette.Gray2}
         onClick={onClickCancel}

src/components/common/WriteInputBox.tsx

@@ -4,7 +4,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';
 
 interface inputboxProps {
   placeholder: string;

src/network/answerApi.ts → src/network/apis/answerApi.ts

@@ -1,4 +1,4 @@
-import { publicInstance } from './config';
+import { publicInstance } from '../config';
 
 export const postAnswerApi = async ({
   postIdx,

src/network/question.ts → src/network/apis/question.ts

@@ -1,4 +1,4 @@
-import { publicInstance } from './config';
+import { publicInstance } from '../config';
 
 export const postQuestionApi = async ({
   title,

src/pages/Answer/index.tsx

@@ -6,7 +6,7 @@ import CategoryBar from 'components/Category/CategoryBar';
 import { useEffect, useState } from 'react';
 import { questionType } from 'types';
 import { useInView } from 'react-intersection-observer';
-import { getQuestionApi } from 'network/question';
+import { getQuestionApi } from 'network/apis/question';
 import { AnsButtonCard } from 'components/common/Card';
 
 const Answer = () => {

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<string>('DAILY');

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는 익명의 시니어 <span style={{ color: Palette.Blue }}>시니</span>
+        와,
+        <br />
+        익명의 주니어 <span style={{ color: Palette.Orange }}>쥬니</span>를
+        연결합니다.
+      </>
+    ),
+  },
+  {
+    img: 'CardIndex2',
+    text: (
+      <>
+        <span style={{ color: Palette.Orange }}>쥬니</span>는 삶의 고민을 털어
+        놓고,
+      </>
+    ),
+  },
+  {
+    img: 'CardIndex3',
+    text: (
+      <>
+        <span style={{ color: Palette.Blue }}>시니</span>는 삶의 지혜가 담긴
+        답변을 남깁니다.
+      </>
+    ),
+  },
+];
+
+export const Onboarding = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const sliderRef = useRef<Slider>(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 (
+    <Container>
+      {/* 카드 슬라이드있는 온보딩 */}
+      <WithCard index={currentSlide}>
+        <Column gap={15}>
+          <Typo.h2>쥬니어와 시니어를 잇다</Typo.h2>
+          <div className="img-container">
+            <img src="/img/logo-text.svg" />
+          </div>
+        </Column>
+        <div className="slider-container">
+          <StyledSlider {...settings} ref={sliderRef}>
+            {cardComponents.map(
+              (card: cardComponentsInterface, index: number) => (
+                <div key={index} style={{ gap: '30px' }}>
+                  <Column gap={30}>
+                    <div className="card-img-container">
+                      <img src={`/img/Onboarding/${card.img}.svg`} />
+                    </div>
+                    <Typo.b4>{card.text}</Typo.b4>
+                  </Column>
+                </div>
+              ),
+            )}
+          </StyledSlider>
+        </div>
+      </WithCard>
+      {/* 카드슬라이드 없는 온보딩 */}
+      <WithoutCard index={currentSlide}>
+        <div className="main1">
+          <div className="main-img-container">
+            <Img src="/img/Onboarding/main1.svg" />
+          </div>
+        </div>
+        <div className="main2">
+          <div className="main2-container">
+            <div style={{ textAlign: 'center' }}>
+              <Typo.h3>
+                존재만으로 서로의 삶에 온기를 더하는 세대 공감 문답 커뮤니티,
+                쥬잇씨
+              </Typo.h3>
+            </div>
+            <div className="main-img-container">
+              <Img src="/img/Onboarding/main2.svg" />
+            </div>
+          </div>
+        </div>
+      </WithoutCard>
+      <TextContainer>
+        <StyledLink to={currentSlide === 4 ? '/signup' : ''}>
+          <StyledButton onClick={handleNextSlide}>
+            <Typo.h5>{currentSlide === 4 ? '시작' : '다음'}</Typo.h5>
+          </StyledButton>
+        </StyledLink>
+        <Typo.b3 color={Palette.Gray5}>바로 로그인하기</Typo.b3>
+      </TextContainer>
+    </Container>
+  );
+};
+
+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;
+  }
+`;