[Docs] #40 - 신규 팀원 온보딩 가이드 문서 작성#41
Conversation
📝 WalkthroughWalkthroughConsolidates global styling by importing Tailwind in Storybook, adds autoprefixer to PostCSS, introduces app CSS, removes several legacy component CSS files, migrates components to inline Tailwind classes, and adds a comprehensive CONTRIBUTING.md documentation file. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
postcss.config.js (1)
4-4: Removeautoprefixer— it's redundant with Tailwind v4.Tailwind v4 integrates Lightning CSS, which provides built-in vendor prefixing. Using both
@tailwindcss/postcssandautoprefixeradds unnecessary processing without benefit. Unless you have a specific older browser compatibility requirement, remove this line.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@postcss.config.js` at line 4, Remove the redundant "autoprefixer" entry from postcss.config.js: delete the line containing autoprefixer: {} so only Tailwind's PostCSS plugin (e.g., `@tailwindcss/postcss` or equivalent) remains; no code changes elsewhere are needed unless you have explicit legacy browser requirements, in which case document that decision in a comment or README.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/CONTRIBUTING.md`:
- Around line 67-69: The "## 개발 가이드" section currently links to itself via
"[CONTRIBUTING.md](./CONTRIBUTING.md)"; replace that circular self-link with
direct, actionable links or in-file anchors to the actual onboarding sections
(e.g., "개발 환경 설정", "FSD 아키텍처", "개발 워크플로우", "코드 컨벤션") or expand the file in-place
to include skeleton sections 1–4 so readers can follow the setup steps; update
the visible link/text and add corresponding headings (e.g., "### 1. 개발 환경 설정",
"### 2. FSD 아키텍처", "### 3. 개발 워크플로우", "### 4. 코드 컨벤션") so the onboarding flow is
non-circular and immediately navigable.
In `@src/pages/home/home.tsx`:
- Around line 62-68: The toolbar SVG is purely decorative and should be hidden
from assistive tech: update the <svg> element (the inline SVG in the Home
component) to include aria-hidden="true" and focusable="false" (or
role="presentation") so screen readers ignore it; keep the existing className
and attributes but add those accessibility attributes to the SVG tag.
- Line 21: The Tailwind v3 arbitrary value syntax text-[var(--color-gray-900)]
in the JSX section className is not v4-compatible; update the class string in
the Home component (the JSX element using className="mx-auto px-5 py-12
max-w-[600px] text-[14px] leading-6 text-[var(--color-gray-900)] font-sans") to
use the v4 CSS-variable shorthand text-(--color-gray-900) so the color variable
is applied properly while keeping the rest of the utility classes unchanged.
In `@src/widgets/header/ui/header.tsx`:
- Around line 18-24: The SVG used in header.tsx is decorative and should be
hidden from assistive tech; update the <svg> element in the Header component to
include aria-hidden="true" and focusable="false" (remove or avoid role="img" or
any accessible labels) so screen readers ignore the logo and it cannot receive
keyboard focus.
- Line 47: Search for className occurrences that use the Tailwind v3-style
pattern `[var(--...)]` (e.g., text-[var(--color-gray-900)]) and replace them
with the v4 parentheses syntax `-(--variable-name)` (e.g.,
text-(--color-gray-900)); update all instances found in the Header component
(header.tsx) and similarly in the Card (card.tsx), Button (button.tsx), and Home
(home.tsx) components by converting patterns like text-[var(--foo)] or
bg-[var(--foo)] to text-(--foo) or bg-(--foo) respectively, ensuring you only
change the className token and preserve surrounding classes and spacing.
---
Nitpick comments:
In `@postcss.config.js`:
- Line 4: Remove the redundant "autoprefixer" entry from postcss.config.js:
delete the line containing autoprefixer: {} so only Tailwind's PostCSS plugin
(e.g., `@tailwindcss/postcss` or equivalent) remains; no code changes elsewhere
are needed unless you have explicit legacy browser requirements, in which case
document that decision in a comment or README.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fc940e56-f733-49f5-928c-7da4cf797f2a
📒 Files selected for processing (10)
.storybook/preview.tsdocs/CONTRIBUTING.mdpostcss.config.jssrc/app/index.csssrc/index.csssrc/pages/home/home.csssrc/pages/home/home.tsxsrc/shared/ui/button/button.csssrc/widgets/header/ui/header.csssrc/widgets/header/ui/header.tsx
💤 Files with no reviewable changes (3)
- src/pages/home/home.css
- src/shared/ui/button/button.css
- src/widgets/header/ui/header.css
|
|
||
| <section className="storybook-page"> | ||
| <h2>Pages in Storybook</h2> | ||
| <section className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6 text-[var(--color-gray-900)] font-sans"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the file exists and read around line 21
cat -n src/pages/home/home.tsx | sed -n '15,30p'Repository: ajou-industry-matching/aim-frontend
Length of output: 927
🏁 Script executed:
# Search for all v3-style CSS-variable arbitrary-value classes in the file
rg -n '(text|bg|border)-\[var\(' src/pages/home/home.tsxRepository: ajou-industry-matching/aim-frontend
Length of output: 203
🌐 Web query:
Tailwind CSS v4 CSS-variable arbitrary value syntax
💡 Result:
In Tailwind CSS v4, when the arbitrary value is a CSS custom property (CSS variable), the preferred shorthand uses parentheses:
- Before (v3-style):
bg-[--brand-color](orbg-[var(--brand-color)]) - Now (v4 shorthand):
bg-(--brand-color)(equivalent tobg-[var(--brand-color)]) [2][3]
Examples (from the v4 docs):
min-w-(--my-min-width)→min-width: var(--my-min-width)[2]duration-(--my-duration)→transition-duration: var(--my-duration)[3]bg-size-(--my-image-size)→background-size: var(--my-image-size)[4]
For colors with an alpha driven by a CSS variable, v4 also supports:
bg-cyan-400/(--my-alpha-value)[5]
Square brackets are still used for non-variable arbitrary values, like w-[220px], bg-[#bada55], etc. [2]
Sources
[1] DEV article noting v4 change to parentheses for CSS variables in arbitrary values: (dev.to)
[2] Tailwind docs (min-width) showing min-w-(--my-min-width) and bracket arbitrary values: (tailwindcss.com)
[3] Tailwind docs (transition-duration) showing duration-(--my-duration) shorthand: (tailwindcss.com)
[4] Tailwind docs (background-size) showing bg-size-(--my-image-size) shorthand: (tailwindcss.com)
[5] Tailwind docs (colors) showing bg-cyan-400/(--my-alpha-value): (tailwindcss.com)
Citations:
- 1: https://dev.to/logrocket/getting-ready-for-tailwind-v40-53gh?utm_source=openai
- 2: https://tailwindcss.com/docs/min-width?utm_source=openai
- 3: https://tailwindcss.com/docs/transition-duration/?utm_source=openai
- 4: https://tailwindcss.com/docs/background-size?utm_source=openai
- 5: https://tailwindcss.com/docs/colors?utm_source=openai
Migrate to Tailwind v4-compatible CSS-variable class syntax.
text-[var(--color-gray-900)] uses v3-style syntax; v4 supports the shorthand form text-(--color-gray-900) which is preferred for CSS variable arbitrary values.
🔧 Proposed change
- <section className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6 text-[var(--color-gray-900)] font-sans">
+ <section className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6 text-(--color-gray-900) font-sans">📝 Committable suggestion
‼️ 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.
| <section className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6 text-[var(--color-gray-900)] font-sans"> | |
| <section className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6 text-(--color-gray-900) font-sans"> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/home.tsx` at line 21, The Tailwind v3 arbitrary value syntax
text-[var(--color-gray-900)] in the JSX section className is not v4-compatible;
update the class string in the Home component (the JSX element using
className="mx-auto px-5 py-12 max-w-[600px] text-[14px] leading-6
text-[var(--color-gray-900)] font-sans") to use the v4 CSS-variable shorthand
text-(--color-gray-900) so the color variable is applied properly while keeping
the rest of the utility classes unchanged.
| <svg | ||
| width="12" | ||
| height="12" | ||
| viewBox="0 0 12 12" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="inline-block align-top mt-[3px] mr-1 w-3 h-3" | ||
| > |
There was a problem hiding this comment.
Mark the toolbar SVG icon as decorative.
This icon is visual-only, so it should be hidden from assistive technologies.
♿ Proposed change
<svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
className="inline-block align-top mt-[3px] mr-1 w-3 h-3"
+ aria-hidden="true"
+ focusable="false"
>📝 Committable suggestion
‼️ 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.
| <svg | |
| width="12" | |
| height="12" | |
| viewBox="0 0 12 12" | |
| xmlns="http://www.w3.org/2000/svg" | |
| className="inline-block align-top mt-[3px] mr-1 w-3 h-3" | |
| > | |
| <svg | |
| width="12" | |
| height="12" | |
| viewBox="0 0 12 12" | |
| xmlns="http://www.w3.org/2000/svg" | |
| className="inline-block align-top mt-[3px] mr-1 w-3 h-3" | |
| aria-hidden="true" | |
| focusable="false" | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/home.tsx` around lines 62 - 68, The toolbar SVG is purely
decorative and should be hidden from assistive tech: update the <svg> element
(the inline SVG in the Home component) to include aria-hidden="true" and
focusable="false" (or role="presentation") so screen readers ignore it; keep the
existing className and attributes but add those accessibility attributes to the
SVG tag.
| {user ? ( | ||
| <> | ||
| <span className="welcome"> | ||
| <span className="mr-2 text-[14px] text-[var(--color-gray-900)]"> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Tailwind CSS v4 arbitrary value CSS variable syntax
💡 Result:
In Tailwind CSS v4, when the value you’re passing is a CSS custom property, use parentheses instead of the old square-bracket shorthand:
- v3:
bg-[--brand-color] - v4:
bg-(--brand-color)(this expands tobg-[var(--brand-color)]) [1]
This pattern is used across utilities that support custom-property shorthands, for example:
opacity-(--my-opacity)→opacity: var(--my-opacity)[2]bg-size-(--my-image-size)→background-size: var(--my-image-size)[3]
Notes:
- Regular arbitrary values are still square brackets, e.g.
w-[200px],bg-[#bada55]. - For color opacity with a CSS variable, Tailwind uses the same parentheses form in the opacity slot, e.g.
bg-cyan-400/(--my-alpha-value)[4]
Sources: [1] [2] [3] [4]
🏁 Script executed:
# Check if file exists and examine the relevant line
cat -n src/widgets/header/ui/header.tsx | sed -n '40,55p'Repository: ajou-industry-matching/aim-frontend
Length of output: 650
🏁 Script executed:
# Verify the v3-style pattern across the codebase
rg -n 'text-\[var\(--' src/Repository: ajou-industry-matching/aim-frontend
Length of output: 3204
Migrate Tailwind v4 CSS variable syntax across multiple files.
The v3-style text-[var(--color-gray-900)] pattern needs to be updated to v4's text-(--color-gray-900) syntax (without var() wrapper, as v4 handles that automatically).
This affects multiple files:
- src/widgets/header/ui/header.tsx (1 instance)
- src/shared/ui/card/card.tsx (11 instances)
- src/shared/ui/button/button.tsx (11 instances)
- src/pages/home/home.tsx (1 instance)
All instances using [var(-- pattern should be migrated to the parentheses syntax: -(--variable-name).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/widgets/header/ui/header.tsx` at line 47, Search for className
occurrences that use the Tailwind v3-style pattern `[var(--...)]` (e.g.,
text-[var(--color-gray-900)]) and replace them with the v4 parentheses syntax
`-(--variable-name)` (e.g., text-(--color-gray-900)); update all instances found
in the Header component (header.tsx) and similarly in the Card (card.tsx),
Button (button.tsx), and Home (home.tsx) components by converting patterns like
text-[var(--foo)] or bg-[var(--foo)] to text-(--foo) or bg-(--foo) respectively,
ensuring you only change the className token and preserve surrounding classes
and spacing.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
README.md (1)
69-69:⚠️ Potential issue | 🟡 Minor개발 가이드 링크 경로가 잘못되어 문서 이동이 깨질 가능성이 큽니다.
Line 69의
./CONTRIBUTING.md는 현재 PR 구조 기준으로docs/CONTRIBUTING.md를 가리키지 않습니다. README 기준 상대경로를./docs/CONTRIBUTING.md로 수정해 주세요.Suggested diff
-프로젝트 구조, 컨벤션, 워크플로우는 **[CONTRIBUTING.md](./CONTRIBUTING.md)** 를 참고하세요. +프로젝트 구조, 컨벤션, 워크플로우는 **[CONTRIBUTING.md](./docs/CONTRIBUTING.md)** 를 참고하세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` at line 69, Update the broken relative link in README.md that currently points to "./CONTRIBUTING.md" so it correctly references the moved file; change the markdown link target to "./docs/CONTRIBUTING.md" (the link text "CONTRIBUTING.md" can remain) to ensure the project guide points to the docs/CONTRIBUTING.md location.
🧹 Nitpick comments (1)
docs/CONTRIBUTING.md (1)
196-205: 타입 예시가 같은 식별자를 중복 선언해 혼동을 줄 수 있습니다.Line 198과 Line 201에서
ButtonVariant를 연속 재선언하고 있어, 독자가 그대로 복붙하면 오류를 만날 수 있습니다. 예시를 “선택지 A/B”로 분리하거나 타입명을 분리해 주세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/CONTRIBUTING.md` around lines 196 - 205, The example duplicates the identifier ButtonVariant (first as a string literal union and then again from BUTTON_VARIANTS), which will confuse readers and cause copy-paste errors; refactor the docs to present the two approaches separately by either renaming one of the types (e.g., ButtonVariantLiteral vs ButtonVariantFromArray) or by splitting into “Option A” and “Option B” sections, and ensure the enum example uses a distinct name (e.g., ButtonVariantEnum) so BUTTON_VARIANTS, ButtonVariant, and the enum are never declared with the same identifier in the same snippet.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/CONTRIBUTING.md`:
- Around line 52-60: The fenced code blocks in CONTRIBUTING.md are missing
language tags causing markdownlint MD040; update each block by adding an
appropriate language identifier: add ```bash for the environment variables block
containing VITE_FIREBASE_API_KEY/APP_ID, add ```text for the directory tree
block starting with "aim-frontend/", add ```text for the path line "app → pages
→ widgets → features → entities → shared", and add ```text (or ```bash if you
prefer) for the architecture block beginning with "브라우저" so all four fenced
blocks include language tags.
---
Duplicate comments:
In `@README.md`:
- Line 69: Update the broken relative link in README.md that currently points to
"./CONTRIBUTING.md" so it correctly references the moved file; change the
markdown link target to "./docs/CONTRIBUTING.md" (the link text
"CONTRIBUTING.md" can remain) to ensure the project guide points to the
docs/CONTRIBUTING.md location.
---
Nitpick comments:
In `@docs/CONTRIBUTING.md`:
- Around line 196-205: The example duplicates the identifier ButtonVariant
(first as a string literal union and then again from BUTTON_VARIANTS), which
will confuse readers and cause copy-paste errors; refactor the docs to present
the two approaches separately by either renaming one of the types (e.g.,
ButtonVariantLiteral vs ButtonVariantFromArray) or by splitting into “Option A”
and “Option B” sections, and ensure the enum example uses a distinct name (e.g.,
ButtonVariantEnum) so BUTTON_VARIANTS, ButtonVariant, and the enum are never
declared with the same identifier in the same snippet.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 44d4870d-5c39-4b91-8ee7-5e342f67be64
📒 Files selected for processing (2)
README.mddocs/CONTRIBUTING.md
| ``` | ||
| VITE_FIREBASE_API_KEY=... | ||
| VITE_FIREBASE_AUTH_DOMAIN=... | ||
| VITE_FIREBASE_PROJECT_ID=... | ||
| VITE_FIREBASE_STORAGE_BUCKET=... | ||
| VITE_FIREBASE_MESSAGING_SENDER_ID=... | ||
| VITE_FIREBASE_APP_ID=... | ||
| ``` | ||
|
|
There was a problem hiding this comment.
코드 블록 언어 지정 누락으로 markdownlint 경고가 발생합니다.
Line 52, Line 65, Line 109, Line 129의 fenced code block에 언어 태그가 없어 MD040 경고가 납니다. 문서 CI 안정성을 위해 언어(bash, text, plaintext 등)를 명시해 주세요.
Suggested diff
-```
+```bash
VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...- +text
aim-frontend/
├─ .storybook/ # Storybook 설정 (main.ts, preview.ts)
...
└─ tsconfig.json
-```
+```text
app → pages → widgets → features → entities → shared
- +text
브라우저
└─ Firebase Hosting (정적 파일 서빙)
└─ Spring 백엔드 API 호출 (Oracle Cloud Run)
└─ MySQL (Oracle Server)
Firebase: Hosting, Firestore, Storage, Auth
Also applies to: 65-99, 109-111, 129-136
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 52-52: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/CONTRIBUTING.md` around lines 52 - 60, The fenced code blocks in
CONTRIBUTING.md are missing language tags causing markdownlint MD040; update
each block by adding an appropriate language identifier: add ```bash for the
environment variables block containing VITE_FIREBASE_API_KEY/APP_ID, add ```text
for the directory tree block starting with "aim-frontend/", add ```text for the
path line "app → pages → widgets → features → entities → shared", and add
```text (or ```bash if you prefer) for the architecture block beginning with
"브라우저" so all four fenced blocks include language tags.
4 participants
🔎 What is this PR?
📝 Changes
CONTRIBUTING.md신규 생성README.md정리 — 소개/기술스택/빠른시작만 유지, 상세 내용은 CONTRIBUTING.md로 이전🙏 Request
현재 컴포넌트 개발 단계이니 1~4번 섹션을 위주로 읽어주세요!
Summary by CodeRabbit
Documentation
Style
Chores