[Fix/#10] global.css 로 인해 next dev 명령어가 실행되지 않는 문제 해결

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "prettier",
+    "airbnb",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "react", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/react-in-jsx-scope": "off"
+  }
+}

package.json

@@ -11,20 +11,22 @@
   },
   "dependencies": {
     "eslint-plugin-prettier": "^5.2.3",
-    "next": "15.0.3",
+    "next": "^15.1.7",
     "prettier": "^3.5.0",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.0.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-next": "^15.1.7",
+    "eslint-config-next": "^13.0.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-import": "^2.25.2",
@@ -33,9 +35,9 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "postcss": "^8",
+    "postcss": "^8.4.5",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.1",
-    "typescript": "*"
+    "typescript": "^5.0.0"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/globals.css

@@ -5,17 +5,17 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
   }
-}
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Pretendard, serif;
+  }
 }

src/app/layout.tsx

@@ -14,7 +14,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: '빌릴게',
   description: 'Generated by create next app',
 };
 

tailwind.config.ts

@@ -12,8 +12,27 @@ export default {
         pretendard: ['Pretendard', 'sans-serif'],
       },
       colors: {
-        background: 'var(--background)',
         foreground: 'var(--foreground)',
+        background: 'var(--background)',
+
+        // 기본 색상 정의
+        warning: '#CC2E2E',
+        'black-primary': '#202125',
+        'white-primary': '#FAFAFA',
+        // background: '#F3F4F8',
+
+        'return-red': '#CC2E2E',
+        'return-blue': '#5294FF',
+
+        'main-primary': '#2E5ACC',
+        'main-secondary': '#899FD8',
+        'main-tertiary': '#C0C9E0',
+
+        'gray-primary': '#37393C',
+        'gray-secondary': '#898C8E',
+        'gray-tertiary': '#F2F1F1',
+        'gray-border': '#DCDDDE',
+      },
       fontSize: {
         'heading-1_M': ['24px', { lineHeight: '32px' }],
         'heading-2_M': ['22px', { lineHeight: '30px' }],
@@ -33,28 +52,7 @@ export default {
         'heading-2_D': ['32px', { lineHeight: '40px' }],
         'heading-3_D': ['24px', { lineHeight: '32px' }],
         'heading-4_D': ['20px', { lineHeight: '28px' }],
-        'text': ['18px', { lineHeight: '20px' }],
-      },
-
-      colors: {
-        foreground: "var(--foreground)",
-
-        'warning': "#CC2E2E",
-        'black-primary': "#202125",
-        'white-primary':'#FAFAFA',
-        'background': "#F3F4F8",
-
-        'return-red': '#CC2E2E',
-        'return-blue:': '#5294FF',
-
-        'main-primary':'#2E5ACC',
-        'main-secondary':'#899FD8',
-        'main-tertiary':'#C0C9E0',
-
-        'gray-primary':'#37393C',
-        'gray-secondary':'#898C8E',
-        'gray-tertiary':'#F2F1F1',
-        'gray-border':'#DCDDDE',
+        text: ['18px', { lineHeight: '20px' }],
       },
     },
   },