Skip to content

Commit 0cefb97

Browse files
BlueHorn07BlueHorn07
committed
SSR doesn't process authenticated API
1 parent 999bf83 commit 0cefb97

File tree

1 file changed

+143
-130
lines changed

1 file changed

+143
-130
lines changed

‎pages/user/[uuid].jsx

+143-130
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState } from 'react';
1+
import { useEffect, useState } from 'react';
22
import { Button, Form, Tab } from 'semantic-ui-react';
33

44
import LayoutWithAuth from '@/components/layout/layout.auth.with';
@@ -25,15 +25,46 @@ const userStatusOptions = [
2525
{ key: 'BANNED', text: 'BANNED', value: 'BANNED' },
2626
];
2727

28-
const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
28+
const UserDetailPage = () => {
29+
const router = useRouter();
30+
const { uuid } = router.query;
31+
32+
const [isLoading, setIsLoading] = useState(true);
2933
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
3034

31-
const [email, setEmail] = useState(user.email);
32-
const [name, setName] = useState(user.name);
33-
const [userType, setUserType] = useState(user.userType);
34-
const [userStatus, setUserStatus] = useState(user.userStatus);
35+
const [user, setUser] = useState({});
36+
const [placeReservations, setPlaceReservations] = useState([]);
37+
const [equipReservations, setEquipReservations] = useState([]);
3538

36-
const router = useRouter();
39+
const [email, setEmail] = useState();
40+
const [name, setName] = useState();
41+
const [userType, setUserType] = useState();
42+
const [userStatus, setUserStatus] = useState();
43+
44+
45+
useEffect(() => {
46+
setIsLoading(true);
47+
const fetchUser = PoPoAxios.get(`user/admin/${uuid}`, { withCredentials: true });
48+
const fetchPlaceReservations = PoPoAxios.get(`reservation-place/user/admin/${uuid}`, { withCredentials: true });
49+
const fetchEquipReservations = PoPoAxios.get(`reservation-equip/user/admin/${uuid}`, { withCredentials: true });
50+
51+
Promise.all([fetchUser, fetchPlaceReservations, fetchEquipReservations])
52+
.then(([userRes, placeRes, equipRes]) => {
53+
setUser(userRes.data);
54+
setEmail(userRes.data.email);
55+
setName(userRes.data.name);
56+
setUserType(userRes.data.userType);
57+
setUserStatus(userRes.data.userStatus);
58+
59+
setPlaceReservations(placeRes.data);
60+
setEquipReservations(equipRes.data);
61+
62+
setIsLoading(false);
63+
})
64+
.catch((err) => {
65+
console.log("API 요청 중 오류 발생:", err);
66+
});
67+
}, [uuid])
3768

3869
const handleSubmit = async () => {
3970
try {
@@ -54,8 +85,6 @@ const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
5485
}
5586
};
5687

57-
console.log(user);
58-
5988
return (
6089
<LayoutWithAuth>
6190
<h2>유저 세부 정보</h2>
@@ -64,130 +93,114 @@ const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
6493
<Button onClick={() => window.history.back()}>뒤로가기</Button>
6594
</div>
6695

67-
<Tab
68-
panes={[
69-
{
70-
menuItem: '유저 정보',
71-
render: () => (
72-
<Tab.Pane>
73-
<h3>유저 정보</h3>
74-
75-
<Form>
76-
<Form.Field>
77-
<label>UUID</label>
78-
<p>{user.uuid}</p>
79-
</Form.Field>
80-
<Form.Input
81-
required
82-
label={'email'}
83-
value={email}
84-
onChange={(e) => setEmail(e.target.value)}
85-
/>
86-
<Form.Input
87-
required
88-
label={'이름'}
89-
value={name}
90-
onChange={(e) => setName(e.target.value)}
91-
/>
92-
<Form.Select
93-
required
94-
label={'유저 타입'}
95-
placeholder="유저 타입을 선택하세요."
96-
value={userType}
97-
options={userTypeOptions}
98-
onChange={(e, { value }) => setUserType(value)}
99-
/>
100-
<Form.Select
101-
required
102-
label={'유저 상태'}
103-
placeholder="유저 상태를 선택하세요."
104-
value={userStatus}
105-
options={userStatusOptions}
106-
onChange={(e, { value }) => setUserStatus(value)}
107-
/>
108-
<Form.Group style={{ display: 'flex' }}>
109-
<Form.Field style={{ flex: 1 }}>
110-
<label>생성일</label>
111-
<p>{user.createdAt}</p>
112-
</Form.Field>
113-
<Form.Field style={{ flex: 1 }}>
114-
<label>마지막 로그인</label>
115-
<p>{user.lastLoginAt}</p>
116-
</Form.Field>
117-
</Form.Group>
118-
<Form.Group>
119-
<Form.Button type="submit" onClick={handleSubmit}>
120-
수정
121-
</Form.Button>
122-
<DeleteConfirmModal
123-
open={deleteModalOpen}
124-
target={`${name}(${email})`}
125-
deleteURI={`user/${user.uuid}`}
126-
trigger={
127-
<Button
128-
negative
129-
onClick={() => setDeleteModalOpen(true)}
130-
>
131-
삭제
132-
</Button>
133-
}
96+
{
97+
isLoading ? (
98+
<div>유저 정보 로딩 중...</div>
99+
) : (
100+
<Tab
101+
panes={[
102+
{
103+
menuItem: '유저 정보',
104+
render: () => (
105+
<Tab.Pane>
106+
<h3>유저 정보</h3>
107+
108+
<Form>
109+
<Form.Field>
110+
<label>UUID</label>
111+
<p>{user.uuid}</p>
112+
</Form.Field>
113+
<Form.Input
114+
required
115+
label={'email'}
116+
value={email}
117+
onChange={(e) => setEmail(e.target.value)}
118+
/>
119+
<Form.Input
120+
required
121+
label={'이름'}
122+
value={name}
123+
onChange={(e) => setName(e.target.value)}
124+
/>
125+
<Form.Select
126+
required
127+
label={'유저 타입'}
128+
placeholder="유저 타입을 선택하세요."
129+
value={userType}
130+
options={userTypeOptions}
131+
onChange={(e, { value }) => setUserType(value)}
132+
/>
133+
<Form.Select
134+
required
135+
label={'유저 상태'}
136+
placeholder="유저 상태를 선택하세요."
137+
value={userStatus}
138+
options={userStatusOptions}
139+
onChange={(e, { value }) => setUserStatus(value)}
140+
/>
141+
<Form.Group style={{ display: 'flex' }}>
142+
<Form.Field style={{ flex: 1 }}>
143+
<label>생성일</label>
144+
<p>{user.createdAt}</p>
145+
</Form.Field>
146+
<Form.Field style={{ flex: 1 }}>
147+
<label>마지막 로그인</label>
148+
<p>{user.lastLoginAt}</p>
149+
</Form.Field>
150+
</Form.Group>
151+
<Form.Group>
152+
<Form.Button type="submit" onClick={handleSubmit}>
153+
수정
154+
</Form.Button>
155+
<DeleteConfirmModal
156+
open={deleteModalOpen}
157+
target={`${name}(${email})`}
158+
deleteURI={`user/${user.uuid}`}
159+
trigger={
160+
<Button
161+
negative
162+
onClick={() => setDeleteModalOpen(true)}
163+
>
164+
삭제
165+
</Button>
166+
}
167+
/>
168+
</Form.Group>
169+
</Form>
170+
</Tab.Pane>
171+
),
172+
},
173+
{
174+
menuItem: `장소 예약 목록 (${placeReservations.length}개)`,
175+
render: () => (
176+
<Tab.Pane>
177+
<h3>장소 예약 목록 ({placeReservations.length}개)</h3>
178+
<PlaceReservationTable2
179+
reservations={placeReservations}
180+
startIdx={1}
181+
/>
182+
</Tab.Pane>
183+
),
184+
},
185+
{
186+
menuItem: `장비 예약 목록 (${equipReservations.length}개)`,
187+
render: () => (
188+
<Tab.Pane>
189+
<h3>장비 예약 목록 ({equipReservations.length}개)</h3>
190+
<EquipmentReservationTable2
191+
reservations={equipReservations}
192+
startIdx={1}
134193
/>
135-
</Form.Group>
136-
</Form>
137-
</Tab.Pane>
138-
),
139-
},
140-
{
141-
menuItem: `장소 예약 목록 (${placeReservations.length}개)`,
142-
render: () => (
143-
<Tab.Pane>
144-
<h3>장소 예약 목록 ({placeReservations.length}개)</h3>
145-
<PlaceReservationTable2
146-
reservations={placeReservations}
147-
startIdx={1}
148-
/>
149-
</Tab.Pane>
150-
),
151-
},
152-
{
153-
menuItem: `장비 예약 목록 (${equipReservations.length}개)`,
154-
render: () => (
155-
<Tab.Pane>
156-
<h3>장비 예약 목록 ({equipReservations.length}개)</h3>
157-
<EquipmentReservationTable2
158-
reservations={equipReservations}
159-
startIdx={1}
160-
/>
161-
</Tab.Pane>
162-
),
163-
},
164-
]}
165-
/>
194+
</Tab.Pane>
195+
),
196+
},
197+
]}
198+
/>
199+
)
200+
}
201+
166202
</LayoutWithAuth>
167203
);
168204
};
169205

170206
export default UserDetailPage;
171-
172-
export async function getServerSideProps(ctx) {
173-
const { uuid } = ctx['params'];
174-
const res1 = await PoPoAxios.get(`user/admin/${uuid}`, {
175-
withCredentials: true,
176-
});
177-
178-
const res2 = await PoPoAxios.get(`reservation-place/user/admin/${uuid}`, {
179-
withCredentials: true,
180-
});
181-
182-
const res3 = await PoPoAxios.get(`reservation-equip/user/admin/${uuid}`, {
183-
withCredentials: true,
184-
});
185-
186-
return {
187-
props: {
188-
user: res1.data,
189-
placeReservations: res2.data,
190-
equipReservations: res3.data,
191-
},
192-
};
193-
}

0 commit comments

Comments
 (0)