issue #60

- 일정 추가 로직 1차 구현
- 일정 목록 화면 구현 중

src/data/form/index.ts

@@ -1,4 +1,4 @@
-export { SignUpSchema } from './signup.schema';
-export { LoginSchema } from './login.schema';
-export { ResetPasswordSchema } from './resetPassword.schema';
-export { EmailVerificationSchema } from './emailVerification.schema';
+export { SignUpSchema } from './account/signup.schema';
+export { LoginSchema } from './account/login.schema';
+export { ResetPasswordSchema } from './account/resetPassword.schema';
+export { EmailVerificationSchema } from './account/emailVerification.schema';

src/data/form/schedule/listSchedule.schema.ts

@@ -0,0 +1,22 @@
+import * as z from "zod";
+
+export const ListScheduleSchema = z.object({
+  name: z
+    .string()
+    .optional()
+  , startDate: z
+    .date()
+    .optional()
+  , endDate: z
+    .date()
+    .optional()
+  , status: z
+    .string()
+    .optional()
+  , styleList: z
+    .array(z.string())
+    .optional()
+  , typeList: z
+    .array(z.string())
+    .optional()
+});

src/data/request/schedule/CreateScheduleRequest.ts

@@ -11,7 +11,7 @@ export class CreateScheduleRequest {
   startTime: string;
   endTime: string;
   style: string;
-  participantList: string[];
+  // participantList: string[];
 
   constructor (
     name: string,
@@ -23,7 +23,7 @@ export class CreateScheduleRequest {
     startTime: string,
     endTime: string,
     style: string,
-    participantList: string[]
+    // participantList: string[]
   ) {
     this.name = name;
     this.content = content;
@@ -34,6 +34,6 @@ export class CreateScheduleRequest {
     this.startTime = startTime;
     this.endTime = endTime;
     this.style = style;
-    this.participantList = participantList;
+    // this.participantList = participantList;
   }
 }

src/data/request/schedule/ScheduleListRequest.ts

@@ -2,12 +2,10 @@ import type { ScheduleStatus } from "@/const/schedule/ScheduleStatus";
 import type { ScheduleType } from "@/const/schedule/ScheduleType";
 
 export class ScheduleListRequest {
-  filterAccountIdList?: string[];
-  filterStartDate?: Date;
-  filterEndDate?: Date;
-  filterDate?: Date;
-  filterTypeList?: ScheduleType[];
-  filterStyleList?: string[];
-  filterStatusList?: ScheduleStatus[];
-  filterName?: string;
+  startDate?: Date;
+  endDate?: Date;
+  typeList?: ScheduleType[];
+  styleList?: string[];
+  status?: ScheduleStatus;
+  name?: string;
 }

src/hooks/use-time.ts

@@ -1,21 +1,57 @@
 export function useTime() {
-  const getNowString = () => {
-    const now = new Date();
-    const hour = now.getHours();
-    const minute = now.getMinutes();
-    const ampm = hour < 12 ? '오전' : '오후';
+  const getCurrentTimeString = (type: 'standard' | 'continental') => {
+    const current = new Date();
+    current.setSeconds(0, 0);
+    const formatter = new Intl.DateTimeFormat('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: type === 'standard' ? undefined : '2-digit',
+      hour12: type === 'standard',
+      hourCycle: type ==='standard' ? 'h12' : 'h23'
+    });
+    if (type === 'standard') {
+      return formatter.format(current).replace(':', '시 ').replace(/(\d+)\s*$/, '$1분');
+    }
+    return formatter.format(current);
+  };
 
-    return `${ampm} ${hour > 12 ? hour - 12 : hour}시 ${minute.toString().padStart(2, '0')}분`;
+  const standardTimeToContinentalTime = (standardTime: string) => {
+    const match = standardTime.match(/(오전|오후)\s*(\d+)\s*시\s*(\d+)\s*분/);
+
+    if (!match) return '';
+
+    const [_, ampm, hourString, minuteString] = match;
+
+    let hour = parseInt(hourString, 10);
+    const minute = parseInt(minuteString, 10);
+
+    if (ampm === '오후' && hour !== 12) {
+      hour += 12;
+    } else if (ampm === '오전' && hour === 12) {
+      hour = 0;
     }
 
-  const timeStringToISOString = (time: string) => {
-    const timeArray = time.split(' ');
-    const hour = timeArray[0] === '오전' ? Number(timeArray[1]) : Number(timeArray[1]) + 12;
-    return `${hour.toString().padStart(2, '0')}:${timeArray[2]}:00`
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:00`
+  }
+
+  const continentalTimeToStandardTime = (continentalTime: string) => {
+    const [hour, minute, _] = continentalTime.split(':');
+    const date = new Date();
+    date.setHours(parseInt(hour, 10), parseInt(minute, 10), 0, 0);
+
+    const formatter = new Intl.DateTimeFormat('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+      hourCycle: 'h12'
+    });
+
+    return formatter.format(date).replace(':', '시 ').replace(/(\d+)\s*$/, '$1분');
   }
 
   return {
-    getNowString,
-    timeStringToISOString
+    getCurrentTimeString,
+    standardTimeToContinentalTime,
+    continentalTimeToStandardTime
   }
 }

src/network/ScheduleNetwork.ts

@@ -1,8 +1,11 @@
-import type { CreateScheduleRequest } from "@/data/request/schedule/CreateScheduleRequest";
 import { BaseNetwork } from "./BaseNetwork"
-import type { UpdateScheduleRequest } from "@/data/request/schedule/UpdateScheduleRequest";
-import type { DeleteScheduleRequest } from "@/data/request/schedule/DeleteScheduleRequest";
-import type { ScheduleListRequest } from "@/data/request/schedule/ScheduleListRequest";
+import {
+  ScheduleListRequest,
+  CreateScheduleRequest,
+  UpdateScheduleRequest,
+  DeleteScheduleRequest
+} from '@/data/request';
+import { CreateScheduleResponse } from "@/data/response";
 
 export class ScheduleNetwork extends BaseNetwork {
   private baseUrl = "/schedule";
@@ -21,7 +24,7 @@ export class ScheduleNetwork extends BaseNetwork {
   }
 
   async create(data: CreateScheduleRequest) {
-    return await this.post(
+    return await this.post<CreateScheduleResponse>(
       `${this.baseUrl}/create`,
       data
     );

src/ui/component/Header.tsx

@@ -1,7 +1,6 @@
 import { Label } from '@/components/ui/label';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Separator } from '@/components/ui/separator';
-import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { useAuthStore } from '@/store/authStore';
 import { LogOutIcon } from 'lucide-react';

src/ui/component/popover/schedule/ColorPickPopover.tsx

@@ -1,6 +1,8 @@
 import { PopoverContent } from "@/components/ui/popover"
 import type { ColorPaletteType } from "@/const/ColorPalette"
 import { usePalette } from "@/hooks/use-palette";
+import { cn } from "@/lib/utils";
+import { Triangle } from "lucide-react";
 import { useState } from "react";
 
 interface ColorPickPopoverProps {
@@ -28,7 +30,10 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
 
   return (
     <PopoverContent
-      className="flex flex-col gap-1.5 w-fit"
+      className={cn(
+        "flex flex-col gap-1.5 w-fit relative",
+        seeMore ? "h-40" : "h-26"
+      )}
     >
       {getSlicedList(mainPaletteList, 5).map((list) => (
         <div className="flex flex-row gap-2.5">
@@ -41,10 +46,8 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
           ))}
         </div>
       ))}
-      {
-        !seeMore
-        ? <div className="w-full" onClick={() => setSeeMore(true)}>더 보기</div>
-        : <>
+      { seeMore && (
+        <>
           {getSlicedList(extraPaletteList, 5).map((list) => (
             <div className="flex flex-row gap-2.5">
               {list.map((palette) => (
@@ -59,12 +62,29 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
             </div>
           ))}
         </>
-      }
-      {
-        seeMore
-        ? <div className="w-full" onClick={() => setSeeMore(false)}>접기</div>
-        : null
-      }
+      )}
+      <div
+        className={cn(
+          "absolute h-8 bottom-0 left-0 w-full flex flex-row justify-center items-center gap-4 group bg-white hover:bg-indigo-300 transition-all duration-150",
+          "rounded-b-md"
+        )}
+        onClick={() => setSeeMore(prev => !prev)}
+      >
+        <span
+          className={cn(
+            "text-indigo-300 group-hover:text-white transition-all duration-150"
+          )}
+        >
+          { seeMore ? " 접기 " : "더 보기"}
+        </span>
+        <div
+          className={cn(
+            "w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-14 border-b-indigo-300",
+            "group-hover:border-b-white trnasition-all duration-150",
+            seeMore && "rotate-180"
+          )}
+        />
+      </div>
     </PopoverContent>
   )
 }

src/ui/component/popover/schedule/DatePickPopover.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { useState } from "react";
 
@@ -39,6 +40,7 @@ export const DatePickPopover = ({ ...props } : DaetPickPopoverProps) => {
     )
   }
 
+  
   const { startDate, setStartDate, endDate, setEndDate } = props;
   const [startOpen, setStartOpen] = useState(false);
   const [endOpen, setEndOpen] = useState(false);
@@ -64,7 +66,12 @@ export const DatePickPopover = ({ ...props } : DaetPickPopoverProps) => {
       >
         <PopoverTrigger asChild>
           <Button
-            className="flex-9 h-full border border-indigo-100 bg-white hover:bg-indigo-100 text-black"
+            className={cn(
+              "flex-9 h-full",
+              !startOpen
+              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
+              : "bg-indigo-300 text-white hover:bg-indigo-300"
+            )}
             disabled={disabled}
           >
             { 
@@ -98,7 +105,12 @@ export const DatePickPopover = ({ ...props } : DaetPickPopoverProps) => {
       >
         <PopoverTrigger asChild>
           <Button
-            className="flex-9 h-full border border-indigo-100 bg-white hover:bg-indigo-100 text-black"
+            className={cn(
+              "flex-9 h-full",
+              !endOpen
+              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
+              : "bg-indigo-300 text-white hover:bg-indigo-300"
+            )}
             disabled={disabled}
           >
             {

src/ui/component/popover/schedule/FilterPopover.tsx

@@ -0,0 +1,11 @@
+import { Popover, PopoverTrigger } from "@/components/ui/popover"
+
+export const FilterPopover = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        
+      </PopoverTrigger>
+    </Popover>
+  )
+}

src/ui/component/popover/schedule/SchedulePopover.tsx

@@ -5,6 +5,9 @@ import { useState } from 'react';
 import { PenSquare } from 'lucide-react';
 
 import { ScheduleCreateContent } from './content/ScheduleCreateContent';
+import { Button } from '@/components/ui/button';
+import { ScheduleNetwork } from '@/network/ScheduleNetwork';
+import { ScheduleListContent } from './content/ScheduleListContent';
 
 interface ScheduleSheetProps {
   date: Date | undefined;
@@ -14,17 +17,8 @@ interface ScheduleSheetProps {
 }
 
 export const SchedulePopover = ({ date, open, popoverSide, popoverAlign }: ScheduleSheetProps) => {
-
   const [mode, setMode] = useState<'list' | 'create' | 'detail' | 'update'>('list');
 
-  const ListContent = () => {
-    return (
-      <div>
-        <PenSquare onClick={() => setMode('create')}/>
-      </div>
-    )
-  }
-
   const DetailContent = () => {
     return (
       <div>
@@ -44,7 +38,13 @@ export const SchedulePopover = ({ date, open, popoverSide, popoverAlign }: Sched
   const SchedulePopoverContent = () => {
     switch(mode) {
       case 'list':
-        return <ListContent />
+        return <ScheduleListContent 
+          setMode={setMode}
+          date={date}
+          popoverAlign={popoverAlign}
+          popoverSide={popoverSide}
+          open={open}
+        />
       case 'create':
         return <ScheduleCreateContent
           setMode={setMode}
@@ -62,18 +62,10 @@ export const SchedulePopover = ({ date, open, popoverSide, popoverAlign }: Sched
 
   return (
     <PopoverContent
-      className="rounded-xl xl:w-[calc(100vw/4)] xl:max-w-[480px] min-w-[384px]"
+      className="rounded-xl xl:w-[calc(100vw/4)] xl:max-w-[480px] min-w-[384px] min-h-[125px] h-[calc(100vh/2.3)]"
       align={popoverAlign} side={popoverSide}
-    >
-      <ScrollArea
-        className={
-          cn(
-            "min-h-[125px] h-[calc(100vh/2.3)] w-full flex flex-col",
-          )
-        }
     >
       {<SchedulePopoverContent />}
-      </ScrollArea>
     </PopoverContent>
   )
 }

src/ui/component/popover/schedule/TimePickPopover.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 import { useState } from "react";
 
 interface BaseProps {
@@ -83,6 +84,7 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
     };
     const startTime = `${startAmPm} ${startHour}시 ${startMinute}분`;
     setStartTime(startTime);
+    setStartOpen(false);
   }
   const cancelStartTime = () => {
     setStartOpen(false);
@@ -128,7 +130,6 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
       return;
     }
 
-
     const {
       endAmPm,
       endHour,
@@ -140,6 +141,7 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
     };
     const endTime = `${endAmPm} ${endHour}시 ${endMinute}분`;
     setEndTime(endTime);
+    setEndOpen(false);
   }
   const cancelEndTime = () => {
     setEndOpen(false);
@@ -161,7 +163,12 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
       >
         <PopoverTrigger asChild>
           <Button
-            className="flex-9 h-full border border-indigo-100 bg-white hover:bg-indigo-100 text-black"
+            className={cn(
+              "flex-9 h-full",
+              !startOpen
+              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
+              : "bg-indigo-300 text-white hover:bg-indigo-300"
+            )}
             disabled={disabled}
           >
             {
@@ -183,13 +190,21 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
           >
             <ToggleGroupItem
               value={"오전"}
-              className="w-full h-7 rounded-none! rounded-tl-md!"
+              className={cn(
+                "w-full h-7 rounded-none! rounded-tl-md!",
+                "text-indigo-300! bg-white! hover:bg-indigo-300! hover:text-white!",
+                "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+              )}
             >
               오전
             </ToggleGroupItem>
             <ToggleGroupItem
               value={"오후"}
-              className="w-full h-7  rounded-none!"
+              className={cn(
+                "w-full h-7 rounded-none!",
+                "text-indigo-300! bg-white! hover:bg-indigo-300! hover:text-white!",
+                "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+              )}
             >
               오후
             </ToggleGroupItem>
@@ -200,18 +215,22 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
             <ToggleGroup
               type="single"
               id="startHour"
-              className="w-15 border-r rounded-none border-l flex flex-col justify-start items-center"
+              className="w-15 border-r border-r-indigo-300 rounded-none border-l border-l-indigo-300 flex flex-col justify-start items-center"
             >
               {
-                [1,2,3,4,5,6,7,8,9,10,11,12].map((time) => (
-                  <ToggleGroupItem
-                    className="w-full h-7 rounded-none!"
+                [1,2,3,4,5,6,7,8,9,10,11,12].map((time) => {
+                  return <ToggleGroupItem
+                    className={cn(
+                      "w-full h-7 rounded-none!",
+                      "bg-white! text-indigo-300! hover:bg-indigo-300! hover:text-white!",
+                      "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+                    )}
                     value={time.toString().padStart(2, '0')}
                     key={`startHour${time.toString().padStart(2, '0')}`}
                   >
                     {time.toString().padStart(2, '0')}
                   </ToggleGroupItem>
-                ))
+                })
               }
             </ToggleGroup>
           </ScrollArea>
@@ -221,13 +240,17 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
             <ToggleGroup
               type="single"
               id="startMinute"
-              className="w-full h-full rounded-none border-r flex flex-col justify-start items-center"
+              className="w-full h-full rounded-none border-r border-r-indigo-300 flex flex-col justify-start items-center"
             >
               {
                 Array.from({ length: 60 }).map((_, idx) => (
                   <ToggleGroupItem
                     value={idx.toString().padStart(2, '0')}
-                    className="w-full h-7 rounded-none!"
+                    className={cn(
+                      "w-full h-7 rounded-none!",
+                      "bg-white! text-indigo-300! hover:bg-indigo-300! hover:text-white!",
+                      "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+                    )}
                     key={`startMinute${idx.toString().padStart(2, '0')}`}
                   >
                     {idx.toString().padStart(2, '0')}
@@ -238,13 +261,21 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
           </ScrollArea>
           <div className="w-15 h-full flex flex-col">
             <div
-              className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
+              className={cn(
+                "cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md!",
+                "text-indigo-300 bg-white tarnsition-all duration-150",
+                "hover:text-white hover:bg-indigo-300"
+              )}
               onClick={applyStartTime}
             >
-              적용
+              확인
             </div>
             <div
-              className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
+              className={cn(
+                "cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none",
+                "text-red-400 bg- transition-all duration-150",
+                "hover:text-white hover:bg-red-400"
+              )}
               onClick={cancelStartTime}
             >
               취소
@@ -259,7 +290,12 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
       >
         <PopoverTrigger asChild>
           <Button
-            className="flex-9 h-full border border-indigo-100 bg-white hover:bg-indigo-100 text-black"
+            className={cn(
+              "flex-9 h-full",
+              !endOpen
+              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
+              : "bg-indigo-300 text-white hover:bg-indigo-300"
+            )}
             disabled={disabled}
           >
             {
@@ -281,13 +317,21 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
           >
             <ToggleGroupItem
               value={"오전"}
-              className="w-full h-7 rounded-none! rounded-tl-md!"
+              className={cn(
+                "w-full h-7 rounded-none! rounded-tl-md!",
+                "text-indigo-300! bg-white! hover:bg-indigo-300! hover:text-white!",
+                "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+              )}
             >
               오전
             </ToggleGroupItem>
             <ToggleGroupItem
               value={"오후"}
-              className="w-full h-7  rounded-none!"
+              className={cn(
+                "w-full h-7 rounded-none!",
+                "text-indigo-300! bg-white! hover:bg-indigo-300! hover:text-white!",
+                "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+              )}
             >
               오후
             </ToggleGroupItem>
@@ -298,12 +342,16 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
             <ToggleGroup
               id="endHour"
               type="single"
-              className="w-15 border-r rounded-none border-l flex flex-col justify-start items-center"
+              className="w-15 border-r border-r-indigo-300 rounded-none border-l border-l-indigo-300 flex flex-col justify-start items-center"
             >
               {
                 [1,2,3,4,5,6,7,8,9,10,11,12].map((time) => (
                   <ToggleGroupItem
-                    className="w-full h-7 rounded-none!"
+                    className={cn(
+                      "w-full h-7 rounded-none!",
+                      "bg-white! text-indigo-300! hover:bg-indigo-300! hover:text-white!",
+                      "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+                    )}
                     key={`endHour${time.toString().padStart(2, '0')}`}
                     value={time.toString().padStart(2, '0')}
                   >
@@ -319,14 +367,18 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
             <ToggleGroup
               id="endMinute"
               type="single"
-              className="w-full h-full rounded-none border-r flex flex-col justify-start items-center"
+              className="w-full h-full rounded-none border-r border-r-indigo-300 flex flex-col justify-start items-center"
             >
               {
                 Array.from({ length: 60 }).map((_, idx) => (
                   <ToggleGroupItem
                     value={idx.toString().padStart(2, '0')}
                     key={`endMinute${idx.toString().padStart(2, '0')}`}
-                    className="w-full h-7 rounded-none!"
+                    className={cn(
+                      "w-full h-7 rounded-none!",
+                      "bg-white! text-indigo-300! hover:bg-indigo-300! hover:text-white!",
+                      "data-[state=on]:bg-indigo-300! data-[state=on]:text-white!"
+                    )}
                   >
                     {idx.toString().padStart(2, '0')}
                   </ToggleGroupItem>
@@ -336,13 +388,21 @@ export const TimePickPopover = ({ ...props }: TimePickPopoverProps) => {
           </ScrollArea>
           <div className="w-15 h-full flex flex-col">
             <div
-              className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
+              className={cn(
+                "cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md!",
+                "text-indigo-300 bg-white transition-all duration-150",
+                "hover:text-white hover:bg-indigo-300"
+              )}
               onClick={applyEndTime}
             >
               확인
             </div>
             <div
-              className="cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none rounded-tr-md! hover:bg-gray-100"
+              className={cn(
+                "cursor-default text-sm flex justify-center items-center w-full h-7 rounded-none",
+                "text-red-400 bg-white transition-all duration-150",
+                "hover:text-white hover:bg-red-400"
+              )}
               onClick={cancelEndTime}
             >
               취소

src/ui/component/popover/schedule/TypePickPopover.tsx

@@ -1,31 +1,68 @@
-import { PopoverContent } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { ScheduleTypeLabel, type ScheduleType } from "@/const/schedule/ScheduleType";
 import { useRecord } from "@/hooks/use-record";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
 
 interface TypePickPopoverProps {
   popoverSide : 'left' | 'right';
+  type: ScheduleType;
   setType: (type: ScheduleType) => void;
 }
 
-export const TypePickPopover = ({ popoverSide, setType }: TypePickPopoverProps) => {
+export const TypePickPopover = ({ popoverSide, type, setType }: TypePickPopoverProps) => {
+  const [open, setOpen] = useState(false);
   const typeLabelList = useRecord(ScheduleTypeLabel).keys.map((key) => {
     return {
       type: key,
       label: ScheduleTypeLabel[key as keyof typeof ScheduleTypeLabel]
     } as { type: ScheduleType, label: string};
   });
+
+  const selectType = (type: ScheduleType) => {
+    setType(type);
+    setOpen(false);
+  }
   return (
-    <PopoverContent side={popoverSide} align={'start'} className="p-0 w-fit h-fit">
-      <div className="w-20 h-62.5 flex flex-col">
-        {typeLabelList.map((type) => (
-          <div
-            className="cursor-default flex-1 h-full flex justify-center items-center hover:bg-gray-100"
-            onClick={() => setType(type.type)}
+    <div className="w-full h-10">
+      <Popover
+        open={open}
+        onOpenChange={setOpen}
       >
-            {type.label}
+        <PopoverTrigger asChild>
+          <Button
+            className={cn(
+              "w-full h-10 rounded-md",
+              !open
+              ? "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white"
+              : "bg-indigo-300 text-white hover:bg-indigo-300!"
+            )}
+            type="button"
+          >
+            {ScheduleTypeLabel[type as keyof typeof ScheduleTypeLabel]}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent side={popoverSide} align={'start'} className="p-0 w-fit h-fit">
+          <div className="w-20 h-62.5 flex flex-col rounded-md">
+            {typeLabelList.map((label, idx) => (
+              <div
+                className={cn(
+                  "cursor-default flex-1 h-full flex justify-center items-center transition-all duration-150",
+                  type === label.type
+                  ? "bg-indigo-300 text-white hover:bg-indigo-300!"
+                  : "bg-white text-indigo-300 hover:bg-indigo-300 hover:text-white",
+                  (idx === 0 && "rounded-t-md"),
+                  (idx === typeLabelList.length - 1 && "rounded-b-md")
+                )}
+                onClick={() => selectType(label.type)}
+              >
+                {label.label}
               </div>
             ))}
           </div>
         </PopoverContent>
+      </Popover>
+    </div>
   )
 }

src/ui/component/popover/schedule/content/ContentProps.ts

@@ -1,13 +1,15 @@
-import type { ColorPaletteType } from "@/const/ColorPalette";
-
 interface BaseProps {
   date: Date | undefined;
   open: boolean;
   popoverSide: 'left' | 'right';
   popoverAlign: 'start' | 'end';
+  setMode: (mode: 'list' | 'create' | 'detail' | 'update') => void;
 }
 
 export interface ScheduleCreateContentProps extends BaseProps {
-  date: Date | undefined;
-  setMode: (mode: 'list' | 'create' | 'detail' | 'update') => void;
+
+}
+
+export interface ScheduleListContentProps extends BaseProps {
+
 }

src/ui/component/popover/schedule/content/ScheduleCreateContent.tsx

@@ -1,41 +1,44 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-import { useEffect, useState } from 'react';
-import { usePalette } from '@/hooks/use-palette';
-import { type ColorPaletteType } from '@/const/ColorPalette';
-import { ColorPickPopover } from '../ColorPickPopover';
-import { Input } from '@/components/ui/input';
-import { Controller, useForm } from 'react-hook-form';
-import * as z from 'zod';
-import { CreateScheduleSchema } from '@/data/form/createSchedule.schema';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Field, FieldError } from '@/components/ui/field';
-import { ArrowLeft, PenSquare, X, XIcon } from 'lucide-react';
-import { ScheduleTypeLabel, type ScheduleType } from '@/const/schedule/ScheduleType';
-import { useRecord } from '@/hooks/use-record';
-import { TypePickPopover } from '../TypePickPopover';
-import { ScheduleDay } from '@/const/schedule/ScheduleDay';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { DatePickPopover } from '../DatePickPopover';
-import { format } from 'date-fns';
-import { TimePickPopover } from '../TimePickPopover';
-import { useTime } from '@/hooks/use-time';
-import type { ScheduleCreateContentProps } from './ContentProps';
 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 { ParticipantPopover } from '../ParticipantPopover';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { type ColorPaletteType } from '@/const/ColorPalette';
+import { ScheduleDay } from '@/const/schedule/ScheduleDay';
+import type { ScheduleStatus } from '@/const/schedule/ScheduleStatus';
+import { type ScheduleType } from '@/const/schedule/ScheduleType';
+import { CreateScheduleSchema } from '@/data/form/schedule/createSchedule.schema';
+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 { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import { ColorPickPopover } from '../ColorPickPopover';
+import { DatePickPopover } from '../DatePickPopover';
+import { TimePickPopover } from '../TimePickPopover';
+import { TypePickPopover } from '../TypePickPopover';
+import type { ScheduleCreateContentProps } from './ContentProps';
 
-export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popoverAlign }: ScheduleCreateContentProps) => {
+export const ScheduleCreateContent = ({ date, setMode, popoverSide, popoverAlign }: ScheduleCreateContentProps) => {
   const [colorPopoverOpen, setColorPopoverOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const { getPaletteByKey } = usePalette();
-  const { getNowString } = useTime();
+  const { getCurrentTimeString, standardTimeToContinentalTime } = useTime();
   const dayLabelList = useRecord(ScheduleDay).keys.map((key) => {
     return {
       day: Number(key),
       label: ScheduleDay[Number(key)]
     } as { day: number, label: string };
-  })
+  });
+  const scheduleNetwork = new ScheduleNetwork();
 
   const createScheduleForm = useForm<z.infer<typeof CreateScheduleSchema>>({
     resolver: zodResolver(CreateScheduleSchema),
@@ -44,8 +47,8 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
       startDate: date || new Date(),
       endDate: date || new Date(),
       content: "",
-      startTime: getNowString(),
-      endTime: getNowString(),
+      startTime: getCurrentTimeString('standard'),
+      endTime: getCurrentTimeString('standard'),
       type: "once",
       status: "yet",
       style: getPaletteByKey('Black').style,
@@ -65,9 +68,47 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
     status,
     style,
     dayList,
-    participantList
+    // participantList
   } = createScheduleForm.watch();
   
+  const reqCreate = async () => {
+    if (isLoading) return;
+    const data = {
+      name,
+      startDate,
+      endDate,
+      content,
+      startTime: standardTimeToContinentalTime(startTime),
+      endTime: standardTimeToContinentalTime(endTime),
+      type: type as ScheduleType,
+      status: status as ScheduleStatus,
+      dayList,
+      style
+    };
+
+    const createPromise = scheduleNetwork.create(data);
+    setIsLoading(true);
+    toast.promise(
+      createPromise,
+      {
+        loading: '일정 생성 중입니다',
+        success: (res) => {
+          setIsLoading(false);
+          if (res.data.success) {
+            setMode('list');
+            return '일정이 생성되었습니다'
+          } else {
+            throw new Error(res.data.error);
+          }
+        },
+        error: (err: Error) => {
+          setIsLoading(false);
+          return err.message || "에러 발생";
+        }
+      }
+    )
+  }
+
   const selectColor = (color: ColorPaletteType) => {
     createScheduleForm.setValue('style', color.style);
     setColorPopoverOpen(false);
@@ -92,9 +133,9 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
     createScheduleForm.setValue(type, time);
   }
 
-  const selectParticipant = (participantList: string[]) => {
-    createScheduleForm.setValue('participantList', participantList);
-  }
+  // const selectParticipant = (participantList: string[]) => {
+  //   createScheduleForm.setValue('participantList', participantList);
+  // }
 
   const OnceContent = () => {
     return (
@@ -158,7 +199,7 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
         <div
           onClick={() => setMode('list')}
         >
-          <ArrowLeft />
+          <ArrowLeft className="stroke-indigo-100 hover:stroke-indigo-300 transition-all duration-150" />
         </div>
         <Controller
           name="name"
@@ -169,7 +210,7 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
                 {...field}
                 id="form-create-schedule-name"
                 placeholder="제목"
-                className="font-bold border-t-0 border-r-0 border-l-0 p-0 border-b-2 rounded-none shadow-none border-indigo-100 focus-visible:ring-0 focus-visible:border-b-indigo-300"
+                className="placeholder-indigo-200! font-bold border-t-0 border-r-0 border-l-0 p-0 border-b-2 rounded-none shadow-none border-indigo-100 focus-visible:ring-0 focus-visible:border-b-indigo-300"
                 style={{
                   fontSize: '20px'
                 }}
@@ -198,17 +239,21 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
           />
         </Popover>
       </div>
-      <Popover>
-        <PopoverTrigger asChild>
-          <div className="hover:bg-indigo-100 cursor-default w-full h-10 border border-indigo-100 flex justify-center items-center rounded-sm">
-            {ScheduleTypeLabel[type as keyof typeof ScheduleTypeLabel]}
-          </div>
-        </PopoverTrigger>
+      <ScrollArea
+        className={
+          cn(
+            "min-h-[125px] h-[calc(100vh/2.3-40px)]! w-full",
+          )
+        }
+      >
+        <div
+          className="w-full h-full flex! flex-col! gap-4!"
+        >
           <TypePickPopover
+            type={type as ScheduleType}
             setType={selectType}
             popoverSide={popoverSide}
           />
-        </Popover>
           <div
             className="w-full h-10"
           >
@@ -233,17 +278,43 @@ export const ScheduleCreateContent = ({ date, open, setMode, popoverSide, popove
                 {...field}
                 rows={2}
                 placeholder="일정 상세 사항"
-            className="placeholder-gray-300! focus-visible:placeholder-gray-400! border-indigo-100 focus-visible:border-indigo-300 resize-none focus-visible:ring-0"
+                className="placeholder-indigo-200! focus-visible:placeholder-indigo-300! border-indigo-100 focus-visible:border-indigo-300 resize-none focus-visible:ring-0"
                 style={{
                   'scrollbarWidth': 'none'
                 }}
               />
             )}
           />
-      <ParticipantPopover
+          {/* <ParticipantPopover
             participantList={participantList}
             setParticipantList={selectParticipant}
-      />
+          /> */}
+        </div>
+      </ScrollArea>
+      <div 
+        className="absolute w-full border-b border-l border-r rounded-b-md left-0 bottom-0 h-10 flex flex-row justify-start items-end p-0"
+      >
+        <Button
+          className={cn(
+            "h-full flex-5 rounded-none rounded-bl-md flex justify-center items-center",
+            "text-indigo-300 bg-white",
+            "hover:text-white hover:bg-indigo-300"
+          )}
+          type="button"
+          onClick={reqCreate}
+        >
+          추가
+        </Button>
+        <Button
+          className={cn(
+            "h-full flex-5 rounded-none rounded-br-md flex justify-center items-center",
+            "bg-white text-red-400",
+            "hover:text-white hover:bg-red-400"
+          )}
+        >
+          취소
+        </Button>
+      </div>
     </div>
   )
   

src/ui/component/popover/schedule/content/ScheduleListContent.tsx

@@ -0,0 +1,86 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ListScheduleSchema } from "@/data/form/schedule/listSchedule.schema";
+import { format } from "date-fns";
+import { List, PenSquare } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import type { ScheduleListContentProps } from "./ContentProps";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ScheduleNetwork } from "@/network/ScheduleNetwork";
+import type { ScheduleStatus } from "@/const/schedule/ScheduleStatus";
+import type { ScheduleType } from "@/const/schedule/ScheduleType";
+
+export const ScheduleListContent = ({ date, setMode, popoverAlign, popoverSide, open }: ScheduleListContentProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [scheduleList, setScheduleList] = useState([]);
+  const [filteredList, setFilteredList] = useState([]);
+  const scheduleNetwork = new ScheduleNetwork();
+
+  const listScheduleForm = useForm<z.infer<typeof ListScheduleSchema>>({
+    resolver: zodResolver(ListScheduleSchema),
+    defaultValues: {
+      name: undefined,
+      startDate: undefined,
+      endDate: undefined,
+      status: undefined,
+      typeList: undefined,
+      styleList: undefined
+    }
+  });
+
+  const {
+    name,
+    startDate,
+    endDate,
+    status,
+    typeList,
+    styleList
+  } = listScheduleForm.watch();
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    return (() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  const reqList = async () => {
+    const data = {
+      name,
+      startDate,
+      endDate,
+      status: status as ScheduleStatus | undefined,
+      styleList,
+      typeList: typeList as ScheduleType[] | undefined
+    };
+
+    const result = await scheduleNetwork.getList(data);
+
+  }
+
+  return (
+    <div className="w-full h-full flex flex-col gap-4">
+      <div className="relative w-full h-10 border-b border-b-indigo-300 flex flex-row items-center justify-center">
+        <span className="text-indigo-400">{date && format(date, "yyyy년 MM월 dd일")}</span>
+        <div className="absolute top-3 right-0.5 group">
+          <PenSquare
+            className="transition-all duration-150 group-hover:stroke-indigo-600 stroke-indigo-400"
+            size={18}
+            onClick={() => setTimeout(() => {setMode('create')}, 150)}
+          />
+        </div>
+      </div>
+      <div className="w-full h-[calc(100%-40px)]">
+        <ScrollArea
+          className="w-full h-full flex flex-col justify-start items-center"
+        >
+
+        </ScrollArea>
+      </div>
+    </div>
+  )
+}

vite.config.ts

@@ -9,7 +9,7 @@ const certPath = path.resolve(__dirname, 'certs');
 // https://vite.dev/config/
 export default defineConfig({
   server: {
-    host: '0.0.0.0',
+    // host: '0.0.0.0',
     port: 5185,
     https: {
       key: fs.readFileSync(path.join(certPath, 'localhost+2-key.pem')),