Merge pull request #10 from Nexters/feat/#9

[Feat/#9] font, color Theme 설정
Nexters · Jan 25, 2025 · 025b23b · 025b23b
2 parents 05fff6a + aeca5ad
commit 025b23b
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,10 @@
-import SUIT from '@/shared/assets/font/font';
-import ReactQueryClientProvider from '@/shared/lib/reactQuery/ReactQueryClientProvider';
-import StyledComponentsRegistry from '@/shared/lib/styledComponents/StyledComponentsRegistry';
-import StyledReset from '@/shared/lib/styledComponents/StyledReset';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import './global.css';
-
+import SUIT from "@/shared/assets/font/font";
+import ReactQueryClientProvider from "@/shared/lib/reactQuery/ReactQueryClientProvider";
+import StyledComponentsRegistry from "@/shared/lib/styledComponents/StyledComponentsRegistry";
+import StyledReset from "@/shared/lib/styledComponents/StyledReset";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import "./global.css";
+import StyledComponentsTheme from "@/shared/lib/styledComponents/StyledComponentsTheme";
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -15,8 +15,10 @@ export default function RootLayout({
       <body>
         <ReactQueryClientProvider>
           <StyledComponentsRegistry>
-            <StyledReset />
-            {children}
+            <StyledComponentsTheme>
+              <StyledReset />
+              {children}
+            </StyledComponentsTheme>
           </StyledComponentsRegistry>
           <ReactQueryDevtools initialIsOpen={false} />
         </ReactQueryClientProvider>

diff --git a/src/shared/lib/styledComponents/StyledComponentsTheme.tsx b/src/shared/lib/styledComponents/StyledComponentsTheme.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { ThemeProvider } from "styled-components";
+import { theme } from "./theme";
+
+import React, { ReactNode } from "react";
+
+const StyledComponentsTheme = ({ children }: { children: ReactNode }) => {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default StyledComponentsTheme;
diff --git a/src/shared/lib/styledComponents/styled.d.ts b/src/shared/lib/styledComponents/styled.d.ts
@@ -0,0 +1,8 @@
+import "styled-components";
+import { ColorsTypes, FontsTypes } from "./theme";
+declare module "styled-components" {
+  export interface DefaultTheme {
+    colors: ColorsTypes;
+    fonts: FontsTypes;
+  }
+}
diff --git a/src/shared/lib/styledComponents/theme.ts b/src/shared/lib/styledComponents/theme.ts
@@ -0,0 +1,103 @@
+import { css } from "styled-components";
+
+export const theme = {
+  fonts: {
+    headline3: css`
+      font-size: 28px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 40px;
+    `,
+    headline2: css`
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 32px;
+    `,
+    headline1: css`
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 28px;
+    `,
+    subHead4: css`
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 26px;
+    `,
+    // 다지안 확인 대기
+    subHead3: css`
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 24px;
+    `,
+    // 다지안 확인 대기
+    subHead2: css`
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 23px;
+    `,
+    subHead1: css`
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 22px;
+    `,
+    body4: css`
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 26px;
+    `,
+    body3: css`
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+    `,
+    body2: css`
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 23px;
+    `,
+    body1: css`
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    `,
+    caption: css`
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+    `,
+  },
+
+  colors: {
+    white: "#FFF",
+    black: "#000",
+    grey00: "#F6F8FA",
+    grey10: "#EAEEF2",
+    grey20: "#D0D7DE",
+    grey30: "#AFB8C1",
+    grey40: "#8C959F",
+    grey50: "#6E7781",
+    grey60: "#57606A",
+    grey70: "#434A53",
+    grey80: "#32383F",
+    grey90: "#24292F",
+
+    //변동 가능성 있음
+    primary01: "#DEDBFF",
+    primary02: "#B4ACFF",
+    primary03: "#7A6DF0",
+  },
+};
+
+export type ColorsTypes = typeof theme.colors;
+export type FontsTypes = typeof theme.fonts;