[FE-Bugfix] 특정 svg 컴포넌트의 렌더링이 깨지는 문제 수정 #431
Merged
Conversation
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
`import SomeIcon from '~/SomeIcon.tsx'` 가 아닌, `import SomeIcon from '~/SomeIcon'` 형태로 가져와야 함
WalkthroughThis update refactors the icon generation workflow by moving the "create-theme" and "create-icon" scripts from the client app to their respective package-level Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant UI as @ui package
participant Theme as @theme package
participant Script as Icon/Theme Script
Dev->>UI: Run "pnpm create-icon"
UI->>Script: Execute ./scripts/create-icon.cjs
Script->>UI: Generate/Update icon components
Dev->>Theme: Run "pnpm create-theme"
Theme->>Script: Execute ./scripts/create-theme.cjs
Script->>Theme: Generate/Update theme files
Theme->>Theme: Run eslint --fix
Possibly related PRs
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
dioo1461
changed the title
![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)
frontend/packages/ui/src/components/Icon/component/ClockGraphic.tsx (1)
4-7:style중복 전달 가능성
style={{ …, ...rest.style }} {...rest}로style을 먼저 지정한 뒤...rest를 마지막에 펼치고 있어,
rest가 자체적으로style을 포함할 경우 커서 값이 다시 덮여씌워질 수 있습니다.-<svg … style={{ cursor: clickable ? "pointer" : "default", ...rest.style }} {...rest}> +const { style, ...restProps } = rest; +<svg … {...restProps} style={{ cursor: clickable ? "pointer" : "default", ...style }}>frontend/packages/ui/src/components/Icon/component/Plus.tsx (1)
4-7: 사용되지 않는 stroke prop 확인 필요
strokeprop이 전달되지만 SVG에서는 하드코딩된#6B7684값을 사용하고 있습니다. prop을 실제로 사용하거나 제거하는 것을 고려해보세요.frontend/packages/ui/src/components/Icon/component/Pencil.tsx (1)
4-4: 사용되지 않는 fill prop
fillprop이 전달되지만 SVG에서 실제로 사용되지 않습니다. prop 사용을 검토해보세요.frontend/packages/ui/src/components/Icon/component/Calendar.tsx (1)
4-4: 사용되지 않는 fill prop
fillprop이 컴포넌트에 전달되지만 SVG 내부에서 사용되지 않습니다.frontend/packages/ui/src/components/Icon/component/PinLocation.tsx (1)
4-4: 사용되지 않는 fill prop
fillprop이 정의되어 있지만 SVG에서 실제로 사용되지 않습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (30)
frontend/apps/client/package.json(0 hunks)frontend/apps/client/tsconfig.app.json(1 hunks)frontend/packages/theme/package.json(1 hunks)frontend/packages/ui/package.json(1 hunks)frontend/packages/ui/scripts/create-icon.cjs(3 hunks)frontend/packages/ui/src/components/Icon/component/ArrowLeft.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Calendar.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/CalendarCheck.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Check.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/CheckGraphic.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/ChevronDown.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/ChevronLeft.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/ChevronRight.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/CircleCheck.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Clock.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/ClockGraphic.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Close.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Google.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/GoogleCalendar.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/IconDotsMono.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Logo.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Pencil.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/PinLocation.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Plus.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/Progress.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/TriangleWarning.tsx(1 hunks)frontend/packages/ui/src/components/Icon/component/UserTwo.tsx(1 hunks)frontend/packages/ui/src/components/Icon/custom/CheckGraphic.tsx(0 hunks)frontend/packages/ui/src/components/Icon/custom/ClockGraphic.tsx(0 hunks)frontend/packages/ui/src/components/Icon/index.ts(1 hunks)
💤 Files with no reviewable changes (3)
- frontend/apps/client/package.json
- frontend/packages/ui/src/components/Icon/custom/ClockGraphic.tsx
- frontend/packages/ui/src/components/Icon/custom/CheckGraphic.tsx
🧰 Additional context used
🧠 Learnings (21)
📓 Common learnings
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#90
File: frontend/src/scripts/create-icon.cjs:22-30
Timestamp: 2025-02-04T12:52:53.734Z
Learning: All icons in the project should be automatically generated through the create-icon script. If exceptions are needed, they should be handled through a manually maintained ignore list rather than direct file modifications.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#53
File: frontend/src/components/Input/MultiInput.tsx:50-59
Timestamp: 2025-02-04T03:10:35.809Z
Learning: User dioo1461 prefers to receive code reviews and responses in Korean language.
frontend/packages/ui/package.json (2)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#90
File: frontend/src/scripts/create-icon.cjs:22-30
Timestamp: 2025-02-04T12:52:53.734Z
Learning: All icons in the project should be automatically generated through the create-icon script. If exceptions are needed, they should be handled through a manually maintained ignore list rather than direct file modifications.
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#411
File: frontend/apps/client/package.json:7-7
Timestamp: 2025-05-27T17:33:56.448Z
Learning: In the Team4-enDolphin project, the server uses Vite as middleware in development mode, so the `dev` script in frontend/apps/client/package.json only needs to start the server (`pnpm --filter server start`) rather than running separate Vite dev server and server processes.
frontend/apps/client/tsconfig.app.json (5)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:33:15.675Z
Learning: The project's ESLint configuration enforces trailing commas in TypeScript configuration files and other JavaScript/TypeScript files.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#426
File: frontend/packages/ui/vite.config.ts:6-0
Timestamp: 2025-06-13T07:39:57.840Z
Learning: `frontend/packages/ui/vite.config.ts` 에서 `defineConfig` 를 `vitest/config` 로부터 가져오는 것은 정상적인 패턴이다. `vitest/config` 는 Vite의 `defineConfig` 를 re-export 하며, `test` 옵션 타입을 추가로 제공한다.
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#90
File: frontend/src/scripts/create-icon.cjs:22-30
Timestamp: 2025-02-04T12:52:53.734Z
Learning: All icons in the project should be automatically generated through the create-icon script. If exceptions are needed, they should be handled through a manually maintained ignore list rather than direct file modifications.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: Code organization rules:
- Imports must be sorted using simple-import-sort
- No duplicate imports
- No console statements
- No empty functions
- React hooks rules are strictly enforced
frontend/packages/theme/package.json (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: The project enforces strict formatting rules through ESLint:
- 2-space indentation
- Single quotes for strings and JSX
- Trailing commas in multiline structures
- Max line length of 100 characters
- Sorted JSX props
- Consistent spacing around blocks, functions, and operators
frontend/packages/ui/src/components/Icon/index.ts (4)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: Code organization rules:
- Imports must be sorted using simple-import-sort
- No duplicate imports
- No console statements
- No empty functions
- React hooks rules are strictly enforced
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: ReactNode type should be imported directly from 'react' package, not from third-party packages that might re-export it, to follow best practices and reduce potential version conflicts.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: The project enforces strict formatting rules through ESLint:
- 2-space indentation
- Single quotes for strings and JSX
- Trailing commas in multiline structures
- Max line length of 100 characters
- Sorted JSX props
- Consistent spacing around blocks, functions, and operators
frontend/packages/ui/scripts/create-icon.cjs (1)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#90
File: frontend/src/scripts/create-icon.cjs:22-30
Timestamp: 2025-02-04T12:52:53.734Z
Learning: All icons in the project should be automatically generated through the create-icon script. If exceptions are needed, they should be handled through a manually maintained ignore list rather than direct file modifications.
frontend/packages/ui/src/components/Icon/component/Close.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/ChevronLeft.tsx (2)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: ReactNode type should be imported directly from 'react' package, not from third-party packages that might re-export it, to follow best practices and reduce potential version conflicts.
frontend/packages/ui/src/components/Icon/component/IconDotsMono.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/CircleCheck.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/Google.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/ChevronRight.tsx (2)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: ReactNode type should be imported directly from 'react' package, not from third-party packages that might re-export it, to follow best practices and reduce potential version conflicts.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/ArrowLeft.tsx (2)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: ReactNode type should be imported directly from 'react' package, not from third-party packages that might re-export it, to follow best practices and reduce potential version conflicts.
frontend/packages/ui/src/components/Icon/component/TriangleWarning.tsx (3)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: ReactNode type should be imported directly from 'react' package, not from third-party packages that might re-export it, to follow best practices and reduce potential version conflicts.
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#100
File: frontend/src/utils/jsxUtils.tsx:1-2
Timestamp: 2025-02-06T02:50:41.604Z
Learning: @tanstack/react-router package focuses on routing-specific types and does not export ReactNode type. Always import ReactNode from 'react' package to avoid type compatibility issues.
frontend/packages/ui/src/components/Icon/component/Plus.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/GoogleCalendar.tsx (2)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#230
File: frontend/src/features/my-calendar/api/hooks.ts:37-44
Timestamp: 2025-02-20T05:01:48.591Z
Learning: In the calendar feature, `syncWithGoogleCalendar` is initialized with a default value of `true` through the `initEvent` helper function, which sets default values for new events including title ('제목 없음'), isAdjustable (false), and syncWithGoogleCalendar (true).
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/Pencil.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/CalendarCheck.tsx (2)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#205
File: frontend/src/features/discussion/ui/DiscussionCalendar/CalendarTable.tsx:29-33
Timestamp: 2025-02-19T05:54:56.987Z
Learning: The hardcoded selectedUserIdList in CalendarTable.tsx will be replaced with dynamic user selection when checkbox functionality is implemented in a future PR.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/Check.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/Progress.tsx (1)
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
frontend/packages/ui/src/components/Icon/component/Calendar.tsx (3)
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#205
File: frontend/src/features/discussion/ui/DiscussionCalendar/CalendarTable.tsx:29-33
Timestamp: 2025-02-19T05:54:56.987Z
Learning: The hardcoded selectedUserIdList in CalendarTable.tsx will be replaced with dynamic user selection when checkbox functionality is implemented in a future PR.
Learnt from: hamo-o
PR: softeer5th/Team4-enDolphin#95
File: frontend/src/components/Calendar/Core/WeekCell.tsx:34-34
Timestamp: 2025-02-06T01:44:08.551Z
Learning: In the Calendar WeekCell component, `Date.now()` is intentionally used as a key when selected is true to force re-renders of the component when the selected state changes. This is a specific requirement for the component's animation behavior.
Learnt from: dioo1461
PR: softeer5th/Team4-enDolphin#76
File: frontend/tsconfig.app.json:5-12
Timestamp: 2025-02-03T07:38:39.236Z
Learning: TypeScript and React specific rules:
- Type imports must use the 'type' keyword
- Strict naming conventions:
- Variables: camelCase, UPPER_CASE, or PascalCase
- Functions: camelCase or PascalCase
- Interfaces and Type Aliases: PascalCase
- No duplicate props in JSX
🔇 Additional comments (37)
frontend/packages/ui/package.json (1)
16-18:create-icon스크립트 추가 확인패키지 내부로 스크립트를 이동-정리한 방향이 명확하며, 경로도 올바릅니다. 별다른 문제 없이 동작할 것으로 보입니다.
frontend/packages/ui/src/components/Icon/component/ClockGraphic.tsx (2)
10-10: 시침 회전 각도(-135 °) 수정 완료잘못된 방향이 바로잡혀 시각적 오류가 해결됩니다.
14-14: 그라디언트x1좌표 수정으로 렌더링 오류 해결음수 지수 표기를 보존하도록 값이 교정되었습니다. SVG 변형 버그가 재발하지 않는지 확인했으면 합니다.
frontend/apps/client/tsconfig.app.json (1)
19-19:.cjs파일 포함 시 TypeScript 설정 확인 필요
allowJs가false(기본값) 인 경우 JS/CS 파일을 포함 목록에 올려도 타입체킹 대상이 되지 않으며, 일부 설정에서는 오류를 유발할 수 있습니다.
해당 스크립트의 타입 검사가 목적이라면allowJs: true또는checkJs: true추가가 필요합니다. 목적이 단순 참조라면include에서 제외하는 편이 안전합니다.frontend/packages/ui/src/components/Icon/component/ChevronLeft.tsx (2)
2-2: LGTM: Import path made more explicitThe import path change to explicitly reference the
.d.tsfile improves clarity and aligns with TypeScript best practices.
4-11: LGTM: Consistent refactoring to explicit returnThe change from implicit return to explicit return block improves code readability and consistency across icon components.
frontend/packages/ui/src/components/Icon/component/ChevronRight.tsx (1)
2-2: LGTM: Consistent refactoring pattern appliedThe import path and return style changes are identical to other icon components, maintaining consistency across the codebase.
Also applies to: 4-11
frontend/packages/ui/src/components/Icon/component/ChevronDown.tsx (1)
2-2: LGTM: Refactoring applied consistently to complex SVG structureThe changes maintain the same pattern while correctly preserving the more complex SVG structure with clipPath and defs elements.
Also applies to: 4-18
frontend/packages/ui/src/components/Icon/component/GoogleCalendar.tsx (1)
2-2: LGTM: Complex SVG structure preserved during refactoringThe refactoring correctly maintains the complex SVG structure with patterns, images, and xlink attributes while applying the consistent code style changes.
Also applies to: 4-17
frontend/packages/ui/src/components/Icon/component/Clock.tsx (1)
2-2: LGTM: Refactoring with React best practice improvementThe standard refactoring pattern is applied consistently, and the conversion of
mask-typeattribute to React style object (style={{ maskType: "luminance" }}) follows React best practices for handling non-standard HTML attributes.Also applies to: 4-16
frontend/packages/ui/src/components/Icon/component/Plus.tsx (2)
2-2: 타입 임포트 명시화 개선
IconProps를'../Icon.d.ts'에서 명시적으로 임포트하는 것은 타입 안전성을 향상시킵니다.
4-11: 명시적 반환문으로 개선암묵적 반환에서 명시적 반환문으로 변경하여 코드 일관성이 향상되었습니다.
frontend/packages/ui/scripts/create-icon.cjs (4)
3-6: 경로 관리 중앙화 개선
ICON_DIR_RELATIVE_PATH상수를 도입하여 경로 관리를 중앙화한 것은 유지보수성을 향상시킵니다.
54-54: React 스타일 객체 변환 개선
mask-type속성을 React 스타일 객체로 변환하는 로직이 JSX 호환성을 향상시킵니다.
56-56: 중요한 정규식 버그픽스!정규식을
/[-:](\w)/g에서/[:\-]([A-Za-z])/g로 변경한 것은 핵심적인 수정사항입니다. 이전 정규식은-1.8593e-06과 같은 음수 값을 잘못 변환하여 SVG 렌더링을 깨뜨렸는데, 새로운 정규식은 문자 뒤에 오는 하이픈/콜론만 대상으로 하여 속성명의 camelCase 변환은 유지하면서 숫자 값은 보호합니다.
116-116: Export 경로에서 확장자 제거TypeScript에서 권장하는 방식에 따라 export 경로에서
.tsx확장자를 제거한 것이 좋습니다.frontend/packages/ui/src/components/Icon/component/Pencil.tsx (2)
2-2: 일관된 표준화 개선타입 임포트 명시화와 명시적 반환문 사용으로 코드 일관성이 향상되었습니다.
Also applies to: 4-16
7-7: React 스타일 객체 변환
mask-type속성을style={{ maskType: "luminance" }}로 변환한 것이 React JSX 호환성을 향상시킵니다.frontend/packages/ui/src/components/Icon/component/Calendar.tsx (1)
2-2: 표준화된 구조 개선타입 임포트와 명시적 반환문 사용으로 다른 아이콘 컴포넌트들과 일관된 구조를 갖게 되었습니다. 복잡한 SVG 구조가 올바르게 보존되었습니다.
Also applies to: 4-65
frontend/packages/ui/src/components/Icon/component/PinLocation.tsx (2)
2-2: 일관된 리팩터링 완료다른 아이콘 컴포넌트들과 동일한 표준화 패턴을 적용하여 코드베이스 전체의 일관성이 향상되었습니다.
Also applies to: 4-16
7-7: React 호환성 개선
mask-type속성을 React 스타일 객체로 변환한 것이 JSX 호환성을 향상시킵니다.frontend/packages/ui/src/components/Icon/component/CalendarCheck.tsx (1)
2-16: 자동 생성된 아이콘 컴포넌트 리팩토링이 올바르게 적용되었습니다.create-icon 스크립트의 수정사항이 정상적으로 반영되어, 암시적 반환에서 명시적 반환 블록으로 변경되고 SVG 속성이 React 스타일 객체로 올바르게 변환되었습니다.
frontend/packages/ui/src/components/Icon/component/IconDotsMono.tsx (1)
2-16: 일관된 자동 리팩토링이 올바르게 적용되었습니다.다른 아이콘 컴포넌트들과 동일한 패턴으로 리팩토링되어 일관성이 유지되고 있습니다.
frontend/packages/ui/src/components/Icon/component/Google.tsx (1)
2-14: Google 아이콘 컴포넌트가 일관된 패턴으로 리팩토링되었습니다.마스크 요소가 없는 단순한 SVG 구조에도 동일한 리팩토링 패턴이 올바르게 적용되었습니다.
frontend/packages/ui/src/components/Icon/component/UserTwo.tsx (1)
2-17: 복합 SVG 속성이 올바르게 처리되었습니다.mask-type 속성은 React 스타일 객체로 변환되고, fillOpacity와 같은 다른 속성들은 올바르게 보존되어 정규식 수정이 제대로 작동하고 있음을 보여줍니다.
frontend/packages/ui/src/components/Icon/component/Close.tsx (1)
2-16: 모든 아이콘 컴포넌트에 걸쳐 일관된 자동화된 리팩토링이 완료되었습니다.create-icon.cjs 스크립트의 정규식 수정이 모든 아이콘 유형에서 일관되게 작동하여, SVG 렌더링 문제를 해결하고 코드 품질을 개선했습니다.
frontend/packages/ui/src/components/Icon/component/ArrowLeft.tsx (1)
2-16: 변경사항이 올바르게 적용되었습니다아이콘 생성 스크립트의 렌더링 버그 수정으로 인한 체계적인 리팩토링이 잘 적용되었습니다:
- 명시적 타입 import 경로 사용 (
'../Icon.d.ts')mask-type속성을 React 스타일 객체로 올바르게 변환- 일관된 명시적 return 블록 사용
frontend/packages/ui/src/components/Icon/component/CircleCheck.tsx (1)
2-16: 일관된 리팩토링이 적용되었습니다ArrowLeft와 동일한 패턴으로 올바르게 업데이트되었습니다. SVG 렌더링 버그 수정을 위한 체계적인 변경사항들이 적절히 적용되었습니다.
frontend/packages/ui/src/components/Icon/component/TriangleWarning.tsx (1)
2-16: 체계적인 업데이트가 일관되게 적용되었습니다다른 아이콘 컴포넌트들과 동일한 패턴으로 올바르게 리팩토링되었습니다. SVG 렌더링 이슈 해결을 위한 필요한 변경사항들이 적절히 반영되었습니다.
frontend/packages/ui/src/components/Icon/component/Check.tsx (1)
2-16: 동일한 리팩토링 패턴이 올바르게 적용되었습니다다른 아이콘 컴포넌트들과 일관된 방식으로 업데이트되었습니다. 체크 아이콘의 기능은 그대로 유지되면서 SVG 렌더링 버그 수정사항이 적절히 반영되었습니다.
frontend/packages/ui/src/components/Icon/component/CheckGraphic.tsx (1)
1-66: 새로운 CheckGraphic 컴포넌트가 올바르게 구현되었습니다복잡한 SVG 그래픽 아이콘이 적절히 구현되었습니다:
- 다른 아이콘 컴포넌트와 일관된 패턴 사용
stroke와fillprops 모두 지원하여 복잡한 그래픽에 적합- 그라디언트, 필터, 마스크 등 고급 SVG 기능들이 올바르게 적용
- React JSX 표준에 맞는
maskType스타일 객체 사용frontend/packages/ui/src/components/Icon/component/Logo.tsx (3)
2-2: 올바른 타입 import 개선사항입니다.TypeScript 모범 사례에 따라 타입 전용 import에 대해 명시적
.d.ts확장자를 사용하는 것이 좋습니다.
4-6: 컴포넌트 구조 표준화가 잘 적용되었습니다.암시적 반환에서 명시적 반환문으로의 변환이 아이콘 컴포넌트 전반에 걸쳐 일관성 있게 적용되었습니다.
19-19: 마스크 ID 명명 규칙 개선이 PR 목표와 일치합니다.
path9Inside1_792_13815에서path-9Inside-1_792_13815로의 변경은 create-icon 스크립트의 정규표현식 수정과 관련이 있어 보입니다. 이는 SVG 속성의 숫자 값에서 음수 기호가 잘못 처리되는 문제를 방지합니다.frontend/packages/ui/src/components/Icon/component/Progress.tsx (3)
2-2: 일관된 타입 import 표준화입니다.다른 아이콘 컴포넌트들과 동일한 import 경로 개선이 적용되었습니다.
4-6: 컴포넌트 구조가 표준 패턴에 맞게 개선되었습니다.명시적 반환문 사용으로 코드 가독성과 일관성이 향상되었습니다.
7-7: React JSX 모범 사례 적용이 우수합니다.
mask-type속성을 React 스타일 객체style={{ maskType: "luminance" }}로 변환한 것이 JSX 규칙에 맞는 올바른 접근입니다.
Comment on lines
+1
to
+24
| export * from "./component/ArrowLeft"; | ||
| export * from "./component/CalendarCheck"; | ||
| export * from "./component/CalendarMini"; | ||
| export * from "./component/Calendar"; | ||
| export * from "./component/CheckGraphic"; | ||
| export * from "./component/Check"; | ||
| export * from "./component/ChevronDown"; | ||
| export * from "./component/ChevronLeft"; | ||
| export * from "./component/ChevronRight"; | ||
| export * from "./component/CircleCheck"; | ||
| export * from "./component/ClockGraphic"; | ||
| export * from "./component/Clock"; | ||
| export * from "./component/Close"; | ||
| export * from "./component/GoogleCalendar"; | ||
| export * from "./component/Google"; | ||
| export * from "./component/IconDotsMono"; | ||
| export * from "./component/Logo"; | ||
| export * from "./component/Pencil"; | ||
| export * from "./component/PinLocation"; | ||
| export * from "./component/Plus"; | ||
| export * from "./component/Progress"; | ||
| export * from "./component/TriangleWarning"; | ||
| export * from "./component/UserTwo"; | ||
| export * from "./component/TooltipArrow"; |
There was a problem hiding this comment.
문자열 따옴표 규칙 위반 – ESLint 오류 가능성
프로젝트 규칙(단일 따옴표 사용)에 어긋납니다. 자동 포맷팅이 적용되지 않으면 CI 단계에서 실패할 수 있습니다.
-export * from "./component/ArrowLeft";
+export * from './component/ArrowLeft';
…
-export * from "./component/TooltipArrow";
+export * from './component/TooltipArrow';📝 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
| export * from "./component/ArrowLeft"; | |
| export * from "./component/CalendarCheck"; | |
| export * from "./component/CalendarMini"; | |
| export * from "./component/Calendar"; | |
| export * from "./component/CheckGraphic"; | |
| export * from "./component/Check"; | |
| export * from "./component/ChevronDown"; | |
| export * from "./component/ChevronLeft"; | |
| export * from "./component/ChevronRight"; | |
| export * from "./component/CircleCheck"; | |
| export * from "./component/ClockGraphic"; | |
| export * from "./component/Clock"; | |
| export * from "./component/Close"; | |
| export * from "./component/GoogleCalendar"; | |
| export * from "./component/Google"; | |
| export * from "./component/IconDotsMono"; | |
| export * from "./component/Logo"; | |
| export * from "./component/Pencil"; | |
| export * from "./component/PinLocation"; | |
| export * from "./component/Plus"; | |
| export * from "./component/Progress"; | |
| export * from "./component/TriangleWarning"; | |
| export * from "./component/UserTwo"; | |
| export * from "./component/TooltipArrow"; | |
| export * from './component/ArrowLeft'; | |
| export * from './component/CalendarCheck'; | |
| export * from './component/CalendarMini'; | |
| export * from './component/Calendar'; | |
| export * from './component/CheckGraphic'; | |
| export * from './component/Check'; | |
| export * from './component/ChevronDown'; | |
| export * from './component/ChevronLeft'; | |
| export * from './component/ChevronRight'; | |
| export * from './component/CircleCheck'; | |
| export * from './component/ClockGraphic'; | |
| export * from './component/Clock'; | |
| export * from './component/Close'; | |
| export * from './component/GoogleCalendar'; | |
| export * from './component/Google'; | |
| export * from './component/IconDotsMono'; | |
| export * from './component/Logo'; | |
| export * from './component/Pencil'; | |
| export * from './component/PinLocation'; | |
| export * from './component/Plus'; | |
| export * from './component/Progress'; | |
| export * from './component/TriangleWarning'; | |
| export * from './component/UserTwo'; | |
| export * from './component/TooltipArrow'; |
🤖 Prompt for AI Agents
In frontend/packages/ui/src/components/Icon/index.ts lines 1 to 24, the export
statements use double quotes instead of the project's required single quotes,
which may cause ESLint errors and CI failures. Change all double quotes around
the import paths to single quotes to comply with the project's string quote
style.
Comment on lines
+30
to
32
| "build": "tsc -b && node scripts/copy-fonts.js", | ||
| "create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Windows 호환성 & 실행 순서 보장
& 는 POSIX 셸 전용으로 Windows cmd.exe/PowerShell 에서는 동작하지 않습니다. 또한 ESLint 가 선행 스크립트 실패 여부와 무관하게 실행됩니다. 순차 실행과 크로스 플랫폼을 고려해 && 또는 concurrently 사용을 권장합니다.
-"create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix"
+"create-theme": "node ./scripts/create-theme.cjs && pnpm eslint --fix"📝 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
| "build": "tsc -b && node scripts/copy-fonts.js", | |
| "create-theme": "node ./scripts/create-theme.cjs & pnpm eslint --fix" | |
| } | |
| "build": "tsc -b && node scripts/copy-fonts.js", | |
| "create-theme": "node ./scripts/create-theme.cjs && pnpm eslint --fix" | |
| } |
🤖 Prompt for AI Agents
In frontend/packages/theme/package.json around lines 30 to 32, the script uses
'&' to run commands concurrently, which is not compatible with Windows shells
and does not guarantee execution order. Replace '&' with '&&' to ensure
sequential execution and cross-platform compatibility, or use a tool like
'concurrently' if parallel execution is needed.
hamo-o
approved these changes
Jul 27, 2025
Contributor
hamo-o
left a comment
hamo-o
left a comment
There was a problem hiding this comment.
오 다 잘 렌더링 됩니다!!!!
그렇네요 카멜케이스로 바꾸는 경우는 문자만 대문자로 바꿔주면 되니까요..! maskType도 놓친게 있었네욥
감사합니다~~!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
#️⃣ 연관된 이슈>
📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
create-icon.cjs스크립트가 svg 파일의 특정 prop을 처리하지 못해 렌더링이 깨지던 문제를 수정했습니다..replace(/[-:](\w)/g, …)이 SVG 속성명(stroke-width,xmlns:xlink등)뿐만 아니라 숫자값 앞의 마이너스 기호(-1.8593e-06)까지 모두 제거해버렸고, 그 결과 그라디언트 좌표(x1="-1.8593e-06")가1.8593e06으로 잘못 변환되는 문제가 있었음[:\-]([A-Za-z])패턴으로 좁혀 “하이픈 또는 콜론 뒤에 오는 영문자”만 변환하도록 변경하여 해결함before
🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores