Skip to content

feat: IconBase 컴포넌트 및 아이콘 컴포넌트들 구축#13

Merged
RookieAND merged 14 commits intomainfrom
feature/design-system-icon
Jan 22, 2026
Merged

feat: IconBase 컴포넌트 및 아이콘 컴포넌트들 구축#13
RookieAND merged 14 commits intomainfrom
feature/design-system-icon

Conversation

@RookieAND
Copy link
Collaborator

🎯 PR 제목

Icon 컴포넌트 시스템 구축 및 예시 페이지 추가

📑 작업 상세 내역

  1. IconBase 컴포넌트 구현
  • 모든 아이콘의 기본이 되는 wrapper 컴포넌트 추가
  • size, color props 지원
  • React 19 패턴 적용 (forwardRef, displayName 제거)
  • 기본값: size=16px, color=currentColor
  1. Stroke 아이콘 컴포넌트 구현
  • ChevronRightIcon: 오른쪽 화살표 아이콘
  • XIcon: 닫기 아이콘
  • CircleIcon: 원형 아이콘
  • ArrowLeftIcon: 왼쪽 화살표 아이콘
  • 모두 size, color props 지원으로 외부에서 색상 변경 가능
  1. Filled 아이콘 컴포넌트 구현
  • CrownIcon: 왕관 아이콘 (색상 고정: #FFCD00, #FFAD00)
  • StarIcon: 별 아이콘 (size, color props 지원)
  • HeartIcon: 하트 아이콘 (size, color props 지원)

🙏 리뷰 요청 사항

  • 아이콘 네이밍: 현재 사용된 아이콘 이름들이 프로젝트 컨벤션에 맞는지 확인 부탁드립니다.
  • 색상 정책: CrownIcon은 색상 고정, 나머지 Filled 아이콘은 색상 변경 가능한 구조가 적절한지 검토 부탁드립니다.
  • 기본 크기: 모든 아이콘의 기본 크기를 16px로 설정했는데, 디자인 시스템과 일치하는지 확인 부탁드립니다.

🖼️ 작업 결과물

스크린샷 2026-01-19 오후 6 46 02

@github-actions github-actions bot added the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Jan 19, 2026
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @RookieAND, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 디자인 시스템을 위한 새로운 아이콘 시스템을 구축합니다. 모든 아이콘의 기반이 되는 IconBase 컴포넌트를 도입하고, 이를 활용하여 다양한 스트로크 및 채워진 아이콘들을 구현했습니다. 또한, 개발자들이 새로 추가된 아이콘들을 쉽게 확인하고 사용법을 이해할 수 있도록 예시 페이지를 함께 제공합니다.

Highlights

  • IconBase 컴포넌트 도입: 모든 아이콘의 기본 래퍼 컴포넌트인 IconBase가 추가되었습니다. 이 컴포넌트는 size 및 color prop을 지원하며, React 19 패턴을 적용하여 forwardRef 및 displayName을 제거했습니다. 기본값은 size=16px, color=currentColor입니다.
  • 스트로크 아이콘 구현: ChevronRightIcon, XIcon, CircleIcon, ArrowLeftIcon과 같은 스트로크 기반 아이콘 컴포넌트들이 추가되었습니다. 이들은 IconBase를 활용하며 size 및 color prop을 통해 외부에서 색상 변경이 가능합니다.
  • 채워진 아이콘 구현: CrownIcon, StarIcon, HeartIcon과 같은 채워진 아이콘 컴포넌트들이 추가되었습니다. CrownIcon은 색상이 고정되어 있으며, StarIcon과 HeartIcon은 size 및 color prop을 지원합니다.
  • 아이콘 예시 페이지 추가: 새로 구현된 아이콘들을 한눈에 확인하고 다양한 크기 및 색상 옵션을 시연할 수 있는 예시 페이지(app/icons/page.tsx)가 추가되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

아이콘 컴포넌트 시스템을 구축하고 예시 페이지를 추가하는 PR에 대한 리뷰입니다. 전반적으로 아이콘 시스템의 기반을 잘 마련해주셨습니다. IconBase 컴포넌트를 도입하여 일관성을 높이려는 시도가 좋았습니다. 몇 가지 개선점을 제안드립니다. IconBaseviewBox 처리 방식에 대한 수정, SVG ID 충돌 방지, 아이콘 컴포넌트 구현 방식의 일관성 확보, 그리고 예시 페이지의 코드 가독성 향상에 대한 의견을 포함했습니다. 자세한 내용은 각 파일의 주석을 참고해주세요.

@RookieAND RookieAND changed the title Feature/design system icon feature: IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 Jan 19, 2026
@github-actions github-actions bot removed the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Jan 19, 2026
@RookieAND RookieAND changed the title feature: IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 feat: IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 Jan 19, 2026
@github-actions github-actions bot added the ✨ Feature 기능 개발 label Jan 19, 2026
@RookieAND RookieAND self-assigned this Jan 19, 2026
@RookieAND RookieAND requested a review from youngminss January 19, 2026 10:03
@RookieAND RookieAND added the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Jan 19, 2026
RookieAND and others added 11 commits January 21, 2026 21:39
- 모든 아이콘의 기본이 되는 wrapper 컴포넌트
- size, color props 지원
- React 19 패턴 적용 (forwardRef 제거)

Co-Authored-By: Claude <noreply@anthropic.com>
- 오른쪽 화살표 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 닫기 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 원형 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 왕관 filled 아이콘
- size prop만 지원 (색상 고정)
- 고정 색상: #FFCD00, #FFAD00

Co-Authored-By: Claude <noreply@anthropic.com>
- 왼쪽 화살표 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 별 filled 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 하트 filled 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>
- 모든 아이콘을 Grid 형식으로 표시
- Stroke 아이콘: 검정색으로 표시
- Filled 아이콘: Primary 색상으로 표시
- Size 예시 및 Color 예시 섹션 포함

Co-Authored-By: Claude <noreply@anthropic.com>
- 컴포넌트 폴더명을 소문자 camelCase로 변경
- index.ts에서 Props 타입 export 제거

Co-Authored-By: Claude <noreply@anthropic.com>
- app/icons/page.tsx의 import 경로 수정
- IconBase를 사용하는 아이콘 컴포넌트의 import 경로 수정
- type import를 명시적으로 분리

Co-Authored-By: Claude <noreply@anthropic.com>
@RookieAND RookieAND force-pushed the feature/design-system-icon branch from 3cb7ea2 to d04f493 Compare January 21, 2026 12:39
* feat: Spinner 및 ProgressBar 컴포넌트 추가

- Spinner: 3가지 크기(small: 20px, medium: 32px, large: 44px) 지원
- ProgressBar: 0-100 값을 받아 진행률 표시
- 표준 Tailwind 클래스 사용 (w-5, w-8, w-11)
- /atoms 테스트 페이지 추가

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: ProgressBar indicator에 HeartIcon 추가

- indicator 내부에 흰색 하트 아이콘 표시
- Figma 디자인과 일치하도록 수정

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar showIndicator prop 제거

- indicator를 항상 표시하도록 변경
- API 단순화

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar 코드 정리

- 불필요한 주석 제거
- clampedValue > 0 조건을 isValue 변수로 분리

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: ProgressBar에 Motion 애니메이션 추가

- indicator가 나타나고 사라질 때 scale & fade 애니메이션
- fill bar의 width 변화도 부드럽게 애니메이션
- AnimatePresence로 exit 애니메이션 지원

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: Spinner 색상 고정 및 ProgressBar exit 애니메이션 개선

- Spinner: color prop 제거하고 primary-100으로 고정
- ProgressBar: indicator가 사라질 때 왼쪽으로 이동하면서 사라지도록 개선
- 테스트 페이지에서 Spinner 색상 예시 제거

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: Spinner stroke를 className으로 제어

- inline stroke 속성 제거
- spinnerVariants에 stroke-palette-primary-100 클래스 추가

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar 스타일 단순화 및 indicator border 추가

- CVA variants 제거하고 단순 문자열 클래스로 변경
- indicator에 white border 추가
- shadow-md 제거
- cva import 제거

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: indicatorClasses 변수 제거하고 인라인으로 변경

- indicatorClasses 변수 제거
- className을 motion.div에 직접 작성

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: prettier 포맷에 맞지 않았던 코드 수정

* style: Prettier 자동 포맷팅 적용

- 들여쓰기를 tabs로 통일
- Tailwind 클래스 순서 정렬
- 따옴표를 single quote로 통일
- 줄바꿈 정리

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: StepIndicator 컴포넌트 구현

- 진행 단계를 표시하는 컴포넌트 (예: 1/3)
- twJoin을 사용한 className 관리 및 그룹핑
- 16px Bold, #ff5a3c 색상 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* style: 시맨틱 컬러 토큰 적용 및 스타일 개선

- ProgressBar: 시맨틱 컬러 토큰 적용 및 twJoin으로 className 그룹핑
- Spinner: 배경 circle 추가 및 시맨틱 컬러 토큰 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar className prop 제거

- ComponentProps → ComponentPropsWithoutRef 변경
- className prop을 Omit하여 외부에서 스타일 오버라이드 방지
- 컴포넌트 디자인 시스템 일관성 유지

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Copy link
Member

@youngminss youngminss left a comment

Choose a reason for hiding this comment

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

LGTM 👍

RookieAND and others added 2 commits January 22, 2026 22:29
* feat: StepHeader 컴포넌트 추가 및 ref forwarding 지원

- Root, Title, Description 서브 컴포넌트로 구성된 복합 컴포넌트
- ComponentProps를 활용한 타입 안전성 확보
- ref forwarding 및 모든 HTML attributes 지원
- 프로젝트의 Button 컴포넌트와 동일한 패턴 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: BackwardButton 컴포넌트 추가

- ArrowLeftIcon을 사용한 뒤로가기 전용 버튼 컴포넌트
- ComponentProps를 활용한 타입 안전성 및 모든 HTML button attributes 지원
- ref forwarding으로 DOM 직접 접근 가능
- twJoin 사용으로 프로젝트 스타일 일관성 유지

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: BackwardButton 컴포넌트 타입 및 스타일 개선

- Props 타입을 더 엄격하게 정의 (children, className, aria-label, type 제외)
- ref forwarding 제거
- 하드코딩된 색상을 디자인 토큰으로 변경
- 간격 값을 디자인 토큰 기반으로 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Description 컴포넌트 타입 및 스타일 개선

- ComponentPropsWithoutRef로 변경하여 ref 제거
- children을 string 타입으로 강화
- className props 제거
- 디자인 토큰 기반 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Root 컴포넌트 시맨틱 및 스타일 개선

- div에서 section 시맨틱 태그로 변경
- ComponentPropsWithoutRef로 변경하여 ref 제거
- className props 제거
- 간격 값을 디자인 토큰 기반으로 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Title 컴포넌트 타입 및 스타일 개선

- ComponentPropsWithoutRef로 변경하여 ref 제거
- children을 string 타입으로 강화
- className props 제거
- 디자인 토큰 기반 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: 홈 페이지에 BackwardButton 및 StepHeader 컴포넌트 적용

- BackwardButton 컴포넌트를 헤더에 추가
- StepHeader 컴포넌트 예시 추가
- 코드 포매팅 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* style: StepHeader Title 폰트 크기 조정

- heading-20-bd → heading-22-bd로 변경
- 가독성 개선을 위한 폰트 크기 증가

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
@RookieAND RookieAND merged commit 8557b75 into main Jan 22, 2026
2 of 3 checks passed
@youngminss youngminss removed the ☑️ Need Review 작업이 완료되어 리뷰를 기다리고 있는 PR 입니다 label Jan 22, 2026
RookieAND added a commit that referenced this pull request Feb 16, 2026
* feat: IconBase 컴포넌트 추가

- 모든 아이콘의 기본이 되는 wrapper 컴포넌트
- size, color props 지원
- React 19 패턴 적용 (forwardRef 제거)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: ChevronRightIcon 컴포넌트 추가

- 오른쪽 화살표 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: XIcon 컴포넌트 추가

- 닫기 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: CircleIcon 컴포넌트 추가

- 원형 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: CrownIcon 컴포넌트 추가

- 왕관 filled 아이콘
- size prop만 지원 (색상 고정)
- 고정 색상: #FFCD00, #FFAD00

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: ArrowLeftIcon 컴포넌트 추가

- 왼쪽 화살표 stroke 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: StarIcon 컴포넌트 추가

- 별 filled 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: HeartIcon 컴포넌트 추가

- 하트 filled 아이콘
- size, color props 지원
- 기본값: size=16px, color=currentColor

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: 아이콘 예시 페이지 추가

- 모든 아이콘을 Grid 형식으로 표시
- Stroke 아이콘: 검정색으로 표시
- Filled 아이콘: Primary 색상으로 표시
- Size 예시 및 Color 예시 섹션 포함

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: 아이콘 컴포넌트 구조 개선

- 컴포넌트 폴더명을 소문자 camelCase로 변경
- index.ts에서 Props 타입 export 제거

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: 아이콘 import 경로를 소문자 폴더명으로 수정

- app/icons/page.tsx의 import 경로 수정
- IconBase를 사용하는 아이콘 컴포넌트의 import 경로 수정
- type import를 명시적으로 분리

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: Spinner & Progress Bar 컴포넌트 제작 (#15)

* feat: Spinner 및 ProgressBar 컴포넌트 추가

- Spinner: 3가지 크기(small: 20px, medium: 32px, large: 44px) 지원
- ProgressBar: 0-100 값을 받아 진행률 표시
- 표준 Tailwind 클래스 사용 (w-5, w-8, w-11)
- /atoms 테스트 페이지 추가

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: ProgressBar indicator에 HeartIcon 추가

- indicator 내부에 흰색 하트 아이콘 표시
- Figma 디자인과 일치하도록 수정

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar showIndicator prop 제거

- indicator를 항상 표시하도록 변경
- API 단순화

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar 코드 정리

- 불필요한 주석 제거
- clampedValue > 0 조건을 isValue 변수로 분리

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: ProgressBar에 Motion 애니메이션 추가

- indicator가 나타나고 사라질 때 scale & fade 애니메이션
- fill bar의 width 변화도 부드럽게 애니메이션
- AnimatePresence로 exit 애니메이션 지원

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: Spinner 색상 고정 및 ProgressBar exit 애니메이션 개선

- Spinner: color prop 제거하고 primary-100으로 고정
- ProgressBar: indicator가 사라질 때 왼쪽으로 이동하면서 사라지도록 개선
- 테스트 페이지에서 Spinner 색상 예시 제거

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: Spinner stroke를 className으로 제어

- inline stroke 속성 제거
- spinnerVariants에 stroke-palette-primary-100 클래스 추가

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar 스타일 단순화 및 indicator border 추가

- CVA variants 제거하고 단순 문자열 클래스로 변경
- indicator에 white border 추가
- shadow-md 제거
- cva import 제거

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: indicatorClasses 변수 제거하고 인라인으로 변경

- indicatorClasses 변수 제거
- className을 motion.div에 직접 작성

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: prettier 포맷에 맞지 않았던 코드 수정

* style: Prettier 자동 포맷팅 적용

- 들여쓰기를 tabs로 통일
- Tailwind 클래스 순서 정렬
- 따옴표를 single quote로 통일
- 줄바꿈 정리

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: StepIndicator 컴포넌트 구현

- 진행 단계를 표시하는 컴포넌트 (예: 1/3)
- twJoin을 사용한 className 관리 및 그룹핑
- 16px Bold, #ff5a3c 색상 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* style: 시맨틱 컬러 토큰 적용 및 스타일 개선

- ProgressBar: 시맨틱 컬러 토큰 적용 및 twJoin으로 className 그룹핑
- Spinner: 배경 circle 추가 및 시맨틱 컬러 토큰 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: ProgressBar className prop 제거

- ComponentProps → ComponentPropsWithoutRef 변경
- className prop을 Omit하여 외부에서 스타일 오버라이드 방지
- 컴포넌트 디자인 시스템 일관성 유지

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

* feat: StepHeader 및 BackwardButton 컴포넌트 추가 (#17)

* feat: StepHeader 컴포넌트 추가 및 ref forwarding 지원

- Root, Title, Description 서브 컴포넌트로 구성된 복합 컴포넌트
- ComponentProps를 활용한 타입 안전성 확보
- ref forwarding 및 모든 HTML attributes 지원
- 프로젝트의 Button 컴포넌트와 동일한 패턴 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: BackwardButton 컴포넌트 추가

- ArrowLeftIcon을 사용한 뒤로가기 전용 버튼 컴포넌트
- ComponentProps를 활용한 타입 안전성 및 모든 HTML button attributes 지원
- ref forwarding으로 DOM 직접 접근 가능
- twJoin 사용으로 프로젝트 스타일 일관성 유지

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: BackwardButton 컴포넌트 타입 및 스타일 개선

- Props 타입을 더 엄격하게 정의 (children, className, aria-label, type 제외)
- ref forwarding 제거
- 하드코딩된 색상을 디자인 토큰으로 변경
- 간격 값을 디자인 토큰 기반으로 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Description 컴포넌트 타입 및 스타일 개선

- ComponentPropsWithoutRef로 변경하여 ref 제거
- children을 string 타입으로 강화
- className props 제거
- 디자인 토큰 기반 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Root 컴포넌트 시맨틱 및 스타일 개선

- div에서 section 시맨틱 태그로 변경
- ComponentPropsWithoutRef로 변경하여 ref 제거
- className props 제거
- 간격 값을 디자인 토큰 기반으로 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: StepHeader Title 컴포넌트 타입 및 스타일 개선

- ComponentPropsWithoutRef로 변경하여 ref 제거
- children을 string 타입으로 강화
- className props 제거
- 디자인 토큰 기반 스타일 적용

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: 홈 페이지에 BackwardButton 및 StepHeader 컴포넌트 적용

- BackwardButton 컴포넌트를 헤더에 추가
- StepHeader 컴포넌트 예시 추가
- 코드 포매팅 개선

Co-Authored-By: Claude <noreply@anthropic.com>

* style: StepHeader Title 폰트 크기 조정

- heading-20-bd → heading-22-bd로 변경
- 가독성 개선을 위한 폰트 크기 증가

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
github-actions bot pushed a commit that referenced this pull request Feb 16, 2026
## 1.0.0-beta.1 (2026-02-16)

### Features

* [#70](#70) ([#72](#72)) ([b676e0e](b676e0e))
* [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d))
* [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f))
* api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41)
* Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607))
* Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f))
* Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc))
* DotsLoader 컴포넌트 추가  ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49)
* GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa))
* GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded))
* IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c)
* InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2))
* Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71))
* Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f))
* Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf))
* Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a))
* Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05))
* Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0))
* 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34)
* 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20))
* 프로젝트 폴더 구조 반영 ([e54962d](e54962d))

### Bug Fixes

* 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4))
* 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231))
* Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56)
* cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d))
* CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8))
* Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9))
* Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1))
* Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da))
* nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75))
* PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12))
* 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844))
* 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52))
* 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65)
* 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed))
* 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f))
* 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da))
* 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1))
* 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e))
* 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025))

### Code Refactoring

* Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17))

### Build System

* Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163))

### Documentation

* 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))
github-actions bot pushed a commit that referenced this pull request Feb 16, 2026
## 1.0.0 (2026-02-16)

### Features

* [#70](#70) ([#72](#72)) ([b676e0e](b676e0e))
* [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d))
* [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f))
* analytics 개선 및 네이버 서치 어드바이저 등록 ([#88](#88)) ([4372aa5](4372aa5))
* api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41)
* Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607))
* Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f))
* Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc))
* DotsLoader 컴포넌트 추가  ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49)
* GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa))
* GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded))
* IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c)
* InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2))
* Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71))
* Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f))
* Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf))
* Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a))
* Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05))
* Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0))
* 모임 생성 완료 페이지 UI 리뉴얼 ([#89](#89)) ([17a3fc1](17a3fc1))
* 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34)
* 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20))
* 프로젝트 폴더 구조 반영 ([e54962d](e54962d))

### Bug Fixes

* 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4))
* 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231))
* Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56)
* cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d))
* CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8))
* Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9))
* Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1))
* Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da))
* nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75))
* PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12))
* 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844))
* 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52))
* 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65)
* 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed))
* 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f))
* 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da))
* 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1))
* 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e))
* 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025))

### Code Refactoring

* Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17))

### Build System

* Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163))

### Documentation

* 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))
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.

2 participants