feat: 다크모드 추가

YJ0623 · YJ0623 · commit 449bf8141052 · 2026-03-19T13:20:53.000+09:00
diff --git a/vite-project/src/App.tsx b/vite-project/src/App.tsx
@@ -1,14 +1,34 @@
-import { useTodos } from "./hooks/useTodos"; // 경로 맞게 수정
-import { Calendar } from "./components/Calendar"; // 경로 맞게 수정
-import { TodoList } from "./components/TodoList";
+import { useTodos } from './hooks/useTodos'; // 경로 맞게 수정
+import { Calendar } from './components/Calendar'; // 경로 맞게 수정
+import { TodoList } from './components/TodoList';
+import { useDarkMode } from './hooks/useDarkMode';
 
 export default function App() {
-  const { todos, selectedDate, setSelectedDate, addTodo, toggleTodo, deleteTodo } = useTodos();
+  const {
+    todos,
+    selectedDate,
+    setSelectedDate,
+    addTodo,
+    toggleTodo,
+    deleteTodo,
+  } = useTodos();
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
 
   return (
-    <div className="w-full min-h-screen p-10 font-sans">
-      <h1 className="text-2xl font-bold mb-6">Todo List</h1>
-      
+    <div className="w-full min-h-screen p-10 font-sans dark:bg-darkbg dark:text-white">
+      <nav className="flex justify-between w-full text-2xl font-bold mb-6">
+        <h1>Todo List</h1>
+
+        <button
+          onClick={toggleDarkMode}
+          className={`w-8 h-8 rounded-[5px] cursor-pointer transition-colors duration-200 
+            ${isDarkMode ? 'bg-deepBlue' : 'bg-cream'}
+          `}
+        >
+          {isDarkMode ? '🌙' : '☀️'}
+        </button>
+      </nav>
+
       <div className="flex flex-wrap gap-8">
         <section className="flex-1 min-w-[300px] rounded-lg">
           <Calendar
@@ -18,19 +38,16 @@ export default function App() {
           />
         </section>
 
-        <section className="flex-1 min-w-[300px] p-6 border border-gray-200 rounded-lg">
-          <h2 className="text-xl font-semibold mb-4">{selectedDate} 할 일 목록</h2>
-          <div className="text-gray-500 mt-4">
-            <TodoList
+        <section className="flex-1 min-w-[300px] p-6 rounded-lg border border-px dark:border-none dark:bg-graybg shadow border-gray-200">
+          <TodoList
             todos={todos}
             selectedDate={selectedDate}
             addTodo={addTodo}
             toggleTodo={toggleTodo}
             deleteTodo={deleteTodo}
-            />
-          </div>
+          />
         </section>
       </div>
     </div>
   );
-}
+}
diff --git a/vite-project/src/components/Calendar.tsx b/vite-project/src/components/Calendar.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { TodoData } from '../../types/todo';
-import { getTodayDateString } from '../hooks/useTodos.ts'; // 경로 맞게 수정
+import { getTodayDateString } from '../hooks/useTodos.ts';
 
 interface CalendarProps {
   todos: TodoData;
@@ -42,17 +42,17 @@ export const Calendar = ({
   const weekDays = ['일', '월', '화', '수', '목', '금', '토'];
 
   return (
-    <div className="border border-gray-200 rounded-lg p-5 bg-white shadow-sm">
+    <div className="border border-gray-200 dark:border-none rounded-lg p-5 bg-white dark:bg-graybg dark:text-cream shadow-sm">
       {/* 1. 헤더 영역 */}
       <header className="mb-6">
-        <div className="text-sm text-gray-500 mb-6">
+        <div className="text-sm text-gray-500 dark:text-cream mb-6">
           오늘: {today.getFullYear()}년 {today.getMonth() + 1}월{' '}
           {today.getDate()}일
         </div>
         <div className="flex justify-between items-center">
           <button
             onClick={handlePrevMonth}
-            className="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
+            className="px-3 py-1 bg-gray-100 dark:bg-darkbg rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
           >
             &lt;
           </button>
@@ -61,7 +61,7 @@ export const Calendar = ({
           </h2>
           <button
             onClick={handleNextMonth}
-            className="px-3 py-1 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
+            className="px-3 py-1 bg-gray-100 dark:bg-darkbg rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
           >
             &gt;
           </button>
@@ -73,7 +73,15 @@ export const Calendar = ({
         {weekDays.map((day) => (
           <div
             key={day}
-            className={`font-semibold py-2 ${day === '일' ? 'text-red-600' : day === '토' ? 'text-blue-600' : 'text-gray-600'}`}
+            className={`font-semibold py-2 
+              ${
+                day === '일'
+                  ? 'text-red-600 dark:text-red-400'
+                  : day === '토'
+                    ? 'text-blue-600 dark:text-blue-400'
+                    : 'text-gray-600 dark:text-gray-300'
+              }
+            `}
           >
             {day}
           </div>
@@ -96,34 +104,41 @@ export const Calendar = ({
           const incompleteCount = dayTodos.filter(
             (todo) => !todo.isCompleted
           ).length;
+          const completedCount = dayTodos.length - incompleteCount;
 
           return (
             <div
               key={dateString}
               onClick={() => setSelectedDate(dateString)}
               className={`
-                min-h-[80px] p-2 rounded-md flex flex-col items-center cursor-pointer transition-all border
+                min-h-[80px] p-2 rounded-md flex flex-col items-center cursor-pointer transition-all dark:text-white border border-px dark:border-gray-600
                 ${
                   isSelected
-                    ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500'
-                    : 'border-gray-100 hover:bg-gray-50'
+                    ? 'border-blue-500 dark:border-deepBlue bg-blue-50 dark:bg-deepBlue ring-1 ring-blue-500'
+                    : 'border-gray-100 hover:bg-gray-50 dark:hover:bg-deepBlue'
                 }
               `}
             >
               <div
-                className={`font-medium ${isToday ? 'text-midBlue' : 'text-gray-800'}`}
+                className={`font-medium dark:text-white ${isToday ? 'text-midBlue' : 'text-gray-800'}`}
               >
                 {day}
               </div>
 
               {isToday && (
-                <span className="text-[10px] font-bold text-midBlue leading-none mt-1">
+                <span className="text-[10px] font-bold text-midBlue leading-none mt-1 mb-1">
                   today
                 </span>
               )}
 
+              {completedCount > 0 && (
+                <div className="text-xs text-deepBlue font-medium">
+                  완료: {completedCount}
+                </div>
+              )}
+
               {incompleteCount > 0 && (
-                <div className="text-xs text-deepBlue font-medium mt-auto mb-1">
+                <div className="text-xs text-deepBlue font-medium">
                   미완료: {incompleteCount}
                 </div>
               )}
diff --git a/vite-project/src/components/TodoList.tsx b/vite-project/src/components/TodoList.tsx
@@ -25,16 +25,20 @@ export const TodoList = ({
     setUserInput(e.target.value);
   };
 
-  const handleSubmit = () => {
+  // React.FormEvent는 이제 사용 비권장이 됐습니다. 공식 문서는 노션에 업로드해놓을테니 확인해봐도 좋을 것 같습니다.
+  const handleSubmit = (e: React.SubmitEvent) => {
+    e.preventDefault();
+
     if (!userInput.trim()) return;
 
     addTodo(selectedDate, userInput);
     setUserInput('');
   };
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2 h-[40px]">
+    <div className="flex flex-col gap-4 mt-4">
+      <h2 className="text-xl text-black dark:text-cream font-semibold mb-4">{selectedDate} 할 일 목록</h2>
+      <form onSubmit={handleSubmit} className="flex gap-2 h-[40px]">
         <input
           type="text"
           value={userInput}
@@ -43,30 +47,37 @@ export const TodoList = ({
           placeholder="새로운 할 일을 입력하세요"
         />
         <button
-          onClick={handleSubmit}
+          type="submit"
           className="bg-midBlue w-[100px] text-white px-4 py-2 rounded cursor-pointer"
         >
           추가
         </button>
-      </div>
+      </form>
 
       <ul className="flex flex-col gap-2 mt-4">
         {currentTodos.map((todo) => (
           <li
             key={todo.id}
             className="flex justify-between items-center border-b pb-2"
           >
-            <span className={`${todo.isCompleted === true ? 'text-gray-400 font-semibold line-through' : 'text-black font-semibold'}`}>{todo.title}</span>
+            <span
+              className={`${todo.isCompleted === true ? 'text-gray-400 font-semibold line-through' : 'text-black dark:text-cream font-semibold'}`}
+            >
+              {todo.title}
+            </span>
             <div className="flex gap-2 h-10">
               {!todo.isCompleted && (
                 <button
                   onClick={() => toggleTodo(selectedDate, todo.id)}
-                  className="w-[80px] border bg-deepBlue text-white rounded-lg cursor-pointer"
+                  className="w-[80px] border dark:border-none bg-deepBlue text-white rounded-lg cursor-pointer"
                 >
                   완료
                 </button>
               )}
-              <button onClick={() => deleteTodo(selectedDate, todo.id)} className='w-[80px] bg-white border rounded-lg cursor-pointer'>
+              <button
+                onClick={() => deleteTodo(selectedDate, todo.id)}
+                className="w-[80px] bg-white dark:bg-darkbg border dark:border-none rounded-lg cursor-pointer"
+              >
                 삭제
               </button>
             </div>
diff --git a/vite-project/src/hooks/useDarkMode.ts b/vite-project/src/hooks/useDarkMode.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react"
+
+export const useDarkMode = () => {
+    const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem('theme') === 'dark');
+
+    useEffect(() => {
+        if(isDarkMode) {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        }
+    }, [isDarkMode]);
+
+    const toggleDarkMode = () => {
+        setIsDarkMode(!isDarkMode);
+    }
+
+     return { isDarkMode, toggleDarkMode };
+}
diff --git a/vite-project/src/index.css b/vite-project/src/index.css
@@ -1,8 +1,14 @@
 @import 'tailwindcss';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
   --color-main: #f9f7f7;
+  --color-cream: #F9F7F7;
   --color-midBlue: #7aaace;
   --color-skyBlue: #dbe2ef;
   --color-deepBlue: #355872;
+
+  --color-darkbg: #222831;
+  --color-graybg: #393E46;
 }
