From 87c31a4dad4bf1be87a4e7ff075b83b56971c955 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sat, 14 Jun 2025 04:30:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/check.svg                       |   3 +
 src/app/globals.css                           |   3 +
 .../components/common/sidebar/Sidebar.tsx     |   6 +-
 .../sidebar/modal/CreateDashboardModal.tsx    | 154 ++++++++++++++++++
 src/app/shared/lib/axios.ts                   |   3 +-
 src/app/shared/store/.gitkeep                 |   0
 src/app/shared/store/useModalStore.ts         |  14 ++
 src/app/shared/types/dashboard.ts             |   7 +
 src/app/tester/page.tsx                       |  17 ++
 9 files changed, 204 insertions(+), 3 deletions(-)
 create mode 100644 public/images/check.svg
 create mode 100644 src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
 delete mode 100644 src/app/shared/store/.gitkeep
 create mode 100644 src/app/shared/store/useModalStore.ts

diff --git a/public/images/check.svg b/public/images/check.svg
new file mode 100644
index 0000000..3adb08a
--- /dev/null
+++ b/public/images/check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.54972 15.15L18.0247 6.675C18.2247 6.475 18.4622 6.375 18.7372 6.375C19.0122 6.375 19.2497 6.475 19.4497 6.675C19.6497 6.875 19.7497 7.1125 19.7497 7.3875C19.7497 7.6625 19.6497 7.9 19.4497 8.1L10.2497 17.3C10.0497 17.5 9.81639 17.6 9.54972 17.6C9.28305 17.6 9.04972 17.5 8.84972 17.3L4.54972 13C4.34972 12.8 4.25389 12.5625 4.26222 12.2875C4.27055 12.0125 4.37472 11.775 4.57472 11.575C4.77472 11.375 5.01222 11.275 5.28722 11.275C5.56222 11.275 5.79972 11.375 5.99972 11.575L9.54972 15.15Z" fill="white"/>
+</svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index f05ac09..6b4e757 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,6 +22,9 @@ body {
 .BG-blue {
   @apply bg-[#83C8FA] hover:bg-[#5FBBFF] dark:bg-[#228DFF] dark:hover:bg-[#2172C9];
 }
+.BG-violet {
+  @apply bg-[#228DFF];
+}
 .Text-black {
   @apply text-[#333236] dark:text-[#FFFFFF];
 }
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 5c3ea94..3d045d0 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -4,12 +4,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 
+import { useModalStore } from '@/app/shared/store/useModalStore'
+
 import CreateDashboardButton from './CreateDashboardButton'
 import DashboardItem from './DashboardItem'
 
 export default function Sidebar(): JSX.Element {
   const pathname = usePathname()
   const router = useRouter()
+  const { openCreateDashboardModal } = useModalStore()
 
   // TODO: 목데이터 - API 연동시 삭제예정
   const mockDashboards = [
@@ -65,8 +68,7 @@ export default function Sidebar(): JSX.Element {
   }
 
   const handleCreateDashboard = () => {
-    // TODO: 대시보드 생성 모달 열기
-    console.log('대시보드 생성 모달 열기임')
+    openCreateDashboardModal()
   }
   return (
     <aside className="BG-white Border-section fixed left-0 top-0 h-screen w-300 overflow-y-auto">
diff --git a/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx b/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
new file mode 100644
index 0000000..a69ae7d
--- /dev/null
+++ b/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+
+import api from '@/app/shared/lib/axios'
+import { useModalStore } from '@/app/shared/store/useModalStore'
+import { CreateDashboardRequest } from '@/app/shared/types/dashboard'
+
+const DASHBOARD_COLORS = ['#10B981', '#8B5CF6', '#F59E0B', '#3B82F6', '#EC4899']
+
+export default function CreateDashboardModal() {
+  const router = useRouter()
+  const { createDashboardModalOpen, closeCreateDashboardModal } =
+    useModalStore()
+
+  const [formData, setFormData] = useState<CreateDashboardRequest>({
+    title: '',
+    color: DASHBOARD_COLORS[0],
+  })
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  if (!createDashboardModalOpen) {
+    return null
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!formData.title || !formData.color) {
+      return
+    }
+    try {
+      setIsSubmitting(true)
+
+      const response = await api.post(`/dashboards`, formData)
+
+      const data = response.data
+
+      // 성공 시 대시보드 상세 페이지로 이동
+      router.push(`/dashboard/${data.id}`)
+      closeCreateDashboardModal()
+    } catch (error) {
+      console.error('대시보드 생성 오류:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  // 입력값 변경 처리
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  // 색상 선택 처리
+  const handleColorSelect = (color: string) => {
+    setFormData((prev) => ({ ...prev, color }))
+  }
+
+  // 모달 외부 클릭 시 닫기
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      closeCreateDashboardModal()
+    }
+  }
+
+  return (
+    // 모달 백드롭
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={handleBackdropClick}
+    >
+      {/* 모달 컨테이너 */}
+      <div className="BG-white h-344 w-584 rounded-16 p-32">
+        <h2 className="Text-black mb-24 text-24 font-bold">새로운 대시보드</h2>
+
+        <form onSubmit={handleSubmit}>
+          {/* 제목 입력 */}
+          <div className="mb-24">
+            <label htmlFor="title" className="Text-black mb-8 block text-18">
+              대시보드 이름
+            </label>
+            <input
+              type="text"
+              id="title"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              placeholder="대시보드 이름을 입력해주세요."
+              className="Border-section w-full rounded-8 px-12 py-10 text-16 outline-none"
+              required
+            />
+          </div>
+
+          {/* 색상 선택 */}
+          <div className="mb-32">
+            <div className="flex gap-8">
+              {DASHBOARD_COLORS.map((color) => (
+                <button
+                  key={color}
+                  type="button"
+                  onClick={() => handleColorSelect(color)}
+                  className="relative flex size-30 items-center justify-center rounded-full"
+                  style={{ backgroundColor: color }}
+                  aria-label={`색상 ${color}`}
+                >
+                  {/* 선택된 색상 체크 */}
+                  {formData.color === color && (
+                    <div className="relative size-24 items-center justify-center">
+                      <Image
+                        src="/images/check.svg"
+                        alt="check"
+                        fill
+                        className="object-contain"
+                      />
+                    </div>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 하단 버튼 */}
+          <div className="flex justify-end gap-10">
+            <button
+              type="button"
+              onClick={closeCreateDashboardModal}
+              className="Border-btn Text-black h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold"
+            >
+              취소
+            </button>
+            <button
+              type="submit"
+              disabled={!formData.title || !formData.color || isSubmitting}
+              className={`BG-violet h-54 w-256 rounded-8 px-16 py-10 text-16 font-semibold text-white transition-opacity ${
+                !formData.title || !formData.color || isSubmitting
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'hover:opacity-90'
+              }`}
+            >
+              생성
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/shared/lib/axios.ts b/src/app/shared/lib/axios.ts
index 97868fa..877f873 100644
--- a/src/app/shared/lib/axios.ts
+++ b/src/app/shared/lib/axios.ts
@@ -1,6 +1,7 @@
 import axios from 'axios'
-import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
+
 import { AUTH_ENDPOINT } from '@/app/features/auth/api/authEndpoint'
+import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
 
 const api = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
diff --git a/src/app/shared/store/.gitkeep b/src/app/shared/store/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/shared/store/useModalStore.ts b/src/app/shared/store/useModalStore.ts
new file mode 100644
index 0000000..8564e8b
--- /dev/null
+++ b/src/app/shared/store/useModalStore.ts
@@ -0,0 +1,14 @@
+import { create } from 'zustand'
+
+import { ModalState } from '../types/dashboard'
+
+export const useModalStore = create<ModalState>((set) => ({
+  // 초기 상태
+  createDashboardModalOpen: false,
+
+  // 모달 열기
+  openCreateDashboardModal: () => set({ createDashboardModalOpen: true }),
+
+  // 모달 닫기
+  closeCreateDashboardModal: () => set({ createDashboardModalOpen: false }),
+}))
diff --git a/src/app/shared/types/dashboard.ts b/src/app/shared/types/dashboard.ts
index e851234..1e3cfb0 100644
--- a/src/app/shared/types/dashboard.ts
+++ b/src/app/shared/types/dashboard.ts
@@ -32,3 +32,10 @@ export interface CreateDashboardRequest {
   title: string
   color: string
 }
+
+// 대시보드 생성 모달
+export interface ModalState {
+  createDashboardModalOpen: boolean
+  openCreateDashboardModal: () => void
+  closeCreateDashboardModal: () => void
+}
diff --git a/src/app/tester/page.tsx b/src/app/tester/page.tsx
index eae818f..88694ba 100644
--- a/src/app/tester/page.tsx
+++ b/src/app/tester/page.tsx
@@ -1,8 +1,13 @@
+'use client'
+
 import Image from 'next/image'
 
 import Sidebar from '@/app/shared/components/common/sidebar/Sidebar'
 import ThemeToggle from '@/app/shared/components/ThemeToggle'
 
+import CreateDashboardModal from '../shared/components/common/sidebar/modal/CreateDashboardModal'
+import { useModalStore } from '../shared/store/useModalStore'
+
 //<초기 설정 안내>
 
 // 이미지 파일에 접근할 때: /images/파일명
@@ -17,6 +22,8 @@ import ThemeToggle from '@/app/shared/components/ThemeToggle'
 // globals.css에 작성한 커스텀 유틸 클래스(@apply) 참고해서, 클래스명 가져다 사용하거나 직접 커스텀
 
 export default function Home() {
+  const { openCreateDashboardModal } = useModalStore()
+
   return (
     <div className="flex">
       {/* 사이드바 */}
@@ -29,6 +36,16 @@ export default function Home() {
           <h1 className="mb-16 text-24 font-bold">Sidebar 테스트 페이지</h1>
           <p className="Text-gray mb-20">왼쪽에 사이드바 만들어보자잇!</p>
           <ThemeToggle />
+
+          {/* 모달 테스트 버튼 */}
+          <button
+            onClick={openCreateDashboardModal}
+            className="BG-blue mt=12 rounded-6 px-16 py-10 text-white"
+          >
+            대시보드 생성 모달 테스트
+          </button>
+          {/* 모달 버튼 컴포넌트 추가 */}
+          <CreateDashboardModal />
         </div>
 
         {/* 기존 테스트 요소들 */}

From 8949cf9b4aaf8313874b8934f21faa8a12198865 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Sat, 14 Jun 2025 16:35:08 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=9E=AC=EC=98=A4=ED=94=88=20=EC=8B=9C=20=ED=8F=BC=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=98=A4=ED=83=80=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/sidebar/modal/CreateDashboardModal.tsx        | 9 ++++++++-
 src/app/tester/page.tsx                                  | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx b/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
index a69ae7d..aaa7143 100644
--- a/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
+++ b/src/app/shared/components/common/sidebar/modal/CreateDashboardModal.tsx
@@ -2,7 +2,7 @@
 
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import api from '@/app/shared/lib/axios'
 import { useModalStore } from '@/app/shared/store/useModalStore'
@@ -22,6 +22,13 @@ export default function CreateDashboardModal() {
 
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  useEffect(() => {
+    if (!createDashboardModalOpen) {
+      setFormData({ title: '', color: DASHBOARD_COLORS[0] })
+      setIsSubmitting(false)
+    }
+  }, [createDashboardModalOpen])
+
   if (!createDashboardModalOpen) {
     return null
   }
diff --git a/src/app/tester/page.tsx b/src/app/tester/page.tsx
index 88694ba..b5e4cc2 100644
--- a/src/app/tester/page.tsx
+++ b/src/app/tester/page.tsx
@@ -40,7 +40,7 @@ export default function Home() {
           {/* 모달 테스트 버튼 */}
           <button
             onClick={openCreateDashboardModal}
-            className="BG-blue mt=12 rounded-6 px-16 py-10 text-white"
+            className="BG-blue mt-12 rounded-6 px-16 py-10 text-white"
           >
             대시보드 생성 모달 테스트
           </button>