Merge pull request #36 from KUSITMS-29th-TEAM-D/feat/#26/onboarding

[FEAT] 온보딩 화면 구현

src/apis/client.ts

@@ -14,14 +14,15 @@ export const authClient: AxiosInstance = axios.create({
 });
 
 authClient.interceptors.request.use((config) => {
-  if (!authClient.defaults.headers.common['Authorization']) {
-    if (userService.getUser() === '') {
-      // register token이 만료된 상황
-      userService.removeUser();
-      window.location.href = '/auth';
+  if (!config.headers.common || !config.headers.common['Authorization']) {
+    if (userService.getUser().nickname === '') {
+      // register token이 없는 상황 (새로고침)
+      authService.onSetRegisterToken();
+      config.headers['Authorization'] = authClient.defaults.headers.common['Authorization'];
     } else if (userService.getUser()) {
       // access token이 만료된 상황
       authService.onRefreshToken();
+      config.headers['Authorization'] = authClient.defaults.headers.common['Authorization'];
     }
   }
 

src/apis/userAPI.ts

@@ -1,4 +1,4 @@
-import { authClient } from '@/apis/client';
+import { authClient, noAuthClient } from '@/apis/client';
 import { RegisterRequest } from '@/types/userAPI.type';
 
 export const userAPI = {
@@ -7,4 +7,9 @@ export const userAPI = {
     const response = await authClient.post('/api/users/register', userInfo);
     return response.data;
   },
+  // 닉네임 중복 체크
+  duplicateCheck: async (nickname: string) => {
+    const response = await noAuthClient.get(`/api/users/check-nickname/${nickname}`);
+    return response.data;
+  },
 };

src/components/DefineResultPage/CardSection.tsx

@@ -155,6 +155,7 @@ const StyledImageContainer = styled.div<{ $desktop: boolean }>`
   overflow: hidden;
 
   position: relative;
+  cursor: pointer;
 
   img {
     width: 100%;

src/components/DefineResultPage/DescriptionSection.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import Scrollbar from '@/components/Scrollbar';
-import { Chip } from '@/components/common/Chip/Chip';
+import { PlainChip } from '@/components/common/Chip/PlainChip';
 import { DefineResult } from '@/types/test.type';
 
 interface DescriptionSectionProps {
@@ -29,9 +29,9 @@ export const DescriptionSection = ({ result }: DescriptionSectionProps) => {
           <div className="title">가치</div>
           <div className="chips">
             {result.values.map((value) => (
-              <Chip key={value} primary>
+              <PlainChip key={value} primary>
                 {value}
-              </Chip>
+              </PlainChip>
             ))}
           </div>
         </StyledDescriptionSection>
@@ -47,19 +47,19 @@ export const DescriptionSection = ({ result }: DescriptionSectionProps) => {
           <div className="title">나의 유형 키워드</div>
           <div className="chips">
             {result.types.map((type) => (
-              <Chip key={type} primary>
+              <PlainChip key={type} primary>
                 {type}
-              </Chip>
+              </PlainChip>
             ))}
           </div>
         </StyledDescriptionSection>
         <StyledDescriptionSection>
           <div className="title">내가 선택한 유형 키워드</div>
           <div className="chips">
             {result.define_persona_keywords.map((keyword) => (
-              <Chip key={keyword} primary>
+              <PlainChip key={keyword} primary>
                 {keyword}
-              </Chip>
+              </PlainChip>
             ))}
           </div>
         </StyledDescriptionSection>

src/components/DefineTest/DefineButtonView.tsx

@@ -4,10 +4,11 @@ import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 
-import { authClient } from '@/apis/client';
+import { authClient, noAuthClient } from '@/apis/client';
 import { PlainButton } from '@/components/common/Button/PlainButton';
 import { defineState } from '@/recoil/defineState';
 import { loadingState } from '@/recoil/loadingState';
+import { userService } from '@/services/UserService';
 
 interface Props {
   warning?: boolean;
@@ -157,6 +158,7 @@ export const DefineButtonView3 = ({ warning, warningMessage }: Props) => {
   };
 
   const handleButton2Click = () => {
+    let client;
     const selectedChips1 = JSON.parse(sessionStorage.getItem('selectedChips1') || '[]');
     const selectedChips2 = JSON.parse(sessionStorage.getItem('selectedChips2') || '[]');
     const selectedChips3 = JSON.parse(sessionStorage.getItem('selectedChips3') || '[]');
@@ -175,7 +177,13 @@ export const DefineButtonView3 = ({ warning, warningMessage }: Props) => {
       },
     });
 
-    authClient
+    if (userService.getUserState() === 'NON_MEMBER') {
+      client = noAuthClient;
+    } else {
+      client = authClient;
+    }
+
+    client
       .post('/api/personas/define', requestData)
       .then((response) => {
         const { code, message } = response.data;

src/components/DefineTest/DefineChip.tsx

@@ -7,7 +7,7 @@ import {
   DefineButtonView2,
   DefineButtonView3,
 } from '@/components/DefineTest/DefineButtonView';
-import TestChip from '@/components/common/Chip/TestChip';
+import { KeywordChip } from '@/components/common/Chip/KeywordChip';
 import { CHIP_DATA1, CHIP_DATA2, CHIP_DATA3 } from '@/constants/defineChip';
 
 export const DefineChips1 = () => {
@@ -46,12 +46,13 @@ export const DefineChips1 = () => {
     <StyledContainer>
       <KeywordContainer>
         {CHIP_DATA1.map((text, index) => (
-          <TestChip
+          <KeywordChip
             key={index}
-            chipText={text}
-            state={chipStates[index]}
-            onToggle={() => handleToggle(index)}
-          />
+            selected={chipStates[index] !== 1}
+            toggleHandler={() => handleToggle(index)}
+          >
+            {text}
+          </KeywordChip>
         ))}
       </KeywordContainer>
       <DefineButtonView1 warning={warning} warningMessage={warningMessage} />
@@ -95,12 +96,13 @@ export const DefineChips2 = () => {
     <StyledContainer>
       <KeywordContainer>
         {CHIP_DATA2.map((text, index) => (
-          <TestChip
+          <KeywordChip
             key={index}
-            chipText={text}
-            state={chipStates[index]}
-            onToggle={() => handleToggle(index)}
-          />
+            selected={chipStates[index] !== 1}
+            toggleHandler={() => handleToggle(index)}
+          >
+            {text}
+          </KeywordChip>
         ))}
       </KeywordContainer>
       <DefineButtonView2 warning={warning} warningMessage={warningMessage} />
@@ -145,12 +147,13 @@ export const DefineChips3 = () => {
     <StyledContainer>
       <KeywordContainer>
         {CHIP_DATA3.map((text, index) => (
-          <TestChip
+          <KeywordChip
             key={index}
-            chipText={text}
-            state={chipStates[index]}
-            onToggle={() => handleToggle(index)}
-          />
+            selected={chipStates[index] !== 1}
+            toggleHandler={() => handleToggle(index)}
+          >
+            {text}
+          </KeywordChip>
         ))}
       </KeywordContainer>
       <DefineButtonView3 warning={warning} warningMessage={warningMessage} />

src/components/DesignTest/DesignButtonView.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { PlainButton } from '../common/Button/PlainButton';
+import { PlainButton } from '@/components/common/Button/PlainButton';
 
 const Container = styled.div`
   width: 100%;

src/components/DesignTest/DesignChip.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import styled from 'styled-components';
 
-import TestChip from '@/components/common/Chip/TestChip';
+import { KeywordChip } from '@/components/common/Chip/KeywordChip';
 
 const chipData1 = [
   '남성적임',
@@ -64,12 +64,13 @@ export const DesignChips1 = () => {
   return (
     <KeywordContainer>
       {chipData1.map((text, index) => (
-        <TestChip
+        <KeywordChip
           key={index}
-          chipText={text}
-          state={chipStates[index]}
-          onToggle={() => handleToggle(index)}
-        />
+          selected={chipStates[index] !== 1}
+          toggleHandler={() => handleToggle(index)}
+        >
+          {text}
+        </KeywordChip>
       ))}
       {warning && <div>키워드를 5개만 선택해 주세요!</div>}
     </KeywordContainer>

src/components/DesignTest/DesignTextView.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import ProgressBar from '../common/ProgressBar';
+import ProgressBar from '@/components/common/ProgressBar';
 
 const TextContainer = styled.div`
   width: 100%;

src/components/HomePage/PieceSection.tsx

@@ -1,7 +1,7 @@
 import styled, { keyframes } from 'styled-components';
 
 import { ReactComponent as ArrowIcon } from '@/assets/icons/arrowDown.svg';
-import { Chip } from '@/components/common/Chip/Chip';
+import { PlainChip } from '@/components/common/Chip/PlainChip';
 import { CARD_IMAGE } from '@/constants/card';
 import { SectionContainer } from '@/styles';
 import { UserInformation } from '@/types/user.type';
@@ -35,9 +35,9 @@ export const PieceSection = ({ userInformation }: PieceSectionProps) => {
         <StyledContents>
           <div className="chips">
             {userInformation.chips.map((chip) => (
-              <Chip key={chip.content} primary>
+              <PlainChip key={chip.content} primary>
                 {chip.content}
-              </Chip>
+              </PlainChip>
             ))}
           </div>
           <div>
@@ -224,6 +224,7 @@ const StyledContents = styled.div`
   .chips {
     display: flex;
     gap: 16px;
+    flex-wrap: wrap;
 
     padding-bottom: 38px;
   }

src/components/HomePage/RecommendSectionTemplate.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { PreviewCard } from '@/components/common/Card/PreviewCard';
 import { Carousel } from '@/components/common/Carousel';
-import { Dropdown } from '@/components/common/Dropdown';
+/* import { Dropdown } from '@/components/common/Dropdown/Dropdown'; */
 import { SectionContainer } from '@/styles';
 import { FilterItems, RecommendItems } from '@/types/recommend.type';
 
@@ -19,7 +19,6 @@ export const RecommendSectionTemplate = ({
   subTitle,
   backgroundColor,
   recommendItems,
-  filters,
 }: RecommendSectionTemplateProps) => {
   return (
     <StyledContainer $backgroundColor={backgroundColor}>
@@ -28,7 +27,7 @@ export const RecommendSectionTemplate = ({
           <div className="user-info">{title}</div>
           <div className="intro">{subTitle}</div>
         </StyledTitle>
-        <StyledFilterContainer>
+        {/* <StyledFilterContainer>
           <StyledDropdownContainer>
             {filters.map((filter) => (
               <Dropdown
@@ -49,7 +48,7 @@ export const RecommendSectionTemplate = ({
           >
             새로고침
           </button>
-        </StyledFilterContainer>
+        </StyledFilterContainer> */}
         <Carousel>
           {recommendItems.map((item) => (
             <PreviewCard
@@ -93,7 +92,7 @@ const StyledTitle = styled.div`
   }
 `;
 
-const StyledFilterContainer = styled.div`
+/* const StyledFilterContainer = styled.div`
   display: flex;
   justify-content: space-between;
 
@@ -108,4 +107,4 @@ const StyledFilterContainer = styled.div`
 const StyledDropdownContainer = styled.div`
   display: flex;
   gap: 12px;
-`;
+`; */

src/components/LoginPage/LoginDesktopPage.tsx

@@ -34,9 +34,7 @@ export const ViewContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
   height: 100vh;
-  min-height: 720px;
   background-image: url(${backgroundImg});
   background-size: cover;
 `;
@@ -90,6 +88,7 @@ export const IconContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
 
   .icon {
     transform: rotate(29.626deg);

src/components/OnboardingPage/ProfileSetup.tsx

@@ -0,0 +1,23 @@
+import { SetupBasicInfo } from '@/components/OnboardingPage/SetupBasicInfo';
+import { SetupBranding } from '@/components/OnboardingPage/SetupBranding';
+import { FunnelProps, StepProps } from '@/hooks/useFunnel';
+
+export interface ProfileSetupProps {
+  steps: string[];
+  nextClickHandler: (nextStep: string) => void;
+  Funnel: React.ComponentType<FunnelProps>;
+  Step: React.ComponentType<StepProps>;
+}
+
+export const ProfileSetup = ({ steps, nextClickHandler, Funnel, Step }: ProfileSetupProps) => {
+  return (
+    <Funnel>
+      <Step name="기본 정보 등록">
+        <SetupBasicInfo onNext={() => nextClickHandler(steps[1])} />
+      </Step>
+      <Step name="브랜딩 정보 등록">
+        <SetupBranding />
+      </Step>
+    </Funnel>
+  );
+};