Merge pull request #202 from kakao-tech-campus-2nd-step3/Week10

Week10 7
kakao-tech-campus-2nd-step3 · Nov 12, 2024 · eabb1ce · eabb1ce
2 parents 43bac95 + 3446d4a
commit eabb1ce
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 5 deletions.
diff --git a/src/pages/RegisterPage/index.tsx b/src/pages/RegisterPage/index.tsx
@@ -0,0 +1,73 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Input,
+  Radio,
+  RadioGroup,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+
+export default function RegisterPage() {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      width="full"
+      gap={6}
+      p={4}
+    >
+      <Heading color="brown.600" size="xl" fontWeight="800">
+        회원가입
+      </Heading>
+      <Text color="gray.600" fontSize="md" textAlign="center">
+        가입을 통해 더 다양한 서비스를 만나보세요!
+      </Text>
+
+      <Box width="100%" maxWidth="400px">
+        <Text fontWeight="bold" mb={2}>
+          이름
+        </Text>
+        <Input placeholder="이름 입력" />
+      </Box>
+
+      <Box width="100%" maxWidth="400px">
+        <Text fontWeight="bold" mb={2}>
+          성별
+        </Text>
+        <RadioGroup>
+          <Stack direction="row" spacing={5}>
+            <Radio value="남" colorScheme="brown">
+              남
+            </Radio>
+            <Radio value="여" colorScheme="brown">
+              여
+            </Radio>
+          </Stack>
+        </RadioGroup>
+      </Box>
+
+      <Box width="100%" maxWidth="400px">
+        <Text fontWeight="bold" mb={2}>
+          나이
+        </Text>
+        <Input type="number" placeholder="나이 입력" />
+      </Box>
+
+      <Button
+        bg="brown.500"
+        color="secondary_background"
+        _hover={{ bg: 'brown.600' }}
+        size="lg"
+        width="100%"
+        maxWidth="400px"
+        mt={6}
+      >
+        가입하기
+      </Button>
+    </Flex>
+  )
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -20,6 +20,7 @@ import PointCancelModal from '@/pages/PointPage/PointCancelModal'
 import PointFailureModal from '@/pages/PointPage/PointFailureModal'
 import PointRedirectPage from '@/pages/PointRedirectPage'
 import ProfileQuestionPage from '@/pages/ProfileQuestionPage'
+import RegisterPage from '@/pages/RegisterPage'
 
 import { ProtectedRoute } from './ProtectedRoute'
 
@@ -35,11 +36,6 @@ const router = createBrowserRouter([
             path: '/',
             element: <MainPage />,
           },
-          {
-            path: '/mypage/:userId',
-            element: <MyPage />,
-          },
-
           {
             path: '/cookie-record',
             element: <CookieRecordPage />,
@@ -97,6 +93,10 @@ const router = createBrowserRouter([
         path: '/invite/:groupId',
         element: <InvitePage />,
       },
+      {
+        path: '/register',
+        element: <RegisterPage />,
+      },
     ],
   },
   {
@@ -110,6 +110,10 @@ const router = createBrowserRouter([
         path: '/login/redirect',
         element: <LoginRedirectPage />,
       },
+      {
+        path: '/mypage/:userId',
+        element: <MyPage />,
+      },
     ],
   },
   {