Skip to content

Commit

Permalink
SSR doesn't process authenticated API
Browse files Browse the repository at this point in the history
  • Loading branch information
@BlueHorn07
BlueHorn07 committed Feb 1, 2025
1 parent 999bf83 commit 0cefb97
Showing 1 changed file with 143 additions and 130 deletions.
273 changes: 143 additions & 130 deletions pages/user/[uuid].jsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand All @@ -54,8 +85,6 @@ const UserDetailPage = ({ user, placeReservations, equipReservations }) => {
}
};

console.log(user);

return (
<LayoutWithAuth>
<h2>유저 세부 정보</h2>
Expand All @@ -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,
},
};
}

0 comments on commit 0cefb97

Please sign in to comment.