feat: SearchBar 컴포넌트를 구현했어요 #182
Conversation
|
작업 내용에 대한 코멘트는 아니라서 먼저 달아둡니다! PR 제목이나 커밋 메시지를 봤을 때, 기존 형식이랑 다르게 작성된 게 눈에 띄어서요. 저는 일관성만 유지되면 형식 변경은 상관 없는 쪽이라 이에 대한 얘기를 나눠봐도 좋구용~~ |
|
여러 케이스별로 깃모지가 나은 전략인지 판단해볼게요.
그래서 저는 러닝커브만 문제가 안된다면 깃모지가 훨씬 더 낫다고 생각하는 입장입니다. 많은 깃모지들 중에서 아래 깃모지만 알면 큰 문제는 없긴해요.
그리고 이 부분들이 어렵다면 커밋 단축어로 pre-commit 시간에 한번에 깃모지를 작성해주는 스크립트를 짤 생각도 있어요. |
There was a problem hiding this comment.
피그마 상에서 모바일 뷰의 SearchBar를 따로 구현해두지는 않았어요.
네! 관련 내용 자세히 적어주셔서 이해했고, 저도 이 방향에 동의합니다.
아래는 왜 동의하는지에 대한 생각이라 가볍게 읽어만 주시면 될 거 같아요~!
양 옆 아이콘이 SearchBar 컴포넌트의 맥락에서 많이 벗어난다고 생각해서
그러게요
양 옆 아이콘을 property로 두면 피그마에서 화면 설계할 땐 편한데
Search Bar 밖에 있는 아이콘을 굳이 여기서 관리해야.. 할까? 싶엇음
그리고 clearButton을 PC Web에서 사용하지 않은 이유에 대해 혀니가 남긴 코멘트도 봤는데요 (링크)
들어주신 이유가 사실 디자이너마다 의견이 달라질 수 있는 부분이라
지금처럼 사용처에서 clearButton 유무를 결정하는 방식이 더 유연해보이네요
코멘트가 몇 개 있는데, 기능상 문제를 주는 영역은 아니라 어푸룹 해두겠습니다
연휴에 고생 많으셨어요!!!!!!!!!
There was a problem hiding this comment.
현재 IcSearchLine만 추가된 상태인데, 아이콘이 추가될 때 Line과 Filled가 각각 두 가지 형태로 제공되어야 할 거 같습니다!
Search Bar에서는 Line 형태만 사용하지만, 디자이너들이 Filled 형태도 핸디에서 사용 가능하다고 인지할 가능성이 클 거 같아서요.
IcSearchFilled도 추가하자고 제안합니다
There was a problem hiding this comment.
| ### SearchBar.CloseButton | ||
|
|
||
| SearchBar에 입력된 검색어를 초기화하기 위한 UI 버튼을 제공합니다.<br /> | ||
|
|
||
| ```tsx | ||
| import { SearchBar } from '@yourssu/design-system-react'; | ||
|
|
||
| <SearchBar> | ||
| <SearchBar.Input placeholder="검색어를 입력해주세요" /> | ||
| <SearchBar.CloseButton /> | ||
| </SearchBar>; |
There was a problem hiding this comment.
| ### SearchBar.CloseButton | |
| SearchBar에 입력된 검색어를 초기화하기 위한 UI 버튼을 제공합니다.<br /> | |
| ```tsx | |
| import { SearchBar } from '@yourssu/design-system-react'; | |
| <SearchBar> | |
| <SearchBar.Input placeholder="검색어를 입력해주세요" /> | |
| <SearchBar.CloseButton /> | |
| </SearchBar>; | |
| ### SearchBar.ClearButton | |
| SearchBar에 입력된 검색어를 초기화하기 위한 UI 버튼을 제공합니다.<br /> | |
| ```tsx | |
| import { SearchBar } from '@yourssu/design-system-react'; | |
| <SearchBar> | |
| <SearchBar.Input placeholder="검색어를 입력해주세요" /> | |
| <SearchBar.ClearButton /> | |
| </SearchBar>; |
There was a problem hiding this comment.
|
|
||
| return ( | ||
| <StyledContainer ref={ref} {...props} onSubmit={onSubmit}> | ||
| <IcSearchLine size="20px" /> |
There was a problem hiding this comment.
IcSearchLine에 color 지정이 필요합니다!
There was a problem hiding this comment.
* feat: IcSearchLine/Filled 아이콘 추가 * feat: SearchBar 구현 * feat: SearchBar > ClearButton 구현 * docs: SearchBar 문서 작성
* feat: IcSearchLine/Filled 아이콘 추가 * feat: SearchBar 구현 * feat: SearchBar > ClearButton 구현 * docs: SearchBar 문서 작성
1️⃣ 어떤 작업을 했나요? (Summary)
SearchBar 컴포넌트를 구현했어요.
2025-01-28.19.19.23.mov
figma: https://www.figma.com/design/gvwhMF6iNkuYKzxipKzkaG/Handy-v1-(demo)?node-id=1789-7208&t=aOdj3XKfL4y7Xgfm-1
변경사항
큰 변경사항들은 없어요. 단순 피처 구현이에요.
2️⃣ 알아두시면 좋아요!
피그마 상에서 모바일 뷰의 SearchBar를 따로 구현해두지는 않았어요.
모바일뷰 vs 데스크탑뷰 의 차이점은
양 옆 아이콘이 SearchBar 컴포넌트의 맥락에서 많이 벗어난다고 생각해서
이 구현체에서 따로 제공해주지 않고, 사용처에서 구현하는 것으로 책임을 전가했어요.
그리고 제공한다고 하더라도, 화면 렌더링 이후에 발생하는 미디어 쿼리 감지 이펙트 로직으로 두 컴포넌트를 화면 크기에 따라 다르게 렌더링 시켜야 하는데, 저희 쪽에서 이 리소스를 감당하게 되면 사용처에 많은 제약을 줄 것 같아 따로 제공하지 않는 판단을 했어요.
3️⃣ 추후 작업
요청사항 대응
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?