테마 변경 기능 구현

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f7f6;
  color: #333;
  line-height: 1.6;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  max-width: 960px;
  margin: 20px auto;
  background-color: var(--background-color-main, #ffffff); /* 기본값 */
  color: var(--text-color-main, #333); /* 기본값 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3 {
  color: var(--header-color, #2c3e50); /* 기본값 */
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #2980b9;
}

.button.secondary {
  background-color: #7f8c8d;
}
.button.secondary:hover {
  background-color: #616e78;
}

/* 테마 변수 정의 (CSS 변수 활용) */
body.light-theme {
  --background-color-main: #ffffff;
  --text-color-main: #333;
  --header-color: #2c3e50;
  --header-bg: #eee;
  --header-text: #333;
  --card-bg: #fdfdfd;
  --card-border: #eee;
}

body.dark-theme {
  --background-color-main: #333;
  --text-color-main: #eee;
  --header-color: #eee;
  --header-bg: #222;
  --header-text: #eee;
  --card-bg: #444;
  --card-border: #555;
}

import React, { createContext, useReducer, useEffect } from 'react';

// 1. 초기 상태 정의
const initialState = {
  isLoggedIn: false,
  user: null,
  theme: 'light', // 기본 테마
};

// 2. Reducer 함수 정의
function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        isLoggedIn: true,
        user: action.payload,
      };
    case 'LOGOUT':
      return {
        ...state,
        isLoggedIn: false,
        user: null,
      };
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light',
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// 3. Context 생성
// Context를 통해 상태와 dispatch 함수를 하위 컴포넌트에 전달할 것입니다.
export const AppContext = createContext();

// 4. Provider 컴포넌트 생성 (실제로 useReducer와 Context를 연결하는 부분)
export const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(appReducer, initialState);

  // 테마 변경 시 body 클래스 업데이트
  useEffect(() => {
    document.body.className = state.theme === 'dark' ? 'dark-theme' : 'light-theme';
  }, [state.theme]);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

import React, { useContext } from 'react';
import { AppContext } from '../contexts/AppContext'; // AppContext 임포트
import { Link } from 'react-router';

function Header() {
  const { state, dispatch } = useContext(AppContext); // Context 값 사용
  const { isLoggedIn, user, theme } = state;

  const handleLoginLogout = () => {
    if (isLoggedIn) {
      dispatch({ type: 'LOGOUT' });
      alert('로그아웃 되었습니다.');
    } else {
      // 실제 로그인 로직 (API 호출 등)이 필요하지만, 여기서는 가상 사용자 정보 사용
      const mockUser = { name: 'ReactUser', email: '[email protected]' };
      dispatch({ type: 'LOGIN', payload: mockUser });
      alert(`${mockUser.name}님, 환영합니다!`);
    }
  };

  const handleToggleTheme = () => {
    dispatch({ type: 'TOGGLE_THEME' });
  };

  return (
    <header style={{
      backgroundColor: `var(--header-bg)`,
      color: `var(--header-text)`,
      padding: '15px 20px',
      boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
        <Link to="/" style={{ textDecoration: 'none', color: `var(--header-text)`, fontSize: '1.5em', fontWeight: 'bold' }}>My App</Link>
        <Link to="/dashboard" style={{ textDecoration: 'none', color: `var(--header-text)`, fontSize: '1.1em' }}>대시보드</Link>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
        {isLoggedIn ? (
          <span style={{ fontSize: '1.1em' }}>환영합니다, {user.name}!</span>
        ) : (
          <span style={{ fontSize: '1.1em' }}>로그인해주세요.</span>
        )}
        <button
          onClick={handleLoginLogout}
          className="button"
          style={{ backgroundColor: isLoggedIn ? '#e74c3c' : '#2ecc71', padding: '8px 15px', fontSize: '0.9em' }}
        >
          {isLoggedIn ? '로그아웃' : '로그인'}
        </button>
        <button
          onClick={handleToggleTheme}
          className="button secondary"
          style={{ padding: '8px 15px', fontSize: '0.9em' }}
        >
          {theme === 'light' ? '다크 모드' : '라이트 모드'}
        </button>
      </div>
    </header>
  );
}

export default Header;

import React, { useContext } from 'react';
import { AppContext } from '../contexts/AppContext';

function UserProfile() {
  const { state } = useContext(AppContext);
  const { isLoggedIn, user } = state;

  if (!isLoggedIn) {
    return (
      <div style={{ padding: '20px', border: '1px dashed var(--card-border)', borderRadius: '8px', backgroundColor: 'var(--card-bg)', textAlign: 'center', color: '#888' }}>
        <p>로그인 후 사용자 정보를 볼 수 있습니다.</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '20px', border: '1px solid var(--card-border)', borderRadius: '8px', backgroundColor: 'var(--card-bg)', boxShadow: '0 2px 5px rgba(0,0,0,0.03)' }}>
      <h3 style={{ color: 'var(--header-color)' }}>사용자 프로필</h3>
      <p><strong>이름:</strong> {user.name}</p>
      <p><strong>이메일:</strong> {user.email}</p>
    </div>
  );
}

export default UserProfile;

import React, { useContext } from 'react';
import { AppContext } from '../contexts/AppContext';

function ThemeChanger() {
  const { state } = useContext(AppContext);
  const { theme } = state;

  return (
    <div style={{
      padding: '20px',
      marginTop: '20px',
      border: '1px solid var(--card-border)',
      borderRadius: '8px',
      backgroundColor: 'var(--card-bg)',
      boxShadow: '0 2px 5px rgba(0,0,0,0.03)',
      textAlign: 'center',
    }}>
      <h3 style={{ color: 'var(--header-color)' }}>테마 적용 예시</h3>
      <p>현재 테마는 <span style={{ fontWeight: 'bold', color: theme === 'light' ? 'blue' : 'lightblue' }}>{theme}</span> 모드입니다.</p>
      <p>이 컴포넌트는 Context API를 통해 테마를 받아 스타일을 변경합니다.</p>
    </div>
  );
}

export default ThemeChanger;

import React from 'react';
import UserProfile from '../components/UserProfile';
import ThemeChanger from '../components/ThemeChanger';

function HomePage() {
  return (
    <div style={{ padding: '20px' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '30px' }}>홈 페이지</h2>
      <UserProfile />
      <ThemeChanger />
    </div>
  );
}

export default HomePage;

import React, { useContext } from 'react';
import { AppContext } from '../contexts/AppContext';
import { useNavigate } from 'react-router';
import { useEffect } from 'react';

function DashboardPage() {
  const { state } = useContext(AppContext);
  const { isLoggedIn, user } = state;
  const navigate = useNavigate();

  useEffect(() => {
    if (!isLoggedIn) {
      alert('로그인이 필요한 페이지입니다!');
      navigate('/'); // 로그인되지 않았다면 홈으로 리다이렉트
    }
  }, [isLoggedIn, navigate]);

  if (!isLoggedIn) {
    return null; // 리다이렉트 중에는 아무것도 렌더링하지 않음
  }

  return (
    <div style={{ padding: '20px', backgroundColor: 'var(--card-bg)', borderRadius: '8px', border: '1px solid var(--card-border)' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '30px', color: 'var(--header-color)' }}>
        {user.name}님의 대시보드
      </h2>
      <p>이곳은 로그인한 사용자만 볼 수 있는 중요한 정보들이 표시되는 공간입니다.</p>
      <ul>
        <li>사용자 ID: {user.email}</li>
        <li>최근 활동: 2025-06-18</li>
        <li>보안 등급: 높음</li>
      </ul>
      <p style={{ marginTop: '20px', color: '#666' }}>
        이 페이지는 `useContext`를 통해 `isLoggedIn` 상태를 확인하고, 로그인되어 있지 않으면 자동으로 홈으로 리다이렉트됩니다.
      </p>
    </div>
  );
}

export default DashboardPage;

import { Link } from 'react-router';

export default function NotFoundPage() {
  return (
    <section>
      <h2>페이지를 찾을 수 없습니다.</h2>
      <Link to="/">홈으로 이동</Link>
    </section>
  );
}

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router';
import { AppProvider } from './contexts/AppContext'; // AppProvider 임포트

import Header from './components/Header';
import HomePage from './pages/HomePage';
import DashboardPage from './pages/DashboardPage';
import NotFoundPage from './pages/NotFoundPage'; // 6장 실습에서 만든 404 페이지 재사용

function App() {
  return (
    // AppProvider로 전체 애플리케이션을 감싸서 Context 값을 제공
    <AppProvider>
      <BrowserRouter>
        <Header /> {/* Header는 항상 표시 */}
        <div className="main-content"> {/* 모든 페이지 내용이 들어갈 컨테이너 */}
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/dashboard" element={<DashboardPage />} />
            {/* 맞는 라우트가 없을 때의 404 화면 */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </div>
      </BrowserRouter>
    </AppProvider>
  );
}

export default App;

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

header {
  flex-wrap: wrap;
  gap: 12px;
}

header > div {
  flex-wrap: wrap;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.main-content {
  box-sizing: border-box;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}