Skip to content

feat: Tab, TabAtomic 컴포넌트 구현 (fill 제외)#76

Open
she0108 wants to merge 1 commit intodevelopfrom
feature/66-tab-component
Open

feat: Tab, TabAtomic 컴포넌트 구현 (fill 제외)#76
she0108 wants to merge 1 commit intodevelopfrom
feature/66-tab-component

Conversation

@she0108
Copy link
Copy Markdown
Contributor

@she0108 she0108 commented May 6, 2026

📝 개요

image
TabAtomic, Tab 공통 컴포넌트를 구현했습니다. 후기 필터용 컴포넌트는 이것과 별도라고 PD측으로부터 전달받아서 style=fill은 제외하고 이미지에 보이는 2가지만 만들었습니다. 탭 전환 시 하단 막대기(?)에 슬라이딩(?) 애니메이션을 적용했습니다.

🔗 관련 이슈

🛠️ 변경 사항 (Checklist)

  • ✨ Feature: 새로운 기능 추가
  • 🚀 Enhancement: 기존 기능 개선/성능 향상
  • 🐞 Bug: 버그 수정
  • ♻️ Refactor: 코드 구조 개선 (기능 변화 없음)
  • 🏗️ Chore: 빌드/패키지 설정/단순 잡일
  • 🎨 Design: UI/UX 스타일 수정
  • 📚 Documentation: 문서 수정

✅ 아래 내용을 한 번 더 점검해 주세요

1. 의도와 가독성 (Naming & Readability)

  • 의도 중심 네이밍: 변수명에서 '역할'이, 함수명에서 '행위+대상'이 명확히 드러나나요?
  • 선언적 코드: '어떻게'가 아닌 '무엇을' 하는지 코드만 보고도 알 수 있나요? (복잡한 로직은 내부 메서드로 숨겼나요?)
  • 주석: 코드만으로 설명이 어려운 '특정 로직'에만 주석을 달았나요?

2. 타입과 논리 (Type Safety & Logic)

  • 타입 안전성: any 사용을 지양하고, 모든 함수의 반환 타입을 명시했나요?
  • 엣지 케이스: 데이터가 없거나(null/undefined), 에러가 발생할 경우를 처리했나요?
  • 하드코딩 방지: API 주소나 설정값들이 환경 변수나 상수로 분리되었나요?

3. 코드 다이어트 (Clean-up)

  • 찌꺼기 제거: 디버깅용 console.log나 사용하지 않는 import를 모두 지웠나요?
  • 불필요한 코드: "나중에 쓰겠지" 하고 남겨둔 죽은 코드(Dead Code)는 없나요?
  • Linter: 린트 에러나 워닝이 남아있지 않나요?

4. 지속 가능성 (Sustainability)

  • 테스트: 수동으로든 코드로든 정상 작동을 확인했나요? (특히 기존 기능이 망가지지 않았나요?)
  • 문서화: 새로운 환경 변수나 라이브러리가 추가되어 README 업데이트가 필요한가요?

💭 회고 (Optional)

@she0108 she0108 self-assigned this May 6, 2026
@she0108 she0108 added the ✨ Feature 아예 없던 새로운 기능을 추가 label May 6, 2026
Comment on lines +33 to +37
<TabAtomic
key={item}
ref={(el) => {
refs.current[i] = el;
}}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

TabAtomic에 ref를 전달하고 있는데, 현재 컴포넌트가 forwardRef로 감싸져 있지 않아서 실제 button ref가 연결되지 않을 수 있을 것 같아요. indicator 위치 계산에 필요한 ref라면 forwardRef<HTMLButtonElement, Props>로 감싸는 방식이 더 안전해 보입니다!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

저도 처음에 forwardRef를 썼다가, 찾아보니 React19부터는 forwardRef 없이도 ref를 프로퍼티로 전달할 수 있게 됐다고 해서 지웠습니다!

Comment on lines +22 to +23
const activeIndex = items.indexOf(value);
const el = refs.current[activeIndex];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

여기는 잘 구현해 주셨습니다! 혹시라도 valueitems에 없는 값으로 들어오는 경우를 대비해서 activeIndex === -1일 때 early return을 추가하는 방안도 괜찮을 거 같아요!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

그러네요! 이 부분은 좀 더 안전하게 수정해볼게요

Copy link
Copy Markdown
Contributor

@MintPansy MintPansy left a comment

Choose a reason for hiding this comment

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

고생하셨습니다! 전체적으로 구조 깔끔한 것 같습니다. 파일 내 몇 가지 코멘트만 확인 부탁드려요!

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.

[feat] Tab 공통 컴포넌트 구현

2 participants