From 0cefb970f73443aa11936ee34b6e8c5fa1ab2937 Mon Sep 17 00:00:00 2001
From: BlueHorn07 <bluehornblues@gmail.com>
Date: Sun, 2 Feb 2025 00:42:59 +0900
Subject: [PATCH] SSR doesn't process authenticated API

---
 pages/user/[uuid].jsx | 273 ++++++++++++++++++++++--------------------
 1 file changed, 143 insertions(+), 130 deletions(-)

diff --git a/pages/user/[uuid].jsx b/pages/user/[uuid].jsx
index 7ed5ea4..5cc100b 100644
--- a/pages/user/[uuid].jsx
+++ b/pages/user/[uuid].jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button, Form, Tab } from 'semantic-ui-react';
 
 import LayoutWithAuth from '@/components/layout/layout.auth.with';
@@ -25,15 +25,46 @@ const userStatusOptions = [
   { key: 'BANNED', text: 'BANNED', value: 'BANNED' },
 ];
 
-const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
+const UserDetailPage = () => {
+  const router = useRouter();
+  const { uuid } = router.query;
+
+  const [isLoading, setIsLoading] = useState(true);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 
-  const [email, setEmail] = useState(user.email);
-  const [name, setName] = useState(user.name);
-  const [userType, setUserType] = useState(user.userType);
-  const [userStatus, setUserStatus] = useState(user.userStatus);
+  const [user, setUser] = useState({});
+  const [placeReservations, setPlaceReservations] = useState([]);
+  const [equipReservations, setEquipReservations] = useState([]);
 
-  const router = useRouter();
+  const [email, setEmail] = useState();
+  const [name, setName] = useState();
+  const [userType, setUserType] = useState();
+  const [userStatus, setUserStatus] = useState();
+
+
+  useEffect(() => {
+    setIsLoading(true);
+    const fetchUser = PoPoAxios.get(`user/admin/${uuid}`, { withCredentials: true });
+    const fetchPlaceReservations = PoPoAxios.get(`reservation-place/user/admin/${uuid}`, { withCredentials: true });
+    const fetchEquipReservations = PoPoAxios.get(`reservation-equip/user/admin/${uuid}`, { withCredentials: true });
+
+    Promise.all([fetchUser, fetchPlaceReservations, fetchEquipReservations])
+      .then(([userRes, placeRes, equipRes]) => {
+        setUser(userRes.data);
+        setEmail(userRes.data.email);
+        setName(userRes.data.name);
+        setUserType(userRes.data.userType);
+        setUserStatus(userRes.data.userStatus);
+
+        setPlaceReservations(placeRes.data);
+        setEquipReservations(equipRes.data);
+
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        console.log("API 요청 중 오류 발생:", err);
+      });
+  }, [uuid])
 
   const handleSubmit = async () => {
     try {
@@ -54,8 +85,6 @@ const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
     }
   };
 
-  console.log(user);
-
   return (
     <LayoutWithAuth>
       <h2>유저 세부 정보</h2>
@@ -64,130 +93,114 @@ const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
         <Button onClick={() => window.history.back()}>뒤로가기</Button>
       </div>
 
-      <Tab
-        panes={[
-          {
-            menuItem: '유저 정보',
-            render: () => (
-              <Tab.Pane>
-                <h3>유저 정보</h3>
-
-                <Form>
-                  <Form.Field>
-                    <label>UUID</label>
-                    <p>{user.uuid}</p>
-                  </Form.Field>
-                  <Form.Input
-                    required
-                    label={'email'}
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                  <Form.Input
-                    required
-                    label={'이름'}
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                  />
-                  <Form.Select
-                    required
-                    label={'유저 타입'}
-                    placeholder="유저 타입을 선택하세요."
-                    value={userType}
-                    options={userTypeOptions}
-                    onChange={(e, { value }) => setUserType(value)}
-                  />
-                  <Form.Select
-                    required
-                    label={'유저 상태'}
-                    placeholder="유저 상태를 선택하세요."
-                    value={userStatus}
-                    options={userStatusOptions}
-                    onChange={(e, { value }) => setUserStatus(value)}
-                  />
-                  <Form.Group style={{ display: 'flex' }}>
-                    <Form.Field style={{ flex: 1 }}>
-                      <label>생성일</label>
-                      <p>{user.createdAt}</p>
-                    </Form.Field>
-                    <Form.Field style={{ flex: 1 }}>
-                      <label>마지막 로그인</label>
-                      <p>{user.lastLoginAt}</p>
-                    </Form.Field>
-                  </Form.Group>
-                  <Form.Group>
-                    <Form.Button type="submit" onClick={handleSubmit}>
-                      수정
-                    </Form.Button>
-                    <DeleteConfirmModal
-                      open={deleteModalOpen}
-                      target={`${name}(${email})`}
-                      deleteURI={`user/${user.uuid}`}
-                      trigger={
-                        <Button
-                          negative
-                          onClick={() => setDeleteModalOpen(true)}
-                        >
-                          삭제
-                        </Button>
-                      }
+      {
+        isLoading ? (
+          <div>유저 정보 로딩 중...</div>
+        ) : (
+          <Tab
+            panes={[
+              {
+                menuItem: '유저 정보',
+                render: () => (
+                  <Tab.Pane>
+                    <h3>유저 정보</h3>
+
+                    <Form>
+                      <Form.Field>
+                        <label>UUID</label>
+                        <p>{user.uuid}</p>
+                      </Form.Field>
+                      <Form.Input
+                        required
+                        label={'email'}
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                      />
+                      <Form.Input
+                        required
+                        label={'이름'}
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                      />
+                      <Form.Select
+                        required
+                        label={'유저 타입'}
+                        placeholder="유저 타입을 선택하세요."
+                        value={userType}
+                        options={userTypeOptions}
+                        onChange={(e, { value }) => setUserType(value)}
+                      />
+                      <Form.Select
+                        required
+                        label={'유저 상태'}
+                        placeholder="유저 상태를 선택하세요."
+                        value={userStatus}
+                        options={userStatusOptions}
+                        onChange={(e, { value }) => setUserStatus(value)}
+                      />
+                      <Form.Group style={{ display: 'flex' }}>
+                        <Form.Field style={{ flex: 1 }}>
+                          <label>생성일</label>
+                          <p>{user.createdAt}</p>
+                        </Form.Field>
+                        <Form.Field style={{ flex: 1 }}>
+                          <label>마지막 로그인</label>
+                          <p>{user.lastLoginAt}</p>
+                        </Form.Field>
+                      </Form.Group>
+                      <Form.Group>
+                        <Form.Button type="submit" onClick={handleSubmit}>
+                          수정
+                        </Form.Button>
+                        <DeleteConfirmModal
+                          open={deleteModalOpen}
+                          target={`${name}(${email})`}
+                          deleteURI={`user/${user.uuid}`}
+                          trigger={
+                            <Button
+                              negative
+                              onClick={() => setDeleteModalOpen(true)}
+                            >
+                              삭제
+                            </Button>
+                          }
+                        />
+                      </Form.Group>
+                    </Form>
+                  </Tab.Pane>
+                ),
+              },
+              {
+                menuItem: `장소 예약 목록 (${placeReservations.length}개)`,
+                render: () => (
+                  <Tab.Pane>
+                    <h3>장소 예약 목록 ({placeReservations.length}개)</h3>
+                    <PlaceReservationTable2
+                      reservations={placeReservations}
+                      startIdx={1}
+                    />
+                  </Tab.Pane>
+                ),
+              },
+              {
+                menuItem: `장비 예약 목록 (${equipReservations.length}개)`,
+                render: () => (
+                  <Tab.Pane>
+                    <h3>장비 예약 목록 ({equipReservations.length}개)</h3>
+                    <EquipmentReservationTable2
+                      reservations={equipReservations}
+                      startIdx={1}
                     />
-                  </Form.Group>
-                </Form>
-              </Tab.Pane>
-            ),
-          },
-          {
-            menuItem: `장소 예약 목록 (${placeReservations.length}개)`,
-            render: () => (
-              <Tab.Pane>
-                <h3>장소 예약 목록 ({placeReservations.length}개)</h3>
-                <PlaceReservationTable2
-                  reservations={placeReservations}
-                  startIdx={1}
-                />
-              </Tab.Pane>
-            ),
-          },
-          {
-            menuItem: `장비 예약 목록 (${equipReservations.length}개)`,
-            render: () => (
-              <Tab.Pane>
-                <h3>장비 예약 목록 ({equipReservations.length}개)</h3>
-                <EquipmentReservationTable2
-                  reservations={equipReservations}
-                  startIdx={1}
-                />
-              </Tab.Pane>
-            ),
-          },
-        ]}
-      />
+                  </Tab.Pane>
+                ),
+              },
+            ]}
+          />
+        )
+      }
+
     </LayoutWithAuth>
   );
 };
 
 export default UserDetailPage;
-
-export async function getServerSideProps(ctx) {
-  const { uuid } = ctx['params'];
-  const res1 = await PoPoAxios.get(`user/admin/${uuid}`, {
-    withCredentials: true,
-  });
-
-  const res2 = await PoPoAxios.get(`reservation-place/user/admin/${uuid}`, {
-    withCredentials: true,
-  });
-
-  const res3 = await PoPoAxios.get(`reservation-equip/user/admin/${uuid}`, {
-    withCredentials: true,
-  });
-
-  return {
-    props: {
-      user: res1.data,
-      placeReservations: res2.data,
-      equipReservations: res3.data,
-    },
-  };
-}