TEAM-BEAT · pepperdad · Jul 5, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <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/package.json b/package.json
@@ -20,6 +20,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
     "styled-components": "^6.1.11",
+    "styled-reset": "^4.5.2",
     "supports-color": "^9.4.0",
     "typescript": "^5.5.2"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,31 +1,15 @@
-import { useState } from "react";
-import "./App.css";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import router from "./routes/Router";
+import { RouterProvider } from "react-router-dom";
+import theme from "./styles/theme";
+import GlobalStyle from "./styles/global";
+import { ThemeProvider } from "styled-components";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [hi, setHi] = useState([]);
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <RouterProvider router={router} />
+    </ThemeProvider>
   );
 }
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
@@ -1,6 +1,6 @@
 import { createBrowserRouter } from "react-router-dom";
 
-export const router = createBrowserRouter([
+const router = createBrowserRouter([
   //   {
   //     path: "/A",
   //     element: <APage />,
@@ -15,3 +15,4 @@ export const router = createBrowserRouter([
   //   },
   //   ...
 ]);
+export default router;
diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep
diff --git a/src/styles/fonts/PretendardVariable.woff2 b/src/styles/fonts/PretendardVariable.woff2
diff --git a/src/styles/fonts/fonts.css b/src/styles/fonts/fonts.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Pretendard";
+  src: url("./PretendardVariable.woff2") format("woff2");
+}
diff --git a/src/styles/generator.ts b/src/styles/generator.ts
@@ -0,0 +1,23 @@
+import { css } from "styled-components";
+
+export const Generators = {
+  flexGenerator: (flexDirection = "row", alignItems = "center", justifyContent = "center") => css`
+    display: flex;
+    flex-direction: ${flexDirection};
+    align-items: ${alignItems};
+    justify-content: ${justifyContent};
+  `,
+  fontGenerator: (
+    fontSize = "1.6rem",
+    fontWeight = "normal",
+    lineHeight = "normal",
+    letterSpacing = "normal",
+    fontStyle = "normal"
+  ) => css`
+    font-weight: ${fontWeight};
+    font-size: ${fontSize};
+    font-style: ${fontStyle};
+    line-height: ${lineHeight};
+    letter-spacing: ${letterSpacing};
+  `,
+};
diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -0,0 +1,69 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+
+const global = createGlobalStyle`
+
+    ${reset}
+
+    * {
+    box-sizing: border-box;
+    }
+
+    html {
+    font-size: 62.5%;
+
+    background-color: ${({ theme }) => theme.colors.black};
+
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color:rgb(0 0 0 / 0%);
+    scroll-behavior: smooth; 
+    }
+
+
+
+    ul, li {
+    padding-left: 0;
+
+    list-style: none;
+    }
+
+    a {
+    color: inherit;
+    text-decoration: none;
+    }
+
+    input, button {
+    background-color: transparent;
+    outline: none;
+    border: none;
+    }
+
+    button {
+    padding: 0;
+
+    cursor: pointer;
+    }
+
+    input {
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+    }
+
+    /* 모바일뷰 세팅 */
+    body {
+        width: 375px; 
+        min-height: 100%;
+        margin: 0 auto; 
+        overflow-x: hidden;
+
+        background-color: ${({ theme }) => theme.colors.gray_900}; 
+    }
+
+
+`;
+
+export default global;
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
@@ -0,0 +1,9 @@
+import "styled-components";
+import { ColorType, FontType } from "./theme";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    colors: ColorType;
+    fonts: FontType;
+  }
+}
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -0,0 +1,119 @@
+const theme = {
+  colors: {
+    white: "#FFFFFF",
+    black: "#0F0F0F",
+    main_pink_400: "#FF006B",
+    // pink
+    pink_0: "#FFEAF2",
+    pink_100: "#FFCFE3",
+    pink_200: "#FF97C2",
+    pink_300: "#FF4F98",
+    pink_400: "#FB247F",
+    pink_500: "#E30964",
+    pink_600: "#B80450",
+    pink_700: "#940742",
+    pink_800: "#6F0531",
+    pink_900: "#4D0322",
+    // gray
+    gray_0: "#F4F4F4",
+    gray_100: "#EEEEEE",
+    gray_200: "#CCCCCC",
+    gray_300: "#B2B2B2",
+    gray_400: "#939393",
+    gray_500: "#797979",
+    gray_600: "#626262",
+    gray_700: "#454545",
+    gray_800: "#2A2A2A",
+    gray_900: "#1B1B1B",
+    // purple
+    purple_0: "#F6EEFF",
+    purple_100: "#E2CCFF",
+    purple_200: "#B880FF",
+    purple_300: "#9D51FF",
+    purple_400: "#811FFF",
+    purple_500: "#6D08EF",
+    purple_600: "#5B09C3",
+    purple_700: "#450795",
+    purple_800: "#380578",
+    purple_900: "#24034E",
+    // semantic
+    red: "#FF4141",
+    green: "#1ED45A",
+  },
+  fonts: {
+    heading1: {
+      fontFamily: "Pretendard",
+      fontSize: "2.4rem",
+      fontWeight: "700",
+      lineHeight: "3.2rem",
+      letterSpacing: "-0.06rem",
+    },
+    heading2: {
+      fontFamily: "Pretendard",
+      fontSize: "2.2rem",
+      fontWeight: "700",
+      lineHeight: "3rem",
+      letterSpacing: "-0.055rem",
+    },
+    heading3: {
+      fontFamily: "Pretendard",
+      fontSize: "2rem",
+      fontWeight: "700",
+      lineHeight: "2.8rem",
+      letterSpacing: "-0.04rem",
+    },
+    heading4: {
+      fontFamily: "Pretendard",
+      fontSize: "1.8rem",
+      fontWeight: "600",
+      lineHeight: "2.6rem",
+      letterSpacing: "-0.018rem",
+    },
+    body1Normal: {
+      fontFamily: "Pretendard",
+      fontSize: "1.6rem",
+      fontWeight: "600",
+      lineHeight: "2.4rem",
+      letterSpacing: "-0.016rem",
+    },
+    body1Long: {
+      fontFamily: "Pretendard",
+      fontSize: "1.6rem",
+      fontWeight: "400",
+      lineHeight: "2.6rem",
+      letterSpacing: "-0.016rem",
+    },
+    body2Normal: {
+      fontFamily: "Pretendard",
+      fontSize: "1.4rem",
+      fontWeight: "600",
+      lineHeight: "2rem",
+      letterSpacing: "-0.007rem",
+    },
+    body2Long: {
+      fontFamily: "Pretendard",
+      fontSize: "1.4rem",
+      fontWeight: "400",
+      lineHeight: "2.2rem",
+      letterSpacing: "-0.007rem",
+    },
+    caption1: {
+      fontFamily: "Pretendard",
+      fontSize: "1.2rem",
+      fontWeight: "600",
+      lineHeight: "1.8rem",
+      letterSpacing: "-0.03rem",
+    },
+    caption2: {
+      fontFamily: "Pretendard",
+      fontSize: "1.1rem",
+      fontWeight: "600",
+      lineHeight: "1.6rem",
+    },
+  },
+};
+
+export type ColorType = typeof theme.colors;
+export type FontType = typeof theme.fonts;
+
+export default theme;
diff --git a/yarn.lock b/yarn.lock
@@ -3344,6 +3344,7 @@ __metadata:
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^6.24.0"
     styled-components: "npm:^6.1.11"
+    styled-reset: "npm:^4.5.2"
     stylelint: "npm:^16.6.1"
     stylelint-config-concentric-order: "npm:^5.2.0"
     stylelint-config-prettier: "npm:^9.0.5"
@@ -7153,6 +7154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-reset@npm:^4.5.2":
+  version: 4.5.2
+  resolution: "styled-reset@npm:4.5.2"
+  peerDependencies:
+    styled-components: ">=4.0.0 || >=5.0.0 || >=6.0.0"
+  checksum: 10c0/3e15586d2b4c1c37c473058747269d20ee4dcd88205718cec8f7c9c3b2cb99a220eddd958c073d1d9179e7b9682f6d601048fe62753ea789d661989d27bc8e00
+  languageName: node
+  linkType: hard
+
 "stylelint-config-concentric-order@npm:^5.2.0":
   version: 5.2.0
   resolution: "stylelint-config-concentric-order@npm:5.2.0"