module css 적용 및 layout 파일 서버 컴포넌트로 변경 (#187)

* feat: module css 적용 * feat: module css에 global css, getClassNames 함수 구현
choooz · Oct 17, 2023 · b297e7c · b297e7c
1 parent c262f2d
commit b297e7c
Show file tree

Hide file tree

Showing 14 changed files with 1,166 additions and 36 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/apps/jurumarble/package.json b/apps/jurumarble/package.json
@@ -41,6 +41,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "typescript-plugin-css-modules": "^5.0.2"
   }
 }
diff --git a/apps/jurumarble/src/app/layout.tsx b/apps/jurumarble/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import StyledLayout from "components/StyledLayout";
 import { pretandard } from "lib/localFont";
 import ReactQueryProvider from "lib/ReactQueryProvider";
 import StyledComponents from "lib/styles/StyledComponents";
@@ -10,6 +9,8 @@ import AuthProcess from "components/AuthProcess";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
+import { PageLayout } from "components/layouts";
+import "lib/styles/global.css";
 
 export const metadata: Metadata = {
   title: "주루마블",
@@ -27,12 +28,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={pretandard.className} suppressHydrationWarning={true}>
         <ReactQueryProvider>
           <StyledComponents>
-            <StyledLayout>
+            <PageLayout>
               <div id="portal" />
               <AuthProcess />
               {children}
               <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
-            </StyledLayout>
+            </PageLayout>
           </StyledComponents>
         </ReactQueryProvider>
       </body>

diff --git a/apps/jurumarble/src/components/StyledLayout.tsx b/apps/jurumarble/src/components/StyledLayout.tsx
diff --git a/apps/jurumarble/src/components/index.ts b/apps/jurumarble/src/components/index.ts
@@ -7,3 +7,4 @@ export { default as FloatComponentTemplate } from "./modal/FloatComponentTemplat
 export { default as DivideLine } from "./divide/DivideLine";
 export { default as ImageUploadButton } from "./ImageUploadButton";
 export { default as LevelChip } from "./LevelChip";
+export * from "./layouts";
diff --git a/apps/jurumarble/src/components/layouts/PageLayout.tsx b/apps/jurumarble/src/components/layouts/PageLayout.tsx
@@ -0,0 +1,9 @@
+import { getClassNames } from "lib/styles/getClassNames";
+import { PropsWithChildren } from "react";
+import styles from "./styles.module.css";
+
+const cx = getClassNames(styles);
+
+export const PageLayout = ({ children }: PropsWithChildren) => {
+  return <div className={cx("rootlayout")}>{children}</div>;
+};
diff --git a/apps/jurumarble/src/components/layouts/index.ts b/apps/jurumarble/src/components/layouts/index.ts
@@ -0,0 +1 @@
+export * from "./PageLayout";
diff --git a/apps/jurumarble/src/components/layouts/styles.module.css b/apps/jurumarble/src/components/layouts/styles.module.css
@@ -0,0 +1,4 @@
+.rootlayout {
+  max-width: 720px;
+  margin: 0 auto;
+}
diff --git a/apps/jurumarble/src/lib/styles/getClassNames.ts b/apps/jurumarble/src/lib/styles/getClassNames.ts
@@ -0,0 +1,32 @@
+import typography from "./typography.module.css";
+
+type Styles = { [key: string]: string };
+export function getClassNames<T extends Styles>(styles: T) {
+  type BooleanMap = Partial<Record<keyof T, boolean> & { [key: string]: boolean }>;
+  type ClassNames = keyof T | false | null | undefined | BooleanMap;
+  type ExtraClassName = ClassNames | Omit<string, keyof T>;
+
+  const styleUtils = {
+    ...typography,
+    ...styles,
+  } as const;
+
+  type MergedClassName = ExtraClassName | keyof typeof styleUtils;
+
+  const fn = (...classNames: MergedClassName[]) => {
+    return (classNames.filter((cn) => cn) as (keyof T)[])
+      .map((className) => {
+        if (typeof className === "object") {
+          const keys = Object.keys(className) as (keyof T)[];
+          return keys
+            .filter((key) => className[key])
+            .map((key) => styleUtils[key])
+            .join(" ");
+        }
+        return styleUtils[className] ?? className;
+      })
+      .join(" ");
+  };
+
+  return fn;
+}
diff --git a/apps/jurumarble/src/lib/styles/global.css b/apps/jurumarble/src/lib/styles/global.css
@@ -0,0 +1,27 @@
+:root {
+  --black_01: "#222222",
+  --black_02: "#373737",
+  --black_03: "#676767",
+  --black_04: "#898989",
+  --black_05: "#cccccc",
+  --white: "#ffffff",
+  --bg_01: "#f0f0f0",
+  --bg_02: "#f5f5f5",
+  --line_01: "#e9e9e9",
+  --line_02: "#f5f5f5",
+  --main_01: "#ff4a16",
+  --main_02: "#ffe8e1",
+  --sub_01: "#ffa183",
+  --sub_02: "#aedac4",
+  --system_red: "#dc0000",
+  --system_green: "#04b014",
+  --system_yellow: "#f5a623",
+  --system_blue: "rgba(0, 26, 255, 0.80)",
+  --system_black: "rgba(0, 0, 0, 0.80)",
+  --modal: "rgba(0, 0, 0, 0.5)",
+  --main_drop_shadow_top: "rgba(235, 235, 235, 0.80)",
+  --main_drop_shadow_bottom: "rgba(235, 235, 235, 0.80)",
+  --modal_shadow: "rgba(235, 235, 235, 0.80)",
+  --kakao: "#fee500",
+  --naver: "#03c75a",
+}
diff --git a/apps/jurumarble/src/lib/styles/theme.ts b/apps/jurumarble/src/lib/styles/theme.ts
@@ -1,6 +1,3 @@
-// import { DefaultTheme, Colors } from "styled-components";
-import { DefaultTheme } from "styled-components";
-
 const colors = {
   black_01: "#222222",
   black_02: "#373737",

diff --git a/apps/jurumarble/src/lib/styles/typography.module.css b/apps/jurumarble/src/lib/styles/typography.module.css
@@ -0,0 +1,103 @@
+.headline01 {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: -0.24px;
+}
+
+.headline02 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: -0.2px;
+}
+
+.headline03 {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: -0.18px;
+}
+
+.headline04 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: -0.16px;
+}
+
+.subhead01 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.18px;
+}
+
+.subhead02 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.14px;
+}
+
+.body01 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+  letter-spacing: -0.16px;
+}
+
+.body_long01 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: -0.16px;
+}
+
+.body02 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.body03 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.body_long03 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.body04 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.caption_chip {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 14px;
+}
+
+.navigation {
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 14px;
+}
+
+.button01 {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.button02 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
diff --git a/apps/jurumarble/tsconfig.json b/apps/jurumarble/tsconfig.json
@@ -9,7 +9,8 @@
     "plugins": [
       {
         "name": "next"
-      }
+      },
+      { "name": "typescript-plugin-css-modules" }
     ],
     "baseUrl": "./",
     "paths": {