feat: 꿀조합 상세 페이지 디자인 마이그레이션 #71

xodms0309 · 2024-04-01T21:52:08Z

Issue

close 꿀조합 상세페이지 구현 #59

✨ 구현한 기능

꿀조합 상세페이지 마이그레이션

(사용한 상품 3개 초과일 때)

📢 논의하고 싶은 내용

백엔드한테 사용한 상품에 상품 이미지, 상품 별점 추가해야한다고 전달해야함!

🎸 기타

⏰ 일정

추정 시간 : 2
걸린 시간 : 3시간

github-actions · 2024-04-01T21:57:53Z

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

hae-on

타미 수고했슴니다~~
궁금한게 css 파일에 font size는 그냥 rem 썼던데
따로 글로벌스타일 안 쓴 이유가 있나용???

hae-on · 2024-04-03T08:18:25Z

src/components/Common/SectionTitle/SectionTitle.tsx

우리 이 Title 컴포넌트 통일 해야할 거 같아요.
지금 스토리북에 너무 비슷한게 많네요!
SectionTitle
SectionHeader
PageHeader
NavigableSectionTitle
대충 비슷한 거 찾은 것만 이정도인데, 여기서 더 공통적으로 쓸 수 있는 헤더는 좀 합쳐야할 듯???
이번주 회의 피그마에 topBar라고 디자이너분들이 모아두셨더라구여??

그렇네여 안그래도 이거 한 번 정리 들어가야 할 것 같다고 생각했어요🤔 일단 이번 pr은 냅두고 작업하시면 나중에 합치는걸로 해요

요거 지금 제가 작업중임다 일단 머지하구 나중에 제가 갈아끼울게용~~

hae-on · 2024-04-03T08:20:22Z

src/components/Recipe/CommentForm/CommentForm.tsx

-        <CommentTextarea
-          placeholder="댓글을 입력하세요. (200자)"
+    <div className={container}>
+      <img src={CommentImage} width={29} height={29} />


alt 추가해주세용~~

hae-on · 2024-04-03T08:21:28Z

src/components/Recipe/CommentForm/CommentForm.tsx

-        <CommentTextarea
-          placeholder="댓글을 입력하세요. (200자)"
+    <div className={container}>
+      <img src={CommentImage} width={29} height={29} />


요거는 사용자 프사있을 때는 프사 보이는게 아닌가요?!?!

아.. 이거 사용자 프사였어요? ㅋㅋㅋㅋㅋㅋㅋ 그냥 아이콘인줄 ㅠ

(사실 나도 모름 ㅎ 근데 아마 프사 같음.... 아마....😇)

프사가 맞아보이네요

hae-on · 2024-04-03T08:25:42Z

src/components/Recipe/CommentItem/commentItem.css.ts

+});
+
+export const commentItem = styleVariants({
+  nickname: [baseText, { fontWeight: 600, whiteSpace: 'nowrap' }],


요 부분 fontWeight는 vars에서 가져와서 쓸 수 있나요???

넹 됩니다! 수정할게여

hae-on · 2024-04-03T08:28:27Z

src/pages/RecipeDetailPage/RecipeDetailPage.tsx

+          <div className={boxIconWrapper}>
+            <div className={boxIcon}>
+              <SvgIcon variant="box" stroke="#ffffff" width={12} height={12} />
+            </div>


요 부분은 제 PR 머지되면 가져다쓰면 될 듯~~!

Leejin-Yang

수고했어요 타미 끝이 보이네요
몇개 코멘트 달았는데 확인해주세요.!

Leejin-Yang · 2024-04-06T10:17:58Z

src/components/Recipe/CommentForm/CommentForm.tsx

-        <CommentTextarea
-          placeholder="댓글을 입력하세요. (200자)"
+    <div className={container}>
+      <img src={CommentImage} width={29} height={29} />


프사가 맞아보이네요

Leejin-Yang · 2024-04-06T10:25:01Z

src/pages/RecipeDetailPage/RecipeDetailPage.tsx

+            <li key={image}>
+              <img className={recipeImage} src={image} alt={`${title} 꿀조합 사진 ${index}`} width={335} height={290} />
+            </li>


꿀조합 이미지 화면 폭에 맞춰야해서 유동적으로 크기 변하게 하는건 어떤가요?

2024-04-07.3.03.25.mov

이렇게 변하는데 이거 말씀하시는건가용?

Leejin-Yang · 2024-04-06T10:26:44Z

src/pages/RecipeDetailPage/RecipeDetailPage.tsx

+          <ul className={recipeUsedProductsImageList}>
+            {displaySlice(false, products, 3).map(({ id, name }) => (
+              <li key={id}>
+                <img src={author.profileImage} alt={name} width={48} height={48} />


백엔드에서 오면 상품 사진으로 바뀌는거죠?
mock 데이터 만들고 미리 해도 괜찮아보이네요

엥 이거 수정해서 올린건데??? 뭔ㄱㅏ 예전 히스토리를 보는듯한..?

Leejin-Yang · 2024-04-06T10:27:39Z

src/pages/RecipeDetailPage/recipeDetailPage.css.ts

+export const recipeImage = style({
+  width: '100%',
+  height: 'auto',
+  borderRadius: 6,
+  objectFit: 'cover',
+});


radius는 없어도 되겠네요

Leejin-Yang · 2024-04-06T10:27:52Z

src/styles/reset.css.ts

@@ -6,6 +6,7 @@ globalStyle('#root', {
  height: '100vh',
  maxWidth: 400,
  margin: '0 auto',
+  lineHeight: 1.4,


github-actions · 2024-04-07T13:06:38Z

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

github-actions · 2024-04-07T13:09:10Z

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

hae-on

타미 리뷰 남겨뒀습니당~

근데 나 궁금한 점

백엔드한테 사용한 상품에 상품 이미지, 상품 별점 추가해야한다고 전달해야함!

백엔드는 사용한 상품에 대한 정보가 따로 있는건가??
아니면 그냥 Product 끌고 오는건가..?
그러면 저 내용은 Product에 추가되는건가???

hae-on · 2024-04-07T16:24:39Z

.storybook/preview-body.html

@@ -310,6 +319,19 @@
        d="M11.306 2.916c1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.777-3.395 6.855-8.538 11.519l-.012.011a2.161 2.161 0 0 1-2.9.01l-.04-.036c-5.128-4.66-8.51-7.733-8.51-11.504 0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09z"
      />
    </symbol>
+    <symbol id="box" fill="none" viewBox="0 0 13 12">


얘가 지금 저랑 겹치는 아이콘인데, 저는 disk라는 이름으로 해놨거든요?
만약 제 레시피 PR이 먼저 머지되면, 타미가 땡긴후에 지우면 되고
타미 PR이 먼저 머지되면, 제가 땡긴 후에 컴포넌트도 교체할게요!

오케............

hae-on · 2024-04-07T16:26:12Z

src/components/Common/Text/Text.tsx

  ...props
 }: TextProps<T>) => {
  const Component = as || 'p';

  return (
-    <Component className={text({ color, size, weight })} {...props}>
+    <Component className={cx(text({ color, size, weight }), className)} {...props}>


웅? 이거 밑에 PR에서도 본 거 같은데?
여기서도 사용해야해서 중복으로 넣은 거 맞죠?

넹넹 마자여 밑에 PR이 머지 안돼서 여기도 바꿔놨어요

hae-on · 2024-04-07T16:28:39Z

src/components/Recipe/CommentForm/CommentForm.tsx

+    <div className={container}>
+      <img src={member?.profileImage} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} />
+      <form className={commentForm} onSubmit={handleSubmitComment}>
+        <textarea


여기도 textarea면 우리 v.1 디자인처럼 칸 수 넘어가면 뚱뚱해지나요?

hae-on · 2024-04-07T16:31:19Z

src/components/Recipe/CommentForm/CommentForm.tsx

-          placeholder="댓글을 입력하세요. (200자)"
+    <div className={container}>
+      <img src={member?.profileImage} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} />
+      <form className={commentForm} onSubmit={handleSubmitComment}>


이거 스토리북에서 오른쪽에 하얀 거 있길래 땡겼는데...

요래 되네요...?

이거 스토리북에서만 이런건가요...?

인스타 느낌으로 가야할거 같은데요.? 줄따라 늘어나다가 특정 높이에서 끊기는 느낌으로

이거 못땡기게 하는 방법 있으려나..? 찾아볼게요 높이 고정하는거

css resize 속성 있슴다

hae-on · 2024-04-07T16:31:46Z

src/components/Recipe/CommentItem/CommentItem.tsx

 import type { Comment } from '@/types/recipe';
-import { getFormattedDate } from '@/utils/date';

 interface CommentItemProps {
  recipeComment: Comment;
 }

 const CommentItem = ({ recipeComment }: CommentItemProps) => {


요친구는 스토리북 없나요???

ㅋㅋㅋㅋㅋ이거 전에 급하게 한거라서 없는듯 추가할게요

hae-on · 2024-04-07T16:33:28Z

src/components/Recipe/CommentList/CommentList.tsx

요 친구도 스토리북!

hae-on · 2024-04-07T16:35:44Z

src/pages/RecipeDetailPage/RecipeDetailPage.tsx

+              <SvgIcon variant="box" stroke="#ffffff" width={12} height={12} />
+            </div>
+            <Text size="caption3" weight="medium" color="info">
+              어떤 상품을 사용했나요?


이거 문구가 최신 버전에서 달라진 듯 합니다~

hae-on · 2024-04-07T16:36:49Z

src/pages/RecipeDetailPage/RecipeDetailPage.tsx

+          </div>
+          <ul className={recipeUsedProductsImageList} onClick={handleOpenBottomSheet}>
+            {displaySlice(true, products, 3).map(({ id, name, image }, idx) => (
+              <li key={id} className={productImageItem}>


이거 뭔가 누르면 상품 상세로 넘어가게 될 거 같은데...느낌이...
일단 피그마에 댓글 남겨놨습니다!

이거 디자이너분이 사용한 상품 바텀시트 뜨고 누르면 이동한다고 합니다~

지금 이 문제로 레시피 PR이 막혀있는 상태인데
레시피 페이지 PR보면 끝쪽에 제가 황펭한테 남긴 질문 참고하시죠.

간략하게 설명하자면 지금 상품 상세는 food/2 나 store/3 이런식으로 가잖아요?
근데 레시피에서 저 상품이 food인지 store인지 알 수가 없단말이에여

그래서 저는 Product에 categoryType 추가하는 방식으로 했는데
황펭이 상품 상세 url을 수정해보자는 의견을 남겼습니당!
좋은 생각이 있나요...?

이거 우리 한 번 시간 내서 논의해보는거 어때요? 지금 계속 텍스트로 대화하니까 이해하기 어렵네요ㅠ 지금 이 문제가 세 명 다 해결해야하는 것 같아서..!
아 그리고 이 컴포넌트 해온도 작업한거 맞죠??!??

이 컴포넌트가 그 사용한 상품 말하는 거 맞죠? 그거면 제가 작업했음!
시간 되는 날 말씀해주시져
일단은 황펭의 의견대로 수정했는데 괴상한 에러가 나서 잠시 스탑 했습니다.
66번 맨 마지막 댓글 참고 부탁...

Leejin-Yang

구조적으로는 문제 없어보여요
해온이 남긴 코멘트 확인해주세요 타미.!

Leejin-Yang · 2024-04-07T17:17:27Z

src/components/Recipe/CommentForm/CommentForm.tsx

-          placeholder="댓글을 입력하세요. (200자)"
+    <div className={container}>
+      <img src={member?.profileImage} width={29} height={29} alt={`${member?.nickname}의 프로필 사진`} />
+      <form className={commentForm} onSubmit={handleSubmitComment}>


인스타 느낌으로 가야할거 같은데요.? 줄따라 늘어나다가 특정 높이에서 끊기는 느낌으로

hae-on · 2024-04-08T13:02:29Z

src/types/recipe.ts

요기 레시피 PR에 있는 type보면 알겠지만, 엄청 많이 바꼈어요.
오늘 추가한 거 알려준다면 favoriteCount가 recipe type에서 빠졌어요.
그래서 recipeDetail type에서 favoriteCount을 추가하면 될 듯 합니다~

hae-on · 2024-04-09T13:53:07Z

src/mocks/data/recipeDetail.json

      "name": "불닭",
-      "price": 3000
+      "price": 3000,
+      "rate": 4.5


타미 요 부분 averageRating로 수정 부탁해요!
제가 따로 이슈 팠는데, 기존 파일에는 이게 없어서 제가 고칠 수가 없네용~

github-actions · 2024-04-13T10:15:19Z

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

github-actions · 2024-04-13T10:26:53Z

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

xodms0309 · 2024-04-13T10:27:16Z

@hae-on @Leejin-Yang

CommentItem, CommentList 스토리북 추가
댓글 Textarea 스타일 수정

해온이 만든 ProductPreviewList 컴포넌트로 교체
json key값 rate -> averageRating으로 변경

등등.. 확인 부탁드립니다

hae-on · 2024-04-14T05:46:14Z

타미 확인 완료했습니다!
수고했어요~~~

xodms0309 added 18 commits March 21, 2024 03:40

feat: 박스 svg icon 추가

6ec7c71

style: PageHeader import문 추가

9aaa7cc

feat: RecipeFavoriteButton 컴포넌트 디자인 수정

c33a49f

feat: 꿀조합 상세 페이지 디자인 수정

c9359d4

feat: 댓글 리스트 스타일 마이그레이션

ff2ac0d

feat: 댓글작성폼 스타일 마이그레이션

1fc7105

fix: className 수정

73207e0

Merge remote-tracking branch 'origin/feat/v2' into feat/issue-59

fdd166b

feat: 꿀조합 상세 페이지 title 스타일 수정

f5a7463

feat: line height global style로 적용

9b5c016

Merge remote-tracking branch 'origin/feat/v2' into feat/issue-59

826c9b9

feat: plane 아이콘 교체

24faade

style: 린트 적용

c317c40

feat: 댓글창 스타일 마이그레이션

9e9cd24

feat: section title 컴포넌트 디자인 마이그레이션

667b0e5

feat: 꿀조합 상세페이지 Text 컴포넌트와 SectionTitle 컴포넌트로 교체

d5229c1

feat: RecipeDetail 타입 변경

b8274db

feat: 사용한 상품 바텀시트 적용

c716be5

xodms0309 added the 🔧 Refactor label Apr 1, 2024

xodms0309 requested review from Leejin-Yang and hae-on April 1, 2024 21:52

xodms0309 self-assigned this Apr 1, 2024

hae-on reviewed Apr 3, 2024

View reviewed changes

Leejin-Yang reviewed Apr 6, 2024

View reviewed changes

xodms0309 added 2 commits April 7, 2024 14:53

fix: 사진을 사용자의 프로필 사진으로 교체

5c3dcfd

refactor: CommentItem의 텍스트를 Text 컴포넌트로 교체

5839161

feat: borderRadius 삭제

ce6c61c

xodms0309 requested a review from Leejin-Yang April 7, 2024 13:07

xodms0309 requested a review from hae-on April 7, 2024 13:07

hae-on reviewed Apr 7, 2024

View reviewed changes

Leejin-Yang approved these changes Apr 7, 2024

View reviewed changes

hae-on approved these changes Apr 8, 2024

View reviewed changes

hae-on reviewed Apr 9, 2024

View reviewed changes

xodms0309 added 8 commits April 9, 2024 20:54

Merge remote-tracking branch 'origin/feat/v2' into feat/issue-59

adcd805

feat: svg icon 하나로 교체

a272d01

feat: favoriteButton 스타일 수정

09f99d9

style: 린트 적용

ad18363

Merge remote-tracking branch 'origin/feat/v2' into feat/issue-59

00cc55a

feat: 댓글 form 스타일 수정

8d5990f

feat: 꿀조합 상세 디자인 변경 적용

feb7e1f

fix: rate->averageRating으로 이름 변경

c8a671a

xodms0309 added 2 commits April 13, 2024 12:19

refactor: ProductOverviewItem -> ProductOVerviewList 컴포넌트로 교체

5721558

feat: CommentList, CommentItem 스토리북 추가

321cdd2

xodms0309 merged commit a56add6 into feat/v2 Apr 14, 2024
2 of 3 checks passed

xodms0309 deleted the feat/issue-59 branch April 14, 2024 17:19

feat: 꿀조합 상세 페이지 디자인 마이그레이션 #71

feat: 꿀조합 상세 페이지 디자인 마이그레이션 #71

Conversation

xodms0309 commented Apr 1, 2024 • edited Loading

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

github-actions bot commented Apr 1, 2024

hae-on left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Leejin-Yang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xodms0309 Apr 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 7, 2024

github-actions bot commented Apr 7, 2024

hae-on left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xodms0309 Apr 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Leejin-Yang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 13, 2024

github-actions bot commented Apr 13, 2024

xodms0309 commented Apr 13, 2024

hae-on commented Apr 14, 2024

xodms0309 commented Apr 1, 2024 •

edited

Loading

xodms0309 Apr 7, 2024 •

edited

Loading

hae-on left a comment •

edited

Loading

xodms0309 Apr 7, 2024 •

edited

Loading