Skip to content
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

Merged
merged 32 commits into from
Apr 8, 2024
Merged

feat: 꿀조합 페이지 구현 #66

merged 32 commits into from
Apr 8, 2024

Conversation

hae-on
Copy link
Contributor

@hae-on hae-on commented Mar 27, 2024

Issue

✨ 구현한 기능

  • 꿀조합 페이지를 구현하였습니다.
스크린샷 2024-03-27 오후 11 12 13 스크린샷 2024-03-27 오후 11 12 19

ProductOverviewList를 구현하였습니다.

스크린샷 2024-03-27 오후 10 56 47

여기 바텀시트 내부에 들어있는 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이 길어졌는데 이해 안가는 부분 있으면 말해주세요~~

⏰ 일정

  • 추정 시간 : 3시간
  • 걸린 시간 : 9시간

Copy link

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-zzgkevexoq.chromatic.com/

Comment on lines +4 to +5
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`;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Leejin-Yang 왕펑 이미지 이름 이거에요!

export interface MemberRecipe extends BaseRecipe {
products: RecipeProduct[];
}
export type MemberRecipe = Recipe
Copy link
Contributor Author

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}`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분이 원래 list에 있었는데 옮겨온 부분입니다! 여기에 ga event 걸까요?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넹 조아요! 근데 얘는 어디로 가는거에요./??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 아마 레시피 상세로 이동하는 듯 합니다! 원래는 recipe/1 요런식으로 이동합니당~

@xodms0309
Copy link
Member

xodms0309 commented Mar 27, 2024

왜 로컬에서는 꿀조합 데이터가 5개만 보이죠??? mock json에 10개를 넣어도 5개만 보입니다...

오잉 꿀조합 리스트에서 그런거에요? 쭉쭉 나와야 정상인데..!

사진을 cover로 해서 빈 사진일 때 이미지가 확대 됩니다. 그래서 살짝 이미지가 지글지글?해요. 이거 어떻게 할까요?

피그마에서 4x로 import 해도 그런가요??

List에 grid 같은 경우에는 지금 여러 컴포넌트에서 반복되고 있는데요. 이거 따로 빼면 몇개는 css 작성 안해도 될 거 같거든요? 이렇게 공통적으로 적용되는 css는 어디 파일에 넣어야할까요??

grid, flex 같이 반복되는 스타일들을 선언하는 파일 하나 만들면 좋을 것 같아요 styles 아래에 만들면 어떨까요?
아니면 Common아래에 Flex, Grid 컴포넌트를 만들어도 좋을 것 같아요

원래는 recipe에서 사용한 상품들 type을 Product에서 몇개 뽑아서 사용했거든요? (type RecipeProductWithPrice = Pick<Product, 'id' | 'name' | 'price'> 이런식으로) 근데 이번에는 reviewCount 빼고는 다 사용하더라구요. 그래서 reviewCount를 옵셔널로 바꾸고 그냥 Product type 그대로 가져왔는데 어떻게 할까요? Product 내부 type이 7개인데 6개를 사용해요... 그냥 옵셔널로 둘까요 아니면 Pick 6개 할까요?

Omit 쓰는거 어때요?? 제가 이해한게 맞다면 type 어쩌구 = Omit<Product, 'reviewCount'> 이렇게 될 것 같아요

Copy link
Member

@xodms0309 xodms0309 left a 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} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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} />

이거 혹시 이런식으로 못쓰나요?!

Copy link
Contributor Author

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}`}>
Copy link
Member

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}
Copy link
Member

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} />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기에 image 조건은 왜 들어가요?!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오잉 원래 있던거 고대로 긁었는데 왜 저게 추가되어 있지?? 원래 코드에는 image 조건 없는데....???
지우겠습니다 머지 진짜,,,???

Copy link
Contributor Author

@hae-on hae-on Apr 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크린샷 2024-04-01 오후 7 50 46

이거 image 조건이 필요한건가봐요! 얘 지우고 오늘 로컬 켜봤는데 위 사진처럼 뜨네요...?
image 조건 다시 적으니까 제대로 작동합니다!
제 생각에는 원래는 이 스켈레톤이 image !== null 일 때 보이도록 조건이 있었는데,
이게 지워지면서 이 내부로 이동한 거 같아요. 아마 코파일럿이 써준 듯...???

image가 없어서 default 사진으로 들어갈 때는 스켈레톤이 안 뜰 것 같은데 어떻게 할까요??
로직 다시 수정할까요?!?!

Copy link
Member

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',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 #D9D9D9에요!

Copy link
Contributor Author

@hae-on hae-on Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 그 최신 시안?말고 중간 부분 있는데 거기껄루 봐야해용

스크린샷 2024-03-28 오후 2 59 10

왼쪽이 바뀐 색상, 오른쪽이 이전 색상인데 아마 D9D9D9로 했다가 투명도 50하니까 너무 안보여서 바꾸신 듯 ~!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하!

@hae-on
Copy link
Contributor Author

hae-on commented Mar 28, 2024

오잉 꿀조합 리스트에서 그런거에요? 쭉쭉 나와야 정상인데..!

예에... 혹시 몰라서 feat/v2로 브랜치 checkout하고 원래 것도 봤거든요??

스크린샷 2024-03-28 오후 2 47 46

원래도 5개만 나왔나봐여 왜죠......뭐죠......ㅇㅅㅇ....???

피그마에서 4x로 import 해도 그런가요??

오옹 4x로 해야하는구나 ㅎ,,, 지글지글한 건 없어졌어요!

이미지 약간 확대되는거 어떤지는 회의 때 디자이너분들께 물어볼게요~~

grid, flex 같이 반복되는 스타일들을 선언하는 파일 하나 만들면 좋을 것 같아요 styles 아래에 만들면 어떨까요?
아니면 Common아래에 Flex, Grid 컴포넌트를 만들어도 좋을 것 같아요

둘 다 좋은데여?? @Leejin-Yang 씨 어떤가요???

Omit 쓰는거 어때요?? 제가 이해한게 맞다면 type 어쩌구 = Omit<Product, 'reviewCount'> 이렇게 될 것 같아요

아아 Omit이 있었네??? 굿 아이디어~~~~~👍

Copy link

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-jbdoiyalry.chromatic.com/

Copy link
Contributor

@Leejin-Yang Leejin-Yang left a 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 && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 조건은 마이페이지 땜에 있는거 같은데 지금도 쓰고 있나요?

Copy link
Contributor Author

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()}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋아요 버튼 땜에 달아둔거가 이건가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

예 맞슴다~~

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 z-index로 안될까요??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네엥...방금 실험해봤는데 z-index는 먹지 않습니다...!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

relative, absolute 되어 있죠..?

Comment on lines +38 to +40
useEffect(() => {
setLocalStorage(PREVIOUS_PATH_LOCAL_STORAGE_KEY, pathname);
}, []);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거 무엇이였죠..? 기억이 안 남

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저두 모르겠어요 ㅎ,,, 폰으로 보고 있어서 모르겠습니다... 뭔 경로를 로컬스토리지에 저장하고 있죠?!?!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이거 로그인 갔다올때 기억해두려고 한거 같네요? 상품 상세에도 있네요

Comment on lines +12 to +13
export const floatingButtonWrapper = style({
position: 'sticky',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 더 좋아보이네요

@hae-on
Copy link
Contributor Author

hae-on commented Mar 31, 2024

@Leejin-Yang 네 맞습니다! food랑 store! 저게 사용한 상품 누르면 뜨잖아여? 그거 눌렀을 때 그 상품 상세로 넘어갈 때 사용합니다~~

@Leejin-Yang
Copy link
Contributor

@Leejin-Yang 네 맞습니다! food랑 store! 저게 사용한 상품 누르면 뜨잖아여? 그거 눌렀을 때 그 상품 상세로 넘어갈 때 사용합니다~~

아 그럼 Product에 없는게 맞을걸요.? 그 친구들은 url params에서 가져오고 있슴다.!

@hae-on
Copy link
Contributor Author

hae-on commented Apr 1, 2024

@Leejin-Yang

아 그럼 Product에 없는게 맞을걸요.? 그 친구들은 url params에서 가져오고 있슴다.!

ProductListPage를 보니까

 const { category } = useParams();

요렇게 가지고 오던데 저도 요거 써서 하면 되는거죠????
이걸루 수정할게요!

생각해보니까 Product에 추가되는게 categoryType이 아니라 편의점 명 받아오는거였나요???

+) 아아 잠만 근데 얘는 레시피에 뜨는 dialog에 있는앤데 url param을 어캐 가져오나요...??? 얘는 이동하려면 Product에 categoryType 추가해야 하는거 아녀용???

@hae-on
Copy link
Contributor Author

hae-on commented Apr 2, 2024

@Leejin-Yang (스크롤 옆 공간 주목)

스크린샷 2024-04-02 오후 7 28 44

스크롤이 ref가 걸려있는 곳에 height랑 overflow를 설정해줘야지 움직인단 말이죠?
근데 sticky는 또 overflow가 있으면 작동을 안하잖아요

로컬에서 했을 때는 작동을 하긴 하더라구요?
근데 사진처럼 '랜덤하게' 스크롤 공간에 흰 여백이 생깁니다...
저 공간에 뭐가 있는게 아니에요 개발자 도구 켰을 때 저 공간에 마우스 자체가 안 올라감....

어떨 땐 나타났다 어떨 땐 안 나타났다그러는데 저게 로컬에서만 저러는건지 모르겠네요 ㅠ
어쩌죠? 그냥 sticky로 두고 배포했을 때 다시 확인해볼까요 아님 fixed로 고칠까요???

1243c9d9-b276-400f-9f6b-9df801e87999.mp4

@hae-on
Copy link
Contributor Author

hae-on commented Apr 4, 2024

+) 추가 구현 24.04.04

비회원일 때, 레시피 좋아요 버튼이 div에 빈 하트로 보이도록 수정하였습니다.

Copy link

github-actions bot commented Apr 4, 2024

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-yqiyrjwmri.chromatic.com/

@xodms0309
Copy link
Member

  • 편의점 이름 추가되는거 맞을거에요 (상품 상세)
  • 그 css 관련은... 진짜 잘 모르겠어가지고 황펭이 답해주면 좋을 것 같아요... 😇

Copy link
Contributor

@Leejin-Yang Leejin-Yang left a 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}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sticky 유지하고 여기에 높이를 주면 될까요? 코드로 봤을 때 감이 안 오네요..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그 움짤에 나오는 현상이 여기에 높이랑 overflow 줬을 때 일어나는 현상임다...뚀륵,,, 아아 얘는 스크롤의 상위가 아니니까 sticky가 작동했던거구나 근데 어쨌든 저런 이상한 오류가 나는데 저게 로컬 한정인건지 배포해도 저러는지는 모름 ㅠ

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나중에 머지되면 확인해볼게요

Comment on lines +56 to +59
<div className={floatingButtonWrapper}>
<ScrollButton targetRef={recipeRef} />
<WriteButton />
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 친구들은 main 하위라 위 섹션에 높이 적용하면 될거 같은데 아닌가보네요..?

@hae-on
Copy link
Contributor Author

hae-on commented Apr 6, 2024

상품 상세 url을 어떻게 바꿔서 어떻게 저 값을 들고오죠???? 일단 백엔드 물어봤는데 product에 categoryType 추가하는건 괜찮다고 하긴 함...

@Leejin-Yang
Copy link
Contributor

@hae-on

지금 상품 상세로 넘어가는 부분이 상품 목록이랑 꿀조합에서 바텀 시트 인가요?
/products/:productId 로 하면 categoryType이 필요가 없게 되어서 어디서든 아이디만 있으면 접근 가능해 보입니다. 어떤 후폭풍이 있을지는 모르겠슴다

@hae-on
Copy link
Contributor Author

hae-on commented Apr 8, 2024

@Leejin-Yang

해당 방법의 문제점을 찾았슴다...
지금 products/food나 products/store로 이동하면

스크린샷 2024-04-08 오후 9 07 46

요 페이지를 볼 수 있습니다.

근데 이제 상세 페이지를 products/1 이런식으로 바꾸게 되면
products/food 페이지에 접속을 하면, 라우터가 food를 숫자로 인식하고 상세 페이지 관련 로직이 작동합니다.
따라서 products/NaN 이렇게 에러가 남...

이거를 라우터에서 products/:productId(\d+) 이런식으로 적으면 숫자인 값만 여기에 해당하게 할 수 있다고 함
하지만, 위 문제는 해결되지만 products/1로 이동시 존재하지 않는 페이지라고 에러가 뜸...

products/:categoryId 라우터랑 products/:productId 라우터의 순서를 바꿔보라는 방법도 시도했으나 똑같음,,,
내 생각에는 products/detail/1 이런식으로 앞에 뭔가 더 붙여주면 제대로 작동할 것 같기도 함,,, 어쩌죠?!?!

Copy link

github-actions bot commented Apr 8, 2024

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-alhcjajyse.chromatic.com/

@hae-on hae-on merged commit 6c8ae2b into feat/v2 Apr 8, 2024
2 of 3 checks passed
@hae-on hae-on deleted the feat/issue-38 branch April 8, 2024 13:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

꿀조합 페이지 구현
3 participants