Skip to content

Commit 07ea4b1

Browse files
summerDev96summerDev96
committed
fix: 등록수정 폼 반응형 수정
1 parent 3ae83a7 commit 07ea4b1

File tree

7 files changed

+62
-53
lines changed

7 files changed

+62
-53
lines changed

‎src/app/my-activities/activity/[activityId]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface ActivityEditPageProps {
88
const ActivityEditPage = async ({ params }: ActivityEditPageProps) => {
99
const { activityId } = await params;
1010
return (
11-
<div className='flex justify-center items-center max-w-[327px] md:max-w-[627px] mx-auto p-16'>
11+
<div className='w-full flex justify-center items-center max-w-[327px] tablet:max-w-[684px] pc:max-w-[700px] mx-auto py-7.5 tablet:py-16'>
1212
{/* 수정 페이지 + 공통 폼 */}
1313
<MyActivityForm mode='EDIT' activityId={activityId} />
1414
</div>

‎src/app/my-activities/activity/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import MyActivityForm from '@/components/pages/myActivities/MyActivityForm';
22

33
const ActivityRegisterPage = () => {
44
return (
5-
<div className='flex justify-center items-center max-w-[327px] md:max-w-[627px] mx-auto p-16'>
5+
<div className='w-full flex justify-center items-center max-w-[327px] tablet:max-w-[684px] pc:max-w-[700px] mx-auto py-7.5 tablet:py-16'>
66
{/* 등록 페이지 + 공통 폼 */}
77
<MyActivityForm />
88
</div>

‎src/components/pages/myActivities/DateInput.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,19 @@ export function DateInput({ showLabel = false, value = '', onChange, onBlur }: D
3131
};
3232

3333
return (
34-
<div className='flex items-start'>
35-
<div className='flex flex-col'>
34+
<div className='flex items-start w-full'>
35+
<div className='flex flex-col flex-1 w-full'>
3636
{showLabel && (
3737
<Label htmlFor='date' className='mb-2.5'>
3838
날짜
3939
</Label>
4040
)}
41-
<div className='relative'>
41+
<div className='w-full relative'>
4242
<Input
4343
id='date'
4444
value={value}
4545
placeholder='yy/mm/dd'
46-
className='bg-background pr-10 min-w-[327px]'
46+
className='bg-background pr-10 w-full'
4747
onChange={(e) => {
4848
const val = e.target.value;
4949
onChange?.(val);

‎src/components/pages/myActivities/DateTimeRow.tsx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,10 @@ interface DateTimeRowProps {
99
isFirstRow?: boolean;
1010
onChange: (newData: Omit<MyActivitySchedule, 'id'>) => void;
1111
onBlur: () => void;
12-
onAdd?: () => void;
1312
onRemove?: () => void;
1413
}
1514

16-
const DateTimeRow = ({
17-
data,
18-
errors,
19-
isFirstRow = false,
20-
onChange,
21-
onBlur,
22-
onAdd,
23-
onRemove,
24-
}: DateTimeRowProps) => {
15+
const DateTimeRow = ({ data, errors, onChange, onBlur, onRemove }: DateTimeRowProps) => {
2516
const handleDateInputChange = (value: string): void => {
2617
let currentDate = value;
2718
currentDate = currentDate.replace(/\D/g, '');
@@ -35,11 +26,11 @@ const DateTimeRow = ({
3526
};
3627

3728
return (
38-
<div className='flex flex-col md:flex-row items-start gap-3.5'>
39-
<div>
29+
<div className='flex flex-col tablet:flex-row items-start tablet:gap-3.5 gap-0 w-full'>
30+
<div className='flex-col flex flex-1 w-full tablet:max-w-[344px] pc:max-w-[360px]'>
4031
<DateInput
4132
value={data.date}
42-
showLabel={isFirstRow}
33+
showLabel={false}
4334
onChange={handleDateInputChange}
4435
onBlur={onBlur}
4536
/>
@@ -48,19 +39,16 @@ const DateTimeRow = ({
4839
</small>
4940
</div>
5041

51-
<div className='flex flex-row items-end gap-3.5'>
42+
<div className='w-full flex flex-row items-end gap-3.5 flex-1'>
5243
<StartEndTimeSelect
5344
value={{ start: data.startTime, end: data.endTime }}
54-
showLabel={isFirstRow}
45+
showLabel={false}
5546
onChange={(newVal) => {
5647
onChange({ ...data, startTime: newVal.start, endTime: newVal.end });
5748
}}
5849
/>
5950
<div className='flex flex-col justify-center h-[3.375rem]'>
60-
<RoundButton
61-
mode={isFirstRow ? 'plus' : 'minus'}
62-
onClick={isFirstRow ? onAdd : onRemove}
63-
/>
51+
<RoundButton mode={'minus'} onClick={onRemove} />
6452
</div>
6553
</div>
6654
</div>

‎src/components/pages/myActivities/MyActivityForm.tsx‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import useMyActivityForm from '@/hooks/useMyActivityForm';
2222
import ImageUploadSection from './ImageUploadSection';
2323
import Script from 'next/script';
2424
import { isBefore, parse } from 'date-fns';
25+
import RoundButton from './RoundButton';
2526

2627
interface MyActivityFormProps {
2728
mode?: 'EDIT' | 'REGISTER';
@@ -38,8 +39,8 @@ const MyActivityForm = ({ mode = 'REGISTER', activityId }: MyActivityFormProps)
3839
setValue,
3940
trigger,
4041
update,
42+
append,
4143
remove,
42-
insert,
4344
detailData,
4445
isDetailLoading,
4546
isDetailFetching,
@@ -107,8 +108,7 @@ const MyActivityForm = ({ mode = 'REGISTER', activityId }: MyActivityFormProps)
107108
endTime: '',
108109
};
109110

110-
const schedulesToReset =
111-
detailSchedules.length > 0 ? [emptyFirstRow, ...detailSchedules] : [emptyFirstRow];
111+
const schedulesToReset = detailSchedules.length > 0 ? [...detailSchedules] : [emptyFirstRow];
112112

113113
const formData: MyActivityFormData = {
114114
...detailData,
@@ -126,7 +126,7 @@ const MyActivityForm = ({ mode = 'REGISTER', activityId }: MyActivityFormProps)
126126
}, [detailData, isDetailLoading, isDetailFetching, mode]);
127127

128128
return (
129-
<div className='flex flex-col'>
129+
<div className='flex-1 flex flex-col'>
130130
<FormProvider {...methods}>
131131
<form onSubmit={methods.handleSubmit(onSubmit, onError)}>
132132
<div className='flex flex-col gap-6'>
@@ -252,15 +252,37 @@ const MyActivityForm = ({ mode = 'REGISTER', activityId }: MyActivityFormProps)
252252
{/* 예약 가능한 시간대 */}
253253
<div className='mt-7.5'>
254254
<Label>예약 가능한 시간대</Label>
255+
<div className='flex justify-between items-center py-3 mb-6 border-b border-grayscale-100 tablet:max-w-none tablet:w-full'>
256+
<div className='flex flex-1 tablet:gap-3.5'>
257+
<div className='w-full tablet:w-[343px] flex-shrink-0'>
258+
<Label className='gap-0'>날짜</Label>
259+
</div>
260+
<div className='hidden tablet:flex flex-1'>
261+
<div className='flex-1 min-w-0'>
262+
<Label className='gap-0'>시작시간</Label>
263+
</div>
264+
<div className='flex-1 min-w-0'>
265+
<Label className='gap-0'>종료시간</Label>
266+
</div>
267+
</div>
268+
</div>
269+
270+
<div className='flex-shrink-0'>
271+
<RoundButton
272+
mode={'plus'}
273+
onClick={() => {
274+
append({
275+
id: crypto.randomUUID(),
276+
date: '',
277+
startTime: '',
278+
endTime: '',
279+
});
280+
}}
281+
/>
282+
</div>
283+
</div>
255284
{scheduleFields.map((scheduleField, index) => (
256-
<div
257-
key={scheduleField.id}
258-
className={clsx(
259-
'w-full',
260-
index === 0 ? 'pt-4' : '',
261-
index === 1 ? 'pt-5 border-t border-grayscale-100' : '',
262-
)}
263-
>
285+
<div key={scheduleField.id} className={clsx('w-full pb-2.5')}>
264286
<DateTimeRow
265287
key={scheduleField.id}
266288
data={scheduleField}
@@ -271,15 +293,13 @@ const MyActivityForm = ({ mode = 'REGISTER', activityId }: MyActivityFormProps)
271293
onBlur={() => {
272294
trigger(`schedules.${index}`);
273295
}}
274-
onAdd={() =>
275-
insert(0, {
276-
id: crypto.randomUUID(),
277-
date: '',
278-
startTime: '',
279-
endTime: '',
280-
})
281-
}
282-
onRemove={() => remove(index)}
296+
onRemove={() => {
297+
remove(index);
298+
// 최소 한 행 유지
299+
if (scheduleFields.length === 1) {
300+
append({ id: crypto.randomUUID(), date: '', startTime: '', endTime: '' });
301+
}
302+
}}
283303
isFirstRow={index === 0}
284304
errors={
285305
errors?.schedules?.[index] as Merge<

‎src/components/pages/myActivities/RoundButton.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ const RoundButton = ({ mode = 'close', children, className, onClick }: RoundButt
1717

1818
const getModeClass = (): string => {
1919
const modeClassMap: Record<string, string> = {
20-
plus: 'w-[28px] h-[28px] sm:w-[42px] sm:h-[42px] bg-primary-500 hover:bg-[var(--primary-400)]',
21-
minus: 'w-[28px] h-[28px] sm:w-[42px] sm:h-[42px] bg-grayscale-50 hover:bg-grayscale-25',
20+
plus: 'w-[28px] h-[28px] tablet:w-[42px] tablet:h-[42px] bg-primary-500 hover:bg-[var(--primary-400)]',
21+
minus:
22+
'w-[28px] h-[28px] tablet:w-[42px] tablet:h-[42px] bg-grayscale-50 hover:bg-grayscale-25',
2223
close: 'w-[20px] h-[20px] sm:w-[26px] sm:h-[26px] bg-grayscale-950 hover:bg-grayscale-800',
2324
edit: 'w-[30px] h-[30px] md:w-[24px] md:h-[24px] lg:w-[30px] lg:h-[30px] bg-grayscale-300 hover:bg-grayscale-200',
2425
};

‎src/components/pages/myActivities/StartEndTimeSelect.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ interface TimeSelectProps {
2323

2424
const StartEndTimeSelect = ({ value, showLabel = false, onChange }: TimeSelectProps) => {
2525
return (
26-
<div className='flex items-end'>
27-
<div>
26+
<div className='flex items-end w-full'>
27+
<div className='flex-1 min-w-0'>
2828
{showLabel && <Label className='mb-2.5 hidden sm:block'>시작 시간</Label>}
2929
<Select
3030
value={value.start === '' ? undefined : value.start}
3131
onValueChange={(start) => onChange({ ...value, start })}
3232
>
33-
<SelectTrigger className='w-[128.5px]'>
33+
<SelectTrigger className='w-full'>
3434
<SelectValue placeholder='0:00' />
3535
</SelectTrigger>
3636
<SelectContent>
@@ -45,13 +45,13 @@ const StartEndTimeSelect = ({ value, showLabel = false, onChange }: TimeSelectPr
4545
</Select>
4646
</div>
4747
<span className='flex items-center px-[10.5px] h-[3.375rem]'>-</span>
48-
<div>
48+
<div className='flex-1 min-w-0'>
4949
{showLabel && <Label className='px-1 mb-2.5 hidden sm:block'>종료 시간</Label>}
5050
<Select
5151
value={value.end === '' ? undefined : value.end}
5252
onValueChange={(end) => onChange({ ...value, end })}
5353
>
54-
<SelectTrigger className='w-[128.5px]'>
54+
<SelectTrigger className='w-full'>
5555
<SelectValue placeholder='0:00' />
5656
</SelectTrigger>
5757
<SelectContent>

0 commit comments

Comments
 (0)