feat: 태그 검색 기능 구현 #64
Conversation
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-zgjmihsqio.chromatic.com/ |
|
이거 일단 태그 검색 디자인이 아예 다르게 빠져가지고 페이지를 나누던가 해야될 것 같아요... 이 브랜치에서 작업하고 다시 리뷰 요청 드리겠슴다! |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-ggsraspyox.chromatic.com/ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-fhrtfqiuvp.chromatic.com/ |
|
타미! 제가 댓글단 이후 수정된 내용 pr에 적어두신건가용??? 그리고 스토리북에 추가된 애 검색 결과가 없다는 것만 보입니다~~ mock data 추가해주세욥! |
|
@Leejin-Yang |
우선 궁금한게 이 두개의 경우에서 url이 현재 어떻게 될까요? |
|
그 review2에 해당하는 아이콘 디자인이 피그마랑 다르길래 교체했어요. 근데 얘는 밖에서 fill 넣어줘도 안먹더라고요?? 근데 저 부분에서만 쓰이는 것 같아서 그냥.. 색 안넣고 쓰는걸로.. 그리고 일단 그 헤더 디자인 변경된건 해온꺼 작업이랑 충돌될까봐 안건드렸는데.. 어떻게 할가요??? |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-jvujdqwbnw.chromatic.com/ |
|
헤더는 그냥 수정 안하고 올리면 될 듯~~ 어차피 이거 머지되면 제가 헤더 작업하는 곳에서 끌어다써야해서 나중에 헤더 머지되고 제가 또 이슈 파서 헤더 다 갈아끼울게요! |
| ...props | ||
| }: TextProps<T>) => { | ||
| const Component = as || 'p'; | ||
|
|
||
| return ( | ||
| <Component className={text({ color, size, weight })} {...props}> | ||
| <Component className={cx(text({ color, size, weight }), className)} {...props}> |
| <ul className={container}> | ||
| {products.map(({ id, categoryType, image, name, price, averageRating }) => ( | ||
| <li key={id}> | ||
| <Link to={`${PATH.PRODUCT_LIST}/${categoryType}/${id}`}> | ||
| <ProductOverviewItem image={image} name={name} price={price} rate={averageRating} /> | ||
| </Link> |
There was a problem hiding this comment.
요부분 제 레시피 PR에 있는 ProductOverviewList 컴포넌트랑 똑같네요! 제 PR 머지되면 그거 고대로 넣으면 될 듯!
| <ul className={container}> | ||
| {products.map(({ id, categoryType, image, name, price, averageRating }) => ( | ||
| {productToDisplay.map(({ id, categoryType, image, name, price, averageRating }) => ( | ||
| <li key={id}> | ||
| <Link to={`${PATH.PRODUCT_LIST}/${categoryType}/${id}`}> | ||
| <ProductOverviewItem image={image} name={name} price={price} rate={averageRating} /> | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ul> |
There was a problem hiding this comment.
이 컴포넌트의 이름을 보고 떠오른거는 전체 상품 검색한 리스트를 다 뽑아오는건가 생각이 드는데
실제로는 전체중에 2개, 더보기 버튼 이렇게 나오더라구요.
그래서 아예 이 컴포넌트 이름을 변경했으면 좋겠어요!
밑에도 적어놨는데 이거 제 레시피 PR에 있는 ProductOverviewList 재사용하면 좋을 거 같은데,
중간에 자르는게 들어가있는게 걸리네요...
There was a problem hiding this comment.
그냥 products에 productsToDisplay 넘겨주는거 어때여?! 컴포넌트 이름은 변경할게요!
| <ProductOverviewItem image={image} name={name} price={price} rate={averageRating} /> | ||
| </Link> | ||
| <div style={{ height: '20px' }} /> | ||
| <hr style={{ border: '0.5px solid #e6e6e6' }} /> |
There was a problem hiding this comment.
줄이 있냐 없냐가 조금 다르긴한데, 이거는 조건써서 만들거나 하면 될 듯?
아니면 아예 상품 검색 리스트 컴포넌트를 따로 만드는 방법도 있고!
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-tsazqtybwa.chromatic.com/ |
그리고 지금 검색에서 꿀조합 관련도 디자인이 변경된 것 같은데 새로운 이슈파서 진행하겠습니다~! |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-mwrirxsxzx.chromatic.com/ |
| {isSearchPage && ( | ||
| <> | ||
| <div style={{ height: '20px' }} /> | ||
| <hr style={{ border: '0.5px solid #e6e6e6' }} /> | ||
| </> | ||
| )} |
| <ul className={container}> | ||
| {products.map((product) => ( | ||
| <li key={product.id}> | ||
| <Link to={`${PATH.PRODUCT_LIST}/${product.categoryType}/${product.id}`}> |
There was a problem hiding this comment.
타미 이거 혹시 상품 상세로 넘어가는건가요?
만약 맞다면 ${product.categoryType} 이부분을 detail로 수정해야함니다~
There was a problem hiding this comment.
아 맞다!!!! 이거 고친다해놓고 깜빡했네요
|
@hae-on @Leejin-Yang 마지막 검토 부탁드립니당. |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-ziupfkznhj.chromatic.com/ |
| queries: `?query=${query}&lastProductId=${pageParam}`, | ||
| }); | ||
| const data: ProductSearchResultResponse = await response.json(); | ||
|
|
||
| return data; | ||
| }; | ||
|
|
||
| const useInfiniteProductSearchResultsQuery = (query: string) => { | ||
| const useInfiniteProductSearchResultsQuery = (query: string, isTagSearch = false) => { |
There was a problem hiding this comment.
true, false는 좀 추상적이여서 endpoint 자체를 인자로 받는건 어떤가요?
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-xcdovqgqdt.chromatic.com/ |
Issue
✨ 구현한 기능
일반 검색
태그 검색
검색 더보기 페이지
📢 논의하고 싶은 내용
🎸 기타
⏰ 일정