Merge pull request #84 from codeit-sprint-part3-6team/#81_모달_대시보드-생성

#81 모달 대시보드 생성

Author: dlwnsl

package-lock.json

@@ -20,6 +20,7 @@
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.13",
     "next": "15.0.3",
+    "overlay-kit": "^1.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",

package.json

@@ -39,6 +39,74 @@
   color: var(--black-medium);
 }
 
+.modal {
+  background-color: var(--white);
+  width: 584px;
+  height: 344px;
+  padding: 32px;
+  border-radius: 10px;
+}
+
+.modal h2 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--black-medium);
+}
+
+.modal h3 {
+  margin-top: 24px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.modal input {
+  margin-top: 8px;
+  border: 1px solid var(--gray-medium);
+  width: 100%;
+  padding: 15px 16px;
+  border-radius: 8px;
+}
+
+.modal input::placeholder {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--black-medium);
+}
+
+.color-picker {
+  margin-top: 16px;
+  margin-bottom: 40px;
+  display: flex;
+  gap: 8px;
+}
+
+.color-circle:hover {
+  cursor: pointer;
+}
+
+.color-picker .color-circle {
+  width: 30px;
+  height: 30px;
+  border: none;
+  margin: 0;
+  position: relative;
+}
+
+.color-selected::after {
+  content: '✓';
+  font-size: 18px;
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal-buttons {
+  display: flex;
+  gap: 8px;
+}
+
 @media screen and (max-width: 1199px) {
   .dashboard-container {
     margin-left: 200px;
@@ -64,4 +132,21 @@
   .pagination {
     max-width: 260px;
   }
+
+  .modal {
+    width: 327px;
+    height: 312px;
+  }
+
+  .modal h2 {
+    font-size: 20px;
+  }
+
+  .modal h3 {
+    font-size: 16px;
+  }
+
+  .modal input::placeholder {
+    font-size: 14px;
+  }
 }

src/components/product/mydashboard/DashboardList.module.css

@@ -1,47 +1,82 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import getDashboards from '@/lib/mydashboard/getDashboard';
+import postDashboards from '@/lib/mydashboard/postDashboard';
 import CDSButton from '@/components/common/button/CDSButton';
+import OverlayContainer from '@/components/common/modal/overlay-container/OverlayContainer';
 import styles from './DashboardList.module.css';
 
 export default function DashboardList() {
   const [dashboards, setDashboards] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
 
+  const [showModal, setShowModal] = useState(false);
+  const [newDashboardName, setNewDashboardName] = useState('');
+  const [selectedColor, setSelectedColor] = useState('#7ac555');
+  const [isLoading, setIsLoading] = useState(false);
+
   const router = useRouter();
 
-  // 대시보드 클릭 이벤트
+  const colors = ['#7ac555', '#760dde', '#ffa500', '#76a5ea', '#e876ea'];
+
   const handleClick = (dashboardId) => {
-    router.push(`/dashboards/${dashboardId}`);
+    router.push(`/dashboard/${dashboardId}`);
   };
 
-  // 페이지네이션 변경 이벤트
   const handlePageChange = (newPage) => {
     if (newPage > 0 && newPage <= totalPages) {
       setCurrentPage(newPage);
     }
   };
 
-  useEffect(() => {
-    // 대시보드 데이터 불러오기
-    const fetchDashboards = async () => {
-      const response = await getDashboards({
-        page: currentPage,
-        size: 5,
-        navigationMethod: 'pagination',
+  const openModal = () => setShowModal(true);
+  const closeModal = () => {
+    setShowModal(false);
+    setSelectedColor('#7ac555');
+    setNewDashboardName('');
+  };
+
+  const fetchDashboards = async () => {
+    const response = await getDashboards({
+      page: currentPage,
+      size: 5,
+      navigationMethod: 'pagination',
+    });
+    setDashboards(response.dashboards);
+    setTotalPages(Math.ceil(response.totalCount / 5));
+  };
+
+  const handleNewDashboard = async () => {
+    if (!newDashboardName.trim()) {
+      alert('대시보드 이름을 입력해주세요.');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await postDashboards({
+        title: newDashboardName,
+        color: selectedColor,
       });
-      setDashboards(response.dashboards);
-      setTotalPages(Math.ceil(response.totalCount / 5));
-    };
+      closeModal();
+      fetchDashboards();
+    } catch (error) {
+      alert(error.message || '대시보드 생성에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
+  useEffect(() => {
     fetchDashboards();
   }, [currentPage]);
+
   return (
     <div className={styles['dashboard-container']}>
-      {/* 대시보드 목록 */}
       <ul className={styles['dashboard-list']}>
-        <CDSButton btnType="dashboard_add" onClick={() => handleClick('new')}>
+        <CDSButton btnType="dashboard_add" onClick={openModal}>
           새로운 대시보드
         </CDSButton>
         {dashboards.map((item) => (
@@ -76,6 +111,57 @@ export default function DashboardList() {
           />
         </div>
       </div>
+
+      {/* 모달창 */}
+      {showModal && (
+        <OverlayContainer>
+          <div className={styles.modal}>
+            <h2>새로운 대시보드</h2>
+            <h3>대시보드 이름</h3>
+            <input
+              type="text"
+              placeholder="대시보드 이름을 입력해주세요"
+              value={newDashboardName}
+              onChange={(e) => setNewDashboardName(e.target.value)}
+              className={styles['modal-input']}
+              disabled={isLoading}
+            />
+
+            {/* 색상 선택 UI */}
+            <div className={styles['color-picker']}>
+              {colors.map((color) => (
+                <button
+                  type="button"
+                  key={color}
+                  className={`${styles['color-circle']} ${
+                    color === selectedColor ? styles['color-selected'] : ''
+                  }`}
+                  style={{ backgroundColor: color }}
+                  onClick={() => setSelectedColor(color)}
+                  aria-label={`색상 선택: ${color}`}
+                />
+              ))}
+            </div>
+
+            <div className={styles['modal-buttons']}>
+              <CDSButton
+                btnType="modal"
+                onClick={closeModal}
+                disabled={isLoading}
+              >
+                취소
+              </CDSButton>
+              <CDSButton
+                btnType="modal_colored"
+                onClick={handleNewDashboard}
+                disabled={isLoading}
+              >
+                {isLoading ? '생성 중...' : '생성'}
+              </CDSButton>
+            </div>
+          </div>
+        </OverlayContainer>
+      )}
     </div>
   );
 }

src/components/product/mydashboard/DashboardList.tsx

@@ -0,0 +1,45 @@
+import instance from '../instance';
+
+interface PostDashboardsParams {
+  title: string;
+  color: string;
+}
+
+interface PostDashboardsResponse {
+  id: number;
+  title: string;
+  color: string;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
+  userId: number;
+}
+
+export default async function postDashboards(
+  params: PostDashboardsParams,
+): Promise<PostDashboardsResponse> {
+  try {
+    const { title, color } = params;
+
+    const { data } = await instance.post<PostDashboardsResponse>(
+      `/11-6/dashboards`,
+      {
+        title,
+        color,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    return data;
+  } catch (error) {
+    if (error.response) {
+      throw new Error(
+        error.response.data.message || '대시보드 등록에 실패했습니다.',
+      );
+    }
+    throw new Error('대시보드 등록 요청 중 문제가 발생했습니다.');
+  }
+}