issue #60

- 일정 등록 및 조회 컴포넌트 설계 및 구현 중

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 { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { dateMatchModifiers, getDefaultClassNames } from "react-day-picker";
+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>

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>
+  )
+}

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 {