Merge pull request #15 from TEAM-CLIP/14-qa-fix

feat: 1차 QA 수정사항 반영
TEAM-CLIP · Aug 26, 2024 · 4c3cbb4 · 4c3cbb4
2 parents 4d711d6 + 0358d5e
commit 4c3cbb4
Show file tree

Hide file tree

Showing 9 changed files with 376 additions and 196 deletions.
diff --git a/package.json b/package.json
@@ -15,9 +15,11 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "react-range": "^1.10.0"
+    "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0"
   },
   "devDependencies": {
+    "@iconify/react": "^5.0.2",
     "@types/axios": "^0.14.0",
     "@types/node": "^20",
     "@types/react": "^18",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -24,6 +24,12 @@
   .caption {
     @apply font-medium text-[12px] leading-[16px] tracking-[0px];
   }
+  .tag-btn {
+    @apply rounded-full bg-gray-100 px-3 py-2 caption text-gray-500 hover:text-gray-900 focus:outline-none;
+  }
+  .tag-btn-selected {
+    @apply rounded-full bg-gray-800 px-3 py-2 caption text-white hover:text-gray-400 focus:outline-none;
+  }
   .btn {
     @apply h-[3rem] px-[1.5rem] py-[0.75rem] rounded-lg transition-colors duration-200 w-full text-center font-medium;
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import localFont from 'next/font/local';
 import ClipContainer from '@/components/ClipContainer';
 import { Analytics } from '@vercel/analytics/react';
+import RecoilContextProvider from '@/context/recoil-context';
 
 const pretendard = localFont({
   src: '../fonts/PretendardVariable.woff2',
@@ -24,10 +25,12 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body className={`${pretendard.className} bg-white overflow-x-hidden`}>
-        <ClipContainer>
-          <main className="flex-grow overflow-y-auto">{children}</main>
-        </ClipContainer>
-        <Analytics />
+        <RecoilContextProvider>
+          <ClipContainer>
+            <main className="flex-grow overflow-y-auto">{children}</main>
+            <Analytics />
+          </ClipContainer>
+        </RecoilContextProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,32 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import BackgroundImage from '@/data/unsplash.png';
+import {
+  finalPhotographerIdsState,
+  photographersSortByMoodState,
+  previouslySelectedState,
+} from '@/context/recoil-context';
+import { useRecoilState } from 'recoil';
 
 const Home = () => {
+  const [photographersSortedByMood, setPhotographersSortedByMood] =
+    useRecoilState(photographersSortByMoodState);
+  const [previouslySelected, setPreviouslySelected] = useRecoilState(
+    previouslySelectedState,
+  );
+  const [finalPhotographerIds, setFinalPhotographerIds] = useRecoilState(
+    finalPhotographerIdsState,
+  );
+
+  const onclick = () => {
+    // recoil 전역변수값 초기화
+    setPhotographersSortedByMood([]);
+    setPreviouslySelected([]);
+    setFinalPhotographerIds([]);
+  };
+
   return (
     <div className="relative flex flex-col w-full h-screen p-[1rem]">
       <div className="absolute inset-0 z-0">
@@ -42,7 +66,11 @@ const Home = () => {
             </p>
           </div>
 
-          <Link href="/select-type" className="btn-default body-3">
+          <Link
+            onClick={onclick}
+            href="/select-type"
+            className="btn-default body-3"
+          >
             다음으로
           </Link>
         </div>