From 0c8e0893c795b524d14651f494905de7acb10c9c Mon Sep 17 00:00:00 2001
From: Hyang-Dan <baekyangdan@naver.com>
Date: Fri, 5 Dec 2025 00:05:33 +0900
Subject: [PATCH] =?UTF-8?q?issue=20#60=20-=20=EC=9D=BC=EC=A0=95=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EB=B0=8F=20=EC=A1=B0=ED=9A=8C=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=A4=EA=B3=84=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/component/calendar/CustomCalendar.tsx | 33 +++++++++++++-------
 src/ui/component/popover/SchedulePopover.tsx | 22 +++++++++++++
 src/ui/page/account/login/LoginPage.tsx      |  7 +++--
 3 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 src/ui/component/popover/SchedulePopover.tsx

diff --git a/src/ui/component/calendar/CustomCalendar.tsx b/src/ui/component/calendar/CustomCalendar.tsx
index e7cbbbd..5822664 100644
--- a/src/ui/component/calendar/CustomCalendar.tsx
+++ b/src/ui/component/calendar/CustomCalendar.tsx
@@ -1,7 +1,8 @@
 import { cn } from "@/lib/utils";
 import { Calendar } from "@/components/ui/calendar";
-import { useLayoutEffect, useRef, useState } from "react";
-import { dateMatchModifiers, getDefaultClassNames } from "react-day-picker";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { getDefaultClassNames } from "react-day-picker";
+import { ScheduleSheet } from "../popover/SchedulePopover";
 
 interface CustomCalendarProps {
   data?: any;
@@ -9,6 +10,8 @@ interface CustomCalendarProps {
 
 export const CustomCalendar = ({ data }: CustomCalendarProps) => {
   const [weekCount, setWeekCount] = useState(5);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [sheetOpen, setSheetOpen] = useState(false);
   const defaultClassNames = getDefaultClassNames();
   const containerRef = useRef<HTMLDivElement>(null);
   const updateWeekCount = () => {
@@ -24,26 +27,29 @@ export const CustomCalendar = ({ data }: CustomCalendarProps) => {
     updateWeekCount();
   }, []);
 
+  useEffect(() => {
+    setSheetOpen(!!selectedDate);
+  }, [selectedDate]);
+
   return (
     <div
       className="w-full h-full"
       ref={containerRef}
     >
+      <ScheduleSheet
+        open={sheetOpen} setOpen={setSheetOpen} date={selectedDate}
+      />
       <Calendar 
         mode="single"
         className="h-full w-full border rounded-lg"
+        selected={selectedDate}
+        onSelect={setSelectedDate}
         onMonthChange={() => {
           // month 바뀐 직후 DOM 변화가 생기므로 다음 프레임에서 계산
           requestAnimationFrame(() => {
             updateWeekCount();
           });
         }}
-        labels={{
-          labelDayButton: (date, modifiers) => {
-            console.log(modifiers);
-            return `${date.getDate()}`
-          }
-        }}
         classNames={{
           months: cn(
             defaultClassNames.months,
@@ -79,21 +85,24 @@ export const CustomCalendar = ({ data }: CustomCalendarProps) => {
           ),
           day_button: cn(
             defaultClassNames.day_button,
-            "h-full w-full flex p-2 justify-start items-start"
+            "h-full w-full flex p-2 justify-start items-start",
+            "hover:bg-transparent",
+            "data-[selected-single=true]:bg-transparent data-[selected-single=true]:text-black"
           ),
           selected: cn(
             defaultClassNames.selected,
-            "h-full"
+            "h-full border-0 fill-transparent"
           ),
           today: cn(
             defaultClassNames.today,
             "h-full"
-          )
+          ),
+          
         }}
         styles={{
           day: {
             height: `calc(100%/${weekCount})`
-          }
+          },
         }}
       />
     </div>
diff --git a/src/ui/component/popover/SchedulePopover.tsx b/src/ui/component/popover/SchedulePopover.tsx
new file mode 100644
index 0000000..c3cb335
--- /dev/null
+++ b/src/ui/component/popover/SchedulePopover.tsx
@@ -0,0 +1,22 @@
+import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
+import { useEffect, useState } from 'react';
+
+interface ScheduleSheetProps {
+  date: Date | undefined;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const ScheduleSheet = ({ date, open, setOpen }: ScheduleSheetProps) => {
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent
+        className="md:w-[500px] sm:w-[400px] lg:w-[600px]"
+        side="right"
+        
+      >
+        <SheetHeader></SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/src/ui/page/account/login/LoginPage.tsx b/src/ui/page/account/login/LoginPage.tsx
index 7e7551e..c7fffaf 100644
--- a/src/ui/page/account/login/LoginPage.tsx
+++ b/src/ui/page/account/login/LoginPage.tsx
@@ -21,7 +21,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 
 export default function LoginPage() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [autoLogin, setAutoLogin] = useState<boolean>(false);
+  const [autoLogin, setAutoLogin] = useState<boolean>(localStorage.getItem('autoLogin') === 'true');
   const { login } = useAuthStore();
   const isMobile = useIsMobile();
   const navigate = useNavigate();
@@ -36,7 +36,7 @@ export default function LoginPage() {
   const { id, password } = { id: loginForm.watch('id'), password: loginForm.watch('password') };
 
   useEffect(() => {
-    localStorage.setItem('autoLogin', `${autoLogin}`)
+    localStorage.setItem('autoLogin', `${autoLogin}`);
   }, [autoLogin]);
 
   const moveToSignUpPage = useCallback(() => {
@@ -74,6 +74,9 @@ export default function LoginPage() {
                 refreshToken: res.data.refreshToken!
               };
               login({...data});
+              if (autoLogin) {
+                localStorage.setItem('auth-storage', JSON.stringify({ state: data }));
+              }
               moveToHomePage();
               return "로그인 성공";
             } else {