-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: 꿀조합 페이지 구현 #66
feat: 꿀조합 페이지 구현 #66
Conversation
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-zzgkevexoq.chromatic.com/ |
export const RECIPE_CARD_DEFAULT_IMAGE_URL = `${IMAGE_BASE_URL}recipe-card-default.png`; | ||
export const RECIPE_RANK_DEFAULT_IMAGE_URL = `${IMAGE_BASE_URL}recipe-rank-default.png`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Leejin-Yang 왕펑 이미지 이름 이거에요!
src/types/recipe.ts
Outdated
export interface MemberRecipe extends BaseRecipe { | ||
products: RecipeProduct[]; | ||
} | ||
export type MemberRecipe = Recipe |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@xodms0309
얘는 왜 주석 안 딸려왔는지 모르겠는데 잠시 빈값으로 나뒀습니다. 이 부분 아마 타미가 수정할 거 같은데 그때 필요한 type 정의해서 사용하시면 됩니다~
width={60} | ||
height={60} | ||
css={{ position: `absolute`, bottom: `-20px`, right: `16px` }} | ||
<Link to={`${id}`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분이 원래 list에 있었는데 옮겨온 부분입니다! 여기에 ga event 걸까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넹 조아요! 근데 얘는 어디로 가는거에요./??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요거 아마 레시피 상세로 이동하는 듯 합니다! 원래는 recipe/1 요런식으로 이동합니당~
오잉 꿀조합 리스트에서 그런거에요? 쭉쭉 나와야 정상인데..!
피그마에서 4x로 import 해도 그런가요??
grid, flex 같이 반복되는 스타일들을 선언하는 파일 하나 만들면 좋을 것 같아요 styles 아래에 만들면 어떨까요?
Omit 쓰는거 어때요?? 제가 이해한게 맞다면 type 어쩌구 = Omit<Product, 'reviewCount'> 이렇게 될 것 같아요 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
와우 코드 보니까 진짜 변경점 많네요... 고생했어요 해옹~~~👍
<div className={imageWrapper}> | ||
{image && <img className={recipeImage} src={image} alt={title} />} | ||
<div className={buttonWrapper}> | ||
<img className={recipeImage} src={image !== null ? image : RECIPE_CARD_DEFAULT_IMAGE_URL} alt={title} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<img className={recipeImage} src={image !== null ? image : RECIPE_CARD_DEFAULT_IMAGE_URL} alt={title} /> | |
<img className={recipeImage} src={image ?? RECIPE_CARD_DEFAULT_IMAGE_URL} alt={title} /> |
이거 혹시 이런식으로 못쓰나요?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
완죠니 가능~~~
width={60} | ||
height={60} | ||
css={{ position: `absolute`, bottom: `-20px`, right: `16px` }} | ||
<Link to={`${id}`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넹 조아요! 근데 얘는 어디로 가는거에요./??
<div className={imageWrapper}> | ||
<img | ||
className={recipeImage} | ||
src={image !== null ? image : RECIPE_CARD_DEFAULT_IMAGE_URL} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기도?!
</Text> | ||
</FavoriteWrapper> | ||
</RecipeInfoWrapper> | ||
{isImageLoading && image && <Skeleton width={163} height={200} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기에 image 조건은 왜 들어가요?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오잉 원래 있던거 고대로 긁었는데 왜 저게 추가되어 있지?? 원래 코드에는 image 조건 없는데....???
지우겠습니다 머지 진짜,,,???
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아하?!??! default 사진 뜰 때는 스켈레톤 안보이게 합시다!
export const container = style({ | ||
width: 26, | ||
height: 26, | ||
background: '#000000', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이거 #D9D9D9에요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아하!
예에... 혹시 몰라서 feat/v2로 브랜치 checkout하고 원래 것도 봤거든요?? ![]() 원래도 5개만 나왔나봐여 왜죠......뭐죠......ㅇㅅㅇ....???
오옹 4x로 해야하는구나 ㅎ,,, 지글지글한 건 없어졌어요! 이미지 약간 확대되는거 어떤지는 회의 때 디자이너분들께 물어볼게요~~
둘 다 좋은데여?? @Leejin-Yang 씨 어떤가요???
아아 Omit이 있었네??? 굿 아이디어~~~~~👍 |
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-jbdoiyalry.chromatic.com/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
일단 늦어서 죄송합니다..
진짜 많이 바뀌었네요.! 수고했어요
Product의 categoryType이 Recipe 어디에서 필요한걸까요? food, store 이게 카테고리 타입이죠.?
나머지는 타미가 답변을 잘해줬네요 ㅎㅎ
코멘트 확인해주세요
height={60} | ||
css={{ position: `absolute`, bottom: `-20px`, right: `16px` }} | ||
<Link to={`${id}`}> | ||
{!isMemberPage && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 조건은 마이페이지 땜에 있는거 같은데 지금도 쓰고 있나요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아직 마이페이지 구현을 안해서 모르겠는데 아마 저 컴포넌트를 재사용하면 그대로 둬야할 듯 함니다! 마이페이지에서 약간 다른걸로 알고 있거든요!
{image && <img className={recipeImage} src={image} alt={title} />} | ||
<div className={buttonWrapper}> | ||
<img className={recipeImage} src={image ?? RECIPE_CARD_DEFAULT_IMAGE_URL} alt={title} /> | ||
<div className={buttonWrapper} onClick={(e) => e.preventDefault()}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
좋아요 버튼 땜에 달아둔거가 이건가요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
예 맞슴다~~
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
혹시 z-index로 안될까요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네엥...방금 실험해봤는데 z-index는 먹지 않습니다...!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
relative, absolute 되어 있죠..?
useEffect(() => { | ||
setLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY, pathname); | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이거 무엇이였죠..? 기억이 안 남
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저두 모르겠어요 ㅎ,,, 폰으로 보고 있어서 모르겠습니다... 뭔 경로를 로컬스토리지에 저장하고 있죠?!?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아 이거 로그인 갔다올때 기억해두려고 한거 같네요? 상품 상세에도 있네요
export const floatingButtonWrapper = style({ | ||
position: 'sticky', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 더 좋아보이네요
@Leejin-Yang 네 맞습니다! food랑 store! 저게 사용한 상품 누르면 뜨잖아여? 그거 눌렀을 때 그 상품 상세로 넘어갈 때 사용합니다~~ |
아 그럼 Product에 없는게 맞을걸요.? 그 친구들은 url params에서 가져오고 있슴다.! |
ProductListPage를 보니까 const { category } = useParams(); 요렇게 가지고 오던데 저도 요거 써서 하면 되는거죠???? 생각해보니까 Product에 추가되는게 categoryType이 아니라 편의점 명 받아오는거였나요??? +) 아아 잠만 근데 얘는 레시피에 뜨는 dialog에 있는앤데 url param을 어캐 가져오나요...??? 얘는 이동하려면 Product에 categoryType 추가해야 하는거 아녀용??? |
@Leejin-Yang (스크롤 옆 공간 주목) ![]() 스크롤이 ref가 걸려있는 곳에 height랑 overflow를 설정해줘야지 움직인단 말이죠? 로컬에서 했을 때는 작동을 하긴 하더라구요? 어떨 땐 나타났다 어떨 땐 안 나타났다그러는데 저게 로컬에서만 저러는건지 모르겠네요 ㅠ 1243c9d9-b276-400f-9f6b-9df801e87999.mp4 |
+) 추가 구현 24.04.04 비회원일 때, 레시피 좋아요 버튼이 div에 빈 하트로 보이도록 수정하였습니다. |
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-yqiyrjwmri.chromatic.com/ |
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아 상품 상세 url을 좀 수정해야할까요..
머리가 안 돌아가
<> | ||
<ErrorBoundary fallback={ErrorComponent} handleReset={reset}> | ||
<Suspense fallback={<Loading />}> | ||
<section className={container} ref={recipeRef}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sticky 유지하고 여기에 높이를 주면 될까요? 코드로 봤을 때 감이 안 오네요..
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
그 움짤에 나오는 현상이 여기에 높이랑 overflow 줬을 때 일어나는 현상임다...뚀륵,,, 아아 얘는 스크롤의 상위가 아니니까 sticky가 작동했던거구나 근데 어쨌든 저런 이상한 오류가 나는데 저게 로컬 한정인건지 배포해도 저러는지는 모름 ㅠ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
나중에 머지되면 확인해볼게요
<div className={floatingButtonWrapper}> | ||
<ScrollButton targetRef={recipeRef} /> | ||
<WriteButton /> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 친구들은 main 하위라 위 섹션에 높이 적용하면 될거 같은데 아닌가보네요..?
상품 상세 url을 어떻게 바꿔서 어떻게 저 값을 들고오죠???? 일단 백엔드 물어봤는데 product에 categoryType 추가하는건 괜찮다고 하긴 함... |
지금 상품 상세로 넘어가는 부분이 상품 목록이랑 꿀조합에서 바텀 시트 인가요? |
🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-alhcjajyse.chromatic.com/ |
Issue
✨ 구현한 기능
ProductOverviewList를 구현하였습니다.
여기 바텀시트 내부에 들어있는 List인데 (바텀시트 포함 아님) 검색 페이지에서 사용하는거 그대로 컴포넌트로 만들었다고 보시면 됩니다.
검색 페이지에서 사용하는 부분은 제가 갈아끼웠습니다! (ProductSearchResultList 파일 참고)
아 그리고 레시피 랭킹에도 grid 적용시켰습니다. 또, 사진 규격도 바꿨어요.
📢 논의하고 싶은 내용
왜 로컬에서는 꿀조합 데이터가 5개만 보이죠??? mock json에 10개를 넣어도 5개만 보입니다...
사진을 cover로 해서 빈 사진일 때 이미지가 확대 됩니다. 그래서 살짝 이미지가 지글지글?해요. 이거 어떻게 할까요?
List에 grid 같은 경우에는 지금 여러 컴포넌트에서 반복되고 있는데요. 이거 따로 빼면 몇개는 css 작성 안해도 될 거 같거든요? 이렇게 공통적으로 적용되는 css는 어디 파일에 넣어야할까요??
🎸 기타
저희 Product에 categoryType 추가 되는거 맞죠? recipe에서 써야해서 추가했는데 그냥 적으니까 product 사용하는 곳에서 다 터지더라구요. 그거 여기서 고치면 코드 많아져서 리뷰 달기 어려울까봐 일단 옵셔널로 해놨습니다. 추가적으로 PR 파서 고치는게 좋을 듯 합니다!
원래는 recipe에서 사용한 상품들 type을 Product에서 몇개 뽑아서 사용했거든요? (type RecipeProductWithPrice = Pick<Product, 'id' | 'name' | 'price'> 이런식으로) 근데 이번에는 reviewCount 빼고는 다 사용하더라구요. 그래서 reviewCount를 옵셔널로 바꾸고 그냥 Product type 그대로 가져왔는데 어떻게 할까요? Product 내부 type이 7개인데 6개를 사용해요... 그냥 옵셔널로 둘까요 아니면 Pick 6개 할까요?
레시피를 누르면 상세 페이지로 이동하는 것 때문에 시간을 엄청 쏟아부었는데요,,, 저희가 레시피 이미지 위에 좋아요 버튼이랑 사용한 상품 버튼이 있잖아요. 근데 레시피 list에 link 때문에 계속 버튼 눌러도 페이지 이동이 되더라구요. preventDefault 적용하면 되는건데, 이게 위치에 따라서 적용이 안되는 등의 문제가 많아서 최적의 위치를 찾느라 오래 걸렸습니다...ㅠ 레시피 랭킹 같은 경우는 별 문제 없는데 레시피의 경우에는 사용한 상품 바텀시트에도 저 링크가 먹어서 결국 링크 위치를 list에서 item으로 바꿨습니다. RecipeItem 컴포넌트를 참고해주세요.
스크롤 버튼이랑 꿀조합 작성 버튼 원래 따로 sticky 적용했는데 그게 화면에 붙이면 이상하게 붙더라구요? 이게 두개를 동시에 올리면 더 위에 있는 스크롤 버튼의 너비만큼 꿀조합 작성 버튼 위치가 왼쪽으로 밀려요. 그래서 그 속성 빼구 얘네 둘을 다 감싸고 있는 div에 sticky를 줬습니다.
현재 스크롤 버튼이 작동하지 않습니다. 이유는 몰라요,,, 그거까지 고치고 올리면 너무 늦어질 것 같아서 일단 코드 올려놓고 고치겠습니다.
이게 파일을 엄청 많이 왔다갔다거려서 분명 어딘가 이상하게 적은 부분이 있을거에요.
찾으시면 코멘트 달아주세요...
PR이 길어졌는데 이해 안가는 부분 있으면 말해주세요~~
⏰ 일정