[Feat] Image Box 컴포넌트 제작#12
Merged
Merged
Conversation
github-actions
Bot
changed the title
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughStorybook 배포 설정과 컴포넌트 구조가 추가·정리되었다. 재귀적 index 생성, 공통/introductions 컴포넌트의 barrel export와 스토리, 이미지 업로드·썸네일 컴포넌트 구현, 전역 스타일과 빌드 설정이 함께 갱신되었다. ChangesStorybook 인프라 및 컴포넌트 확장
Sequence Diagram(s)sequenceDiagram
participant GitHub as GitHub Actions
participant pnpm
participant Storybook
participant Pages as GitHub Pages
GitHub->>pnpm: install --frozen-lockfile
GitHub->>Storybook: build-storybook (STORYBOOK_BASE_PATH)
Storybook->>GitHub: storybook-static 생성
GitHub->>Pages: upload-pages-artifact
GitHub->>Pages: deploy-pages
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
CI 결과
|
KyeongJooni
force-pushed
the
feat/image-box-component-9
branch
from
c0dc398 to
2d8653b
Compare
CI 결과
|
![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 (1)
src/components/introductions/PartnerImageBox/PartnerImageBox.stories.tsx (1)
31-39: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winHovered 스토리에 실제 검증(assert) 없음
userEvent.hover후 오버레이가 실제로 보이는지 assertion이 없어 회귀가 발생해도 테스트가 통과합니다.expect로 오버레이 버튼의 가시성을 확인하는 것을 권장합니다.export const Hovered: Story = { args: { imageUrl: PLACEHOLDER_IMAGE }, play: async ({ canvasElement }) => { const container = canvasElement.querySelector('div') if (container) { await userEvent.hover(container) + await expect(canvas.getByLabelText('이미지 변경')).toBeVisible() } }, }As per path instructions, "타입 안정성, React 상태/효과 사용, 접근성, 테스트 필요성을 검토한다."
🤖 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 `@src/components/introductions/PartnerImageBox/PartnerImageBox.stories.tsx` around lines 31 - 39, The Hovered story in PartnerImageBox.stories.tsx performs a hover action but never verifies the overlay actually appears, so add an assertion in the play function after userEvent.hover using expect on the overlay button or its visible state. Use the existing Hovered story and its play callback to locate the change, and make the assertion specific enough to fail if the hover interaction stops showing the overlay.Source: Path instructions
🤖 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 @.github/workflows/deploy-storybook.yml:
- Around line 24-25: The Checkout code step in the deploy-storybook workflow
uses actions/checkout@v4 without explicitly disabling credential persistence.
Update the checkout configuration to set persist-credentials to false so the
GITHUB_TOKEN is not left in local git config for later steps; reference the
Checkout code action in the workflow to apply the change.
In `@src/components/introductions/PartnerImageBox/PartnerImageBox.tsx`:
- Around line 34-51: The hover overlay in PartnerImageBox is only revealed on
mouse hover, so keyboard users cannot reach the change/delete actions. Update
the overlay container in PartnerImageBox to also show on focus within, alongside
the existing group-hover behavior, so the buttons can be tabbed to and used
without a mouse.
---
Nitpick comments:
In `@src/components/introductions/PartnerImageBox/PartnerImageBox.stories.tsx`:
- Around line 31-39: The Hovered story in PartnerImageBox.stories.tsx performs a
hover action but never verifies the overlay actually appears, so add an
assertion in the play function after userEvent.hover using expect on the overlay
button or its visible state. Use the existing Hovered story and its play
callback to locate the change, and make the assertion specific enough to fail if
the hover interaction stops showing the overlay.
🪄 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
Run ID: 7e1cd14b-2b7a-4b9a-bf5f-16c34651af6f
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (59)
.github/workflows/deploy-storybook.yml.gitignore.storybook/main.ts.storybook/preview.tsxcomponents.jsoneslint.config.jspackage.jsonscripts/gen-index.tssrc/assets/icons/svg/.gitkeepsrc/components/.gitkeepsrc/components/common/Button/Button.stories.tsxsrc/components/common/Button/Button.test.tsxsrc/components/common/Button/Button.tsxsrc/components/common/Button/index.tssrc/components/common/Logo/Logo.stories.tsxsrc/components/common/Logo/Logo.tsxsrc/components/common/Logo/index.tssrc/components/common/PageHeader/PageHeader.stories.tsxsrc/components/common/PageHeader/PageHeader.test.tsxsrc/components/common/PageHeader/PageHeader.tsxsrc/components/common/PageHeader/index.tssrc/components/common/SegmentedControl/SegmentedControl.stories.tsxsrc/components/common/SegmentedControl/SegmentedControl.test.tsxsrc/components/common/SegmentedControl/SegmentedControl.tsxsrc/components/common/SegmentedControl/index.tssrc/components/common/Sidebar/Sidebar.stories.tsxsrc/components/common/Sidebar/Sidebar.test.tsxsrc/components/common/Sidebar/Sidebar.tsxsrc/components/common/Sidebar/index.tssrc/components/introductions/ImageBoxThumbnail.tsxsrc/components/introductions/ImageBoxThumbnail/ImageBoxThumbnail.stories.tsxsrc/components/introductions/ImageBoxThumbnail/ImageBoxThumbnail.tsxsrc/components/introductions/ImageBoxThumbnail/index.tssrc/components/introductions/ImageUploadBox/ImageUploadBox.stories.tsxsrc/components/introductions/ImageUploadBox/ImageUploadBox.tsxsrc/components/introductions/ImageUploadBox/index.tssrc/components/introductions/Inputfield/Inputfield.stories.tsxsrc/components/introductions/Inputfield/Inputfield.tsxsrc/components/introductions/Inputfield/index.tssrc/components/introductions/IntroductionCard/IntroductionCard.stories.tsxsrc/components/introductions/IntroductionCard/IntroductionCard.test.tsxsrc/components/introductions/IntroductionCard/IntroductionCard.tsxsrc/components/introductions/IntroductionCard/index.tssrc/components/introductions/PartImageCard/PartImageCard.stories.tsxsrc/components/introductions/PartImageCard/PartImageCard.test.tsxsrc/components/introductions/PartImageCard/PartImageCard.tsxsrc/components/introductions/PartImageCard/index.tssrc/components/introductions/PartnerImageBox/PartnerImageBox.stories.tsxsrc/components/introductions/PartnerImageBox/PartnerImageBox.tsxsrc/components/introductions/PartnerImageBox/index.tssrc/components/introductions/index.tssrc/components/projects/ProjectThumbnailCard/ProjectThumbnailCard.stories.tsxsrc/components/projects/ProjectThumbnailCard/ProjectThumbnailCard.test.tsxsrc/components/projects/ProjectThumbnailCard/ProjectThumbnailCard.tsxsrc/components/projects/ProjectThumbnailCard/index.tssrc/index.csssrc/lib/tv.tssrc/lib/utils.tstsconfig.node.json
💤 Files with no reviewable changes (5)
- src/components/.gitkeep
- src/assets/icons/svg/.gitkeep
- components.json
- src/components/introductions/ImageBoxThumbnail.tsx
- src/components/common/Button/Button.tsx
CI 결과
|
leemanjae02
reviewed
Jul 5, 2026
leemanjae02
reviewed
Jul 5, 2026
leemanjae02
left a comment
leemanjae02
left a comment
Member
There was a problem hiding this comment.
파트너 이미지 박스, 이미지 업로드 박스도 다른 컴포넌트들처럼 유닛 테스트 추가하는건 어떨까요?
leemanjae02
reviewed
Jul 5, 2026
Member
There was a problem hiding this comment.
이미지 업로드 박스는 내부에 파일 input이 있어서 실제 파일 선택창이 뜨는데
파트너 이미지 박스는 파일 input 없이 onChange() 콜백만 있어서 파일 입력 로직을 공통 훅으로 뽑아서 두 컴포넌트가 같이 쓰도록 하면 어떨까요?
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@src/hooks/introductions/useImageFileInput.ts`:
- Around line 23-34: 숨겨진 file input이 라벨이 없을 때도 Tab 포커스에 남는 문제가 있으며,
useImageFileInput의 inputProps를 만드는 부분에서 input 자체를 탭 순서에서 제외하도록 수정하세요.
openFilePicker로 여는 버튼이나 htmlFor를 가진 label이 실제 트리거이므로, inputRef/inputId를 유지하되 탭으로
접근되지 않게 관련 속성을 조정해 접근성 문제를 해결하세요.
🪄 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
Run ID: a7222e5f-611e-4914-aa83-d2bf361478a0
📒 Files selected for processing (7)
src/components/introductions/ImageUploadBox/ImageUploadBox.test.tsxsrc/components/introductions/ImageUploadBox/ImageUploadBox.tsxsrc/components/introductions/PartnerImageBox/PartnerImageBox.test.tsxsrc/components/introductions/PartnerImageBox/PartnerImageBox.tsxsrc/hooks/index.tssrc/hooks/introductions/index.tssrc/hooks/introductions/useImageFileInput.ts
✅ Files skipped from review due to trivial changes (1)
- src/components/introductions/PartnerImageBox/PartnerImageBox.test.tsx
CI 결과
|
…ent-9 # Conflicts: # eslint.config.js # package.json # pnpm-lock.yaml
CI 결과
|
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.
#️⃣ 연관된 이슈
Close #9
🚧 Work in Progress
📌 주요 변경사항
📝작업 내용
src/components/{domain}/{ComponentName}/{ComponentName}.tsx구조로 common/introductions/projects 전체 컴포넌트 이동,.test.tsx를 co-locate.scripts/gen-index.ts를 재귀 구조로 바꿔 깊이와 무관하게 barrelindex.ts를 자동 생성play함수로 실제 상호작용 재현--radius커스텀 계산식)가 Tailwind 기본 반경 스케일(6/8/12px)을 덮어써서rounded-md/lg/xl이 Figma보다 2px씩 크게 렌더링되던 문제 수정pnpm type-check,pnpm lint,pnpm format:check,pnpm test, Storybook build 전부 통과📸 스크린샷 (선택)
💬리뷰 요구사항(선택)
ImageUploadBox는 실제 브라우저 파일 업로드 동작은 미확인입니다.@kusitms.com/tokens의status-negative/fill-destructive색상값이 Figma와 다른 것을 발견해.claude/known-issues/records/design-token-color-mismatch.md에 기록해뒀습니다. 이 PR에서 수정한 문제는 아니고 패키지 쪽 이슈입니다.Summary by CodeRabbit