Merge branch 'main' of https://github.com/Hot-Spicy-Buffalo-Wing/chec…

…k-out-fe
Hot-Spicy-Buffalo-Wing · Jun 7, 2024 · 34592b8 · 34592b8
2 parents 3be48f2 + 6c8ae46
commit 34592b8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 64 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Check-Out</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -8,10 +8,9 @@ import {
   Modal,
   Select,
 } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import useSWR from 'swr';
 import { LookBook, createLookBook } from '../api/ai';
-import { updateUser } from '../api/auth';
 import area from '../data/area';
 import useUser from '../hooks/useUser';
 import Swal from 'sweetalert2';
@@ -35,10 +34,6 @@ const ageRangeOptions = [
 ];
 
 function MainPage() {
-  const [userInfo, setUserInfo] = useState(
-    { gender: '', ageRange: '' } || null
-  );
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [gender, setGender] = useState<string | null>('');
   const [ageRange, setAgeRange] = useState<string | null>('');
   const [error, setError] = useState('');
@@ -48,33 +43,12 @@ function MainPage() {
   const [district, setDistrict] = useState<string>('청담동');
   const [loading, setLoading] = useState(false);
 
-  const { user } = useUser();
+  const { user, updateUser } = useUser();
   const { data: lookBookData, mutate } = useSWR<{
     total: number;
     list: LookBook[];
   }>('/ai');
 
-  useEffect(() => {
-    const fetchUserInfo = async () => {
-      try {
-        if (!user) {
-          return null;
-        }
-
-        setUserInfo(user);
-
-        if (!user.gender || !user.ageRange) {
-          setIsModalOpen(true);
-        }
-      } catch (err) {
-        console.error('Failed to fetch user info:', err);
-        console.log(userInfo);
-      }
-    };
-
-    fetchUserInfo();
-  }, [user, userInfo]);
-
   const renderTodayLookBook = () => {
     if (!lookBookData) {
       return (
@@ -170,8 +144,6 @@ function MainPage() {
 
     try {
       await updateUser({ gender, ageRange });
-      setUserInfo({ gender, ageRange });
-      setIsModalOpen(false);
     } catch (err: any) {
       setError(
         'Failed to update user info: ' +
@@ -272,8 +244,8 @@ function MainPage() {
       </Grid>
 
       <Modal
-        opened={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
+        opened={user === undefined}
+        onClose={() => {}}
         title="당신에 대해 알고 싶어요!"
       >
         {error && <p style={{ color: 'red' }}>{error}</p>}

diff --git a/src/pages/PostListPage.tsx b/src/pages/PostListPage.tsx
@@ -9,38 +9,53 @@ const PostListPage = () => {
   const theme = useMantineTheme();
 
   return (
-    <Box style={{ padding: 32 }}>
-      <Box display="flex" style={{ flexDirection: 'column', gap: 8 }}>
-        <Table borderColor={theme.colors.cyan[4]}>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Id</Table.Th>
-              <Table.Th>Title</Table.Th>
-              <Table.Th>Author</Table.Th>
-              <Table.Th>Views</Table.Th>
-              <Table.Th>CreatedAt</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {data?.list.map((post) => (
-              <Table.Tr key={post.id}>
-                <Table.Td>{post.id}</Table.Td>
-                <Table.Td>
-                  <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
-                </Table.Td>
-                <Table.Td>{post.author.name}</Table.Td>
-                <Table.Td>{post.views}</Table.Td>
-                <Table.Td>{post.createdAt}</Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-        <Box>
-          <Link to="/posts/create">
-            <Button>Create Post</Button>
-          </Link>
-        </Box>
+    <Box
+      display="flex"
+      style={{
+        flexDirection: 'column',
+        gap: 8,
+        alignItems: 'center',
+        paddingTop: '30px',
+      }}
+    >
+      <Box>
+        <Link to="/posts/create">
+          <Button>Create Post</Button>
+        </Link>
       </Box>
+      <Table style={{ width: '80vw', marginTop: '20px' }}>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ textAlign: 'center' }}>Id</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Title</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Author</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>Views</Table.Th>
+            <Table.Th style={{ textAlign: 'center' }}>CreatedAt</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {data?.list.map((post) => (
+            <Table.Tr
+              key={post.id}
+              style={{ borderBottomWidth: '10px', borderColor: '#ffffff' }}
+            >
+              <Table.Td style={{ padding: '20px 0px', textAlign: 'center' }}>
+                {post.id}
+              </Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>
+                <Link to={`/posts/${post.id}`}>{post.contents.title}</Link>
+              </Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>
+                {post.author.name}
+              </Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>{post.views}</Table.Td>
+              <Table.Td style={{ textAlign: 'center' }}>
+                {post.createdAt.substring(0, 10)}
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
     </Box>
   );
 };