issue #60

- 일정 등록 및 조회 컴포넌트 설계 및 구현 중
2025-12-06 00:19:25 +09:00
parent 4a8e761b3d
commit 2c8dcf9db7
8 changed files with 95 additions and 31 deletions
--- a/src/const/ColorPalette.ts
+++ b/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: {
-    style: 'transprent',
-    main: true
+  Custom: {
+    index: 17,
+    style: 'transparent',
+    main: false
  }, 
 }
--- a/src/hooks/use-palette.ts
+++ b/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[] = [];
+    const paletteKeys = Object.keys(ColorPalette);
+    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];
--- a/src/layouts/Layout.tsx
+++ b/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">
--- a/src/ui/component/SideBar.tsx
+++ b/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>
  );
 }
--- a/src/ui/component/popover/ColorPickPopover.tsx
+++ b/src/ui/component/popover/ColorPickPopover.tsx
@@ -31,18 +31,17 @@ 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) => (
-              <div 
-                className="rounded-full w-5 h-5 border border-gray-300"
-                style={{ backgroundColor: `${palette.style}` }}
-                onClick={() => setColor(palette)}
-              />
-            ))}
-          </div>
-        ))}
+      {getSlicedList(mainPaletteList, 5).map((list) => (
+        <div className="flex flex-row gap-2.5">
+          {list.map((palette) => (
+            <div 
+              className="rounded-full w-5 h-5 border border-gray-300"
+              style={{ backgroundColor: `${palette.style}` }}
+              onClick={() => setColor(palette)}
+            />
+          ))}
+        </div>
+      ))}
      {
        !seeMore
        ? <div className="w-full" onClick={() => setSeeMore(true)}>더 보기</div>
@@ -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>
  )
 }
--- a/src/ui/component/popover/SchedulePopover.tsx
+++ b/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>
--- a/src/ui/page/account/login/LoginPage.tsx
+++ b/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 || "에러 발생"
+        }
      }
    );
  }
--- a/vite.config.ts
+++ b/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: [