Skip to content

[Feat] ChatPromptList 컴포넌트 제작#47

Merged
YeBeenChoi merged 9 commits into
mainfrom
43-feat/ChatPrompList-컴포넌트-제작
Jan 23, 2026

Hidden character warning

The head ref may contain hidden characters: "43-feat/ChatPrompList-\ucef4\ud3ec\ub10c\ud2b8-\uc81c\uc791"
Merged

[Feat] ChatPromptList 컴포넌트 제작#47
YeBeenChoi merged 9 commits into
mainfrom
43-feat/ChatPrompList-컴포넌트-제작

Conversation

@YeBeenChoi

Copy link
Copy Markdown
Collaborator

✨ 주요 변경사항

  • ChatPromptList 컴포넌트 제작 및 variants 정리
  • 브랜드 컬러 토큰 추가 및 활성 색상 적용 (FavoriteButton/ChatInput)
  • Playground에 ChatPromptList 예시 추가

📝 작업 상세 내용

  • ChatPromptList 기본 UI / 클릭 핸들러 / 자동 줄바꿈 및 높이 확장 처리
  • hover / focus / active 시 동일 스타일을 variants로 관리

✅ 체크리스트

  • PR 본문에 Close #번호 추가
  • 불필요한 주석, 디버깅 코드 제거
  • 기능 테스트 및 정상 동작 확인
  • 커밋컨벤션 / 코드컨벤션 준수

📸 스크린샷 (선택)

image

🔍 기타 참고사항

  • FavoriteButton과 ChatInput 컴포넌트의 활성 색상이 기존에는 브랜드 토큰이 아닌 다른 토큰으로 적용되어 있어 브랜드 토큰을 새로 추가한 뒤 해당 색상으로 수정했습니다!
  • 또한 피그마 디자인에서 텍스트 길이에 대한 정의가 명확하지 않아 텍스트가 길어질 경우 줄바꿈되면서 높이가 확장이 되도록 처리해 두었습니다! 더 나은 수정 방향이나 권장 방식이 있다면 편하게 말씀해 주세요!

🔗 관련 이슈

@github-actions github-actions Bot added the ✨Feature 새로운 기능 label Jan 21, 2026
@github-actions

Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Test: 통과
Build: 성공
Build Size: 7MB

@YeBeenChoi YeBeenChoi changed the title ChatPromptList 컴포넌트 제작 [Feat] ChatPromptList 컴포넌트 제작 Jan 21, 2026

@KyeongJooni KyeongJooni left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

수고하셨습니다!! 코멘트 확인 부탁드립니다! 👍

Comment thread src/app/styles/index.css
Comment on lines +35 to +36
--color-brand-primary: #13ffd0;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

--color-brand-primary: #13ffd0;
--color-green-500: #1bffd0;

두개가 거의 비슷한거 같은데 피그마 디자인 상 지금 살짝 다르게 되어있나요?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

두 컬러가 거의 비슷해 보이긴 하는데, 피그마에서는 해당 민트 색상이 모두 brand-primary로 정의되어 있더라구요 그래서 디자인 기준에 맞춰 brand-primary 토큰을 사용하는 방향으로 정리했습니다!

'outline-none',
'cursor-pointer',
],
text: ['max-w-full', 'whitespace-normal', 'break-words'],

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

수고하셨습니다! 긴 문장 처리 잘하신 것 같습니다!!👍

@KyeongJooni KyeongJooni left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

수고하셨습니다!! 충돌 해결하셔야 할 것 같습니다... ㅠㅠ

@github-actions

Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Test: 통과
Build: 성공
Build Size: 9MB

@YeBeenChoi
YeBeenChoi merged commit dfbb863 into main Jan 23, 2026
6 checks passed
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] #43 - ChatPromptList 컴포넌트 제작

3 participants