Skip to content

Commit 2153efe

Browse files
cst9221cst9221
committed
feat: 클래스 생성 조회 수정 페이지 작업
1 parent 123931e commit 2153efe

File tree

4 files changed

+772
-97
lines changed

4 files changed

+772
-97
lines changed

‎frontend/zicdding-class.com/app/class/[id]/modify/page.tsx

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
'use client';
2+
3+
import { Button } from '@zicdding-web/ui/Button';
4+
import { Typography } from '@zicdding-web/ui/Typography';
5+
import { Fragment, useState } from 'react';
6+
import { Calendar, Input } from '@zicdding-web/ui';
7+
import { CLASS_MOCK_LIST } from '../../data';
8+
import { Tabs } from '@zicdding-web/ui/Tabs';
9+
10+
export default function ClassDetailModifyPage({params}: {params: {id: string}}) {
11+
const [inputs, setInputs] = useState(CLASS_MOCK_LIST[Number(params.id)]);
12+
13+
const handleChangeInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
14+
const { name, value } = e.target;
15+
16+
setInputs((prev) => ({
17+
...prev,
18+
[name]: value,
19+
}));
20+
};
21+
22+
const handleChangeTab = (value: string) => {
23+
setInputs((prev) => {
24+
return {
25+
...prev,
26+
dead_yn: value === 'true',
27+
};
28+
});
29+
};
30+
31+
const handleClickCreate = () => {
32+
new Promise((resolve) => resolve);
33+
};
34+
35+
return (
36+
<div className="px-6">
37+
<div>
38+
<div className="flex justify-between">
39+
<input value={inputs.title} className="text-6xl" placeholder="타이틀을 입력하세요" />
40+
<Button variant="default" size="sm" onClick={handleClickCreate}>
41+
등록하기
42+
</Button>
43+
</div>
44+
45+
<hr className="my-8" />
46+
47+
<div className="flex flex-wrap gap-y-6">
48+
{
49+
<Fragment>
50+
<div className="flex items-center w-1/2">
51+
<div>
52+
<Typography className="text-gray-400">모집 구분</Typography>
53+
</div>
54+
<div className="ml-4">
55+
<Input name="type" value={inputs.type} onChange={handleChangeInput} />
56+
</div>
57+
</div>
58+
<div className="flex items-center w-1/2">
59+
<div>
60+
<Typography className="text-gray-400">모집 인원</Typography>
61+
</div>
62+
<div className="ml-4">
63+
<Input name="accommodate" value={inputs.accommodate} onChange={handleChangeInput} />
64+
</div>
65+
</div>
66+
<div className="flex items-center w-1/2">
67+
<div>
68+
<Typography className="text-gray-400">모집 기간</Typography>
69+
</div>
70+
<div className="ml-4">
71+
<div className="flex items-center">
72+
<div className="relative group">
73+
<Input name="deadline" value={inputs.deadline[0]} type="calendar" />
74+
75+
<div className="absolute top-full left-0 hidden bg-white z-[1] border rounded-md group-hover:block">
76+
<Calendar
77+
mode="range"
78+
onDayClick={(day) =>
79+
setInputs((prev) => {
80+
const nextDeadline = [...prev.deadline];
81+
nextDeadline[0] = day.toISOString().split('T')[0].replaceAll('-', '.');
82+
return { ...prev, deadline: nextDeadline };
83+
})
84+
}
85+
/>
86+
</div>
87+
</div>
88+
<div className="mx-4">~</div>
89+
<div className="relative group">
90+
<Input name="deadline" value={inputs.deadline[1]} type="calendar" />
91+
92+
<div className="absolute top-full left-0 hidden bg-white z-[1] border rounded-md group-hover:block">
93+
<Calendar
94+
mode="range"
95+
onDayClick={(day) =>
96+
setInputs((prev) => {
97+
const nextDeadline = [...prev.deadline];
98+
nextDeadline[1] = day.toISOString().split('T')[0].replaceAll('-', '.');
99+
return { ...prev, deadline: nextDeadline };
100+
})
101+
}
102+
/>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
<div className="flex items-center w-1/2">
109+
<div>
110+
<Typography className="text-gray-400">모집 상태</Typography>
111+
</div>
112+
<div className="ml-4">
113+
<Tabs
114+
items={[
115+
{ title: '모집중', value: 'true' },
116+
{ title: '모집완료', value: 'false' },
117+
]}
118+
value={JSON.stringify(inputs.dead_yn)}
119+
onChange={handleChangeTab}
120+
/>
121+
</div>
122+
</div>
123+
<div className="flex items-center w-1/2">
124+
<div>
125+
<Typography className="text-gray-400">시작 예정</Typography>
126+
</div>
127+
<div className="ml-4">
128+
<div className="relative group">
129+
<Input name="deadline" value={inputs.start_date} type="calendar" />
130+
131+
<div className="absolute top-full left-0 hidden bg-white z-[1] border rounded-md group-hover:block">
132+
<Calendar
133+
mode="range"
134+
onDayClick={(day) =>
135+
setInputs((prev) => {
136+
return { ...prev, start_date: day.toISOString().split('T')[0].replaceAll('-', '.') };
137+
})
138+
}
139+
/>
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
<div className="flex items-center w-1/2">
145+
<div>
146+
<Typography className="text-gray-400">진행 방식</Typography>
147+
</div>
148+
<div className="ml-4">
149+
<Input name="how" value={inputs.how} onChange={handleChangeInput} />
150+
</div>
151+
</div>
152+
<div className="flex items-center w-1/2">
153+
<div>
154+
<Typography className="text-gray-400">예상 기간</Typography>
155+
</div>
156+
<div className="ml-4">
157+
<Input name="eta" value={inputs.eta} onChange={handleChangeInput} />
158+
</div>
159+
</div>
160+
<div className="flex items-center w-1/2">
161+
<div>
162+
<Typography className="text-gray-400">연락 방법</Typography>
163+
</div>
164+
<div className="ml-4">
165+
<Input name="contact" value={inputs.contact} onChange={handleChangeInput} />
166+
</div>
167+
</div>
168+
<div className="flex items-center w-1/2">
169+
<div>
170+
<Typography className="text-gray-400">기술 스택</Typography>
171+
</div>
172+
<div className="ml-4">
173+
<Input name="lang" value={inputs.lang} onChange={handleChangeInput} />
174+
</div>
175+
</div>
176+
</Fragment>
177+
}
178+
</div>
179+
</div>
180+
181+
<hr className="my-8" />
182+
183+
<div>소개 내용</div>
184+
185+
<hr className="my-8" />
186+
</div>
187+
);
188+
}

0 commit comments

Comments
 (0)