feat: 공용 스타일 추가

21ow · Dec 19, 2024 · 1e0d7f4 · 1e0d7f4
1 parent 83069b8
commit 1e0d7f4
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 9 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,11 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
+import path from 'path';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: true,
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'src')],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -0,0 +1,24 @@
+@use '@/assets/variables' as *;
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css');
+@import '@/assets/reset.scss';
+
+body {
+  font-family: Pretendard;
+}
+
+button,
+input,
+select,
+textarea {
+  appearance: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,15 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+import './globals.scss';
 
 export const metadata: Metadata = {
-  title: "Mogazoa",
+  title: 'Mogazoa',
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en">
       <body>{children}</body>

diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -0,0 +1,7 @@
+@use '@/assets/variables' as *;
+.homeTag {
+  background-color: $green;
+  color: $red;
+  border: $border-red;
+  border-radius: $radi;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
-// import styles from "./page.module.scss";
+import styles from "./page.module.scss";
 
 export default function Home() {
-  return <div>home</div>;
+  return <div className={styles.homeTag}>home</div>;
 }
diff --git a/src/assets/reset.scss b/src/assets/reset.scss
@@ -0,0 +1,14 @@
+@use '@/assets/variables' as *;
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-sizing: border-box;
+  background-color: $white;
+}
+
+body {
+  font-family: Pretendard;
+  background-color: $white;
+  transition: background-color 0.3s ease;
+}
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -0,0 +1,36 @@
+$dark-black: #17171c;
+$black: #181d26;
+$light-black: #2e2e3a;
+$border-black: #353542;
+
+$dark-gray: #6e6e82;
+$gray: #9fa6b2;
+$white: #f1f1f5;
+
+$indigo: #5363ff;
+$blue: #5097fa;
+$gradient: linear-gradient(91deg, $blue 0%, $indigo 100%);
+
+$yellow: #ffc83c;
+$green: #05d58b;
+$pink: #ff2f9f;
+$red: #ff0000;
+
+$radi: 8px;
+$radi-rank: 50px;
+$radi-cates: 6px;
+$radi-catef: 100px;
+$radi-modal: 16px;
+
+$border-red: 1px solid $red;
+$border-black: 1px solid $border-black;
+$border-blue: 1px solid $blue;
+
+$pad-input: 23px 20px;
+$pad-button: 24px 288px;
+$pad-search: 16px 20px;
+$pad-menu: 15px 20px;
+$pad-cate: 4px 10px;
+$pad-cates: 4px 8px;
+$pad-catec: 8px 10px;
+$pad-stat: 30px 74px;