wafflestudio · khinwaiyan · Jan 5, 2025 · Dec 30, 2024 · Dec 30, 2024 · Jan 5, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "singleAttributePerLine": true,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/README.md b/README.md
@@ -3,9 +3,13 @@
 ![React Badge](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
 ![TypeScript Badge](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
 ![React Query Badge](https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge&logo=react-query&logoColor=white)
+![Tailwind CSS Badge](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
 
 ## Introduction
 
+prod: http://waffle-wemade.shop/ <br>
+dev: http://dev.waffle-wemade.shop/
+
 ## Getting Started
 
 ```
@@ -16,10 +20,28 @@ yarn install
 
 ## Convention
 
+### Commit Message
+
+| 태그     | 설명                                             |
+| -------- | ------------------------------------------------ |
+| feat     | 새로운 기능 추가                                 |
+| fix      | 버그 수정                                        |
+| refactor | 코드 리팩토링 (기능 변화 없이 코드 구조 개선)    |
+| chore    | 빌드 프로세스나 보조 도구 수정 (코드 변경 없음)  |
+| docs     | 문서 수정                                        |
+| test     | 테스트 코드 추가/수정                            |
+| style    | 코드 스타일 수정 (포매팅, 세미콜론 추가/제거 등) |
+| perf     | 성능 개선                                        |
+| ci       | CI 설정 파일 변경 (GitHub Actions, Jenkins 등)   |
+| revert   | 이전 커밋 되돌리기                               |
+
 ## Contributors
 
 |                                                                               | Name   | Role           | GitHub                                      |
 | ----------------------------------------------------------------------------- | ------ | -------------- | ------------------------------------------- |
 | <img src="https://avatars.githubusercontent.com/u/103587868?v=4" width="40"/> | 조유진 | PM, 프론트엔드 | [Joeyoojin](https://github.com/Joeyoojin)   |
 | <img src="https://avatars.githubusercontent.com/u/134821071?v=4" width="40"/> | 최재웅 | 프론트엔드     | [jwchoi-kr](https://github.com/jwchoi-kr)   |
 | <img src="https://avatars.githubusercontent.com/u/144414644?v=4" width="40"/> | 웨이   | 프론트엔드     | [khinwaiyan](https://github.com/khinwaiyan) |
+| <img src="https://avatars.githubusercontent.com/u/109506859?v=4" width="40"/> | 이다은 | 백엔드         | [de-yi](https://github.com/de-yi)           |
+| <img src="https://avatars.githubusercontent.com/u/10955734?v=4" width="40"/>  | 임찬형 | 백엔드         | [asp345](https://github.com/asp345)         |
+| <img src="https://avatars.githubusercontent.com/u/142161282?v=4" width="40"/> | 최서이 | 디자이너       | [ssechho](https://github.com/ssechho)       |
diff --git a/index.html b/index.html
@@ -2,13 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Wafflestudio에서 진행하는 2024 WEMADE 프로젝트." />
-    <link rel="icon" type="image/svg+xml" href="https://file.wemade.com/homepage/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta
+      name="description"
+      content="Wafflestudio에서 진행하는 2024 WEMADE 프로젝트."
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://file.wemade.com/homepage/favicon.ico"
+    />
     <title>Waffle-WEMADE</title>
   </head>
   <body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -12,8 +12,11 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.10",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -33,6 +36,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react-router-dom": "^7.1.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",

diff --git a/postcss.config.ts b/postcss.config.ts
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,9 @@
-import './App.css';
-import wemadeLogo from './assets/images/wemade-logo-green.png';
+import '@/styles/styles.css';
 
 function App() {
   return (
     <>
-      <div>
-        <a
-          href="https://www.wemade.com/"
-          target="_blank"
-        >
-          <img
-            src={wemadeLogo}
-            className="logo"
-            alt="wemade logo"
-          />
-        </a>
-      </div>
-      <h1>WEMADE 프로젝트</h1>
+      <h1 className="text-3xl font-bold underline">WEMADE 프로젝트</h1>
     </>
   );
 }

diff --git a/src/index.css b/src/index.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import './index.css';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -20,7 +20,13 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Path alias */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react-swc';
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: { alias: { '@': '/src' } },
 });