issue #60

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

src/const/ColorPalette.ts

@@ -1,4 +1,5 @@
 export type ColorPaletteType = {
+  index: number;
   style: string;
   main: boolean;
 }
@@ -6,75 +7,93 @@ export type ColorPaletteType = {
 
 export const ColorPalette: Record<any, ColorPaletteType> = {
   Black: {
+    index: 0,
     style: '#000000',
     main: true
   },
   White: {
+    index: 1,
     style: '#FFFFFF',
     main: true
   },
   PeachCream: {
+    index: 2,
     style: '#FFDAB9',
     main: false
   },
   CoralPink: {
+    index: 3,
     style: '#F08080',
     main: true
   },
   MintIcing: {
+    index: 4,
     style: '#C1E1C1',
     main: false
   },
   Vanilla: {
+    index: 5,
     style: '#FFFACD',
     main: true
   },
   Wheat: {
+    index: 6,
     style: '#F5DEB3',
     main: false
   },
   AliceBlue: {
+    index: 7,
     style: '#F0F8FF',
     main: true
   },
   Lavender: {
+    index: 8,
     style: '#E6E6FA',
     main: false
   },
   LightAqua: {
+    index: 9,
     style: '#A8E6CF',
     main: true
   },
   CloudWhite: {
+    index: 10,
     style: '#F0F8FF',
     main: false
   },
   LightGray: {
+    index: 11,
     style: '#D3D3D3',
     main: true
   },
   LightKhakki: {
+    index: 12,
     style: '#F0F8E6',
     main: false
   },
   DustyRose: {
+    index: 13,
     style: '#D8BFD8',
-    main: false
+    main: true
   },
   CreamBeige: {
+    index: 14,
     style: '#FAF0E6',
     main: true,
   },
   Oatmeal: {
+    index: 15,
     style: '#FDF5E6',
     main: false
   },
   CharcoalLight: {
+    index: 16,
     style: '#A9A9A9',
     main: true
   },
-  custom: {
+  Custom: {
-    style: 'transprent',
+    index: 17,
-    main: true
+    style: 'transparent',
+    main: false
   }, 
 }

src/hooks/use-palette.ts

@@ -9,7 +9,7 @@ export function usePalette() {
 
   const getMainPaletteList = () => {
     const paletteKeys = Object.keys(ColorPalette);
-    const paletteList: ColorPaletteType[] = [];
+    let paletteList: ColorPaletteType[] = [];
     paletteKeys.forEach((paletteKey) => {
       const key = paletteKey as keyof typeof ColorPalette;
       const palette: ColorPaletteType = ColorPalette[key];
@@ -18,12 +18,14 @@ export function usePalette() {
       }
     });
 
+    paletteList = paletteList.sort((a, b) => a.index - b.index);
+    
     return paletteList;
   }
 
   const getExtraPaletteList = () => {
     const paletteKeys = Object.keys(ColorPalette);
-    const paletteList: ColorPaletteType[] = [];
+    let paletteList: ColorPaletteType[] = [];
     paletteKeys.forEach((paletteKey) => {
       const key = paletteKey as keyof typeof ColorPalette;
       const palette: ColorPaletteType = ColorPalette[key];
@@ -31,11 +33,11 @@ export function usePalette() {
         paletteList.push(palette);
       }
     });
-
+    paletteList = paletteList.sort((a, b) => a.index - b.index);
     return paletteList;
   }
 
-  const getAllPaletteList = [...getMainPaletteList(), ...getExtraPaletteList()];
+  const getAllPaletteList = [...getMainPaletteList(), ...getExtraPaletteList()].sort((a, b) => a.index - b.index);
 
   const getPaletteByKey = (key: keyof typeof ColorPalette) => {
     return ColorPalette[key];

src/layouts/Layout.tsx

@@ -1,5 +1,5 @@
 import SideBar from "@/ui/component/SideBar";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import Header from "@/ui/component/Header";
 import { useAuthStore } from '@/store/authStore';
@@ -11,9 +11,22 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react";
+import { useState } from "react";
 
 export default function Layout() {
   const { authData } = useAuthStore();
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+  const pathname = location.pathname;
+
+  const goTo = (path: string) => {
+    console.log(path);
+    console.log(pathname);
+    if (path === pathname) return;
+    navigate(path);
+    setOpen(false);
+  }
+
   return (
     <>
       <Toaster
@@ -27,10 +40,11 @@ export default function Layout() {
         }}
       />
       <SidebarProvider
-        defaultOpen={false}
+        open={open}
+        onOpenChange={setOpen}
         id="root"
       >
-        <SideBar />
+        <SideBar goTo={goTo} />
         <div className="flex flex-col w-full h-full">
           { authData ? <Header /> : null}
           <div className="w-full h-full p-2.5">

src/ui/component/SideBar.tsx

@@ -5,11 +5,20 @@ import {
   SidebarFooter,
   SidebarHeader
 } from '@/components/ui/sidebar';
+import { PageRouting } from '@/const/PageRouting';
+
+interface SideBarProps {
+  goTo: (path: string) => void;
+}
+export default function SideBar({ goTo } : SideBarProps) {
 
-export default function SideBar() {
   return (
     <Sidebar forceSheet={true}>
-      
+      <SidebarHeader></SidebarHeader>
+      <SidebarContent className="flex flex-col p-4 cursor-default">
+        <div onClick={() => goTo(PageRouting["HOME"].path)}>Home</div>
+        <div onClick={() => goTo(PageRouting["SCHEDULES"].path)}>Schedules</div>
+      </SidebarContent>
     </Sidebar>
   );
 }

src/ui/component/popover/ColorPickPopover.tsx

@@ -31,7 +31,6 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
     <PopoverContent
       className="flex flex-col gap-1.5 w-fit"
     >
-
       {getSlicedList(mainPaletteList, 5).map((list) => (
         <div className="flex flex-row gap-2.5">
           {list.map((palette) => (
@@ -52,7 +51,10 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
               {list.map((palette) => (
                 <div 
                   className="rounded-full w-5 h-5 border border-gray-300"
-                  style={{ backgroundColor: `${palette.style}` }}
+                  style={{
+                    backgroundColor: `${palette.style !== 'transparent' && palette.style}`,
+                    background: `${palette.style === 'transparent' &&  'linear-gradient(135deg, black 50%, white 50%)' }`
+                  }}
                   onClick={() => setColor(palette)}
                 />
               ))}
@@ -60,6 +62,11 @@ export const ColorPickPopover = ({ setColor }: ColorPickPopoverProps) => {
           ))}
         </>
       }
+      {
+        seeMore
+        ? <div className="w-full" onClick={() => setSeeMore(false)}>접기</div>
+        : null
+      }
     </PopoverContent>
   )
 }

src/ui/component/popover/SchedulePopover.tsx

@@ -6,6 +6,7 @@ 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';
 
 interface ScheduleSheetProps {
   date: Date | undefined;
@@ -43,15 +44,16 @@ export const SchedulePopover = ({ date, popoverSide, popoverAlign }: ScheduleShe
           )
         }
       >
-        <div className="w-full flex flex-row space-between gap-1.5">
+        <div className="w-full flex flex-row justify-center items-center gap-4">
           <Popover open={colorPopoverOpen} onOpenChange={setColorPopoverOpen}>
             <PopoverTrigger asChild>
               <div
                 className={cn(
-                  'rounded-full w-5 h-5 border border-gray-300',
+                  'rounded-full w-5 h-5 border-2 border-gray-300',
                 )}
                 style={{
-                  backgroundColor: `${scheduleColor.style}`
+                  backgroundColor: `${scheduleColor.style !== 'transparent' && scheduleColor.style}`,
+                  background: `${scheduleColor.style === 'transparent' &&  'linear-gradient(135deg, black 50%, white 50%)' }`
                 }}
               />
             </PopoverTrigger>
@@ -59,6 +61,13 @@ export const SchedulePopover = ({ date, popoverSide, popoverAlign }: ScheduleShe
               setColor={selectColor}
             />
           </Popover>
+          <Input
+            placeholder="제목"
+            className="font-bold border-t-0 border-r-0 border-l-0 p-0 border-b-2 rounded-none shadow-none border-indigo-300 focus-visible:ring-0 focus-visible:border-b-indigo-500"
+            style={{
+              fontSize: '20px'
+            }}
+          />
         </div>
       </ScrollArea>
     </PopoverContent>

src/ui/page/account/login/LoginPage.tsx

@@ -83,7 +83,10 @@ export default function LoginPage() {
               throw new Error(res.data.message);
             }
         },
-        error: (err: Error) => err.message || "에러 발생"
+        error: (err: Error) => {
+          setIsLoading(false);
+          return err.message || "에러 발생"
+        }
       }
     );
   }

vite.config.ts

@@ -5,6 +5,7 @@ import path from 'path'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    host: '0.0.0.0',
     port: 5185
   },
   plugins: [