[WRFE-11](feat): 검색 및 결과 페이지 퍼블리싱 #60
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Joy0w0
requested review from
ww8007,
sangminlee98,
gyeong3un2,
Ajeong-Im and
eric-hjh
eric-hjh
reviewed
Nov 19, 2024
Comment on lines
+39
to
+47
| <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 뜨나요????
Comment on lines
+22
to
+35
| <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
requested changes
Nov 20, 2024
Comment on lines
+22
to
+23
| <div className='sticky top-0 z-20 bg-white'> | ||
| <Header> |
There was a problem hiding this comment.
헤더가 sticky 하게 붙길 원한다면 header에 className을 넘길 수 있도록 해봐도 괜찮을 것 같아요
Comment on lines
+59
to
+74
| {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로 처리해도 좋을 것 같아요
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📖 개요
💻 작업사항
💡 작성한 이슈 외에 작업한 사항
✔️ check list