{date && format(date, "yyyy년 MM월 dd일")}
@@ -84,19 +90,27 @@ export const ScheduleListContent = ({ date, setMode, popoverAlign, popoverSide,
-
-
- { scheduleList.map(schedule => (
-
- )) }
+ {
+ isLoading
+ ?
+ {[1,2,3,4].map((_) => (
+
+ ))}
-
+ :
+
+ { scheduleList.map(schedule => (
+
+ )) }
+
+
+ }
)
diff --git a/src/ui/component/schedule/content/ScheduleUpdateContent.tsx b/src/ui/component/schedule/content/ScheduleUpdateContent.tsx
index e69de29..0489606 100644
--- a/src/ui/component/schedule/content/ScheduleUpdateContent.tsx
+++ b/src/ui/component/schedule/content/ScheduleUpdateContent.tsx
@@ -0,0 +1,365 @@
+import { Button } from '@/components/ui/button';
+import { Field, FieldError } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverTrigger } from '@/components/ui/popover';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import type { ColorPaletteType } from '@/const/ColorPalette';
+import { Type } from '@baekyangdan/core-utils';
+import { usePalette } from '@/hooks/use-palette';
+import { useRecord } from '@/hooks/use-record';
+import { useTime } from '@/hooks/use-time';
+import { cn } from '@/lib/utils';
+import { ScheduleNetwork } from '@/network/ScheduleNetwork';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ArrowLeft } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { ColorPickPopover } from '../popover/ColorPickPopover';
+import { DatePickPopover } from '../popover/DatePickPopover';
+import { TimePickPopover } from '../popover/TimePickPopover';
+import { TypePickPopover } from '../popover/TypePickPopover';
+import type { ScheduleUpdateContentProps } from './ContentProps';
+import { SchedulerDTO as DTO } from '@baekyangdan/core-utils';
+import { UpdateScheduleSchema } from '@/data/form/schedule/updateSchedule.schema';
+import { ParticipantPopover } from '../popover/ParticipantPopover';
+
+export const ScheduleUpdateContent = ({ date, setMode, popoverSide, popoverAlign, refetchList, id }: ScheduleUpdateContentProps) => {
+ const [colorPopoverOpen, setColorPopoverOpen] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const { getPaletteByKey } = usePalette();
+ const { getCurrentTimeString, standardTimeToContinentalTime } = useTime();
+ const dayLabelList = useRecord(Type.Day).keys.map((key) => {
+ return {
+ day: key,
+ label: Type.Day[key as keyof typeof Type.Day]
+ } as { day: string, label: string };
+ });
+ const scheduleNetwork = new ScheduleNetwork();
+
+ const updateScheduleForm = useForm
>({
+ resolver: zodResolver(UpdateScheduleSchema),
+ defaultValues: {
+ id: id,
+ name: "",
+ startDate: date || new Date(),
+ endDate: date || new Date(),
+ content: "",
+ startTime: getCurrentTimeString('standard'),
+ endTime: getCurrentTimeString('standard'),
+ type: "once",
+ status: "yet",
+ style: getPaletteByKey('SerenityBlue').style,
+ dayList: "",
+ participantList: []
+ }
+ });
+
+ const {
+ name,
+ startDate,
+ endDate,
+ content,
+ startTime,
+ endTime,
+ type,
+ style,
+ dayList,
+ participantList
+ } = updateScheduleForm.watch();
+
+ useEffect(() => {
+ init();
+ }, [id]);
+
+ const init = async () => {
+ if (isLoading) return;
+ if (!id || id.trim().length === 0) return;
+ setIsLoading(true);
+ try {
+ const initData = await scheduleNetwork.getDetail(id);
+ if (!initData.success) throw new Error(initData.error);
+ const data = initData.data;
+ updateScheduleForm.reset({
+ ...data,
+ content: data.content ? data.content : '',
+ dayList: data.dayList ? data.dayList : '',
+ participantList: data.participantList ? data.participantList : []
+ });
+ setIsLoading(false);
+ } catch (e) {
+ setIsLoading(false);
+ console.error((e as Error).message);
+ toast.error('일정을 불러오는 데에 실패하였습니다.\n잠시 후 다시 시도해주십시오.');
+ setMode('detail');
+ }
+
+
+ }
+
+ const reqUpate = async () => {
+ if (isLoading) return;
+
+ const data = {
+ name,
+ startDate: startDate,
+ endDate: endDate,
+ type: type as Type.Type,
+ style: style,
+ startTime: standardTimeToContinentalTime(startTime),
+ endTime: standardTimeToContinentalTime(endTime),
+ dayList,
+ content
+ } as DTO.ScheduleCreateRequest;
+
+ setIsLoading(true);
+
+ const createPromise = scheduleNetwork.create(data);
+
+ toast.promise(createPromise, {
+ loading: '일정 생성 중입니다',
+ });
+
+ try {
+ const res = await createPromise;
+
+ if (!res.success) {
+ throw new Error(res.error);
+ }
+
+ toast.success('일정이 생성되었습니다');
+
+ // ✅ 기존 동작 그대로
+ setMode('list');
+ refetchList();
+ } catch (err) {
+ const message =
+ err instanceof Error ? err.message : '에러 발생';
+
+ toast.error(message);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const selectColor = (color: ColorPaletteType) => {
+ updateScheduleForm.setValue('style', color.style);
+ setColorPopoverOpen(false);
+ }
+
+ const selectType = (type: Type.Type) => {
+ updateScheduleForm.setValue('type', type);
+ }
+
+ const selectDayList = (newValues: string[]) => {
+ const sortedValues = newValues.sort();
+ const newDayList = sortedValues.join('');
+ updateScheduleForm.setValue('dayList', newDayList);
+ }
+
+ const selectDate = (type: 'startDate' | 'endDate', date: Date | undefined) => {
+ if (!date) return;
+ updateScheduleForm.setValue(type, date);
+ }
+
+ const selectTime = (type: 'startTime' | 'endTime', time: string) => {
+ updateScheduleForm.setValue(type, time);
+ }
+
+ const selectParticipant = (participantList: string[]) => {
+ updateScheduleForm.setValue('participantList', participantList);
+ }
+
+ const OnceContent = () => {
+ return (
+
+ selectDate('startDate', date)}
+ setEndDate={(date: Date | undefined) => selectDate('endDate', date)}
+ />
+
+ )
+ }
+
+ const DailyContent = () => {
+ return null;
+ }
+
+ const DefaultContent = () => {
+ return (
+ (
+
+ {
+ dayLabelList.map((day) => (
+
+ {day.label}
+
+ ))
+ }
+
+ )
+ )
+ }
+
+ const renderContent = () => {
+ switch (type) {
+ case 'once':
+ return ;
+ case 'daily':
+ return ;
+ default:
+ return ;
+ }
+ }
+
+ return (
+
+
+
+
div>div:last-child]:block *:data-radix-scroll-area-thumb:bg-indigo-200"
+ )
+ }
+ >
+
+
+
+ {renderContent()}
+
+
+ selectTime('startTime', time ?? '')}
+ endTime={endTime}
+ setEndTime={(time: string | undefined) => selectTime('endTime', time ?? '')}
+ />
+
+
(
+
+ )}
+ />
+
+
+
+
+
+
+
+