Conversation
Joy0w0
requested review from
Ajeong-Im,
eric-hjh,
gyeong3un2,
sangminlee98 and
ww8007
| <input | ||
| type='text' | ||
| placeholder='검색어를 입력해주세요.' | ||
| className={`w-full rounded-md border border-zinc-300 px-5 py-3 font-light text-zinc-700 placeholder:text-zinc-400 focus:outline-none ${ | ||
| isFocused ? 'placeholder:opacity-0' : 'placeholder:opacity-100' | ||
| }`} | ||
| onFocus={() => setIsFocused(true)} | ||
| onBlur={() => setIsFocused(false)} | ||
| /> |
There was a problem hiding this comment.
- Input 공통 컴포넌트 사용하시면 더 편하실거같아요!
- state와 onFocus, onBlur 대신 focus:placeholder:opacity-0
을 사용해보시면 원하시는 동작을 더 간결하게 사용하실 수 있을거 같아요! - Search Icon까지 인풋값을 입력했을 때에 대한 케이스도 고려해주시면 더 좋을거 같아요!
| </Header> | ||
| </div> | ||
|
|
||
| <section className='px-4'> |
There was a problem hiding this comment.
레이아웃을 위한거라면 div태그를 사용하는게 저는 더 좋아보이는데 section 태그를 사용하신 이유가 있을까요??
| /> | ||
| </div> | ||
|
|
||
| <section className='mt-7 flex flex-col'> |
There was a problem hiding this comment.
수정 전 Header 코드 같은데, 없으면 conflict 뜨나요????
| <div className='sticky top-0 z-20 bg-white'> | ||
| <Header> | ||
| <Header.Left> | ||
| <div className='mt-6'> | ||
| <Header.BackButton onClick={router.back} /> | ||
| </div> | ||
| </Header.Left> | ||
| <Header.Right> | ||
| <div className='flex w-full justify-end'> | ||
| <Icon name='shopping-box' showBadge badgeCount={2} /> | ||
| </div> | ||
| </Header.Right> | ||
| </Header> | ||
| </div> |
There was a problem hiding this comment.
results 페이지랑 공통되는 부분은 layout으로 빼도 좋을거 같습니다!
| <Header> | ||
| <Header.Left> | ||
| <div className='mt-6'> | ||
| <Header.BackButton onClick={router.back} /> |
There was a problem hiding this comment.
BackButton default 동작이 router.back이어서 없어도 될거 같습니다!
| <div className='sticky top-0 z-20 bg-white'> | ||
| <Header> | ||
| <Header.Left> | ||
| <div className='mt-6'> |
There was a problem hiding this comment.
저는 없어도 될거 같은데, 넣으신 이유가 있을까요?
없어도 될것같단 이유는 없어야 기존 레이아웃에 더 잘 맞는다 생각합니다!
| </div> | ||
| </Header.Left> | ||
| <Header.Right> | ||
| <div className='flex w-full justify-end'> |
ww8007
left a comment
ww8007
left a comment
There was a problem hiding this comment.
간단한 코멘트 몇개 남겼습니다.
좀 이해관계를 쉽게 가져가길 원한다면 UI 컴포넌트를 분리해봐도 좋을 것 같아요!
| <div className='sticky top-0 z-20 bg-white'> | ||
| <Header> |
There was a problem hiding this comment.
헤더가 sticky 하게 붙길 원한다면 header에 className을 넘길 수 있도록 해봐도 괜찮을 것 같아요
| {keywords.length > 0 ? ( | ||
| <div className='flex flex-wrap gap-2'> | ||
| {keywords.map((keyword, index) => ( | ||
| <div | ||
| key={index} | ||
| className='inline-block rounded-full border-none bg-[#F9FAFB] px-3 py-2 text-sm text-gray-700' | ||
| > | ||
| # {keyword} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) : ( | ||
| <Typography className='font-light' size='h6' color='black'> | ||
| 아직 추천 검색어가 없어요. | ||
| </Typography> | ||
| )} |
There was a problem hiding this comment.
저는 보통 이렇게 줄이 길어질 때 &&로 엮는게 조건을 판단하기 좋은 것 같아서 많이 그렇게 사용하는데
이 부분은 어떠신가요?
{keywords.length > 0 && <div>}
{!keywords.length > 0 &&
<Typography className='font-light' size='h6' color='black'>
아직 추천 검색어가 없어요.
</Typography>
}| } | ||
| }; | ||
|
|
||
| export {BottomNavigation}; |
There was a problem hiding this comment.
export const로 처리해도 좋을 것 같아요
5 participants
📖 개요
💻 작업사항
💡 작성한 이슈 외에 작업한 사항
✔️ check list