[Feat/#5] typography, color 설정

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.64.2",
+    "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -53,6 +54,7 @@
     "lint-staged": "^15.4.1",
     "prettier": "^3.4.2",
     "sass": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "storybook": "^8.5.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",

src/App.tsx

@@ -1,5 +1,7 @@
+import Button from "@/components/Button";
+
 const App = () => {
-  return <div>App</div>;
+  return <Button />;
 };
 
 export default App;

src/components/Button.module.scss

@@ -0,0 +1,9 @@
+@use "@/styles/mixins" as *;
+
+.ButtonTest {
+  @include titleLg;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: var(--color-bg-error);
+  color: #fff;
+}

src/components/Button.tsx

@@ -0,0 +1,9 @@
+import classNames from "classnames";
+
+import styles from "@/components/Button.module.scss";
+
+const Button = () => {
+  return <button className={classNames(styles.ButtonTest)}>Button</button>;
+};
+
+export default Button;

src/main.tsx

@@ -7,6 +7,8 @@ import App from "@/App";
 
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
 
+import "@/styles/reset.scss";
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ReactQueryClientProvider>

src/styles/_mixins.scss

@@ -0,0 +1,49 @@
+@mixin titleLg {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+}
+
+@mixin titleMd {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+}
+
+@mixin titleSm {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+}
+
+@mixin bodyLg {
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-medium);
+}
+
+@mixin bodyMd {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+@mixin bodySm {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+@mixin bodyXsm {
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-medium);
+}
+
+@mixin buttonMd {
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-semi-bold);
+}
+
+@mixin buttonSm {
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-medium);
+}
+
+@mixin buttonXs {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}

src/styles/_variables.scss

@@ -0,0 +1,31 @@
+:root {
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+
+  --font-size-xl: 28px;
+  --font-size-lg: 24px;
+  --font-size-md: 22px;
+  --font-size-default: 16px;
+  --font-size-sm: 15px;
+  --font-size-xs: 14px;
+  --font-size-xxs: 13px;
+
+  --color-white: #fff;
+  --color-black: #000;
+  --color-text01: #363642;
+  --color-text02: #68696e;
+  --color-text03: #a6a6ad;
+  --color-text04: #e0e0e0;
+  --color-text-gradient: linear-gradient(#d444ba, #443fb6);
+  --color-gray100: #f8f8f8;
+  --color-gray200: #ebecf0;
+  --color-gray300: #e1e2e8;
+  --color-gray400: #00000026;
+  --color-gray500: #00000040;
+  --color-gray600: #363642;
+  --color-gray700: #161636;
+  --color-bg-gradient: linear-gradient(#ffffff, #443fb6);
+  --color-bg-error: #d45085;
+}

src/styles/reset.scss

@@ -0,0 +1,134 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+* {
+  font-family: "Pretendard", sans-serif;
+}

src/types/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [className: string]: string };
+  export default classes;
+}

tsconfig.json

@@ -25,7 +25,7 @@
       "@/*": ["./src/*"]
     },
     "plugins": [{ "name": "typescript-plugin-css-modules" }],
-    "types": ["@testing-library/jest-dom"]
+    "types": ["@testing-library/jest-dom", "vite/client"]
   },
-  "include": ["src"]
+  "include": ["src", "src/types"]
 }