💄 Add a style sheet & co. (#3)

### 📝 작업 내용

- CSS를 사용할 수 있도록 설정해 두었습니다. 우선 테일윈드 CSS를 가져왔는데요, 필요하다면 직접 CSS 파일을 따로
작성해도 좋습니다.
- `ci.yml` 파일을 `.github/workflows` 폴더로 옮겼습니다.
- 풀 리퀘스트 템플릿을 올렸습니다.

### 📸 스크린샷 (선택)

없음

### 🚀 리뷰 요구사항 (선택)

없음

Author: young-52

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+### 📝 작업 내용
+
+- 이번 PR에서 작업한 내용을 간략히 설명해주세요.
+
+### 📸 스크린샷 (선택)
+
+### 🚀 리뷰 요구사항 (선택)
+
+- 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요.

.github/ci.yml .github/workflows/ci.yml.github/ci.yml renamed to .github/workflows/ci.yml

@@ -13,6 +13,7 @@
     "check-all": "yarn check:types && yarn check:format && yarn check:unused"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.11.0"

package.json

@@ -0,0 +1,117 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght@100..700");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+
+@import "tailwindcss";
+
+@layer base {
+  html,
+  body {
+    @apply h-full;
+
+    font-family:
+      "Pretendard Variable",
+      Pretendard,
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      "Helvetica Neue",
+      "Segoe UI",
+      "Apple SD Gothic Neo",
+      "Noto Sans KR",
+      "Malgun Gothic",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      sans-serif;
+
+    -webkit-font-smoothing: antialiased;
+
+    line-height: 1.2;
+  }
+}
+
+/* https://dev.to/derick1530/how-to-create-scrollable-element-in-tailwind-without-a-scrollbar-4mbd */
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .styled-scrollbar::-webkit-scrollbar {
+    width: 10px;
+    height: 5px;
+  }
+
+  .styled-scrollbar::-webkit-scrollbar-track {
+    background-color: #f5f5f5;
+    border-radius: 10px;
+  }
+
+  .styled-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #d4d4d4;
+    background-clip: padding-box;
+    border: 1px solid transparent;
+    border-radius: 10px;
+  }
+
+  /* https://github.com/tailwindlabs/tailwindcss/discussions/8679#discussioncomment-4741637 */
+  /* https://github.com/tailwindlabs/tailwindcss/discussions/8679#discussioncomment-6577036 */
+  .autofill-bg-white:-webkit-autofill,
+  .autofill-bg-white:-webkit-autofill:hover,
+  .autofill-bg-white:-webkit-autofill:focus,
+  .autofill-bg-white:-webkit-autofill:active {
+    -webkit-text-fill-color: #262626 !important;
+    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
+    box-shadow: 0 0 0px 1000px #ffffff inset;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: #262626;
+  }
+
+  .autofill-bg-neutral-100:-webkit-autofill,
+  .autofill-bg-neutral-100:-webkit-autofill:hover,
+  .autofill-bg-neutral-100:-webkit-autofill:focus,
+  .autofill-bg-neutral-100:-webkit-autofill:active {
+    -webkit-text-fill-color: #262626 !important;
+    -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
+    box-shadow: 0 0 0px 1000px #f5f5f5 inset;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: #262626;
+  }
+
+  .autofill-bg-neutral-200:-webkit-autofill,
+  .autofill-bg-neutral-200:-webkit-autofill:hover,
+  .autofill-bg-neutral-200:-webkit-autofill:focus,
+  .autofill-bg-neutral-200:-webkit-autofill:active {
+    -webkit-text-fill-color: #262626 !important;
+    -webkit-box-shadow: 0 0 0px 1000px #e5e5e5 inset;
+    box-shadow: 0 0 0px 1000px #e5e5e5 inset;
+    transition: background-color 5000s ease-in-out 0s;
+    caret-color: #262626;
+  }
+
+  .truncate-multi {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .truncate-single {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+}

src/App.css

@@ -1,3 +1,5 @@
+import './App.css';
+
 import { RouterProvider } from 'react-router/dom';
 import { router } from './routes';
 

src/App.tsx

@@ -1,7 +1,8 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 });