[FE] Design System (#13)

* #7 design: 디자인 시스템 세팅 (#8) * #7 design: 디자인 시스템 세팅 - 로고 컴포넌트, GlobalStyle, designSystem 생성 - icon svg 파일 업로드 - Pretendard font * #7 refactor: 로고 컴포넌트 props 구조 수정 * #7 refactor: 디자인 시스템 세팅 리뷰 반영 - design modules 불필요한 변수 선언 없이 export default - src 최상단 디렉터리 path alias 선언 * #7 design: light/dark 모드 design system 세팅 --------- Co-authored-by: 유지수 Jisoo Yoo <[email protected]>
issue-tracker-08 · Jul 25, 2023 · d80d054 · d80d054
1 parent f44b559
commit d80d054
Show file tree

Hide file tree

Showing 33 changed files with 433 additions and 18 deletions.
diff --git a/fe/index.html b/fe/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Issue Tracker - Team 08</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
+    <title>팔팔한 이슈 트래커 - 88 Issue Tracker</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/fe/public/favicon.png b/fe/public/favicon.png
diff --git a/fe/src/App.css b/fe/src/App.css
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -1,7 +1,29 @@
-import "./App.css";
+import { useState } from "react";
+import Logo from "@components/common/Logo";
+import GlobalStyle from "@styles/GlobalStyle";
+import { lightMode, darkMode } from "@styles/designSystem";
+import styled, { ThemeProvider } from "styled-components";
 
-function App() {
-  return <div></div>;
+export default function App() {
+  const [themeMode, setThemeMode] = useState<"light" | "dark">("dark");
+
+  const toggleThemeMode = () => {
+    setThemeMode((prev) => {
+      return prev === "light" ? "dark" : "light";
+    });
+  };
+
+  return (
+    <ThemeProvider theme={themeMode === "light" ? lightMode : darkMode}>
+      <GlobalStyle />
+      <Logo size="large" />
+      <H1>적용 되니?</H1>
+      <button onClick={toggleThemeMode}>Theme Mode</button>
+    </ThemeProvider>
+  );
 }
 
-export default App;
+const H1 = styled.h1`
+  color: ${({ theme: { neutral } }) => neutral.text.strong};
+  font: ${({ theme: { font } }) => font.displayMD12};
+`;
diff --git a/fe/src/assets/icon/Rectangle 16.svg b/fe/src/assets/icon/Rectangle 16.svg
diff --git a/fe/src/assets/icon/alertCircle.svg b/fe/src/assets/icon/alertCircle.svg
diff --git a/fe/src/assets/icon/archive.svg b/fe/src/assets/icon/archive.svg
diff --git a/fe/src/assets/icon/calendar.svg b/fe/src/assets/icon/calendar.svg
diff --git a/fe/src/assets/icon/checkBoxActive.svg b/fe/src/assets/icon/checkBoxActive.svg
diff --git a/fe/src/assets/icon/checkBoxInitial.svg b/fe/src/assets/icon/checkBoxInitial.svg
diff --git a/fe/src/assets/icon/checkOffCircle.svg b/fe/src/assets/icon/checkOffCircle.svg
diff --git a/fe/src/assets/icon/checkOnCircle.svg b/fe/src/assets/icon/checkOnCircle.svg
diff --git a/fe/src/assets/icon/chevronDown.svg b/fe/src/assets/icon/chevronDown.svg
diff --git a/fe/src/assets/icon/edit.svg b/fe/src/assets/icon/edit.svg
diff --git a/fe/src/assets/icon/label.svg b/fe/src/assets/icon/label.svg
diff --git a/fe/src/assets/icon/logo.svg b/fe/src/assets/icon/logo.svg
diff --git a/fe/src/assets/icon/milestone.svg b/fe/src/assets/icon/milestone.svg
diff --git a/fe/src/assets/icon/paperclip.svg b/fe/src/assets/icon/paperclip.svg
diff --git a/fe/src/assets/icon/plus.svg b/fe/src/assets/icon/plus.svg
diff --git a/fe/src/assets/icon/refreshCcw.svg b/fe/src/assets/icon/refreshCcw.svg