[Feat/#5] 공용 컴포넌트 구현 - 정민 - #12
Merged
Merged
Conversation
🤖 PR Checks 결과
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Walkthrough공용 알림, 폴더 필터, 과제 카드, 토스트, 폴더 색상 점 컴포넌트와 관련 타입·아이콘·그림자 스타일을 추가했다. 각 컴포넌트의 Storybook 상태 사례와 공용 컴포넌트 파일·import 규칙도 갱신했다. Changes공유 기반 요소
폴더와 과제 UI
알림과 토스트 UI
공용 컴포넌트 개발 규칙
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 2
🧹 Nitpick comments (5)
components/icons/check-circle-fill.tsx (1)
1-6: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win파일명을
CheckCircleFill.tsx로 변경하세요.
components/**규칙상 파일명은 PascalCase이며 export 컴포넌트명과 일치해야 합니다. barrel의 import 경로도 함께 갱신하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/icons/check-circle-fill.tsx` around lines 1 - 6, Rename the icon file to match the PascalCase component name CheckCircleFill, and update all barrel exports or import paths that reference the old check-circle-fill filename while preserving the existing component export.Source: Path instructions
components/common/AlarmItem.tsx (1)
10-23: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win공개 props와 타입 alias에 한국어 JSDoc을 추가하세요.
필드 주석만으로는 타입 자체의 역할과 사용 계약을 빠르게 파악하기 어렵습니다.
components/common/AlarmItem.tsx#L10-L23:AlarmItemProps의 역할과 기본 상태를 설명하는 JSDoc을 추가하세요.components/common/FolderColorDot.tsx#L23-L30:FolderColorDotProps의 용도와 기본 색상·크기 계약을 문서화하세요.components/common/FolderFilterItem.tsx#L12-L19:FolderFilterItemBase가 두 variant에 공유되는 props임을 문서화하세요.components/common/TaskCard.tsx#L12-L23:TaskCardBase가 두 카드 종류에 공유되는 props임을 문서화하세요.components/common/Toast.tsx#L19-L26:ToastProps의 표시 계약과 예시를 포함한 JSDoc을 추가하세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/common/AlarmItem.tsx` around lines 10 - 23, 공개 props 타입 alias에 역할과 사용 계약을 설명하는 한국어 JSDoc을 추가하세요. components/common/AlarmItem.tsx의 AlarmItemProps에는 역할과 기본 status를, components/common/FolderColorDot.tsx의 FolderColorDotProps에는 용도와 기본 색상·크기를, components/common/FolderFilterItem.tsx의 FolderFilterItemBase와 components/common/TaskCard.tsx의 TaskCardBase에는 두 variant가 공유하는 props임을, components/common/Toast.tsx의 ToastProps에는 표시 계약과 사용 예시를 문서화하세요.Source: Coding guidelines
components/common/Toast.tsx (1)
39-42: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
self-center를 제거하고 부모가 배치를 결정하게 하세요.이 클래스는 토스트의 부모 축 배치를 강제해 호출부가 좌측 정렬·스택·고정 위치를 제어하기 어렵게 만듭니다. 정렬은 부모 컨테이너에서 지정하세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/common/Toast.tsx` around lines 39 - 42, Remove the self-center utility from the className passed to the Toast component, while preserving the remaining layout and styling classes. Let the parent container determine the Toast’s axis alignment and positioning.Source: Coding guidelines
components/common/FolderColorDot.stories.tsx (1)
6-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win실제 사용 폭을 재현하는 decorator를 추가하세요.
이 스토리만 캔버스 폭을 고정하지 않아 다른 공용 컴포넌트 사례와 표시 조건이 다릅니다. 실제 사용 문맥에 맞는 폭의
Viewdecorator로 감싸세요. 코딩 가이드의 “decorator에서 실제 화면 너비를 재현한다” 규칙에 따른 의견입니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/common/FolderColorDot.stories.tsx` around lines 6 - 21, Update the FolderColorDot story meta configuration to add a decorator that wraps the story in a View with the same width as its real usage context, matching the established shared-component story pattern. Keep the existing controls, args, and centered layout unchanged.Source: Coding guidelines
components/common/FolderFilterItem.stories.tsx (1)
29-35: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStorybook 타입을 메타 기반 패턴으로 통일하세요.
두 스토리 모두
Meta<Props>와StoryObj<Props>로 우회하고 있지만, 공통 스토리 규칙은satisfies Meta<typeof Component>와StoryObj<typeof meta>조합을 요구합니다. union props에서never가 발생한다면 컴포넌트 또는 스토리 타입 어댑터를 보완한 뒤, 아래 위치 모두 메타 기반 타입으로 복구하고 타입체크로 각 union 사례를 확인하세요.
components/common/FolderFilterItem.stories.tsx#L29-L35:Meta<typeof FolderFilterItem>및StoryObj<typeof meta>패턴으로 변경하세요.components/common/TaskCard.stories.tsx#L26-L32:Meta<typeof TaskCard>및StoryObj<typeof meta>패턴으로 변경하세요.코딩 가이드의 “
satisfies Meta<typeof Component>및StoryObj<typeof meta>조합을 사용한다” 규칙에 따른 의견입니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/common/FolderFilterItem.stories.tsx` around lines 29 - 35, Update components/common/FolderFilterItem.stories.tsx#L29-L35 to use satisfies Meta<typeof FolderFilterItem> and StoryObj<typeof meta>, addressing the discriminated-union typing so all union story cases type-check. Apply the same meta-based pattern in components/common/TaskCard.stories.tsx#L26-L32 with Meta<typeof TaskCard> and StoryObj<typeof meta>, then verify both stories with type-checking.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/common/AGENTS.md`:
- Around line 87-92: Update the TypeScript restrictions in AGENTS.md to
distinguish prohibited type assertions such as `as SomeType` from the permitted
`as const` literal narrowing syntax. Explicitly document that `as const` is
allowed, including the guidance around the existing lines 110–112, while keeping
other `as` assertions prohibited unless justified.
- Around line 208-215: Update the icon usage guidance in the “아이콘 사용” section of
AGENTS.md to include the supported xs variant alongside sm, md, and lg, and
revise the example or size description to reflect xs usage. Do not exclude xs
unless the documentation explicitly establishes that shared components cannot
use it.
---
Nitpick comments:
In `@components/common/AlarmItem.tsx`:
- Around line 10-23: 공개 props 타입 alias에 역할과 사용 계약을 설명하는 한국어 JSDoc을 추가하세요.
components/common/AlarmItem.tsx의 AlarmItemProps에는 역할과 기본 status를,
components/common/FolderColorDot.tsx의 FolderColorDotProps에는 용도와 기본 색상·크기를,
components/common/FolderFilterItem.tsx의 FolderFilterItemBase와
components/common/TaskCard.tsx의 TaskCardBase에는 두 variant가 공유하는 props임을,
components/common/Toast.tsx의 ToastProps에는 표시 계약과 사용 예시를 문서화하세요.
In `@components/common/FolderColorDot.stories.tsx`:
- Around line 6-21: Update the FolderColorDot story meta configuration to add a
decorator that wraps the story in a View with the same width as its real usage
context, matching the established shared-component story pattern. Keep the
existing controls, args, and centered layout unchanged.
In `@components/common/FolderFilterItem.stories.tsx`:
- Around line 29-35: Update
components/common/FolderFilterItem.stories.tsx#L29-L35 to use satisfies
Meta<typeof FolderFilterItem> and StoryObj<typeof meta>, addressing the
discriminated-union typing so all union story cases type-check. Apply the same
meta-based pattern in components/common/TaskCard.stories.tsx#L26-L32 with
Meta<typeof TaskCard> and StoryObj<typeof meta>, then verify both stories with
type-checking.
In `@components/common/Toast.tsx`:
- Around line 39-42: Remove the self-center utility from the className passed to
the Toast component, while preserving the remaining layout and styling classes.
Let the parent container determine the Toast’s axis alignment and positioning.
In `@components/icons/check-circle-fill.tsx`:
- Around line 1-6: Rename the icon file to match the PascalCase component name
CheckCircleFill, and update all barrel exports or import paths that reference
the old check-circle-fill filename while preserving the existing component
export.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 4101e725-bed1-4eb0-96a0-87905d696407
📒 Files selected for processing (18)
components/common/AGENTS.mdcomponents/common/AlarmItem.stories.tsxcomponents/common/AlarmItem.tsxcomponents/common/FolderColorDot.stories.tsxcomponents/common/FolderColorDot.tsxcomponents/common/FolderFilterItem.stories.tsxcomponents/common/FolderFilterItem.tsxcomponents/common/TaskCard.stories.tsxcomponents/common/TaskCard.tsxcomponents/common/Toast.stories.tsxcomponents/common/Toast.tsxcomponents/common/index.tscomponents/icons/check-circle-fill.tsxcomponents/icons/icon.types.tscomponents/icons/icons.stories.tsxcomponents/icons/index.tsconstants/shadows.tstypes/folder.types.ts
Comment on lines
+87
to
+92
| ### 4-1. 금지 목록 | ||
|
|
||
| - `any` 금지. 모르는 값은 `unknown`으로 받고 좁혀서 쓴다. | ||
| - `as` 단언 금지. 대신 **`satisfies`**를 쓴다. 불가피하면 왜 필요한지 주석을 남긴다. | ||
| - `!`(non-null assertion) 금지. optional은 조건 분기로 처리한다. | ||
| - `@ts-ignore` 금지. 정말 필요하면 `@ts-expect-error` + 한 줄 사유. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
as const 허용 예외를 명시해주세요.
90행은 모든 as 단언을 금지한다고 읽히지만, 111~112행에서는 as const 사용을 요구합니다. as SomeType 같은 타입 단언은 금지하되 as const는 허용한다고 명확히 구분해 주세요.
Also applies to: 110-112
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/AGENTS.md` around lines 87 - 92, Update the TypeScript
restrictions in AGENTS.md to distinguish prohibited type assertions such as `as
SomeType` from the permitted `as const` literal narrowing syntax. Explicitly
document that `as const` is allowed, including the guidance around the existing
lines 110–112, while keeping other `as` assertions prohibited unless justified.
Comment on lines
+208
to
+215
| ## 7. 아이콘 사용 | ||
|
|
||
| - 크기는 `variant`(`sm`/`md`/`lg`), 색상은 `className`으로 준다. `width`/`height`/`color` 직접 지정은 예외적인 경우에만. | ||
|
|
||
| ```tsx | ||
| <Check className="text-blue-500" /> | ||
| <Cancel variant="sm" className="text-gray-600" /> | ||
| ``` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
아이콘 크기 규칙에 xs 변형을 반영해주세요.
PR에서 components/icons의 xs 변형이 추가되었지만, 이 문서는 sm/md/lg만 허용하는 것처럼 설명합니다. 실제 지원 크기 집합과 예시를 xs까지 일치시키거나, xs를 공용 컴포넌트에서 제외하는 근거를 명시해 주세요.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/AGENTS.md` around lines 208 - 215, Update the icon usage
guidance in the “아이콘 사용” section of AGENTS.md to include the supported xs
variant alongside sm, md, and lg, and revise the example or size description to
reflect xs usage. Do not exclude xs unless the documentation explicitly
establishes that shared components cannot use it.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
components/common/FolderColorDot/FolderColorDot.tsx (1)
23-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win공개 props 타입에 한국어 JSDoc을 추가해 주세요.
세 공용 컴포넌트의 공개 props type alias에 타입 자체를 설명하는 한국어 JSDoc이 없습니다. 각 타입 앞에 요약과 사용 시 주의사항을 추가해 주세요.
components/common/FolderColorDot/FolderColorDot.tsx#L23-L30:FolderColorDotProps문서 추가components/common/FolderFilterItem/FolderFilterItem.tsx#L28-L38:FolderFilterItemProps문서 추가components/common/TaskCard/TaskCard.tsx#L29-L43:TaskCardProps문서 추가As per coding guidelines, 컴포넌트와 public props/type alias에는 한국어 JSDoc을 작성해야 합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/common/FolderColorDot/FolderColorDot.tsx` around lines 23 - 30, 공용 props 타입 alias에 타입 자체를 설명하는 한국어 JSDoc과 사용 시 주의사항을 추가하세요. components/common/FolderColorDot/FolderColorDot.tsx#L23-L30의 FolderColorDotProps, components/common/FolderFilterItem/FolderFilterItem.tsx#L28-L38의 FolderFilterItemProps, components/common/TaskCard/TaskCard.tsx#L29-L43의 TaskCardProps 각각 바로 앞에 문서 주석을 작성하고, 기존 필드별 JSDoc은 유지하세요.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/common/AGENTS.md`:
- Line 24: Update the fenced code block in AGENTS.md to include an explicit
language identifier such as tsx, while preserving its existing content.
In `@components/common/AlarmItem/AlarmItem.tsx`:
- Line 10: 공개 props 타입에 타입 목적을 설명하는 한국어 JSDoc이 없습니다.
components/common/AlarmItem/AlarmItem.tsx 10-10의 AlarmItemProps와
components/common/Toast/Toast.tsx 19-19의 ToastProps 선언 바로 앞에 각각 해당 컴포넌트의 props
용도를 설명하는 한국어 JSDoc을 추가하고, 기존 멤버 설명은 유지하세요.
In `@components/common/FolderColorDot/FolderColorDot.tsx`:
- Around line 14-27: 분리해야 합니다.
components/common/FolderColorDot/FolderColorDot.tsx의 FolderColor와 폴더 전용
DOT_COLOR_CLASS 매핑을 generic 색상 점 API 또는 도메인 계층으로 이동하세요.
components/common/FolderFilterItem/FolderFilterItem.tsx는 type="all", 고정 label,
Task 아이콘 결정을 제거하고 label, leading, icon을 props로 받도록 변경하세요.
components/common/TaskCard/TaskCard.tsx는 ing/history, dday/date, folder 필드 조합을
feature 계층으로 옮기거나 도메인 비의존 generic card props로 분리하세요.
In `@components/common/Toast/Toast.tsx`:
- Around line 39-42: Toast 컴포넌트의 className 조합에서 기본 `self-center` 클래스를 제거하세요.
`Toast`의 나머지 스타일과 호출부가 전달하는 `className` 오버라이드는 유지하여 부모가 토스트의 정렬과 레이아웃을 결정하도록
하세요.
---
Nitpick comments:
In `@components/common/FolderColorDot/FolderColorDot.tsx`:
- Around line 23-30: 공용 props 타입 alias에 타입 자체를 설명하는 한국어 JSDoc과 사용 시 주의사항을 추가하세요.
components/common/FolderColorDot/FolderColorDot.tsx#L23-L30의
FolderColorDotProps,
components/common/FolderFilterItem/FolderFilterItem.tsx#L28-L38의
FolderFilterItemProps, components/common/TaskCard/TaskCard.tsx#L29-L43의
TaskCardProps 각각 바로 앞에 문서 주석을 작성하고, 기존 필드별 JSDoc은 유지하세요.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 41cd1183-5f09-4d19-a530-2c2dbc17e350
📒 Files selected for processing (11)
components/common/AGENTS.mdcomponents/common/AlarmItem/AlarmItem.stories.tsxcomponents/common/AlarmItem/AlarmItem.tsxcomponents/common/FolderColorDot/FolderColorDot.stories.tsxcomponents/common/FolderColorDot/FolderColorDot.tsxcomponents/common/FolderFilterItem/FolderFilterItem.stories.tsxcomponents/common/FolderFilterItem/FolderFilterItem.tsxcomponents/common/TaskCard/TaskCard.stories.tsxcomponents/common/TaskCard/TaskCard.tsxcomponents/common/Toast/Toast.stories.tsxcomponents/common/Toast/Toast.tsx
|
|
||
| **컴포넌트 하나당 폴더 하나**를 만들고, 그 안에 파일 2종을 둔다. | ||
|
|
||
| ``` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
코드 블록에 언어를 지정해주세요.
Markdown lint의 MD040 경고를 피하려면 fenced code block에 tsx 같은 언어 식별자를 추가해야 합니다.
수정 예시
-```
+```tsx
components/common/📝 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.
Suggested change
| ``` |
🧰 Tools
🪛 markdownlint-cli2 (0.23.1)
[warning] 24-24: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/AGENTS.md` at line 24, Update the fenced code block in
AGENTS.md to include an explicit language identifier such as tsx, while
preserving its existing content.
Source: Linters/SAST tools
| /** 알림 읽음 상태. Figma `(mobile) 알림`의 `Property 1` variant와 대응한다. */ | ||
| export type AlarmItemStatus = "new" | "read"; | ||
|
|
||
| export type AlarmItemProps = { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
공개 props 타입의 한국어 JSDoc을 일관되게 추가하세요. 두 exported type alias 모두 멤버 설명은 있지만 타입 자체의 공개 API 문서가 없습니다.
components/common/AlarmItem/AlarmItem.tsx#L10-L10:AlarmItemProps선언 바로 앞에 타입 목적을 설명하는 한국어 JSDoc을 추가하세요.components/common/Toast/Toast.tsx#L19-L19:ToastProps선언 바로 앞에 타입 목적을 설명하는 한국어 JSDoc을 추가하세요.
📍 Affects 2 files
components/common/AlarmItem/AlarmItem.tsx#L10-L10(this comment)components/common/Toast/Toast.tsx#L19-L19
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/AlarmItem/AlarmItem.tsx` at line 10, 공개 props 타입에 타입 목적을
설명하는 한국어 JSDoc이 없습니다. components/common/AlarmItem/AlarmItem.tsx 10-10의
AlarmItemProps와 components/common/Toast/Toast.tsx 19-19의 ToastProps 선언 바로 앞에 각각
해당 컴포넌트의 props 용도를 설명하는 한국어 JSDoc을 추가하고, 기존 멤버 설명은 유지하세요.
Source: Coding guidelines
Comment on lines
+14
to
+27
| const DOT_COLOR_CLASS: Record<FolderColor, string> = { | ||
| "sub-01": "bg-sub-01", | ||
| "sub-02": "bg-sub-02", | ||
| "sub-03": "bg-sub-03", | ||
| "sub-04": "bg-sub-04", | ||
| "sub-05": "bg-sub-05", | ||
| "sub-null": "bg-sub-null", | ||
| }; | ||
|
|
||
| export type FolderColorDotProps = { | ||
| /** 폴더 색상. (기본값: `sub-null`) */ | ||
| color?: FolderColor; | ||
| /** 점 크기. `xs`=12px, `sm`=16px (기본값: `sm`) */ | ||
| size?: FolderColorDotSize; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
components/common에서 도메인 결합을 분리해 주세요.
현재 공용 컴포넌트가 폴더/과제 도메인의 variant와 표시 규칙을 직접 알고 있어 재사용 presentational UI 경계를 벗어납니다.
components/common/FolderColorDot/FolderColorDot.tsx#L14-L27:FolderColor와 폴더 전용 색상 매핑을 generic 색상 점으로 추상화하거나 도메인 계층으로 이동해 주세요.components/common/FolderFilterItem/FolderFilterItem.tsx#L28-L55:type="all", 고정 label, Task 아이콘 결정을 외부 조합으로 옮기고 label/leading/icon을 props로 받도록 분리해 주세요.components/common/TaskCard/TaskCard.tsx#L29-L60:ing/history,dday/date, folder 필드를 feature 계층에서 조합하거나 generic card API로 분리해 주세요.
As per coding guidelines, components/common에는 도메인을 모르는 재사용 presentational UI만 두고 데이터는 props로 전달해야 합니다.
📍 Affects 3 files
components/common/FolderColorDot/FolderColorDot.tsx#L14-L27(this comment)components/common/FolderFilterItem/FolderFilterItem.tsx#L28-L55components/common/TaskCard/TaskCard.tsx#L29-L60
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/FolderColorDot/FolderColorDot.tsx` around lines 14 - 27,
분리해야 합니다. components/common/FolderColorDot/FolderColorDot.tsx의 FolderColor와 폴더
전용 DOT_COLOR_CLASS 매핑을 generic 색상 점 API 또는 도메인 계층으로 이동하세요.
components/common/FolderFilterItem/FolderFilterItem.tsx는 type="all", 고정 label,
Task 아이콘 결정을 제거하고 label, leading, icon을 props로 받도록 변경하세요.
components/common/TaskCard/TaskCard.tsx는 ing/history, dday/date, folder 필드 조합을
feature 계층으로 옮기거나 도메인 비의존 generic card props로 분리하세요.
Source: Coding guidelines
Comment on lines
+39
to
+42
| className={cn( | ||
| "flex-row items-center justify-center gap-1 self-center rounded-full bg-blue-50 px-3 py-2", | ||
| className | ||
| )} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
부모가 정렬을 결정하도록 self-center를 제거하세요.
기본 self-center가 부모의 items-start/items-end 배치를 덮어씁니다. 토스트 위치는 호출부가 제어한다는 컴포넌트 문서와도 맞지 않습니다.
수정 예시
- "flex-row items-center justify-center gap-1 self-center rounded-full bg-blue-50 px-3 py-2",
+ "flex-row items-center justify-center gap-1 rounded-full bg-blue-50 px-3 py-2",코딩 가이드라인의 “레이아웃과 실제 폭은 부모가 결정한다.” 규칙에 따른 사항입니다.
📝 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.
Suggested change
| className={cn( | |
| "flex-row items-center justify-center gap-1 self-center rounded-full bg-blue-50 px-3 py-2", | |
| className | |
| )} | |
| className={cn( | |
| "flex-row items-center justify-center gap-1 rounded-full bg-blue-50 px-3 py-2", | |
| className | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/common/Toast/Toast.tsx` around lines 39 - 42, Toast 컴포넌트의
className 조합에서 기본 `self-center` 클래스를 제거하세요. `Toast`의 나머지 스타일과 호출부가 전달하는
`className` 오버라이드는 유지하여 부모가 토스트의 정렬과 레이아웃을 결정하도록 하세요.
Source: Coding guidelines
This was referenced Jul 31, 2026
Merged
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 관련 이슈번호
(Closes 키워드가 있어야 PR이 머지되었을 때 이슈가 자동으로 닫힌다)
📌 PR 유형
어떤 변경 사항이 있나요?
📌 PR 요약
맡은 공용 컴포넌트에 대해서 구현완료
📌 작업 세부 내용
📸 스크린샷
🔗 기타 (공유사항)