[FEAT] 홈 화면 API 연동

src/apis/programAPI.ts

@@ -0,0 +1,51 @@
+import { authClient, noAuthClient } from '@/apis/client';
+
+export const programAPI = {
+  // 메인 홈 자기이해 프로그램 조회
+  getUnderstanding: async (start: number, end: number, programForm: string) => {
+    const requestInformation = {
+      startPrice: start,
+      endPrice: end === 0 ? null : end,
+      form: programForm.replace('·', ''),
+    };
+
+    const response = await authClient.post(
+      '/api/programs/home/self-understanding',
+      requestInformation
+    );
+    return response.data;
+  },
+  // 메인 홈 브랜딩 프로그램 조회
+  getBranding: async (interest: string[], imageKeywords: string[]) => {
+    const requestInformation: { [key: string]: string[] } = {};
+
+    if (interest.length > 0) {
+      requestInformation.interest = interest;
+    }
+
+    if (imageKeywords.length > 0) {
+      requestInformation.imageKeywords = imageKeywords;
+    }
+
+    const response = await authClient.post('/api/programs/home/branding', requestInformation);
+    return response.data;
+  },
+  // 메인 홈 브랜딩 프로그램 조회 (비로그인)
+  getBrandingNonLogin: async (interest: string[], imageKeywords: string[]) => {
+    const requestInformation: { [key: string]: string[] } = {};
+
+    if (interest.length > 0) {
+      requestInformation.interest = interest;
+    }
+
+    if (imageKeywords.length > 0) {
+      requestInformation.imageKeywords = imageKeywords;
+    }
+
+    const response = await noAuthClient.post(
+      '/api/programs/branding/non-login',
+      requestInformation
+    );
+    return response.data;
+  },
+};

src/apis/userAPI.ts

@@ -12,4 +12,9 @@ export const userAPI = {
     const response = await noAuthClient.get(`/api/users/check-nickname/${nickname}`);
     return response.data;
   },
+  // 로그아웃
+  logout: async () => {
+    const response = await noAuthClient.post('/api/users/logout');
+    return response.data;
+  },
 };

src/components/DesignResultPage/ResultView.tsx

@@ -17,7 +17,7 @@ export const ResultView = ({ children, definition, ...props }: ResultViewProps)
             <span className="highlight">{userService.getUserNickname()}</span>님은 이런 브랜드가
             되고 싶군요!
           </div>
-          <div className="brand">“{definition}”</div>
+          <div className="brand">{definition}</div>
           {children}
         </StyledContent>
       </StyledInnerContainer>
@@ -47,7 +47,7 @@ const StyledContent = styled.div`
   align-items: center;
   gap: 24px;
 
-  width: 830px;
+  width: 930px;
 
   .title {
     ${({ theme }) => theme.font.desktop.title2};
@@ -59,8 +59,13 @@ const StyledContent = styled.div`
   }
 
   .brand {
-    ${({ theme }) => theme.font.desktop.h2};
-    color: ${({ theme }) => theme.color.primary600};
+    // 디자인 시스템에 없는 폰트 스타일
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 48px;
+
+    color: ${({ theme }) => theme.color.gray900};
     text-align: center;
     margin-bottom: 32px;
     word-break: keep-all;

src/components/HomePage/BrandingSection.tsx

@@ -32,7 +32,7 @@ export const BrandingSection = ({ isLoggedIn }: BrandingSectionProps) => {
               height="48px"
               style={{ marginTop: '24px' }}
               onClick={() => {
-                navigate('test/design');
+                navigate('/understand');
               }}
             >
               자기이해 바로가기

src/components/HomePage/CardCarousel.tsx

@@ -28,10 +28,13 @@ export const CardCarousel = ({ gap = '24px', children }: CardCarouselProps) => {
 };
 
 const SliderWrapper = styled.div<{ $gap: string }>`
+  width: 100%;
+
   .slick-list {
     padding: 5px;
 
     .slick-track {
+      width: 100% !important;
       display: flex;
       gap: ${({ $gap }) => $gap};
     }

src/components/HomePage/DiagnoseSection.tsx

@@ -9,9 +9,14 @@ import { SectionContainer } from '@/styles';
 
 // TODO: 추후 페이지 경로 수정
 const DIAGNOSE_CARD = [
-  { title: 'Discover 이해', subtitle: '과거의 나와 대화하기', img: DiscoverImg, path: '/' },
-  { title: 'Define 정의', subtitle: '성격/진단 테스트', img: DefineImg, path: '/' },
-  { title: 'Design 설계', subtitle: '차별점 도출하기', img: DesignImg, path: '/' },
+  {
+    title: 'Discover 이해',
+    subtitle: '과거의 나와 대화하기',
+    img: DiscoverImg,
+    path: '/test/discover',
+  },
+  { title: 'Define 정의', subtitle: '성격/진단 테스트', img: DefineImg, path: '/test/define' },
+  { title: 'Design 설계', subtitle: '차별점 도출하기', img: DesignImg, path: '/test/design' },
 ];
 
 export const DiagnoseSection = () => {

src/components/HomePage/NonMemberView.tsx

@@ -2,66 +2,23 @@ import { useState } from 'react';
 
 import { useTheme } from 'styled-components';
 
-import TestImage from '@/assets/test1.png';
 import { BrandingSection } from '@/components/HomePage/BrandingSection';
 import { DiagnoseSection } from '@/components/HomePage/DiagnoseSection';
 import { RecommendSectionTemplate } from '@/components/HomePage/RecommendSectionTemplate';
 import { Dropdown } from '@/components/common/Dropdown/Dropdown';
 import { IMAGE_KEYWORD_LIST, INTEREST_LIST } from '@/constants/onboarding';
-
-const Dummy = [
-  {
-    id: 1,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: true,
-    path: '',
-  },
-  {
-    id: 2,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: true,
-    path: '',
-  },
-  {
-    id: 3,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-  {
-    id: 4,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-  {
-    id: 5,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-];
+import { useGetBrandingProgramsNonLogin } from '@/hooks/useGetBrandingProgramsNonLogin';
 
 export const NonMemberView = () => {
   const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
   const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
   const theme = useTheme();
 
+  const { data: brandingPrograms } = useGetBrandingProgramsNonLogin(
+    selectedInterest,
+    selectedKeywords
+  );
+
   return (
     <>
       <BrandingSection />
@@ -70,7 +27,7 @@ export const NonMemberView = () => {
         title="나의 브랜딩을 위해"
         subTitle="셀피스는 나를 더 잘 알기위한 프로그램을 추천해요."
         backgroundColor={theme.color.white}
-        recommendItems={Dummy}
+        recommendItems={brandingPrograms}
         refreshHandler={() => {
           setSelectedInterest([]);
           setSelectedKeywords([]);

src/components/HomePage/NonTesterMemberView.tsx

@@ -2,81 +2,55 @@ import { useState } from 'react';
 
 import styled, { css, useTheme } from 'styled-components';
 
-import { ReactComponent as CheckIcon } from '@/assets/icons/check.svg';
-import TestImage from '@/assets/test1.png';
 import { BrandingSection } from '@/components/HomePage/BrandingSection';
 import { RecommendSectionTemplate } from '@/components/HomePage/RecommendSectionTemplate';
 import { Dropdown } from '@/components/common/Dropdown/Dropdown';
+import { SelectAmountModal } from '@/components/common/Modal/SelectAmountModal';
 import { IMAGE_KEYWORD_LIST, INTEREST_LIST } from '@/constants/onboarding';
+import { useGetBrandingProgramsNonLogin } from '@/hooks/useGetBrandingProgramsNonLogin';
+import { useGetUnderstandingPrograms } from '@/hooks/useGetUnderstandingProgram';
 
-const Dummy = [
-  {
-    id: 1,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: true,
-    path: '',
-  },
-  {
-    id: 2,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: true,
-    path: '',
-  },
-  {
-    id: 3,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-  {
-    id: 4,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-  {
-    id: 5,
-    img: TestImage,
-    title:
-      '감성있는 이탈리안 파스타 만들기 감성있는 이탈리안 파스타 만들기ㄴㅇㄹㄴㅇㄹㄴㄹㄴㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴㅇㄹㅇ',
-    keywords: ['소통하는', '감성있는', '평화로운'],
-    hot: false,
-    path: '',
-  },
-];
-
-// TODO: 금액 모달 구현
 export const NonTesterMemberView = () => {
+  const theme = useTheme();
   const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
   const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
-  const [selectedFree, setSelectedFree] = useState<boolean>(false);
-  /* const [showAmountModal, setShowAmountModal] = useState<boolean>(false); */
+  const [showAmountModal, setShowAmountModal] = useState<boolean>(false);
+  const [selectedProgramForm, setSelectedProgramForm] = useState('온·오프라인');
   const [selectedAmount, setSelectedAmount] = useState<{ min: number; max: number }>({
     min: 0,
     max: 0,
   });
-  const theme = useTheme();
+
+  const { data: brandingPrograms } = useGetBrandingProgramsNonLogin(
+    selectedInterest,
+    selectedKeywords
+  );
+  const { data: understandingPrograms } = useGetUnderstandingPrograms(
+    selectedAmount.min,
+    selectedAmount.max,
+    selectedProgramForm
+  );
 
   return (
     <>
+      {showAmountModal && (
+        <SelectAmountModal
+          selectedAmount={selectedAmount}
+          handleCancel={() => {
+            setShowAmountModal(false);
+          }}
+          handleConfirm={(newSelected) => {
+            setSelectedAmount(newSelected);
+            setShowAmountModal(false);
+          }}
+        />
+      )}
       <BrandingSection isLoggedIn />
       <RecommendSectionTemplate
         title="나를 더 잘 이해하기 위해"
         subTitle="나를 브랜딩할 수 있는 경험을 추천해드릴게요."
         backgroundColor={theme.color.primary50}
-        recommendItems={Dummy}
+        recommendItems={brandingPrograms}
         refreshHandler={() => {
           setSelectedInterest([]);
           setSelectedKeywords([]);
@@ -121,25 +95,16 @@ export const NonTesterMemberView = () => {
         title="퍼스널브랜딩을 더 잘하고싶다면?"
         subTitle="셀피스는 나를 더 잘 알기위한 프로그램을 추천해요."
         backgroundColor={theme.color.white}
-        recommendItems={Dummy}
+        recommendItems={understandingPrograms}
         refreshHandler={() => {
-          setSelectedFree(false);
+          setSelectedProgramForm('온·오프라인');
           setSelectedAmount({ min: 0, max: 0 });
         }}
       >
         <>
-          <StyledFilterButton
-            onClick={() => {
-              setSelectedFree((prev) => !prev);
-            }}
-            $active={selectedFree}
-          >
-            <CheckIcon />
-            <span>무료</span>
-          </StyledFilterButton>
           <StyledFilterAmount
             onClick={() => {
-              //setShowAmountModal((prev) => !prev);
+              setShowAmountModal((prev) => !prev);
             }}
           >
             <span>금액</span>
@@ -150,6 +115,15 @@ export const NonTesterMemberView = () => {
               <span className="unit">원</span>
             </div>
           </StyledFilterAmount>
+          <Dropdown
+            placeholder=""
+            contents={['온·오프라인', '온라인', '오프라인']}
+            selected={selectedProgramForm}
+            clickContentHandler={(newSelected: string) => {
+              setSelectedProgramForm(newSelected);
+            }}
+            width="312px"
+          />
         </>
       </RecommendSectionTemplate>
     </>
@@ -191,6 +165,7 @@ const StyledFilterAmount = styled(StyledFilterButton)`
 
   div {
     display: flex;
+    align-items: center;
     gap: 4px;
 
     .amount {