refactor(Tab): Tab 컴포넌트 storybook 및 접근성 개선

[constantly-dev]

변경사항

1. Tab story 개선 (description, summary 추가)
2. 접근성 개선 (role 지정, aria-selected 설정, tabIndex 설정)

링크

시급한 정도

🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.

기타 사항

1️⃣ 내부 isSelected 일부 변경

기존 코드를 살펴보니 isSelected가 아래와 같이 설정된 것을 볼 수 있었습니다.

// AS-IS
const isSelected = selected === item ? 'selected' : '';

물론 반복되는 코드를 줄이기 위해 사용한 것은 좋지만, is- prefix의 의미가 대부분 boolean 값을 가진다는 점과 aria-selected에서 선택 여부에 해당하는 boolean 값을 필요로 한다는 것을 근거로 삼아 코드를 아래와 같이 수정하였습니다.

// TO-BE
const isSelected = selected === item;

Tab의 interface를 바꾸지 않아 크게 문제가 될 것이 없다고 생각하지만, 이 부분에 대해서 잘못된 방향이 있다면 코멘트 부탁드립니다!

2️⃣ tabIndex 사용 접근성 개선

모든 탭이 tab key로 이동되어도 되지만, 접근성을 고려할 때 활성화 되는 탭을 이동시켜 주는 것이 좋다고 판단했습니다.
또한 material design 코드에도 tabIndex가 tab bar에 적용된 것을 근거로 사용하는 것이 접근성에 더 좋다고 판단하여 추가하였습니다.

material design - tab bar 링크

2025-09-30.7.02.11.mov

3️⃣ storybook show code 컴포넌트 이름 이슈

storybook에서 show code를 누르면 컴포넌트명이 이상하게 뜨는 이슈가 있었습니다. 이 부분은 구현 컴포넌트의 이름을 제대로 인식하지 못하는 이유라고 판단해서 처음에는 import/export문을 수정해보기도 했는데 결국 해결한 방법은 아래와 같습니다.

export default Tab;

Tab.displayName = 'Tab';

Tab 컴포넌트 파일 최하단에 displayName을 지정해줘서 해결했습니다. 이 부분에 대해서 storybook github issue등에서 찾아보니 뭔가 해결됐다고 코멘트를 남겼지만, 제대로 해결이 안된 사람들이 많은 것 같았습니다. 그래서 issue안에서 제일 많이 해결하는 방법 중 하나가 displayName 지정이라고 판단해서 추가했는데, 더 좋은 의견 있으시다면 알려주시면 감사하겠습니다.

storybookjs/storybook#20920
storybookjs/storybook#18972

Note

Tab 컴포넌트 스토리북에서 WithComponent에 대한 상황은 지금 기준으로 어드민에서만 사용하는 것 같습니다.
이 부분이 아직 mds 피그마에는 반영이 안된 것 같아서 PD분들께 말씀드려 이번주 내로 회의 후 작업 진행하겠다는 답변을 받았습니다.
이후 추가로 mds에 제가 작업할 부분이 있다면 답변 받는대로 작업하겠습니다!

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8bb121c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR