Skip to content

[✨ Feat/#47] 아코디언 공통 컴포넌트 구현#48

Merged
Lseojeong merged 10 commits into
devfrom
feat/#47
Jun 24, 2026
Merged

[✨ Feat/#47] 아코디언 공통 컴포넌트 구현#48
Lseojeong merged 10 commits into
devfrom
feat/#47

Conversation

@Lseojeong

@Lseojeong Lseojeong commented Jun 24, 2026

Copy link
Copy Markdown
Member

#️⃣연관된 이슈

체크 사항

  • UI 동작 및 레이아웃 확인
  • 불필요한 console 제거
  • 기능 정상 동작
  • 팀 컨벤션에 맞게 구현했는지

📝작업 내용

아코디언 공통 컴포넌트 추가

  • Accordion Compound 컴포넌트를 추가했습니다.
  • Accordion.Header, Accordion.Trigger, Accordion.Label, Accordion.Content 구조로 사용할 수 있도록 구성했습니다.
  • open, defaultOpen, onOpenChange를 통해 controlled/uncontrolled 방식을 지원합니다.
  • disabled, collapsible 상태를 지원합니다.
  • Accordion.Label asChild를 통해 Input.Label, TextArea.Label 같은 FormControl 라벨을 그대로 사용할 수 있도록 했습니다.

접근성 처리

  • 아이콘 전용 버튼인 Accordion.Trigger에 aria-label을 필수로 받도록 타입을 구성했습니다.
  • aria-expanded, aria-controls, aria-labelledby, aria-hidden, inert를 적용했습니다.
  • collapsible={false}로 열린 상태를 유지해야 하는 경우 native disabled가 아니라 aria-disabled와 클릭 방지로 처리해 포커스가 빠지지 않도록 했습니다.

UI 및 스타일

  • 열림/닫힘 상태에 따라 아이콘 회전 애니메이션을 적용했습니다.
  • Content 영역에 grid 기반 열림/닫힘 애니메이션을 적용했습니다.
  • Accordion Root에서 padding, radius, background를 관리하도록 구성했습니다.
  • FormControl 라벨과 필드 사이 간격을 12px로 조정했습니다.

Storybook 문서화

  • Accordion Storybook 예시를 추가했습니다.
  • 독립 Accordion, exclusive controlled Accordion, defaultOpen, controlled, disabled, 자기소개서 입력 조합 예시를 작성했습니다.
  • Input/TextArea Storybook도 실제 compound 사용 예시가 Docs에 보이도록 정리했습니다.

스크린샷 (선택)

image

추가한 라이브러리 (선택)

  • 없음

💬리뷰 요구사항(선택)

  • 없음

Summary by CodeRabbit

  • New Features
    • Accordion 컴포넌트와 하위 요소가 추가되어 단일/독립 제어, 기본 열림, 비활성 상태를 지원합니다.
  • Documentation
    • Storybook에서 Accordion, Input, TextArea의 예시 구성이 실제 컴포넌트 렌더링 중심으로 정리되어 상태별 동작을 더 쉽게 확인할 수 있습니다.
  • Style
    • 폼 라벨의 하단 여백이 mb-6 → mb-3로 조정되어 화면 간격이 개선되었습니다.

@Lseojeong Lseojeong self-assigned this Jun 24, 2026
@Lseojeong Lseojeong added the ✨Feature 새로운 기능 구현 label Jun 24, 2026
@Lseojeong Lseojeong linked an issue Jun 24, 2026 that may be closed by this pull request
14 tasks
@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
rewrite Ready Ready Preview, Comment Jun 24, 2026 3:18pm

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a71b0f48-78bf-4abe-b9c3-89d14b241ca0

📥 Commits

Reviewing files that changed from the base of the PR and between e06462a and 0426885.

📒 Files selected for processing (1)
  • src/shared/ui/textarea/TextArea.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/shared/ui/textarea/TextArea.stories.tsx

Walkthrough

Accordion 컴파운드 컴포넌트와 관련 Storybook 스토리가 추가됐다. Input과 TextArea 스토리는 직접 렌더링 방식으로 바뀌었고, FormControlLabel의 기본 하단 마진이 조정됐다.

Changes

Accordion 컴파운드 컴포넌트 구현

Layer / File(s) Summary
타입 정의 및 컨텍스트
src/shared/ui/accordion/Accordion.types.ts, src/shared/ui/accordion/AccordionContext.ts
Accordion 루트와 하위 파트에 필요한 props 및 컨텍스트 타입을 선언하고, React Context와 이를 읽는 훅을 추가한다.
루트 상태와 export 구성
src/shared/ui/accordion/Accordion.tsx, src/shared/ui/accordion/index.ts
Accordion 루트가 controlled/uncontrolled 열림 상태를 계산하고, 토글 동작과 상태 값을 컨텍스트로 제공하며, 하위 파트를 정적 속성으로 묶어 export한다.
하위 파트 구현
src/shared/ui/accordion/AccordionHeader.tsx, src/shared/ui/accordion/AccordionLabel.tsx, src/shared/ui/accordion/AccordionTrigger.tsx, src/shared/ui/accordion/AccordionContent.tsx
Header, Label, Trigger, Content가 컨텍스트 값을 사용해 상태 속성, 접근성 속성, 전환 애니메이션, 자식 합성을 렌더링한다.
Accordion 스토리북 예시
src/shared/ui/accordion/Accordion.stories.tsx
Accordion 동작 예시와 커버레터 입력 예시를 포함한 여러 Storybook 스토리와 보조 예제 컴포넌트가 추가된다.

Input/TextArea 스토리 렌더링 전환

Layer / File(s) Summary
Input/TextArea 스토리 전환
src/shared/ui/input/Input.stories.tsx, src/shared/ui/textarea/TextArea.stories.tsx
Input과 TextArea 스토리가 args 기반에서 직접 렌더링 방식으로 바뀌고, TextArea에는 ReactHookForm 스토리가 추가된다.
FormControlLabel 마진 조정
src/shared/ui/form-control/FormControlLabel.tsx
FormControlLabel의 기본 label 클래스에서 하단 마진 값이 변경된다.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • Rewrite-Team/Rewrite-FE#44: TextArea.stories.tsx의 스토리 구성과 렌더링 방식이 같은 파일에서 변경되는 흐름이 이어집니다.
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning Accordion 관련 변경 외에 FormControlLabel의 여백 조정이 포함되어 있어 링크된 요구사항 범위를 벗어납니다. FormControlLabel 수정은 별도 PR로 분리하고, Accordion과의 연관성이 필요하면 변경 사유를 명시하세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 58.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 아코디언 공통 컴포넌트 구현이라는 핵심 변경을 정확히 요약합니다.
Linked Issues check ✅ Passed Accordion Root/Trigger/Content와 controlled·uncontrolled, disabled, 접근성, Storybook 요구사항을 모두 충족합니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/#47

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown

🧪 테스트 결과

항목 결과
✅ Jest 테스트 success

@github-actions

Copy link
Copy Markdown

🚦 CI 검증 결과

항목 결과
🧠 TypeScript 타입 체크 success
🧹 ESLint 검사 success
🎨 Prettier 검사 success
🏗️ Build 검증 success

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/shared/ui/textarea/TextArea.stories.tsx`:
- Around line 118-125: The MaxLengthReached story is not actually demonstrating
the max-length boundary because the current defaultValue is shorter than
maxLength. Update the TextArea.Field defaultValue in MaxLengthReached so it
reaches the limit set by maxLength={5}, and keep the story name and displayed
state aligned with the actual truncation/limit behavior.
🪄 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: a56f114c-971f-4273-8121-381340bf0388

📥 Commits

Reviewing files that changed from the base of the PR and between 509246c and e06462a.

⛔ Files ignored due to path filters (1)
  • src/shared/assets/icons/common/ic-alt-arrow-down.svg is excluded by !**/*.svg
📒 Files selected for processing (12)
  • src/shared/ui/accordion/Accordion.stories.tsx
  • src/shared/ui/accordion/Accordion.tsx
  • src/shared/ui/accordion/Accordion.types.ts
  • src/shared/ui/accordion/AccordionContent.tsx
  • src/shared/ui/accordion/AccordionContext.ts
  • src/shared/ui/accordion/AccordionHeader.tsx
  • src/shared/ui/accordion/AccordionLabel.tsx
  • src/shared/ui/accordion/AccordionTrigger.tsx
  • src/shared/ui/accordion/index.ts
  • src/shared/ui/form-control/FormControlLabel.tsx
  • src/shared/ui/input/Input.stories.tsx
  • src/shared/ui/textarea/TextArea.stories.tsx

Comment thread src/shared/ui/textarea/TextArea.stories.tsx
@Lseojeong Lseojeong merged commit 23a294d into dev Jun 24, 2026
5 checks passed
@Lseojeong Lseojeong deleted the feat/#47 branch June 24, 2026 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨Feature 새로운 기능 구현

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[✨ Feature] Accordion 공통 컴포넌트 구현

1 participant