[week02] 주노 2주차 미션2

week02/Juno/package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "clsx": "^2.1.1",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.2.2",
+    "theme": "^0.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

week02/Juno/src/App.tsx

@@ -1,14 +1,11 @@
 import './App.css'
-import Todo from './components/Todo'
-import { TodoProvider } from './components/TodoContext'
+import { ContextPage } from './pages/ContextPage'
 
 function App() {
 
   return (
     <>
-      <TodoProvider>
-        <Todo />
-      </TodoProvider>
+      <ContextPage />
     </>
   )
 }

week02/Juno/src/components/Navbar.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { THEME, useTheme } from '../context/ThemeProvider';
+import { ThemeToggleButton } from './ThemeToggleButton';
+
+export const Navbar = () => {
+    const {theme} = useTheme();
+
+    const isLightMode = theme === THEME.LIGHT;
+
+    return (
+        <nav
+            className={clsx(
+                'p-4 w-full flex justify-end',
+                isLightMode ? 'bg-white' : 'bg-gray-800'
+            )}
+        >
+            <ThemeToggleButton />
+        </nav>
+    );
+};

week02/Juno/src/components/ThemeContent.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import { useTheme } from '../context/ThemeProvider';
+import { themeClasses } from '../theme/styles';
+
+export const ThemeContent = () => {
+    const { theme } = useTheme();
+
+    return (
+        <div
+            className={clsx(
+                'p-4 h-dvh w-full',
+                themeClasses.background[theme] 
+            )}
+        >
+            <h1
+                className={clsx(
+                    'text-wxl font-bold',
+                    themeClasses.text[theme] 
+                )}
+            >
+                Theme Content
+            </h1>
+            <p className={clsx('mt-2', themeClasses.text[theme])}>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo veritatis debitis ratione quis saepe, reiciendis, laboriosam minus aspernatur a porro veniam? Neque molestiae id expedita itaque laboriosam, iste ipsa commodi!
+            </p>
+        </div>
+    );
+};

week02/Juno/src/components/ThemeToggleButton.tsx

@@ -0,0 +1,21 @@
+import { THEME, useTheme } from '../context/ThemeProvider';
+import clsx from 'clsx';
+
+export const ThemeToggleButton = () => {
+    const {theme, toggleTheme} = useTheme();
+
+    const isLightMode = theme === THEME.LIGHT;
+    return (
+        <button
+            onClick={toggleTheme}
+            className={clsx('px-4 py-2 mt-4 rounded-md transition-all',
+                {
+                    'bg-black text-white': !isLightMode,
+                    'bg-white text-black': isLightMode,
+                }
+            )}
+        >
+            {isLightMode? '🌙 다크 모드' : '☀️ 라이트 모드'}
+        </button>
+    );
+};

week02/Juno/src/context/ThemeProvider.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState, type PropsWithChildren } from "react";
+
+export const THEME = {
+  LIGHT: 'LIGHT',
+  DARK: 'DARK',
+} as const;
+
+export type TTheme = typeof THEME[keyof typeof THEME];
+
+
+interface IThemeContext {
+    theme: TTheme;
+    toggleTheme: () => void;
+}
+
+export const ThemeContext = createContext<IThemeContext | undefined>(undefined);
+
+export const ThemeProvider = ({children}: PropsWithChildren) => {
+    const [theme, setTheme] = useState<TTheme>(THEME.LIGHT);
+
+    const toggleTheme = () => {
+        setTheme((prevTheme): TTheme =>
+            prevTheme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT
+        );
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+
+    return context;
+};

week02/Juno/src/index.css

@@ -1,121 +1 @@
-/* ===== 기본 스타일 ===== */
-body {
-  font-family: Arial, sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background-color: #eef2f3;
-  margin: 0;
-}
-
-/* ===== Todo 컨테이너 ===== */
-.todo-container {
-  background: white;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  width: 350px;
-  text-align: center;
-}
-
-/* ===== 제목 ===== */
-.todo-container__header {
-  font-size: 24px;
-  margin-bottom: 16px;
-}
-
-/* ===== 입력 폼 ===== */
-.todo-container__form {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.todo-container__input {
-  flex: 1;
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.todo-container__button {
-  background-color: #28a745;
-  color: white;
-  border: none;
-  padding: 8px 12px;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background-color 0.3s ease;
-}
-
-.todo-container__button:hover {
-  background-color: #218838;
-}
-
-/* ===== 리스트 컨테이너 ===== */
-.render-container {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-/* ===== 리스트 ===== */
-.render-container__section {
-  width: 100%;
-  text-align: left;
-}
-
-.render-container__title {
-  font-size: 18px;
-  margin-bottom: 10px;
-
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.render-container__list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* ===== 리스트 아이템 ===== */
-.render-container__item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  padding: 8px;
-  border-bottom: 1px solid #ddd;
-  background: #f9f9f9;
-  border-radius: 6px;
-  margin-bottom: 6px;
-  width: 100%; /* Make sure the item takes full available width */
-}
-
-.render-container__item-text {
-  flex: 1;
-
-  white-space: nowrap; /* Prevent text from wrapping */
-  overflow: hidden; /* Hide any overflow */
-  text-overflow: ellipsis; /* Add '...' when text overflows */
-  display: block; /* Ensure it's treated as a block for the overflow to work */
-}
-
-.render-container__item-button {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 6px;
-  font-size: 12px;
-  transition: background-color 0.3s ease;
-}
-
-.render-container__item-button:hover {
-  background-color: #c82333;
-}
+@import "tailwindcss";

week02/Juno/src/pages/ContextPage.tsx

@@ -0,0 +1,16 @@
+import { Navbar } from '../components/Navbar';
+import { ThemeContent } from '../components/ThemeContent';
+import { ThemeProvider } from '../context/ThemeProvider';
+
+export const ContextPage = () => {
+    return (
+        <ThemeProvider>
+            <div className='flex flex-col items-center justify-center min-h-screen'>
+                <Navbar />
+                <main className='flex-1 w-full'>
+                    <ThemeContent />
+                </main>
+            </div>
+        </ThemeProvider>
+    );
+};

week02/Juno/src/theme/styles.ts

@@ -0,0 +1,29 @@
+import { THEME } from '../context/ThemeProvider';
+
+type Theme = typeof THEME[keyof typeof THEME];
+
+type ThemeStyleSet = {
+  [key in Theme]: string;
+};
+
+type ThemeClasses = {
+  background: ThemeStyleSet;
+  text: ThemeStyleSet;
+  toggleButton: ThemeStyleSet;
+  [key: string]: ThemeStyleSet;
+};
+
+export const themeClasses: ThemeClasses = {
+  background: {
+    [THEME.LIGHT]: 'bg-white',
+    [THEME.DARK]: 'bg-gray-800',
+  },
+  text: {
+    [THEME.LIGHT]: 'text-black',
+    [THEME.DARK]: 'text-white',
+  },
+  toggleButton: {
+    [THEME.LIGHT]: 'bg-white text-black',
+    [THEME.DARK]: 'bg-black text-white',
+  },
+};

week02/Juno/vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })