Skip to content

Commit 4c080dc

Browse files
CreatiCodingCreatiCoding
committed
feat: 분리되어 있던 컴포넌트를 MyInfo 하나만 쓰도록 수정
1 parent e0080ff commit 4c080dc

File tree

4 files changed

+89
-156
lines changed

4 files changed

+89
-156
lines changed

‎frontend/zicdding-class.com/app/(user)/my/_components/MyInfo.tsx

Lines changed: 85 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,109 @@
11
'use client';
22

33
import { useUser } from '@/app/_hooks';
4+
import { Button } from '@zicdding-web/ui';
5+
import { Input } from '@zicdding-web/ui/Input';
46
import { useRouter } from 'next/navigation';
57
import { useEffect } from 'react';
8+
import { useForm } from 'react-hook-form';
69

7-
export function MyInfo() {
8-
const { user, isLogged } = useUser();
10+
function useLoginPageGuard(nextPage: string) {
11+
const { isLogged } = useUser();
912
const router = useRouter();
1013

1114
useEffect(() => {
1215
if (!isLogged) {
13-
router.push('/login');
16+
router.push(nextPage);
1417
}
15-
}, [isLogged, router]);
18+
}, [isLogged, router, nextPage]);
19+
}
20+
21+
export function MyInfo({ mode }: { mode: 'view' | 'modify' }) {
22+
const router = useRouter();
23+
const { user } = useUser();
24+
const { register, getValues } = useForm<{
25+
nickname: string;
26+
email: string;
27+
password: string;
28+
phoneNumber: string;
29+
}>({
30+
defaultValues: {
31+
nickname: user?.nickname,
32+
email: user?.email,
33+
password: '**********',
34+
phoneNumber: user?.phone_num,
35+
},
36+
});
37+
38+
useLoginPageGuard('/login');
1639

1740
return (
1841
<div className="space-y-4 w-[420px] mx-auto my-0">
19-
<div className="grid grid-cols-2 gap-4 items-center">
20-
<label htmlFor="nickname" className="text-gray-700 font-bold">
21-
닉네임
22-
</label>
23-
<input
24-
id="nickname"
25-
type="text"
26-
value={user?.nickname || ''}
27-
readOnly
28-
className="form-input w-full border-gray-300"
29-
/>
30-
</div>
42+
<div className="w-[200px] flex justify-center ml-auto mr-auto mb-8 flex-col">
43+
<img src="/my/default-profile.png" alt="Profile" width="205" className="bg-gray-200 mb-10" />
3144

32-
<div className="grid grid-cols-2 gap-4 items-center">
33-
<label htmlFor="email" className="text-gray-700 font-bold">
34-
Email
35-
</label>
36-
<input
37-
id="email"
38-
type="email"
39-
value={user?.email || ''}
40-
readOnly
41-
className="form-input w-full border-gray-300"
42-
/>
45+
<Button className="w-full rounded-[20px]" onClick={() => alert('업로드 버튼이 눌렸습니다.')}>
46+
업로드
47+
</Button>
4348
</div>
4449

45-
<div className="grid grid-cols-2 gap-4 items-center">
46-
<label htmlFor="password" className="text-gray-700 font-bold">
47-
비밀번호
48-
</label>
49-
<input
50-
id="password"
51-
type="password"
52-
value={isLogged ? '********' : ''}
53-
readOnly
54-
className="form-input w-full border-gray-300"
55-
/>
56-
</div>
50+
<Input
51+
id="nickname"
52+
label="닉네임"
53+
defaultValue={getValues('nickname')}
54+
disabled={mode === 'view'}
55+
required={true}
56+
inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : 'bg-[#F4F4F4] text-[#959595]'}
57+
{...register('nickname')}
58+
/>
5759

58-
<div className="grid grid-cols-2 gap-4 items-center">
59-
<label htmlFor="phoneNumber" className="text-gray-700 font-bold">
60-
전화번호
61-
</label>
62-
<input
63-
id="phoneNumber"
64-
type="tel"
65-
value={user?.phone_num || ''}
66-
readOnly
67-
className="form-input w-full border-gray-300"
68-
/>
69-
</div>
60+
<Input
61+
defaultValue={getValues('email')}
62+
label="Email"
63+
id="email"
64+
type="email"
65+
disabled={true}
66+
inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : ''}
67+
{...register('email')}
68+
/>
69+
70+
<Input
71+
defaultValue="**********"
72+
label="비밀번호"
73+
id="password"
74+
type="password"
75+
disabled={true}
76+
inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : ''}
77+
{...register('password')}
78+
/>
7079

71-
<div className="h-[80px]">{}</div>
80+
<Input
81+
defaultValue={getValues('phoneNumber')}
82+
label="전화번호"
83+
id="phoneNumber"
84+
type="tel"
85+
disabled={mode === 'view'}
86+
{...register('phoneNumber')}
87+
inputClassName={mode === 'view' ? 'text-[#959595] bg-[#F4F4F4]' : 'bg-[#F4F4F4]'}
88+
placeholder="010-0000-0000"
89+
/>
7290

73-
<div className="flex justify-center ">
74-
<button
75-
type="button"
76-
className="bg-black text-white py-2 px-4 rounded font-bold text-lg w-[200px]"
77-
onClick={() => router.push('/my/modify')}
78-
>
91+
<div className="mb-20 w-full h-1" />
92+
93+
{mode === 'modify' ? (
94+
<div className="flex justify-evenly">
95+
<Button className="w-full mr-8 rounded-[20px]" onClick={() => alert('수정 버튼이 눌려졌습니다.')}>
96+
수정하기
97+
</Button>
98+
<Button className="w-full rounded-[20px]" onClick={() => router.back()}>
99+
취소
100+
</Button>
101+
</div>
102+
) : (
103+
<Button className="w-full rounded-[20px]" onClick={() => router.push('/my/modify')}>
79104
개인정보 수정
80-
</button>
81-
</div>
105+
</Button>
106+
)}
82107
</div>
83108
);
84109
}

‎frontend/zicdding-class.com/app/(user)/my/modify/_components/MyInfoForm.tsx

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎frontend/zicdding-class.com/app/(user)/my/modify/page.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
import { MyInfoForm } from './_components/MyInfoForm';
1+
import { MyInfo } from '../_components/MyInfo';
22

33
export default function MyPage() {
44
return (
55
<>
66
<div className="text-center">
77
<div className="flex justify-center min-h-screen">
8-
<div className="w-[1280px] bg-white p-8 rounded-lg w-full">
8+
<div className="bg-white p-8 rounded-lg w-full">
99
<h1 className="text-3xl font-bold text-left mb-4">마이페이지</h1>
1010
<h2 className="text-lg font-medium text-left mb-6">개인정보 수정</h2>
1111

12-
<div className="flex justify-center mb-8">
13-
<img src="/my/default-profile.png" alt="Profile" width="205" className="bg-gray-200" />
14-
</div>
15-
16-
<MyInfoForm />
12+
<MyInfo mode="modify" />
1713
</div>
1814
</div>
1915
</div>

‎frontend/zicdding-class.com/app/(user)/my/page.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ export default function MyPage() {
99
<h1 className="text-3xl font-bold text-left mb-4">마이페이지</h1>
1010
<h2 className="text-lg font-medium text-left mb-6">내 정보</h2>
1111

12-
<div className="flex justify-center mb-8">
13-
<img src="/my/default-profile.png" alt="Profile" width="205" className="bg-gray-200" />
14-
</div>
15-
16-
<MyInfo />
12+
<MyInfo mode="view" />
1713
</div>
1814
</div>
1915
</div>

0 commit comments

Comments
 (0)