Merge pull request #30 from codesquad-team4-issue-tracker/fe

[team#04-FE] 2주차 PR

fe/package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.1",
+    "@svgr/webpack": "^8.0.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -25,6 +26,7 @@
     "prettier": "3.0.0",
     "reset-css": "^5.0.2",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-svgr": "^3.2.0"
   }
 }

fe/src/App.tsx

@@ -1,37 +1,57 @@
 import { Routes, Route, useLocation } from 'react-router-dom';
-import { css } from '@emotion/react';
+import { useState } from 'react';
+import { Theme, ThemeProvider, css } from '@emotion/react';
+import { themes } from './styles/styles';
 import Header from './components/Header/Header';
 import SignIn from './components/Sign/SignIn';
 import SignUp from './components/Sign/SignUp';
 import IssueList from './components/Issue/IssueList/IssueList';
 import IssueCreate from './components/Issue/IssueCreate/IssueCreate';
 import IssueDetail from './components/Issue/IssueDetail/IssueDetail';
-import Label from './components/Label/Label';
-import Milestone from './components/Milestone/Milestone';
+import LabelList from './components/Label/LabelList';
+import MilestoneList from './components/Milestone/MilestoneList';
+import ThemeToggle from './components/ThemeToggle';
 
 export default function App() {
   const location = useLocation();
   const hiddenHeaderRoutes = ['/', '/sign-in', '/sign-up'];
   const shouldShowHeader = !hiddenHeaderRoutes.includes(location.pathname);
 
+  const [darkMode, setDarkMode] = useState(false);
+  const theme = darkMode ? themes.dark : themes.light;
+
+  const onThemeToggleClick = () => {
+    setDarkMode((prevMode) => !prevMode);
+  };
+
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      {shouldShowHeader && <Header />}
-      <Routes>
-        <Route path="/" element={<SignIn />} />
-        <Route path="/sign-in" element={<SignIn />} />
-        <Route path="/sign-up" element={<SignUp />} />
-        <Route path="/issue" element={<IssueList />} />
-        <Route path="/issue/create" element={<IssueCreate />} />
-        <Route path="/issue/detail" element={<IssueDetail />} />
-        <Route path="/label" element={<Label />} />
-        <Route path="/milestone" element={<Milestone />} />
-      </Routes>
-    </div>
+    <ThemeProvider theme={theme}>
+      <div css={body(theme)}>
+        {shouldShowHeader && <Header />}
+        <Routes>
+          <Route path="/" element={<SignIn />} />
+          <Route path="/sign-in" element={<SignIn />} />
+          <Route path="/sign-up" element={<SignUp />} />
+          <Route path="/issue" element={<IssueList />} />
+          <Route path="/issue/create" element={<IssueCreate />} />
+          <Route path="/issue/detail" element={<IssueDetail />} />
+          <Route path="/label" element={<LabelList />} />
+          <Route path="/milestone" element={<MilestoneList />} />
+        </Routes>
+        <ThemeToggle onClick={onThemeToggleClick} isDark={darkMode} />
+      </div>
+    </ThemeProvider>
   );
 }
+
+const body = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  background-color: ${theme.neutral.surfaceDefault};
+
+  & svg path {
+    stroke: ${theme.neutral.textDefault};
+  }
+`;