Feat: 퍼블리싱 완료

WePlanPlans · Jan 3, 2024 · 1ba87bc · 1ba87bc
1 parent 78a02df
commit 1ba87bc
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,7 +16,7 @@ const App = () => {
         <BrowserRouter>
           <ThemeProvider theme={theme}>
             <GlobalStyle />
-            <MainRouter />
+            <MainRouter  />
           </ThemeProvider>
         </BrowserRouter>
       </RecoilRoot>

diff --git a/src/components/Preference.tsx b/src/components/Preference.tsx
@@ -1,9 +1,92 @@
 import { ButtonPrimary } from './common/button/Button';
 
+const sections = [
+  {
+    title: '계획성',
+    options: [
+      { text: '철저하게', active: true },
+      { text: '여유롭게', active: false },
+    ],
+  },
+  {
+    title: '활동성',
+    options: [
+      { text: '아침형', active: true },
+      { text: '저녁형', active: false },
+    ],
+  },
+  {
+    title: '숙소',
+    options: [
+      { text: '분위기', active: true },
+      { text: '가격', active: false },
+    ],
+  },
+  {
+    title: '음식',
+    options: [
+      { text: '노포 맛집', active: true },
+      { text: '인테리어', active: false },
+    ],
+  },
+  {
+    title: '관광지',
+    options: [
+      { text: '액티비티', active: true },
+      { text: '휴양', active: false },
+    ],
+  },
+];
+
+const Option: React.FC<{ text: string; active: boolean }> = ({
+  text,
+  active,
+}) => (
+  <div
+    className={` relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border border-solid ${
+      active ? 'border-[#29ddf6]' : 'border-[#d7d7d7]'
+    } px-7 py-2`}>
+    <p
+      className={`flex-shrink-0 flex-grow-0 text-left text-sm font-semibold ${
+        active ? 'text-[#29ddf6]' : 'text-[#888]'
+      }`}>
+      {text}
+    </p>
+  </div>
+);
+
 const Preference = () => {
   return (
-    <div>
-      <h1>Preference Component</h1>
+    <div className="flex h-[95vh] flex-col">
+      <div className="relative flex flex-col items-start justify-start gap-3 p-4">
+        <p className="text-center text-2xl font-bold text-black">
+          어떤 여행을 좋아하세요?
+        </p>
+        <p className="text-left text-sm text-[#888]">여행 취향을 골라주세요.</p>
+      </div>
+
+      <div className="flex-grow overflow-auto">
+        {sections.map((section) => (
+          <div
+            key={section.title}
+            className="flex flex-col items-start justify-start gap-4 px-4">
+            <div className="relative flex h-6 w-[335px] items-center justify-start gap-2 py-2">
+              <p className="text-left text-base font-bold text-black">
+                {section.title}
+              </p>
+            </div>
+            <div className="flex items-start justify-between gap-2">
+              {section.options.map((option) => (
+                <Option
+                  key={option.text}
+                  text={option.text}
+                  active={option.active}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
       <ButtonPrimary onClick={() => {}}>완료</ButtonPrimary>
     </div>
   );

diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
@@ -9,7 +9,7 @@ export const ButtonWhite: React.FC<ButtonProps> = ({ onClick, children }) => {
   return (
     <button
       onClick={onClick}
-      className="btn-base border-gray3 rounded-lg border border-solid text-sm">
+      className="btn-base rounded-lg border border-solid border-gray3 text-sm">
       {children}
     </button>
   );
@@ -19,7 +19,7 @@ export const ButtonPrimary: React.FC<ButtonProps> = ({ onClick, children }) => {
   return (
     <button
       onClick={onClick}
-      className="btn-base disabled:bg-gray3 bg-primary text-lg font-bold text-white disabled:cursor-not-allowed">
+      className="btn-base bg-main1 text-lg font-bold text-white disabled:cursor-not-allowed disabled:bg-gray3">
       {children}
     </button>
   );

diff --git a/src/router/mainRouter.tsx b/src/router/mainRouter.tsx
@@ -5,15 +5,24 @@ import Main from '@pages/main/main.page';
 import Detail from '@pages/detail/detail.page';
 import { Signup } from '@pages/index';
 import PostingReview from '@pages/postingReview/postingReview.page';
+import { useLocation } from 'react-router-dom';
 
 export function MainLayout() {
+  const location = useLocation();
+
+  const hideNavPaths = ['/'];
+
+  const showNav = !hideNavPaths.some((path) =>
+    location.pathname.includes(path),
+  );
+
   return (
     <div className="mx-auto my-0 flex min-h-[100vh] max-w-[412px] flex-col bg-white ">
       <Header />
-      <div className="mb-auto px-[20px] py-0">
+      <div className="px-[20px] py-0">
         <Outlet />
       </div>
-      <Nav />
+      {showNav && <Nav />}
     </div>
   );
 }