Repository: MOVIEBOOKIE/MOVIEBOOKIE_FE
Pull request #8: [⚙️ Setting/#7 ] 디자인시스템 적용 
Author: login: anhyeryeon2
Labels: name: ⚙ Setting
description: 개발 환경 세팅
Created: 2025-04-22T10:26:01Z | Merged: 2025-04-25T06:46:00Z

# 🚀 풀 리퀘스트 제안

어떤 변경 사항이 있나요?

## #️⃣ 연관된 이슈

<!-- close #123 -->

close #7 


## ✅ PR 요약

<!-- 이번 PR에서 변경된 핵심 내용을 간결하게 설명해주세요. -->
- 이슈템플릿, 디자인시스템 적용

---
## 📋 작업 상세 내용
- 이슈템플릿 design으로 수정
- color, typography 적용
- margin도 사용할 수 있게 했는데 한번에 레이아웃 설정할때 적용해놓으면 필요없을 것 같기도합니다..>!
- pretendard는 next/font/local 방식으로 적용했습니당

---

## 📸 스크린샷 (선택)

<!--UI/스타일 변경이 있다면, 전/후 비교 스크린샷 또는 데모 GIF 첨부-->
![image](https://github.com/user-attachments/assets/271b8794-5094-473b-8d20-2d49d2fcddc4)
![image](https://github.com/user-attachments/assets/83c3fb78-daa1-4f99-9f13-9e31a7b48cd8)


## 📌 앞으로의 작업 (선택)

<!--이 PR 이후로 진행해야 할 작업, 남은 TODO 등을 적어주세요.-->
- msw 초기세팅 예정

## 💬 리뷰 요구사항 / 의논사항 / 레퍼런스 (선택)

<!--추가적으로 의논사항, 레퍼런스 링크 , 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요-->

tailwind v4는 config 따로 안만들고 요렇게 globla.css에 다 하는거 맞나요??!! 
웹훅이 왜 연결이 안되는걸까요...........................................ㅠㅠ

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new font ("Pretendard") for consistent typography across the application.
  - Added a comprehensive color palette and font size variables for enhanced theming.
  - Implemented utility classes for container padding and a detailed typography system for titles, body text, and captions.
  - Added VSCode editor settings for improved coding experience and Tailwind CSS class detection.
  - Added a VSCode snippet for quick insertion of custom Tailwind CSS classes.

- **Style**
  - Updated global styles to use the new font and color palette.
  - Improved typography and spacing with new utility classes.

- **Chores**
  - Renamed and updated the design issue template for broader applicability.
  - Updated the home page to display a simple "home" text.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/.github/ISSUE_TEMPLATE/html&css.yml b/.github/ISSUE_TEMPLATE/design.yml
similarity index 92%
rename from .github/ISSUE_TEMPLATE/html&css.yml
rename to .github/ISSUE_TEMPLATE/design.yml
index 1c56360a..1244c98b 100644
--- a/.github/ISSUE_TEMPLATE/html&css.yml
+++ b/.github/ISSUE_TEMPLATE/design.yml
@@ -1,7 +1,7 @@
-name: 🎨 HTML & CSS
+name: 🎨 Design
 description: 마크업 및 스타일 관련 작업이 필요할 때 사용하세요.
-title: "[🎨 HTML & CSS] "
-labels: ["🎨 HTML & CSS"]
+title: "[🎨 Design] "
+labels: ["🎨 Design"]
 body:
   - type: textarea
     id: goal
diff --git a/.vscode/setting.json b/.vscode/setting.json
new file mode 100644
index 00000000..fc6d9d75
--- /dev/null
+++ b/.vscode/setting.json
@@ -0,0 +1,10 @@
+{
+  "editor.tabCompletion": "on",
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["class=\"([^\"]*)", "\"([^\"]*)\""],
+    ["className=\"([^\"]*)", "\"([^\"]*)\""]
+  ]
+}
diff --git a/.vscode/tailwind-custom.code-snippets b/.vscode/tailwind-custom.code-snippets
new file mode 100644
index 00000000..68bee669
--- /dev/null
+++ b/.vscode/tailwind-custom.code-snippets
@@ -0,0 +1,10 @@
+{
+  "Tailwind Custom Classes": {
+    "scope": "html,javascript,javascriptreact,typescript,typescriptreact",
+    "prefix": "fs",
+    "body": [
+      "${1|title-1-bold,title-1-semibold,title-2-bold,title-2-semibold,title-3-bold,title-3-semibold,body-1-semibold,body-1-medium,body-2-semibold,body-2-medium,body-3-semibold,body-3-medium,caption-1-medium,caption-1-regular,caption-2-medium,caption-2-regular|}",
+    ],
+    "description": "Custom Tailwind classes",
+  },
+}
diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
new file mode 100644
index 00000000..49c54b51
Binary files /dev/null and b/public/fonts/PretendardVariable.woff2 differ
diff --git a/public/fonts/pretendard.ts b/public/fonts/pretendard.ts
new file mode 100644
index 00000000..cbae83ba
--- /dev/null
+++ b/public/fonts/pretendard.ts
@@ -0,0 +1,7 @@
+import localFont from "next/font/local";
+
+export const pretendard = localFont({
+  src: "../../public/fonts/PretendardVariable.woff2",
+  display: "swap",
+  variable: "--font-pretendard",
+});
diff --git a/src/app/_styles/globals.css b/src/app/_styles/globals.css
index a2dc41ec..c1d6f2b1 100644
--- a/src/app/_styles/globals.css
+++ b/src/app/_styles/globals.css
@@ -1,26 +1,134 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #7A7D82;
+  --color-gray-600: #6f7176;
+  --color-gray-700: #57585c;
+  --color-gray-800: #434448;
+  --color-gray-900: #333537;
+
+  --fs-title-1: 1.5rem;   
+  --fs-title-2: 1.375rem;  
+  --fs-title-3: 1.25rem;    
+  --fs-body-1: 1.125rem;    
+  --fs-body-2: 1rem;        
+  --fs-body-3: 0.875rem;    
+  --fs-caption-1: 0.75rem;  
+  --fs-caption-2: 0.625rem; 
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer components {
+  .container-padding {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .title-1-bold {
+    font-size: var(--fs-title-1);
+    font-weight: 700;
+    line-height: 130%;
+  }
+  .title-1-semibold {
+    font-size: var(--fs-title-1);
+    font-weight: 600;
+    line-height: 130%;
+  }
+
+  .title-2-bold {
+    font-size: var(--fs-title-2);
+    font-weight: 700;
+    line-height: 130%;
+  }
+  .title-2-semibold {
+    font-size: var(--fs-title-2);
+    font-weight: 600;
+    line-height: 130%;
+  }
+
+  .title-3-bold {
+    font-size: var(--fs-title-3);
+    font-weight: 700;
+    line-height: 130%;
+  }
+  .title-3-semibold {
+    font-size: var(--fs-title-3);
+    font-weight: 600;
+    line-height: 130%;
   }
-}
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  .body-1-semibold {
+    font-size: var(--fs-body-1);
+    font-weight: 600;
+    line-height: 130%;
+  }
+  .body-1-medium {
+    font-size: var(--fs-body-1);
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  .body-2-semibold {
+    font-size: var(--fs-body-2);
+    font-weight: 600;
+    line-height: 130%;
+  }
+  .body-2-medium {
+    font-size: var(--fs-body-2);
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  .body-3-semibold {
+    font-size: var(--fs-body-3);
+    font-weight: 600;
+    line-height: 130%;
+  }
+  .body-3-medium {
+    font-size: var(--fs-body-3);
+    font-weight: 500;
+    line-height: 130%;
+  }
+
+  .caption-1-medium {
+    font-size: var(--fs-caption-1);
+    font-weight: 500;
+    line-height: 130%;
+  }
+  .caption-1-regular {
+    font-size: var(--fs-caption-1);
+    font-weight: 400;
+    line-height: 130%;
+  }
+
+  .caption-2-medium {
+    font-size: var(--fs-caption-2);
+    font-weight: 500;
+    line-height: 130%;
+  }
+  .caption-2-regular {
+    font-size: var(--fs-caption-2);
+    font-weight: 400;
+    line-height: 130%;
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1d972089..3d1a3d1f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <main className="p-4"></main>;
+  return <div>home</div>;
 }


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/app/page.tsx (1)</summary><blockquote>

`2-2`: **Simplified Home component - pending design implementation?**

The Home component has been simplified to just a text placeholder. While this simplification aligns with the PR's goal of setting up a design system foundation, consider adding proper semantic HTML and utilizing the newly created design system classes.


```diff
- return <div>home</div>;
+ return (
+   <main className="container-padding">
+     <h1 className="title-1-bold">Home</h1>
+   </main>
+ );
```

</blockquote></details>
<details>
<summary>src/app/_styles/globals.css (1)</summary><blockquote>

`55-141`: **Comprehensive typography system implemented**

The typography classes provide a well-structured system with consistent naming patterns that cover various text styles. This will ensure design consistency throughout the application.


Consider reducing repetition by using CSS nesting or creating base classes for each size category. For example:

```css
.title-1 {
  font-size: var(--fs-title-1);
  line-height: 130%;
}
.title-1-bold {
  composes: title-1;
  font-weight: 700;
}
.title-1-semibold {
  composes: title-1;
  font-weight: 600;
}
```

Alternatively, if using Tailwind, you could utilize its plugin system to generate these classes more programmatically.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 6408d344f4eb28f62a2978ecc67d933e67d3dade and 9d645df9bab1539d6375762cc5ce78468e9a8dc8.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `public/fonts/PretendardVariable.woff2` is excluded by `!**/*.woff2`

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `.github/ISSUE_TEMPLATE/design.yml` (1 hunks)
* `public/fonts/pretendard.ts` (1 hunks)
* `src/app/_styles/globals.css` (1 hunks)
* `src/app/page.tsx` (1 hunks)

</details>

<details>
<summary>🔇 Additional comments (7)</summary><blockquote>

<details>
<summary>public/fonts/pretendard.ts (2)</summary>

`1-7`: **Check the relative path to the font file**

The font configuration looks good overall, but the relative path `"../../public/fonts/PretendardVariable.woff2"` might be problematic. Since this file is already in the `public/fonts` directory, going up two levels and then back to `public/fonts` could be incorrect.


You might want to verify that the font file exists and is accessible with this path. Consider simplifying to `"../PretendardVariable.woff2"` if the font file is in the same directory.

---

`3-7`: **Good font display strategy choice**

Using `display: "swap"` is a good choice for text visibility during font loading, which helps with perceived performance and prevents layout shifts.

</details>
<details>
<summary>.github/ISSUE_TEMPLATE/design.yml (1)</summary>

`1-4`: **Issue template scope appropriately broadened**

Changing from "HTML & CSS" to "Design" is appropriate and aligns well with the broader design system implementation in this PR.

</details>
<details>
<summary>src/app/_styles/globals.css (4)</summary>

`9-30`: **Well-structured color palette**

The color system is well-organized with appropriate variations for red, gray, white, and black. This provides a solid foundation for a consistent color scheme.

---

`32-41`: **Consistent typography scale**

The font size scale is well-defined with appropriate hierarchical relationships. The naming convention (`title`, `body`, `caption`) provides clear intent for usage.

---

`49-53`: **Container padding utility established**

The `.container-padding` class provides a standardized approach to horizontal padding, which will help maintain consistency across the application.

---

`1-1`: <details>
<summary>❌ Incorrect review comment</summary>

**Verify Tailwind CSS import syntax**

The import syntax `@import "tailwindcss";` might not be correct for Tailwind CSS. Typically, Tailwind is imported using `@tailwind` directives.

---

🌐 Web query:

```web
What is the correct syntax for importing Tailwind CSS in a CSS file?
```

💡 Result:

## Correct Syntax for Importing Tailwind CSS in a CSS File

**Standard Import Method**

To include Tailwind CSS in your main CSS file, use the `@import` directive at the very top of your file:

```css
@import "tailwindcss";
```
This approach is commonly used when setting up Tailwind with tools like the Tailwind CLI or PostCSS, and is the recommended method in the official documentation[2][5][6][7].

**Layered Imports (Advanced Usage)**

If you want to import Tailwind's layers individually—for greater control over the injection order or to add custom styles between layers—you can import each layer separately:

```css
@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
@import "./custom-utilities.css";
```
This pattern helps you inject your own styles at the correct point in the cascade, allowing for more granular control over how and when your overrides are applied[1].

**Important Notes on Order**

- All `@import` and `@tailwind` directives should appear at the very start of your CSS file, before any rules. Imports or directives placed below actual CSS may not work as expected or may be ignored by build tools[1][4][9].
- If you use custom CSS files together with Tailwind, import them before the Tailwind directives if you want custom styles to be available for Tailwind features like `@apply`[1][4][9].

**Example of a Minimal Tailwind Import:**

```css
@import "tailwindcss";
```

**Example of Layered Tailwind Imports With Custom Styles:**

```css
@import "tailwindcss/base";
@import "./my-base-styles.css";
@import "tailwindcss/components";
@import "./my-components.css";
@import "tailwindcss/utilities";
@import "./my-utilities.css";
```
This structure makes it easy to organize and override styles as needed[1].

## Summary Table

| Approach                    | Syntax Example                       | When to Use                                        |
|-----------------------------|--------------------------------------|----------------------------------------------------|
| Standard single import      | `@import "tailwindcss";`             | Simple projects, full Tailwind feature set          |
| Layered imports             | `@import "tailwindcss/base";` ...    | Advanced customization, inserting styles by layer   |

Using `@import "tailwindcss";` at the top of your CSS file is the most straightforward and widely compatible method[2][5][6][7]. For more advanced layering and precise style management, import individual Tailwind layers as needed[1].

Citations:

- 1: https://tailwindcss.com/docs/using-with-preprocessors
- 2: https://tailwindcss.com/docs/functions-and-directives
- 3: https://mattferderer.com/add-postcss-imports-to-tailwind-css
- 4: https://elixirforum.com/t/css-import-below-tailwind-does-not-work/54873
- 5: https://tailwindcss.com/docs/installation/tailwind-cli
- 6: https://tailwindcss.com/docs/installation/using-postcss
- 7: https://kombai.com/tailwind/tutorial/
- 8: https://github.com/tailwindlabs/tailwindcss/discussions/15524
- 9: https://discourse.roots.io/t/unable-to-use-import-after-tailwind-on-app-css/26048
- 10: https://github.com/FredKSchott/snowpack/discussions/1417

---



</details>

**Import syntax is correct—no changes needed**

The directive `@import "tailwindcss";` is officially supported and recommended when using Tailwind CLI or PostCSS. It’s a valid shorthand for pulling in all Tailwind layers. While you can opt for layered imports or `@tailwind base/components/utilities` directives for finer control, the current import is correct as-is. 

> Likely an incorrect or invalid review comment.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T10:28:39Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>.github/workflows/pr-to-discord.yml (3)</summary><blockquote>

`3-6`: **Consider secrets availability for forked PRs**  
The `pull_request` event will not expose repository secrets for workflows triggered by forks, so notifications may silently fail on external-contributor PRs. If you need to notify on all PRs, switch to `pull_request_target` which runs in the context of the base branch and grants access to secrets.  
  
Would you like me to update the trigger to `pull_request_target` and adjust context references accordingly?

---

`11-14`: **Improve curl reliability and error handling**  
By default, `curl` won’t fail on HTTP errors (4xx/5xx) and may flood logs. It’s recommended to add `--silent --show-error --fail` flags so the step fails on non‑2xx responses and only outputs error details.  
  
Example diff:
```diff
 run: |
-  curl -H "Content-Type: application/json" \
+  curl --silent --show-error --fail -H "Content-Type: application/json" \
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 actionlint (1.7.4)</summary>

12-12: "github.event.pull_request.title" is potentially untrusted. avoid using it directly in inline scripts. instead, pass it through an environment variable. see https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions for more details

(expression)

</details>

</details>

---

`35-36`: **Use environment variable for the webhook URL**  
Rather than inlining `${{ secrets.DISCORD_WEBHOOK }}` in the command, declare it under `env:` and reference `$DISCORD_WEBHOOK` in the `run` block. This improves readability and avoids potential quoting pitfalls.  
  
```yaml
jobs:
  notify:
    runs-on: ubuntu-latest
    env:
      DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
    steps:
      - name: Send PR info to Discord
        run: |
          curl --silent --show-error --fail ... '$DISCORD_WEBHOOK'
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 9d645df9bab1539d6375762cc5ce78468e9a8dc8 and 95f6ffb5758140ed8a873b738c238937ae116911.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `.github/workflows/pr-to-discord.yml` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 actionlint (1.7.4)</summary>

<details>
<summary>.github/workflows/pr-to-discord.yml</summary>

12-12: "github.event.pull_request.title" is potentially untrusted. avoid using it directly in inline scripts. instead, pass it through an environment variable. see https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions for more details

(expression)

</details>

</details>

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T10:41:03Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 5**

<details>
<summary>♻️ Duplicate comments (4)</summary><blockquote>

<details>
<summary>.github/workflows/pr-to-discord.yml (1)</summary><blockquote>

`22-25`: **Sanitize dynamic fields to prevent JSON injection**

Embedding raw `${{ github.event.pull_request.title }}` and `body` inside JSON risks injection if the title/body contain quotes or special characters.


Use `toJson()` to auto-escape these values:
```diff
-                "title": "${{ github.event.pull_request.title }}",
-                "url": "${{ github.event.pull_request.html_url }}",
-                "description": "${{ github.event.pull_request.body || 'No description provided.' }}",
+                "title": ${{ toJson(github.event.pull_request.title) }},
+                "url": ${{ toJson(github.event.pull_request.html_url) }},
+                "description": ${{ toJson(github.event.pull_request.body || 'No description provided.') }},
```

</blockquote></details>
<details>
<summary>src/app/_styles/globals.css (3)</summary><blockquote>

`3-7`: **Remove duplicate `@layer base` font-family declaration**  
You have two identical `@layer base` blocks setting the `html` font-family (see lines 3–7 and 43–47). Keep only one—preferably the first that uses the CSS variable `--font-pretendard`.

---

`25-26`: **Fix identical gray-400 and gray-500 values**  
`--color-gray-400` and `--color-gray-500` are both `#95969b`. This duplication creates confusion in the palette. Consider adjusting `--color-gray-500` to a slightly darker shade.

---

`43-47`: **Eliminate redundant base layer**  
This second `@layer base` (lines 43–47) duplicates the first and should be removed to prevent conflicts and reduce bundle size.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>src/app/_styles/globals.css (3)</summary><blockquote>

`9-41`: **Combine theme blocks into one for clarity**  
You’ve declared two separate `@theme` blocks—one for colors (lines 9–30) and one for font-size variables (lines 32–41). Merge these into a single `@theme` block to improve maintainability and avoid scattered declarations.

---

`50-53`: **Align container padding with design token scale**  
Using a hardcoded `20px` makes it harder to adjust spacing globally. Consider replacing with a CSS variable or rem-based utility (e.g., `padding-inline: var(--spacing-4);` or `1.25rem`) that ties into your design system’s spacing scale.

---

`55-142`: **DRY up repetitive typography classes & use unitless line-heights**  
All utility classes repeat `line-height: 130%` and similar font-size/weight patterns. You can:
- Switch to a unitless `line-height: 1.3` for better inheritance and accessibility.
- Group selectors or use CSS custom properties to factor out shared properties (e.g., create `.ds-heading { line-height: 1.3; }` and extend it).
- Leverage Tailwind’s `@apply` directive if appropriate to reuse existing utilities instead of hand-coding every variant.

This will greatly reduce repetition and simplify future updates.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 6408d344f4eb28f62a2978ecc67d933e67d3dade and 14e940cacef3d81fb48f5562bbd2c570b0dd1156.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `public/fonts/PretendardVariable.woff2` is excluded by `!**/*.woff2`

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `.github/ISSUE_TEMPLATE/design.yml` (1 hunks)
* `.github/workflows/pr-to-discord.yml` (1 hunks)
* `public/fonts/pretendard.ts` (1 hunks)
* `src/app/_styles/globals.css` (1 hunks)
* `src/app/page.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 actionlint (1.7.4)</summary>

<details>
<summary>.github/workflows/pr-to-discord.yml</summary>

41-41: could not parse as YAML: yaml: line 41: could not find expected ':'

(syntax-check)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>.github/ISSUE_TEMPLATE/design.yml (1)</summary>

`1-4`: **Good initiative broadening the template scope from "HTML & CSS" to "Design"**

This change appropriately expands the template's focus beyond specific implementation details to encompass all design-related work, which better aligns with comprehensive design system implementation mentioned in the PR objectives.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T11:07:00Z
user: login: Sohyunnnn
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T06:04:39Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-24T06:05:11Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-24T06:05:24Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-24T06:06:10Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-24T06:07:21Z
user: login: anhyeryeon2
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T09:10:38Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>♻️ Duplicate comments (2)</summary><blockquote>

<details>
<summary>src/app/_styles/globals.css (2)</summary><blockquote>

`80-111`: **Duplicate of title typography feedback for body classes**  
The same DRY and line-height improvements suggested for title classes apply here to the `.body-*` typography classes.

---

`113-133`: **Duplicate of title typography feedback for caption classes**  
Apply the earlier suggestions (extract common styles, use unitless line-height) to the `.caption-*` typography classes as well.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/app/_styles/globals.css (4)</summary><blockquote>

`9-17`: **Align red color naming with numeric scale**  
Using `--color-red-main` breaks the otherwise consistent numeric naming convention. Consider renaming it to `--color-red-500` for clarity and to better align with standard Tailwind color scales.

---

`21-29`: **Normalize hex value casing in gray palette**  
The gray palette mixes uppercase (`#7A7D82`) and lowercase hex values (e.g., `#a6a7ab`). For consistency and readability, pick one style (commonly lowercase) across all color variables.

---

`41-45`: **Use responsive units or theme spacing for container padding**  
`.container-padding` currently uses fixed `20px`. Consider switching to `rem` (e.g., `1.25rem`) or leveraging Tailwind’s spacing scale via `theme(spacing)` to maintain consistency and responsiveness.

---

`47-78`: **DRY up title typography classes and prefer unitless line-height**  
The `.title-*` classes share identical `font-size` and `line-height` declarations, varying only by `font-weight`. To reduce duplication:  
- Extract common rules into a base class or CSS custom properties (e.g.,  
  ```css
  .title-1 {
    font-size: var(--fs-title-1);
    line-height: 1.3;
  }
  ```
)  
- Define weight variants separately (e.g., `.title-1-bold { font-weight: 700; }`).  
Also, using a unitless `line-height: 1.3` improves flexibility over `130%`.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 8f4954ea328cc266ae120aa4aa7583d23bdbd7c8 and 60f96f2d01138ec69afa8dfecdf4fb94ab3b1135.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `.vscode/setting.json` (1 hunks)
* `.vscode/tailwind-custom.code-snippets` (1 hunks)
* `src/app/_styles/globals.css` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (2)</summary>

* .vscode/setting.json
* .vscode/tailwind-custom.code-snippets

</details>

<details>
<summary>🔇 Additional comments (3)</summary><blockquote>

<details>
<summary>src/app/_styles/globals.css (3)</summary>

`3-7`: **Verify global font-family variable integration**  
The `@layer base` block correctly sets `font-family` via `var(--font-pretendard)`. Ensure that the Pretendard font module is loaded before this CSS so that the variable is defined (e.g., imported in your root layout).

---

`18-20`: **Basic white/black color variables look good**  
Defining `--color-white` and `--color-black` here is straightforward and clear.

---

`31-38`: **Font-size variables correctly use rem units**  
Great move converting font sizes to `rem` for responsive scaling, as previously discussed.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-24T12:54:01Z
user: login: Sohyunnnn
body: 확인했습니다 👍👍
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-25T05:18:01Z

Review comments:
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
path: src/app/_styles/globals.css
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Duplicate font-family declarations**

There are two identical `@layer base` blocks setting the font-family for HTML. The first one (lines 3-7) uses the CSS variable from the font module, while the second one (lines 43-47) uses a direct string reference.


Keep only one of these declarations, preferably the first one which uses the CSS variable:

```diff
@layer base {
  html {
    font-family: var(--font-pretendard), sans-serif;
  }
}

@theme {
  /* theme declarations */
}

- @layer base {
-   html {
-     font-family: "Pretendard", sans-serif;
-   }
- }
```


Also applies to: 43-47

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-22T10:28:37Z
author_association: NONE
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
path: src/app/_styles/globals.css
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Duplicate gray-500 and gray-400 values**

The values for `--color-gray-400` and `--color-gray-500` are identical (#95969b). This seems unintentional and could cause confusion.


```diff
  --color-gray-300: #a6a7ab;
  --color-gray-400: #95969b;
- --color-gray-500: #95969b;
+ --color-gray-500: #838489; /* Suggest an intermediate value */
  --color-gray-600: #6f7176;
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  --color-gray-300: #a6a7ab;
  --color-gray-400: #95969b;
  --color-gray-500: #838489; /* Suggest an intermediate value */
  --color-gray-600: #6f7176;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->

✅ Addressed in commit 8f4954e

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T10:28:37Z
author_association: NONE
diff_hunk: @@ -0,0 +1,36 @@
+name: Notify Discord on PR
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send PR info to Discord
+        run: |
+          curl -H "Content-Type: application/json" \
+          -X POST \
+          -d '{
+            "content": "📣 **새 Pull Request가 생성되었습니다!**",
+            "embeds": [{
+              "title": "${{ github.event.pull_request.title }}",
+              "description": "${{ github.event.pull_request.body || 'No description' }}",
+              "url": "${{ github.event.pull_request.html_url }}",
+              "color": 5814783,
+              "fields": [
+                {
+                  "name": "🔀 브랜치",
path: .github/workflows/pr-to-discord.yml
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Sanitize dynamic fields to prevent JSON injection**  
Embedding raw `${{ github.event.pull_request.title }}` and `body` inside single-quoted JSON risks injection if the title/body contain quotes or special characters. Use `toJson()` to auto‑escape these values at the expression level. For example:
```yaml
run: |
  curl --silent --show-error --fail -H "Content-Type: application/json" \
    -X POST \
    -d '{
      "content": "📣 **새 Pull Request가 생성되었습니다!**",
      "embeds": [{
        "title": ${{ toJson(github.event.pull_request.title) }},
        "description": ${{ toJson(github.event.pull_request.body || 'No description') }},
        "url": "${{ github.event.pull_request.html_url }}",
        ...
      }]
    }' \
    ${{ secrets.DISCORD_WEBHOOK }}
```
This ensures embedded strings are properly escaped.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T10:41:03Z
author_association: NONE
diff_hunk: @@ -0,0 +1,7 @@
+import localFont from "next/font/local";
+
+export const pretendard = localFont({
+  src: "../../public/fonts/PretendardVariable.woff2",
+  display: "swap",
+  variable: "--font-pretendard",
+});
path: public/fonts/pretendard.ts
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Font configuration looks good but check the path**

The font configuration is well structured using Next.js's font system. However, the relative path to the font file might be incorrect. Since this file is already in `public/fonts/`, the path shouldn't include `public/fonts` again.


Consider simplifying the path:
```diff
-  src: "../../public/fonts/PretendardVariable.woff2",
+  src: "./PretendardVariable.woff2",
```

Please verify that the font file exists at the specified location:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the font file exists in the expected location
ls -la public/fonts/
# Check if the path in the current configuration would resolve correctly
ls -la $(cd public/fonts && cd ../../public/fonts 2>/dev/null && echo "Path exists" || echo "Path doesn't exist")
```

Length of output: 478

---



</details>

**Update the font path in public/fonts/pretendard.ts**

The font file `PretendardVariable.woff2` lives alongside `pretendard.ts`, so you can simplify the relative path.

• File: public/fonts/pretendard.ts, lines 3–5  
```diff
-  src: "../../public/fonts/PretendardVariable.woff2",
+  src: "./PretendardVariable.woff2",
```  


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
export const pretendard = localFont({
  src: "./PretendardVariable.woff2",
  display: "swap",
  variable: "--font-pretendard",
});
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T11:06:59Z
author_association: NONE
diff_hunk: @@ -0,0 +1,41 @@
+name: Notify Discord on PR
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send PR info to Discord
+        env:
+          DISCORD_WEBHOOK: https://discord.com/api/webhooks/1364186605505740870/ytdB1i-KQskzr_ji1MUwTGCDEMXiYe978druTmdqNu0DnuUtGPOFWYnnHAD50agZRLFi
+        run: |
+          curl -X POST "$DISCORD_WEBHOOK" \
+          -H "Content-Type: application/json" \
+          -d @- <<EOF
+          {
+            "content": "📣 **새 Pull Request가 생성되었습니다!**",
+            "embeds": [
+              {
+                "title": "${{ github.event.pull_request.title }}",
+                "url": "${{ github.event.pull_request.html_url }}",
+                "description": "${{ github.event.pull_request.body || 'No description provided.' }}",
+                "color": 5814783,
+                "fields": [
+                  {
+                    "name": "🔀 브랜치",
+                    "value": "\`${{ github.event.pull_request.head.ref }}\` → \`${{ github.event.pull_request.base.ref }}\`",
path: .github/workflows/pr-to-discord.yml
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Apply JSON escaping to all dynamic fields**

Apply the same JSON escaping to branch names and username to prevent potential injection.


```diff
-                    "value": "\`${{ github.event.pull_request.head.ref }}\` → \`${{ github.event.pull_request.base.ref }}\`",
+                    "value": "`" + ${{ toJson(github.event.pull_request.head.ref) }} + "` → `" + ${{ toJson(github.event.pull_request.base.ref) }} + "`",

-                    "value": "${{ github.event.pull_request.user.login }}",
+                    "value": ${{ toJson(github.event.pull_request.user.login) }},
```


Also applies to: 34-34

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T11:06:59Z
author_association: NONE
diff_hunk: @@ -0,0 +1,41 @@
+name: Notify Discord on PR
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send PR info to Discord
+        env:
+          DISCORD_WEBHOOK: https://discord.com/api/webhooks/1364186605505740870/ytdB1i-KQskzr_ji1MUwTGCDEMXiYe978druTmdqNu0DnuUtGPOFWYnnHAD50agZRLFi
path: .github/workflows/pr-to-discord.yml
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Critical security issue: Hardcoded webhook URL**

The Discord webhook URL should never be hardcoded in the repository as it can be misused. This URL should be stored as a GitHub Secret and referenced using the secrets context.


```diff
- DISCORD_WEBHOOK: https://discord.com/api/webhooks/1364186605505740870/ytdB1i-KQskzr_ji1MUwTGCDEMXiYe978druTmdqNu0DnuUtGPOFWYnnHAD50agZRLFi
+ DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
```

Additionally, I recommend rotating the webhook token immediately as it has been exposed in this public PR.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-22T11:06:59Z
author_association: NONE
diff_hunk: @@ -0,0 +1,41 @@
+name: Notify Discord on PR
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send PR info to Discord
+        env:
+          DISCORD_WEBHOOK: https://discord.com/api/webhooks/1364186605505740870/ytdB1i-KQskzr_ji1MUwTGCDEMXiYe978druTmdqNu0DnuUtGPOFWYnnHAD50agZRLFi
+        run: |
+          curl -X POST "$DISCORD_WEBHOOK" \
+          -H "Content-Type: application/json" \
+          -d @- <<EOF
+          {
+            "content": "📣 **새 Pull Request가 생성되었습니다!**",
+            "embeds": [
+              {
+                "title": "${{ github.event.pull_request.title }}",
+                "url": "${{ github.event.pull_request.html_url }}",
+                "description": "${{ github.event.pull_request.body || 'No description provided.' }}",
+                "color": 5814783,
+                "fields": [
+                  {
+                    "name": "🔀 브랜치",
+                    "value": "\`${{ github.event.pull_request.head.ref }}\` → \`${{ github.event.pull_request.base.ref }}\`",
+                    "inline": true
+                  },
+                  {
+                    "name": "👤 작성자",
+                    "value": "${{ github.event.pull_request.user.login }}",
+                    "inline": true
+                  }
+                ]
+              }
+            ]
+          }
+EOF
path: .github/workflows/pr-to-discord.yml
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix YAML syntax error in heredoc ending**

The EOF marker needs proper indentation to match the heredoc opening at line 17.


```diff
-EOF
+          EOF
```

This will resolve the YAML parsing error flagged by static analysis.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          EOF
`````

</details>

<!-- suggestion_end -->

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 actionlint (1.7.4)</summary>

41-41: could not parse as YAML: yaml: line 41: could not find expected ':'

(syntax-check)

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 8f4954e
created_at: 2025-04-22T11:06:59Z
author_association: NONE
diff_hunk: @@ -1,3 +1,3 @@
 export default function Home() {
-  return <main className="p-4"></main>;
+  return <div>home</div>;
path: src/app/page.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider preserving semantic markup and spacing**

While simplifying the component, you've removed the semantic `<main>` tag and padding, which could affect accessibility and layout. As part of implementing a design system, maintaining proper semantics and spacing is essential.


```diff
-  return <div>home</div>;
+  return <main className="p-4">home</main>;
```

Alternatively, if you're implementing spacing through the new design system:

```diff
-  return <div>home</div>;
+  return <main className="m-4">home</main>;
```

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-22T11:06:59Z
author_association: NONE
path: .github/workflows/pr-to-discord.yml
user: login: Sohyunnnn
body: 저는 웹훅 이런 방식으로 연결했는데 한번 참고 부탁 드립니다!!

https://velog.io/@hellojihyoung/Git-Github%EA%B3%BC-Discord-Webhook-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
created_at: 2025-04-24T05:50:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
path: src/app/_styles/globals.css
user: login: Sohyunnnn
body: 코드 두 개 있대요 ! 하나는 삭제 부탁드립니다!
created_at: 2025-04-24T05:52:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
path: src/app/_styles/globals.css
user: login: Sohyunnnn
body: 확인 부탁합니다!! 색상 중복!
created_at: 2025-04-24T05:52:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
+  --color-gray-600: #6f7176;
+  --color-gray-700: #57585c;
+  --color-gray-800: #434448;
+  --color-gray-900: #333537;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@theme {
+  --fs-title-1: 24px;
+  --fs-title-2: 22px;
+  --fs-title-3: 20px;
+  --fs-body-1: 18px;
+  --fs-body-2: 16px;
+  --fs-body-3: 14px;
+  --fs-caption-1: 12px;
+  --fs-caption-2: 10px;
path: src/app/_styles/globals.css
user: login: Sohyunnnn
body: 앞에 fs는 뭔가요 ?
created_at: 2025-04-24T05:54:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
+  --color-gray-600: #6f7176;
+  --color-gray-700: #57585c;
+  --color-gray-800: #434448;
+  --color-gray-900: #333537;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@theme {
+  --fs-title-1: 24px;
+  --fs-title-2: 22px;
+  --fs-title-3: 20px;
+  --fs-body-1: 18px;
+  --fs-body-2: 16px;
+  --fs-body-3: 14px;
+  --fs-caption-1: 12px;
+  --fs-caption-2: 10px;
path: src/app/_styles/globals.css
user: login: Sohyunnnn
body: 폰트 사이즈 단위 rem으로 바꾸면 좋을 거 같습니다 !! (반응형 고려)
created_at: 2025-04-24T05:57:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,3 +1,3 @@
 export default function Home() {
-  return <main className="p-4"></main>;
+  return <div>home</div>;
path: src/app/page.tsx
user: login: Sohyunnnn
body: 이거는 개인적으로 궁금했던 건데 루트 페이지를 home으로 하고 여기에 퍼블리싱 하는지 ?? 어떤 게 좋을 지 의논하면 좋을거 같아요! 
home에 대한 폴더를 만들어 라우팅 처리를 해놓고 그 안에 컴포넌트들도 home 안에 컴포너넌트 폴더에 생성하려고 디렉토리 구조를 짜놔서요 !! 
저 같은 경우는 이 페이지의 return을 home으로 둬서 home으로 라우팅 되게 처리를 했었는데 어떤 방법이 더 좋을지 의논해보아요!!
created_at: 2025-04-24T06:04:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
path: src/app/_styles/globals.css
user: login: coderabbitai[bot]
body: @Sohyunnnn 네, 확인해 보니 `--color-gray-400`와 `--color-gray-500`이 모두 동일한 색상값 `#95969b`을 가지고 있습니다. 디자인 시스템에서는 각 색상 단계가 고유한 값을 갖는 것이 중요합니다. 

색상 스케일이 정상적으로 작동하려면 gray-500은 gray-400보다 어두운 값이어야 합니다. 이전 제안처럼 `--color-gray-500`을 `#838489`와 같은 중간값으로 변경하는 것이 좋을 것 같습니다. 이렇게 하면 gray-400과 gray-600 사이의 자연스러운 그라데이션이 형성됩니다.


<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@Sohyunnnn 네, 확인해 보니 `--color-gray-400`와 `--color-gray-500`이 모두 동일한 색상값 `#95969b`을 가지고 있습니다. 디자인 시스템에서는 각 색상 단계가 고유한 값을 갖는 것이 중요합니다. 

색상 스케일이 정상적으로 작동하려면 gray-500은 gray-400보다 어두운 값이어야 합니다. 이전 제안처럼 `--color-gray-500`을 `#838489`와 같은 중간값으로 변경하는 것이 좋을 것 같습니다. 이렇게 하면 gray-400과 gray-600 사이의 자연스러운 그라데이션이 형성됩니다.</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-24T06:05:11Z
author_association: NONE
diff_hunk: @@ -1,3 +1,3 @@
 export default function Home() {
-  return <main className="p-4"></main>;
+  return <div>home</div>;
path: src/app/page.tsx
user: login: coderabbitai[bot]
body: @Sohyunnnn 안녕하세요! Next.js에서 홈페이지 라우팅에 대한 질문을 주셨네요. 두 가지 접근 방식에 대해 함께 논의해 보겠습니다:

1. **루트 페이지 접근법** (`src/app/page.tsx` → `/`):
   - Next.js의 기본 규칙으로, `page.tsx`가 `/` URL에서 제공됩니다
   - 사용자 경험 측면에서 좋음 (사용자들은 루트 URL에서 홈페이지를 기대함)
   - SEO에 더 유리함
   - 더 간단한 URL 구조

2. **전용 `/home` 라우트 접근법** (`src/app/home/page.tsx` → `/home`):
   - 홈 콘텐츠를 위한 별도의 라우트 생성
   - 홈 관련 컴포넌트들을 더 잘 구조화할 수 있음
   - 하지만 `/`에서도 같은 콘텐츠를 제공하려면 리다이렉션 설정이 필요함

컴포넌트 구성에 관해서는, 어떤 접근 방식을 사용하더라도:
```
src/
├── app/
│   ├── page.tsx (루트 페이지)
│   └── components/
│       └── home/ (홈 관련 컴포넌트들)
```

또는 이렇게도 가능합니다:
```
src/
├── app/
│   ├── page.tsx (루트 페이지)
│   ├── home/ (다른 라우트)
│   └── components/ (공통 컴포넌트)
```

대부분의 Next.js 프로젝트는 첫 번째 접근 방식(루트 페이지)을 사용하면서, 컴포넌트는 적절히 구조화합니다. 그리고 semantic HTML 측면에서는 `<main>` 태그를 유지하는 것이 접근성을 위해 좋습니다.

두 접근법 중 어떤 것이 프로젝트에 더 적합하다고 생각하시나요?


<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@Sohyunnnn 안녕하세요! Next.js에서 홈페이지 라우팅에 대한 질문을 주셨네요. 두 가지 접근 방식에 대해 함께 논의해 보겠습니다:

1. **루트 페이지 접근법** (`src/app/page.tsx` → `/`):
   - Next.js의 기본 규칙으로, `page.tsx`가 `/` URL에서 제공됩니다
   - 사용자 경험 측면에서 좋음 (사용자들은 루트 URL에서 홈페이지를 기대함)
   - SEO에 더 유리함
   - 더 간단한 URL 구조

2. **전용 `/home` 라우트 접근법** (`src/app/home/page.tsx` → `/home`):
   - 홈 콘텐츠를 위한 별도의 라우트 생성
   - 홈 관련 컴포넌트들을 더 잘 구조화할 수 있음
   - 하지만 `/`에서도 같은 콘텐츠를 제공하려면 리다이렉션 설정이 필요함

컴포넌트 구성에 관해서는, 어떤 접근 방식을 사용하더라도:
```
src/
├── app/
│   ├── page.tsx (루트 페이지)
│   └── components/
│       └── home/ (홈 관련 컴포넌트들)
```

또는 이렇게도 가능합니다:
```
src/
├── app/
│   ├── page.tsx (루트 페이지)
│   ├── home/ (다른 라우트)
│   └── components/ (공통 컴포넌트)
```

대부분의 Next.js 프로젝트는 첫 번째 접근 방식(루트 페이지)을 사용하면서, 컴포넌트는 적절히 구조화합니다. 그리고 semantic HTML 측면에서는 `<main>` 태그를 유지하는 것이 접근성을 위해 좋습니다.

두 접근법 중 어떤 것이 프로젝트에 더 적합하다고 생각하시나요?</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-24T06:05:24Z
author_association: NONE
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
path: src/app/_styles/globals.css
user: login: coderabbitai[bot]
body: @Sohyunnnn 네, 중복된 코드 문제를 해결하겠습니다! CSS 변수를 사용하는 첫 번째 `@layer base` 블록은 유지하고 직접 문자열을 사용하는 두 번째 블록을 제거하는 것이 좋겠습니다.



```mermaid
flowchart TB
    A["중복 font-family 선언 제거"]
    A --> B["globals.css에서 두 번째 @layer base 블록 삭제"]
    B --> C["첫 번째 CSS 변수 사용 블록은 유지"]
```

<!-- <requirement>
[requirement remove_duplicate_font_declaration_1/1]
`globals.css` 파일에서 중복된 font-family 선언을 제거합니다. CSS 변수를 사용하는 첫 번째 `@layer base` 블록은 유지하고, 직접 문자열을 사용하는 두 번째 블록을 제거합니다.

[propose_code_change]
File: `src/app/_styles/globals.css`

```diff
@import "tailwindcss";

@layer base {
  html {
    font-family: var(--font-pretendard), sans-serif;
  }
}

@theme {
  --color-red-100: #ffdde5;
  --color-red-200: #ffc4d2;
  --color-red-300: #ff92ad;
  --color-red-400: #ff5d7e;
  --color-red-main: #ff1f44;
  --color-red-600: #e6103e;
  --color-red-700: #be1e31;

  --color-white: #fafafa;
  --color-black: #171717;

  --color-gray-100: #ececee;
  --color-gray-200: #d0d0e0;
  --color-gray-300: #a6a7ab;
  --color-gray-400: #95969b;
  --color-gray-500: #95969b;
  --color-gray-600: #6f7176;
  --color-gray-700: #57585c;
  --color-gray-800: #434448;
  --color-gray-900: #333537;
}

@theme {
  --fs-title-1: 24px;
  --fs-title-2: 22px;
  --fs-title-3: 20px;
  --fs-body-1: 18px;
  --fs-body-2: 16px;
  --fs-body-3: 14px;
  --fs-caption-1: 12px;
  --fs-caption-2: 10px;
}

- @layer base {
-   html {
-     font-family: "Pretendard", sans-serif;
-   }
- }

@layer components {
  .container-padding {
    padding-left: 20px;
    padding-right: 20px;
  }

  .title-1-bold {
    font-size: var(--fs-title-1);
    font-weight: 700;
    line-height: 130%;
  }
  .title-1-semibold {
    font-size: var(--fs-title-1);
    font-weight: 600;
    line-height: 130%;
  }

  .title-2-bold {
    font-size: var(--fs-title-2);
    font-weight: 700;
    line-height: 130%;
  }
  .title-2-semibold {
    font-size: var(--fs-title-2);
    font-weight: 600;
    line-height: 130%;
  }

  .title-3-bold {
    font-size: var(--fs-title-3);
    font-weight: 700;
    line-height: 130%;
  }
  .title-3-semibold {
    font-size: var(--fs-title-3);
    font-weight: 600;
    line-height: 130%;
  }

  .body-1-semibold {
    font-size: var(--fs-body-1);
    font-weight: 600;
    line-height: 130%;
  }
  .body-1-medium {
    font-size: var(--fs-body-1);
    font-weight: 500;
    line-height: 130%;
  }

  .body-2-semibold {
    font-size: var(--fs-body-2);
    font-weight: 600;
    line-height: 130%;
  }
  .body-2-medium {
    font-size: var(--fs-body-2);
    font-weight: 500;
    line-height: 130%;
  }

  .body-3-semibold {
    font-size: var(--fs-body-3);
    font-weight: 600;
    line-height: 130%;
  }
  .body-3-medium {
    font-size: var(--fs-body-3);
    font-weight: 500;
    line-height: 130%;
  }

  .caption-1-medium {
    font-size: var(--fs-caption-1);
    font-weight: 500;
    line-height: 130%;
  }
  .caption-1-regular {
    font-size: var(--fs-caption-1);
    font-weight: 400;
    line-height: 130%;
  }

  .caption-2-medium {
    font-size: var(--fs-caption-2);
    font-weight: 500;
    line-height: 130%;
  }
  .caption-2-regular {
    font-size: var(--fs-caption-2);
    font-weight: 400;
    line-height: 130%;
  }
}
```
</requirement> -->

코드 변경을 계획했습니다. 다른 에이전트가 이 변경사항을 실제로 적용할 것입니다. CSS 변수(`var(--font-pretendard)`)를 사용하는 첫 번째 선언만 유지하고 두 번째 중복 선언을 제거하도록 했습니다.

---

⏳ Preparing changes...




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><nextState>plan-edits</nextState></rawResChunk> -->

<!-- <rawResChunk><answer>@Sohyunnnn 네, 중복된 코드 문제를 해결하겠습니다! CSS 변수를 사용하는 첫 번째 `@layer base` 블록은 유지하고 직접 문자열을 사용하는 두 번째 블록을 제거하는 것이 좋겠습니다.



```mermaid
flowchart TB
    A["중복 font-family 선언 제거"]
    A --&gt; B["globals.css에서 두 번째 @layer base 블록 삭제"]
    B --&gt; C["첫 번째 CSS 변수 사용 블록은 유지"]
```

&lt;!-- <requirement>
[requirement remove_duplicate_font_declaration_1/1]
`globals.css` 파일에서 중복된 font-family 선언을 제거합니다. CSS 변수를 사용하는 첫 번째 `@layer base` 블록은 유지하고, 직접 문자열을 사용하는 두 번째 블록을 제거합니다.

[propose_code_change]
File: `src/app/_styles/globals.css`

```diff
@import "tailwindcss";

@layer base {
  html {
    font-family: var(--font-pretendard), sans-serif;
  }
}

@theme {
  --color-red-100: #ffdde5;
  --color-red-200: #ffc4d2;
  --color-red-300: #ff92ad;
  --color-red-400: #ff5d7e;
  --color-red-main: #ff1f44;
  --color-red-600: #e6103e;
  --color-red-700: #be1e31;

  --color-white: #fafafa;
  --color-black: #171717;

  --color-gray-100: #ececee;
  --color-gray-200: #d0d0e0;
  --color-gray-300: #a6a7ab;
  --color-gray-400: #95969b;
  --color-gray-500: #95969b;
  --color-gray-600: #6f7176;
  --color-gray-700: #57585c;
  --color-gray-800: #434448;
  --color-gray-900: #333537;
}

@theme {
  --fs-title-1: 24px;
  --fs-title-2: 22px;
  --fs-title-3: 20px;
  --fs-body-1: 18px;
  --fs-body-2: 16px;
  --fs-body-3: 14px;
  --fs-caption-1: 12px;
  --fs-caption-2: 10px;
}

- @layer base {
-   html {
-     font-family: "Pretendard", sans-serif;
-   }
- }

@layer components {
  .container-padding {
    padding-left: 20px;
    padding-right: 20px;
  }

  .title-1-bold {
    font-size: var(--fs-title-1);
    font-weight: 700;
    line-height: 130%;
  }
  .title-1-semibold {
    font-size: var(--fs-title-1);
    font-weight: 600;
    line-height: 130%;
  }

  .title-2-bold {
    font-size: var(--fs-title-2);
    font-weight: 700;
    line-height: 130%;
  }
  .title-2-semibold {
    font-size: var(--fs-title-2);
    font-weight: 600;
    line-height: 130%;
  }

  .title-3-bold {
    font-size: var(--fs-title-3);
    font-weight: 700;
    line-height: 130%;
  }
  .title-3-semibold {
    font-size: var(--fs-title-3);
    font-weight: 600;
    line-height: 130%;
  }

  .body-1-semibold {
    font-size: var(--fs-body-1);
    font-weight: 600;
    line-height: 130%;
  }
  .body-1-medium {
    font-size: var(--fs-body-1);
    font-weight: 500;
    line-height: 130%;
  }

  .body-2-semibold {
    font-size: var(--fs-body-2);
    font-weight: 600;
    line-height: 130%;
  }
  .body-2-medium {
    font-size: var(--fs-body-2);
    font-weight: 500;
    line-height: 130%;
  }

  .body-3-semibold {
    font-size: var(--fs-body-3);
    font-weight: 600;
    line-height: 130%;
  }
  .body-3-medium {
    font-size: var(--fs-body-3);
    font-weight: 500;
    line-height: 130%;
  }

  .caption-1-medium {
    font-size: var(--fs-caption-1);
    font-weight: 500;
    line-height: 130%;
  }
  .caption-1-regular {
    font-size: var(--fs-caption-1);
    font-weight: 400;
    line-height: 130%;
  }

  .caption-2-medium {
    font-size: var(--fs-caption-2);
    font-weight: 500;
    line-height: 130%;
  }
  .caption-2-regular {
    font-size: var(--fs-caption-2);
    font-weight: 400;
    line-height: 130%;
  }
}
```
</requirement> --&gt;

코드 변경을 계획했습니다. 다른 에이전트가 이 변경사항을 실제로 적용할 것입니다. CSS 변수(`var(--font-pretendard)`)를 사용하는 첫 번째 선언만 유지하고 두 번째 중복 선언을 제거하도록 했습니다.

---

⏳ Preparing changes...

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-24T06:06:10Z
author_association: NONE
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
path: src/app/_styles/globals.css
user: login: coderabbitai[bot]
body: A summary of the edits CodeRabbit can apply:

> Remove the duplicate font-family declaration in src/app/_styles/globals.css by deleting the second @layer base block.



A plan of each step that CodeRabbit will take in order to execute the edits for each file (with inline rough draft snippets):

<details>
<summary>✏️ src/app/_styles/globals.css</summary>

Open src/app/_styles/globals.css and scroll to lines 43–47 to verify the duplicate block:

---

  
```css
@layer base {
  html {
    font-family: "Pretendard", sans-serif;
  }
}
```  


---

Remove lines 43 through 47 entirely so only the first @layer base block (using the CSS variable) remains.

---

Save the file and rebuild or restart your development server to confirm there are no CSS errors and that the font-family is applied from the first block only.

</details>



A summary of the context that CodeRabbit is considering across the codebase:

> Locate all occurrences of the `@layer base` declaration in globals.css to identify the duplicate block.

- [ ] <!-- {"checkboxId": "32599f3c-a2a5-4bb9-b887-dee90db62b97", "radioGroupId": "edit-actions-group-2057596575"} --> ✅ Create PR with these edits

- [ ] <!-- {"checkboxId": "6b3df8e2-79f5-4eb8-9d4a-c7d3a6a5f7b1", "radioGroupId": "edit-actions-group-2057596575"} --> 📋 Get copyable edits

- [ ] <!-- {"checkboxId": "85e7c9f1-3a23-4b8e-9f25-d7a5b234a8c1", "radioGroupId": "edit-actions-group-2057596575"} --> 📌 Create commit in current branch

- [ ] <!-- {"checkboxId": "1ff584df-7767-46fe-8b5b-0980b49c465f", "radioGroupId": "edit-actions-group-2057596575"} --> 🔄 Try a different approach

- [ ] <!-- {"checkboxId": "919c2a8d-ad1e-46c4-ac0b-0b682f9a0532", "radioGroupId": "edit-actions-group-2057596575"} --> ⏪ Go back to ordinary chat

<!-- <agentComponentType>plan-edits</agentComponentType> -->

<!-- <rawResChunk><rationale>The user pointed out duplicate font-family declarations in the globals.css file, specifically two @layer base blocks setting font-family on html. The first block uses the CSS variable (--font-pretendard), the second uses a direct string "Pretendard". The user wants to keep only the first block and remove the second. The current diff shows only the first block at lines 3-7, so the second block (lines 43-47) needs to be removed from globals.css to resolve the duplication.</rationale><toEditFile>src/app/_styles/globals.css</toEditFile></rawResChunk> -->

<!-- <rawResChunk><rationale>
File: src/app/_styles/globals.css – contains the duplicate `@layer base` blocks that the user flagged; primary place to remove the second block.  
File: tailwind.config.js/ts – Tailwind’s config may define a default `fontFamily` pointing to “Pretendard”; if so, it should switch to using the CSS variable.  
File: public/fonts/pretendard.ts – exports the `--font-pretendard` variable; ensure this definition stays in sync with any CSS that references it.  
File: src/app/page.tsx – might include inline styles or class-based font-family settings referencing “Pretendard” directly; check for conflicts.  
Files matching `*.module.css` or `*.scss` – component-level style sheets could declare their own font-family rules for Pretendard that need consolidation.
</rationale>

<generated_script>
#!/bin/bash
set -e

echo "1. CSS/SCSS files with direct “Pretendard” font-family declarations:"
rg -l 'font-family.*["\']Pretendard' --glob '*.css' --glob '*.scss'

echo -e "\n2. CSS files containing '@layer base' blocks (to spot duplicate layers):"
rg -n '@layer base' --glob '*.css'

echo -e "\n3. Tailwind configuration files (potential global font overrides):"
fd 'tailwind.config.*' -e js -e ts

echo -e "\n4. TS/TSX files referencing “Pretendard” (inline styles or imports):"
rg -l 'Pretendard' --glob '*.ts' --glob '*.tsx'

echo -e "\n5. Component CSS modules (*.module.css) for localized font-family rules:"
fd --extension css --regex '.*\.module\.css$'
</generated_script></rawResChunk> -->

<!-- <rawResChunk><context>
  <rationale>Locate all occurrences of the `@layer base` declaration in globals.css to identify the duplicate block.</rationale>
  <generated_script>
```shell
grep -n '@layer base' src/app/_styles/globals.css
```
  </generated_script>
  <shell_result>
src/app/_styles/globals.css:3:@layer base {
src/app/_styles/globals.css:43:@layer base {
  </shell_result>
</context>

<fileAction>
  <fileActionSummary>Remove the duplicate font-family declaration in src/app/_styles/globals.css by deleting the second @layer base block.</fileActionSummary>
  <type>Delete</type>
  <file_name>src/app/_styles/globals.css</file_name>
  <start_line>43</start_line>
  <end_line>47</end_line>
  <steps>
    <step>
      <stepNumber>1</stepNumber>
      <generated_instruction>Open src/app/_styles/globals.css and scroll to lines 43–47 to verify the duplicate block:</generated_instruction>
      <generated_instruction>  
```css
@layer base {
  html {
    font-family: "Pretendard", sans-serif;
  }
}
```  
</generated_instruction>
    </step>
    <step>
      <stepNumber>2</stepNumber>
      <generated_instruction>Remove lines 43 through 47 entirely so only the first @layer base block (using the CSS variable) remains.</generated_instruction>
    </step>
    <step>
      <stepNumber>3</stepNumber>
      <generated_instruction>Save the file and rebuild or restart your development server to confirm there are no CSS errors and that the font-family is applied from the first block only.</generated_instruction>
    </step>
  </steps>
</fileAction></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-24T06:07:20Z
author_association: NONE
diff_hunk: @@ -1,26 +1,142 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer base {
+  html {
+    font-family: var(--font-pretendard), sans-serif;
+  }
+}
+
+@theme {
+  --color-red-100: #ffdde5;
+  --color-red-200: #ffc4d2;
+  --color-red-300: #ff92ad;
+  --color-red-400: #ff5d7e;
+  --color-red-main: #ff1f44;
+  --color-red-600: #e6103e;
+  --color-red-700: #be1e31;
+
+  --color-white: #fafafa;
+  --color-black: #171717;
+
+  --color-gray-100: #ececee;
+  --color-gray-200: #d0d0e0;
+  --color-gray-300: #a6a7ab;
+  --color-gray-400: #95969b;
+  --color-gray-500: #95969b;
+  --color-gray-600: #6f7176;
+  --color-gray-700: #57585c;
+  --color-gray-800: #434448;
+  --color-gray-900: #333537;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+@theme {
+  --fs-title-1: 24px;
+  --fs-title-2: 22px;
+  --fs-title-3: 20px;
+  --fs-body-1: 18px;
+  --fs-body-2: 16px;
+  --fs-body-3: 14px;
+  --fs-caption-1: 12px;
+  --fs-caption-2: 10px;
path: src/app/_styles/globals.css
user: login: anhyeryeon2
body: > 앞에 fs는 뭔가요 ?

font-size의 약자입니당
created_at: 2025-04-24T09:10:38Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-22T11:02:50Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

This update introduces a new font module for Pretendard, restructures the global CSS to implement a comprehensive design system with a color palette, font sizes, and utility typography classes, and updates the base font family. The main page component is simplified to display a placeholder text. Additionally, the GitHub issue template for design-related issues is generalized from "HTML & CSS" to "Design" in its metadata, but the template body remains unchanged. New VSCode configuration files are added to enhance editor support for Tailwind CSS custom classes and string completions.

## Changes

| File(s)                                                      | Change Summary                                                                                                                               |
|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|
| .github/ISSUE_TEMPLATE/design.yml                            | Renamed template and labels from "HTML & CSS" to "Design" in metadata; body content unchanged.                                               |
| public/fonts/pretendard.ts                                   | Added new module exporting the Pretendard font using `next/font/local` with configuration for font file, display, and CSS variable.           |
| src/app/_styles/globals.css                                  | Overhauled CSS: defined color palette and font sizes in `@theme`; set Pretendard as base font; added utility classes for layout and typography.|
| src/app/page.tsx                                             | Changed main component to render a div with "home" text, removing previous padding and semantic tag.                                         |
| .vscode/setting.json                                         | Added editor settings for tab completion, string quick suggestions, and Tailwind CSS class detection with regex for HTML and JSX syntax.      |
| .vscode/tailwind-custom.code-snippets                        | Added snippet for inserting custom Tailwind CSS typography classes with prefix "fs" scoped to multiple file types.                           |

## Assessment against linked issues

| Objective (Issue #)                                    | Addressed | Explanation |
|--------------------------------------------------------|-----------|-------------|
| 디자인시스템 적용 (Apply design system) (#7)            | ✅        |             |

## Poem

> A palette of colors, a font so grand,  
> Pretendard now leads with a stylish hand.  
> Typography classes, so neat and precise,  
> Make every page look clean and nice.  
> The rabbit hops with CSS delight—  
> Design system’s here, and the future is bright!  
> 🐇🎨
"""

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=MOVIEBOOKIE/MOVIEBOOKIE_FE&utm_content=8):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: anhyeryeon2
created_at: 2025-04-24T09:10:22Z
body: @Sohyunnnn  코드리뷰 반영해서 다시 푸시했습니다 !
"이 페이지의 return을 home으로 둬서 home으로 라우팅 되게 처리" 가 ` return <Home /> ` 요렇게 의미하는 건가요? 
/home으로 보내서 라우팅 처리하는 방법은 url에 메인 홈이 /home가 추가되는데,  개인적으로는 기본적인 url만 보여졌을때 홈 이 나오는게 더 깔끔하다고 생각합니당


**+ 그리고 .vscode 파일추가해서 fs 입력하고 Tab 누르면 커스텀 폰트 클래스 목록으로 자동완성되도록 설정했습니다~~**
` <div className="fs">`
author_association: CONTRIBUTOR