feat: 상품 상세 페이지 개편 #75
Conversation
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-kvjozjhmlb.chromatic.com/ |
There was a problem hiding this comment.
수고했습니다 황펭
레시피랑 다 완성하고 다시 요청 주세요!
빠르게 훑어봤을 땐 별 문제 없어보입니다~
레이아웃에서 상하단 바가 없는 minimal layout을 없애고 각 페이지에서 스타일을 주어야 하는걸로 보이네요. 지금처럼 하면 메인 안에 헤더가 있는 구조로 되어서 수정이 필요해 보입니다. 우선 고치지 않고 상세 페이지에서 main을 넣어서 했습니다. 의견 주시면 수정할게요.!
궁금한게 main 내부에 헤더가 들어가면 안 되는건가요???
그러면 다른 상하단 바가 없는 페이지는 다 layout 사용 없이 개별로 줘야하는 것...??
인디케이터 영역을 따로 만들어서 레이아웃에 넣으면 좋아보여요. 이 부분도 의견 주세요.
인디케이터 영역이 어딜 말하는걸까요?
| onClick={debouncedToggleFavorite} | ||
| aria-label={`좋아요 ${currentFavoriteCount}개`} | ||
| > | ||
| <SvgIcon variant={isFavorite ? 'favoriteFilled' : 'favorite'} fill={isFavorite ? 'red' : theme.colors.gray4} /> | ||
| <Text as="span" weight="bold"> | ||
| <SvgIcon variant="favorite2" width={16} fill={isFavorite ? vars.colors.error : vars.colors.icon.light} /> |
There was a problem hiding this comment.
이거 error말고 색상 추가하는거 어때요?
순간 error라길래 혼동이 왔슴니다...
이겁니다.!
header, main, footer 가 같은 라인으로 가려고요. 펀잇 기본 헤더가 없는 애들은 각자의 헤더가 있고, 또 하단에 고정되는(등록 버튼 등)도 각자 따로 있으니 레이아웃 잡지 않고 하는건 어떤가요? |
| @@ -23,7 +23,7 @@ const SortButton = ({ option, onClick }: SortButtonProps) => { | |||
|
|
|||
| export default SortButton; | |||
|
|
|||
| const SortButtonContainer = styled(Button)` | |||
| const SortButtonContainer = styled.button` | |||
There was a problem hiding this comment.
해온의 꿀조합에서 가져오려고 합니다.!
| export const categoryName = style({ | ||
| fontSize: '1.4rem', | ||
| fontWeight: 500, | ||
| color: '#808080', | ||
| lineHeight: 1.4, | ||
| }); | ||
|
|
||
| export const productName = style({ | ||
| fontSize: '1.6rem', | ||
| fontWeight: 600, | ||
| lineHeight: 1.4, | ||
| }); | ||
|
|
||
| export const productPrice = style({ | ||
| fontSize: '2.2rem', | ||
| fontWeight: 600, | ||
| lineHeight: 1.4, | ||
| }); |
There was a problem hiding this comment.
Text 컴포넌트 사용하면 될 것 같아요! 파일 색상들도 vars에서 가져와주세요~!~!
There was a problem hiding this comment.
아 color, size, weight 다 있군요 화긴
| export const countBase = style({ | ||
| fontSize: '1.4rem', | ||
| fontWeight: 500, | ||
| }); | ||
|
|
||
| export const count = styleVariants({ | ||
| favorite: [countBase, { color: vars.colors.gray4 }], | ||
| default: [countBase, { color: vars.colors.gray3 }], | ||
| }); |
| export const memberName = style({ | ||
| fontWeight: 600, | ||
| }); |
|
레이아웃은 현재 pr 올라온 페이지 머지되면 제가 한번에 할게요 |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-eivzkdblyy.chromatic.com/ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-lipqwaensu.chromatic.com/ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-widdfjfkec.chromatic.com/ |
|
상품 상세에 꿀조합 추가했습니다. 현재 Text 컴포넌트는 classname이 적용되지 않는데, 타미가 작업한거에 수정한게 있더라고요? 그거랑 합쳐지면 스타일 정상 적용될 듯 합니다. [문제 및 질문]
|
그러면 detail/id 일때만 조건문 세워서 바꾸면 되려나용??
넵넵 상품이 포함된 꿀조합 검색 페이지가 유일하게 모아둔 페이지 같네여? |
링크 컴포넌트에서 상대경로 따라가는거 말고 진짜 뒤로가기가 있는지 봐야겠어요
넵 피그마에서 검색과 함께 가기로 했슴다 |
| <ul className={tagList}> | ||
| {tags.map(({ id, name }) => ( | ||
| <li key={id} className={tag}> | ||
| <span>{name}</span> |
There was a problem hiding this comment.
여기도 Text 컴포넌트로 변경 가능할 것 같아요
근데 Badge 컴포넌트를 활용해볼 수 없으려나
There was a problem hiding this comment.
radius가 좀 다르더라고요..
| <ul className={tagList}> | ||
| {tags.map(({ id, name }) => ( | ||
| <li key={id} className={tag}> | ||
| <Text as="span" color="info" size="caption2" weight="medium"> | ||
| {name} | ||
| </Text> | ||
| </li> | ||
| ))} | ||
| </ul> |
| export const productPrice = style({ | ||
| fontSize: '2.2rem', | ||
| }); |
There was a problem hiding this comment.
피그마 확인해보니까 display1이라는 이름으로 사이즈 추가됐네요!
| padding: '0 10px', | ||
| textAlign: 'center', | ||
| borderRadius: 4, | ||
| backgroundColor: '#f2f2f2', |
| ))} | ||
| {recipeToDisplay.length < recipes.length && ( | ||
| <li className={moreItem}> | ||
| {/*링크는 상품이 포함된 꿀조합 검색결과로 가는 것이 맞을듯?*/} |
|
리뷰 반영했습니다~ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-hyzreixjme.chromatic.com/ |
|
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-lnjyjkssgm.chromatic.com/ |
Issue
✨ 구현한 기능
2024-04-06.14.31.36.mov
📢 논의하고 싶은 내용
우선 현재 작업한 내용해서 pr 올립니다.
🎸 기타
⏰ 일정