Merge pull request #1 from T1F5/feat/theme

feat: 테마 추가
T1F5 · Apr 5, 2024 · fccb901 · fccb901
2 parents 474ff66 + 89f2a03
commit fccb901
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>항해일지</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -1,18 +1,18 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
-import B from "./pages/B";
+import ImageDownloadPage from "./pages/ImageDownloadPage";
 import A from "./pages/A";
 
 const Router = () => {
-    return (
-      <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/B" element={<B />} />
-            <Route path="/A" element={<A />} />
-          </Routes>
-      </BrowserRouter>
-    );
-  };
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/A" element={<A />} />
+        <Route path="/image-download" element={<ImageDownloadPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
 
-export default Router;
+export default Router;
diff --git a/src/components/Daybook.tsx b/src/components/Daybook.tsx
@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { colors } from "../theme";
+import getFontStyle from "../theme/font/getFontSize";
+
+function Daybook() {
+  return <Wrapper>일지~</Wrapper>;
+}
+
+export default Daybook;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100px;
+  border: 1px solid ${colors.primaryLight};
+  ${getFontStyle("header1")};
+`;
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+
+import Router from "./Router";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <Router />
   </React.StrictMode>
 );
diff --git a/src/pages/B.tsx b/src/pages/B.tsx
diff --git a/src/pages/ImageDownloadPage.tsx b/src/pages/ImageDownloadPage.tsx
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import Daybook from "../components/Daybook";
+
+const ImageDownloadPage = () => {
+  return (
+    <Wrapper>
+      <Daybook />
+    </Wrapper>
+  );
+};
+
+export default ImageDownloadPage;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -0,0 +1,17 @@
+export const colors = {
+  white: "#FFFFFF",
+  grey10: "#F3F3F3",
+  grey20: "#DDDDDD",
+  grey30: "#BBBBBB",
+  grey40: "#818181",
+  grey50: "#606060",
+  grey60: "#454545",
+  grey70: "#303030",
+  black: "#1A1A1A",
+  primaryLight: "#728B5F",
+  primary: "#4D6C38",
+  primaryDark: "#304125",
+  secondaryLight: "#E08686",
+  secondary: "#B84D4D",
+  secondaryDarK: "#9C2F2F",
+} as const;
diff --git a/src/theme/font/getFontSize.ts b/src/theme/font/getFontSize.ts
@@ -0,0 +1,91 @@
+import { css } from "@emotion/react";
+import { Style, Variety } from "./type";
+
+const StyleMap: Record<Variety, Style> = {
+  header1: {
+    fontSize: 24,
+    fontWeight: 700,
+    lineHeight: 36,
+  },
+  header2: {
+    fontSize: 20,
+    fontWeight: 700,
+    lineHeight: 30,
+  },
+  header3: {
+    fontSize: 18,
+    fontWeight: 700,
+    lineHeight: 27,
+  },
+  header4: {
+    fontSize: 16,
+    fontWeight: 700,
+    lineHeight: 24,
+  },
+  title1: {
+    fontSize: 20,
+    fontWeight: 600,
+    lineHeight: 30,
+  },
+  title2: {
+    fontSize: 18,
+    fontWeight: 600,
+    lineHeight: 27,
+  },
+  title3: {
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: 24,
+  },
+  title4: {
+    fontSize: 14,
+    fontWeight: 600,
+    lineHeight: 21,
+  },
+  title5: {
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 18,
+  },
+  body1: {
+    fontSize: 18,
+    fontWeight: 400,
+    lineHeight: 27,
+  },
+  body2: {
+    fontSize: 16,
+    fontWeight: 400,
+    lineHeight: 24,
+  },
+  body3: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: 21,
+  },
+  body4: {
+    fontSize: 12,
+    fontWeight: 400,
+    lineHeight: 18,
+  },
+  caption1: {
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 18,
+  },
+  caption2: {
+    fontSize: 10,
+    fontWeight: 700,
+    lineHeight: 15,
+  },
+} as const;
+
+const getFontStyle = (variety: Variety) => {
+  const { fontSize, fontWeight, lineHeight } = StyleMap[variety];
+  return css`
+    font-size: ${`${fontSize}px`};
+    font-weight: ${fontWeight};
+    line-height: ${`${lineHeight}px`};
+  `;
+};
+
+export default getFontStyle;
diff --git a/src/theme/font/type.ts b/src/theme/font/type.ts
@@ -0,0 +1,22 @@
+export type Variety =
+  | "header1"
+  | "header2"
+  | "header3"
+  | "header4"
+  | "title1"
+  | "title2"
+  | "title3"
+  | "title4"
+  | "title5"
+  | "body1"
+  | "body2"
+  | "body3"
+  | "body4"
+  | "caption1"
+  | "caption2";
+
+export type Style = {
+  fontSize: number;
+  fontWeight: number;
+  lineHeight: number;
+};
diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./font/getFontSize";