Merge pull request #37 from prgrms-web-devcourse-final-project/featur…

…e/QFEED-68

 [Feat] QFEED-68 취향 선택페이지 레이아웃 구현

src/pages/Select/index.tsx

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import { Logo } from '@/components/ui/Logo/Logo';
+import CategorySelectContainer from '@/components/ui/CategorySelectContainer/CategorySelectContainer';
+import theme from '@/styles/theme';
+
+const SelectPage = () => {
+  const navigate = useNavigate();
+  const handleCategorySelect = (categoryId: string) => {
+    //질문에 답했는데 확인 로직 추가
+    navigate(`/question/${categoryId}`);
+  };
+
+  return (
+    <Container>
+      <LogoWrapper>
+        <Logo width={62} height={53} />
+      </LogoWrapper>
+      <Title>당신의 취향을 골라주세요!</Title>
+      <CategoryContainer>
+        <CategorySelectContainer onCategorySelect={handleCategorySelect} />
+      </CategoryContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  padding: 2rem 1rem;
+  background-color: #FFF9F4;
+  min-height: calc(100vh - 5.25rem);
+  margin-bottom: 5.25rem;
+  overflow: auto;
+`;
+
+const LogoWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8.75rem;
+  margin-bottom: 2.358rem;
+`;
+
+const Title = styled.h1`
+  font-size: 1.125rem;
+  font-weight: bold;
+  color: ${theme.colors.primary};
+  text-align: center;
+  margin-bottom: 4.875rem;
+`;
+
+const CategoryContainer = styled.div`
+  width: 100%;
+`;
+
+export default SelectPage;

src/router/index.tsx

@@ -12,6 +12,7 @@ import { LandingPage } from '@/pages/Landing';
 import ChatRoom from '@/pages/ChatRoom';
 import QSpaceDetailPage from '@/pages/QSpaceDetail';
 import QuestionPage from '@/pages/Question';
+import SelectPage from '@/pages/Select';
 
 const router = createBrowserRouter([
   {
@@ -66,8 +67,12 @@ const router = createBrowserRouter([
         path: '/question/:category',
         element: <QuestionPage />,
       },
+      {
+        path: '/select',
+        element: <SelectPage />,
+      },
     ],
   },
 ]);
 
-export default router;
+export default router;