⚙️ 프로젝트 추가 설정 (#5)

* feat: zustand version 4.5.5 재설치 * feat: font 파일 추가 * feat: logo.svg 추가 * feat: network_error.png 추가 * feat: 기존 file 삭제 * feat: font 설정 완료 * feat: eslint 추가 설정 * feat: tanstack/react-query devtool setting * feat: QueryProvider setting * feat: font-family update * fix: eslint unused setting remove * feat: tailwind css createFontSize 함수 구현 * fix: eslint.config.mjs remove eslint.config.mjs와 .eslintrc.json의 충돌로 인해 eslint가 정상적으로 작동하지 않아 삭제했습니다. * feat: eslint import update React와 Next import문은 반드시 맨 위로 가도록 pathGroupsExcludedImportTypes에 추가했습니다. 사용하지 않는 styled component는 제거했습니다. * feat: delete fsd-import * feat: tailwind.config.ts update 사용되지 않는 확장자 제거
CollaBu · Oct 13, 2024 · 78da995 · 78da995
1 parent 3115ba0
commit 78da995
Show file tree

Hide file tree

Showing 24 changed files with 1,120 additions and 977 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,45 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "next/typescript",
-    "prettier",
-    "plugin:storybook/recommended"
-  ]
+  "plugins": ["@tanstack/query", "import"],
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier", "plugin:storybook/recommended"],
+  "rules": {
+    "@tanstack/query/stable-query-client": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type",
+          "unknown"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "next",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react", "next"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
 }
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/fonts/GeistMonoVF.woff b/app/fonts/GeistMonoVF.woff
diff --git a/app/fonts/GeistVF.woff b/app/fonts/GeistVF.woff
diff --git a/app/globals.css b/app/globals.css
@@ -14,10 +14,46 @@
   }
 }
 
+@font-face {
+  font-family: 'Pretendard';
+  src:
+    url('/assets/font/pretendard-bold-subset.woff2') format('woff2'),
+    url('/assets/font/pretendard-bold-subset.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src:
+    url('/assets/font/pretendard-semiBold-subset.woff2') format('woff2'),
+    url('/assets/font/pretendard-semiBold-subset.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src:
+    url('/assets/font/pretendard-medium-subset.woff2') format('woff2'),
+    url('/assets/font/pretendard-medium-subset.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src:
+    url('/assets/font/pretendard-regular-subset.woff2') format('woff2'),
+    url('/assets/font/pretendard-regular-subset.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Pretendard', 'sans-serif';
 }
 
 @layer utilities {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,17 +1,7 @@
 import type { Metadata } from 'next';
-import localFont from 'next/font/local';
-import './globals.css';
 
-const geistSans = localFont({
-  src: './fonts/GeistVF.woff',
-  variable: '--font-geist-sans',
-  weight: '100 900',
-});
-const geistMono = localFont({
-  src: './fonts/GeistMonoVF.woff',
-  variable: '--font-geist-mono',
-  weight: '100 900',
-});
+import { QueryProvider } from '@/app/provider';
+import './globals.css';
 
 export const metadata: Metadata = {
   title: 'Pennyway',
@@ -24,8 +14,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    <html lang="ko">
+      <body>
+        <QueryProvider>{children}</QueryProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,101 +1,3 @@
-import Image from 'next/image';
-
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+  return <div className=" text-h1b">Hello World</div>;
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
diff --git a/package.json b/package.json
@@ -19,11 +19,13 @@
     "next": "14.2.14",
     "react": "^18",
     "react-dom": "^18",
-    "zustand": "5.0.0-rc.2"
+    "zustand": "4.5.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
-    "@eslint/js": "^9.12.0",
+    "@eslint/js": "^9.12.0",    
+    "@tanstack/eslint-plugin-query": "^5.59.7",
+    "@tanstack/react-query-devtools": "^5.59.4",
     "@storybook/addon-a11y": "^8.3.5",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.5",
@@ -45,6 +47,7 @@
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.14",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.9.0",
     "globals": "^15.10.0",
     "husky": "^9.1.6",
@@ -65,5 +68,10 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
   },
   "packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca",
-  "type": "module"
+  "type": "module",
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
 }