refactor: 기초 recipe item 컴포넌트 구현 #83

hae-on · 2024-04-12T16:06:58Z

Issue

close 레시피 컴포넌트 개선 #81

✨ 구현한 기능

전체 레시피 아이템 컴포넌트를 잘게 나누었습니다.
현재, 이미지와 좋아요 아이콘은 모든 컴포넌트에 공통으로 들어가있기때문에 하나의 컴포넌트로 묶고,
그 안에 따로 children을 받게 해 사용한 상품 관련 컴포넌트를 받습니다.
처음에는 그냥 다 따로 했었는데, 이미지&좋아요 children으로 안 받으면 사용한 상품 컴포넌트가 부모 인식을 바깥으로 해서 안 되더라구요 😇

레시피 정보는 따로 context를 만들어 바로 가져올 수 있도록 했습니다.
아래 링크를 많이 참고했음.
근데 매번 모든 컴포넌트에서 const { recipe } = useRecipeItemValueContext()를 받아와야하는건 좀 거슬림.
더 생각해보도록 하겠음...!
참고한 링크

📢 논의하고 싶은 내용

얘는 TopBar랑 다르게 아예 recipeItem 내부에서 큰 덩어리로 컴포넌트화 하려고 하는데 어때요?
스토리북 보면 알겠지만, 중간에 제가 임의로 인라인 스타일 먹여서 묶어 놓고 그래서 좀 드럽거든요.

그리고 text에 추가 css 주는거

 <Text className={ellipsis} size="caption1" weight="semiBold" color="default">
      {title}
    </Text>

이런식으로 하면 안 되나요?? 제목이랑 내용보면 알겠지만, size랑 weight, color 같은게 아예 안 먹어서요...
className은 참고로 말줄임표에 관한 것들이라 size, weight, color랑 아무 상관이 없습니다...

🎸 기타

이게 디자인을 보면, 작성자 & 작성일자가 컴포넌트별로 색이 다르더라구요?
밑에 내용이 붙냐 아니냐에 따라서 다르게 한 듯?
조건문을 두거나 props로 색을 받을까 하다가, 우리 코드가 너무 더러워질 것 같아서 슬며시 그냥 검정색으로 뒀는데....
조금 더러워지더라도 디자인을 그대로 따르는게 좋나요 아니면 디자이너분께 바꾸는거 문의해볼까요??

마지막으로 여기서 레시피 아이템 컴포넌트 교체까지 다 완료하겠음...!

⏰ 일정

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

github-actions · 2024-04-13T02:12:21Z

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

xodms0309

와아아ㅏ아우우우우우 해옹 코드 너무 깔끔하고 좋네요👍 참고한 링크도 봤는데 recipe를 계속 가져와야하는 건 어쩔 수 없는 부분인 것 같기도 해요

그리고 Text 컴포넌트에 className 안먹는건 feat/v2 pull 땡기면 괜찮아질거에요 확인해주세요!

그리고 디자이너분들이랑 충분히 논의해봐도 될 것 같습니다.

xodms0309 · 2024-04-13T09:38:23Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

-  const author = 'author' in recipe ? recipe.author : null;
+  return (
+    <RecipeItemProvider recipe={recipe}>
+      <Link to={`${id}`}>{children}</Link>


Suggested change

<Link to={`${id}`}>{children}</Link>

<Link to={id}}>{children}</Link>

그냥 이렇게 적어도 될듯!!

to가 string만 받을 수 있나봐요..!
'number' 형식은 'To' 형식에 할당할 수 없습니다.ts(2322)
요렇게 에러가 뜨네용?!?!

xodms0309 · 2024-04-13T09:40:33Z

src/components/Recipe/RecipeItem/RecipeItem.stories.tsx

+        <div style={{ display: 'flex', gap: '0.3rem' }}>
+          <RecipeItem.Author />
+          <RecipeItem.CreatedDate />
+        </div>


인라인 이런 말하는건가요?! 저는 얘네는 큰 컴포넌트로 묶어도 될 것 같아요!
그리고 Flex, Grid 컴포넌트 만들면 더 깔끔해지겠네요

좋슴니다 따로 묶어서 구현했습니다!
나중에 화면 작업 끝나면 바로 Flex랑 Grid랑 Heading 같은 애들 만듭시다~~

Flex, Grid, Heading 너무 필요..

github-actions · 2024-04-14T06:03:06Z

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

Leejin-Yang

완전 굿입니다.!

컴파운드 특성상 컨텍스트 가져오는 건 어쩔 수 없져
디자인은 통일하는게 좋아보입니다.!

수고했어요

Leejin-Yang · 2024-04-14T13:15:43Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+  const { recipe } = useRecipeItemValueContext();
+  const { title } = recipe;


Suggested change

const { recipe } = useRecipeItemValueContext();

const { title } = recipe;

const { recipe: { title } } = useRecipeItemValueContext();

너무 반복된다면 이렇게 할 수 있었던거 같은데 잘 기억이 안 나네요 ㅎㅎ

xodms0309 · 2024-04-14T18:21:07Z

이거 머지되면 제 검색에서 가져다 쓸게용

github-actions · 2024-04-15T10:43:52Z

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

hae-on · 2024-04-15T10:44:48Z

@xodms0309 @Leejin-Yang

컴포넌트 만든 거 recipeItem에 추가했는데
일단 위치는 맨 밑으로 뒀거든요?
맨 위가 좋은가요 아님 맨 밑이 좋은가요?

그리고 컴포넌트 이름 추천 받습니다...
걍 막 지었는데 어떻게 지어야 할 지 모르겠어요 ㅠ_ㅠ,,,,,

xodms0309 · 2024-04-15T14:40:17Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+export const RecipeItemWithProductButton = () => {
+  return (
+    <RecipeItem>
+      <RecipeItem.ImageAndFavoriteButton>
+        <RecipeItem.ProductButton />
+      </RecipeItem.ImageAndFavoriteButton>
+      <div style={{ height: '8px' }} />
+      <RecipeItem.Title />
+      <RecipeItem.AuthorAndCreatedDate />
+    </RecipeItem>
+  );
+};
+
+export const RecipeItemWithProductCircleButton = () => {
+  return (
+    <RecipeItem>
+      <RecipeItem.ImageAndFavoriteButton>
+        <RecipeItem.ProductCircleButton />
+      </RecipeItem.ImageAndFavoriteButton>
+      <div style={{ height: '8px' }} />
+      <RecipeItem.Title />
+      <RecipeItem.Author />
+      <RecipeItem.Content />
+    </RecipeItem>
+  );
+};


ProductButton이 그 상자모양 icon이고 ProductCircleButton이 사용한 상품 이미지 맞죠?? 뭔가 헷갈려서
RecipeItemWithDiskIcon / RecipeItemWithProductDetailImage 이런식으로 짓는�건 어떤가요?! 버튼이라는 기능보다는 어떻게 생겼는지 보이면 쓰는 입장에서 더 좋을 것 같다는 의견 🤔 사실 잘 모르겠음 다른 분들도 의견 부탁.

맞아여! 전 타미 말대로 바꾸는 거 괜춘한 거 같아요!!
그러면 RecipeItemWithDiskIconAndContent 이건 괜찮나여?
이름이 너무 기나 싶어서 ㅠ 근데 다른 점이 진짜 content 추가밖에 없음.... 😇
그리고 내부 이름(<RecipeItem.ProductCircleButton />)은 그대로 두고?!?!

네이밍 진짜 어렵네여 .. 😇 근데 길어지더라도 다 전달되는게 나을 것 같긴 해요
내부도 바꾸면 좋을 것 같긴 해요 제 의견!!
아 근데 저 diskicon이 또 recipeproductbutton으로 컴포넌트화 되어있어서.. 차라리 recipeproductbutton을 넣는게 나으려나.... 해온이 잘 결정해주세요 🤔

github-actions · 2024-04-17T09:25:26Z

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

hae-on · 2024-04-17T09:34:38Z

@xodms0309 @Leejin-Yang

컴포넌트 교체 했습니다!

위 이미지에서 체크된 부분만 변경했고,
검색의 경우에는 타미가 진행해주신다구 했구,
마이페이지는 제가 작업할 예정입니다!

진행 중에 문제점이 몇가지 있었는데요.

1. 이미지를 감싸고 있는 div 아래쪽에 보면 공간이 있는데 이 부분이 아래 요소를 밀어냅니다.

개발자 도구로 보는데, 대체 저 아래 부분이 어디서 나온건지 모르겠네요.
그래서 원래 이미지와 제목 사이의 여백이 8px인데 그냥 눈대중으로 줄여서 4px로 바꿨습니다.
혹시 저거 없애는 방법을 아신다면...
(margin 0, width 100%는 일단 안 됐음)

2. DiskIconButton의 bottom이 어디 기준으로 잡히는지 알 수 없습니다.

bottom이 이미지 하단 기준으로 원래 8px 떨어져야하는데요.
css를 따로 수정하지 않았는데, bottom이 변경되었습니다.
그래서 이것도 눈대중으로 bottom 값을 바꿨습니다....
그리고 원래 z-index도 있었는데, 얘가 하단 네비게이션 바 위에 둥둥 떠다녀서 없애버렸습니다.

3. type 문제

현재 레시피, 레시피 랭킹, 마이페이지 랭킹별로 따로 type을 설정해뒀는데,
이제 recipeItem 컴포넌트 자체 type을 Recipe로 받아버리면서 다른 타입을 받을 수가 없더라구요.
recipeContext에 들어오는 recipe type을

interface RecipeItemValue {
  recipe: Recipe | RecipeRanking | RecipeMember;
  children?: React.ReactNode;
}

뭐 이런식으로 할까 하다가
그냥 간단하게 recipe type을 군데군데 옵셔널로 바꾸고, 모두 recipe type을 받게 수정했습니다.
이 부분에 대해서는 좋은 아이디어가 있다면 말씀 부탁....!!!

xodms0309 · 2024-04-17T19:10:05Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+      <img
+        className={recipeImage}
+        src={image ?? defaultImage}
+        alt={`조리된 ${title}`}
+        loading="lazy"
+        onLoad={() => image && setIsImageLoading(false)}
+      />


뭔가 여기에 width, height 정의가 안돼서 div가 크게 잡히는 것 같기도 한데.. 구글링 해보니까 div에 line-height: 0 넣으면 해결된대요

우왕 해결 됐슴다!! 타미 짱 👍

xodms0309 · 2024-04-17T19:15:56Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+      <div className={productButtonWrapper} onClick={(e) => e.preventDefault()}>
+        <RecipeProductButton isTranslucent products={products} />
+      </div>


이거 2번째 문제때문에 div로 추가적으로 감싸게 된건가요?!

얘는 원래 있던 친구인데, 레시피 아이템에서만 위치 조정이 가능하게 하려구 감쌌어용~
요 친구는 다른 곳에서도 사용하니까 거기에서는 영향 안 받게 하려구!
line height 수정하니까 2번 문제도 같이 해결 됐슴니당~~ ><

xodms0309 · 2024-04-17T19:18:53Z

저는 타입 해온이 한 방식 괜찮은거 같아여~!~!

Leejin-Yang

코멘트 확인해주세요 해온~
대규모 공사를 했네요.! 고생하셨슴다

그리고 원래 z-index도 있었는데, 얘가 하단 네비게이션 바 위에 둥둥 떠다녀서 없애버렸습니다.

제가 테스트하고 못 뺐는데 ㅎㅎ.. 감사함다

DiskIconButton의 bottom이 어디 기준으로 잡히는지 알 수 없습니다.

productCircle은 바텀 수정 없고, productButton만 다르게 잡힌다는건가요?

Leejin-Yang · 2024-04-17T22:37:58Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+  const { id } = recipe;
+
+  return (
+    <RecipeItemProvider recipe={recipe}>


여기서 아래로 내려주니까

맞네...여기서 감싸주고 있었구나...

Leejin-Yang · 2024-04-17T22:38:40Z

src/components/Rank/RecipeRankingList/RecipeRankingList.tsx

+            <RecipeItemProvider recipe={recipe}>
+              <DefaultRecipeItem />
+            </RecipeItemProvider>


Suggested change

<RecipeItemProvider recipe={recipe}>

<DefaultRecipeItem />

</RecipeItemProvider>

<DefaultRecipeItem recipe={recipe} />

props로 내려주고

Leejin-Yang · 2024-04-17T22:40:10Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+const RecipeItem = ({ children }: PropsWithChildren) => {
+  const { recipe } = useRecipeItemValueContext();


Suggested change

const RecipeItem = ({ children }: PropsWithChildren) => {

const { recipe } = useRecipeItemValueContext();

const RecipeItem = ({ recipe, children }: PropsWithChildren) => {

Leejin-Yang · 2024-04-17T22:40:41Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+
+export default RecipeItem;
+
+export const DefaultRecipeItem = () => {


Suggested change

export const DefaultRecipeItem = () => {

export const DefaultRecipeItem = ({recipe}) => {

이렇게.?

구웃~~ 말한대로 수정했슴당 확인해보시져!!!

Leejin-Yang · 2024-04-17T22:41:42Z

src/types/recipe.ts

+  content?: string;
+  products?: RecipeProduct[];


Leejin-Yang · 2024-04-17T22:43:45Z

src/components/Recipe/RecipeItem/RecipeItem.tsx

+RecipeItem.AuthorAndCreatedDate = AuthorAndCreatedDate;
+RecipeItem.Content = Content;
+
+export default RecipeItem;


얘는 외부에서 사용하지 않고 아래 친구들만 사용하는거죠?

얍얍 그렇슴다!

github-actions · 2024-04-18T04:29:43Z

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

hae-on · 2024-04-18T04:30:23Z

@Leejin-Yang

productCircle은 바텀 수정 없고, productButton만 다르게 잡힌다는건가요?

얘는 마이페이지에만 써서 아직 안 붙어봤는데 아마 바텀 위치 이상하게 잡혔을거에요 !
어쨌든 타미가 말해준 방법으로 해결해서 얘도 같이 고쳐졌을 듯!
이제 진짜 다 수정했습니다! 확인해주시고 이모지만 남겨주시면 바로 머지하고 다음 작업 진행하겠음~~

Creative-Lee · 2024-04-18T15:24:54Z

고생하셨습니다

refactor: 기초 recipe item 컴포넌트 구현

5dff033

hae-on added the 🔧 Refactor label Apr 12, 2024

hae-on requested review from xodms0309 and Leejin-Yang April 12, 2024 16:06

hae-on self-assigned this Apr 12, 2024

fix: 자동 배포 오류 수정

6907a47

xodms0309 approved these changes Apr 13, 2024

View reviewed changes

hae-on added 2 commits April 14, 2024 14:51

chore: feat v2 병합

266e366

refactor: 작가와 생성된 날짜 묶기

c06af98

Leejin-Yang approved these changes Apr 14, 2024

View reviewed changes

hae-on added 4 commits April 15, 2024 19:26

refactor: recipe 가져오는 방식 변경

96403bb

chore: feat v2 병합

af65092

refactor: css 없어진 속성 삭제

eeccf3a

refactor: 각 컴포넌트 추가

f1d84bc

xodms0309 approved these changes Apr 15, 2024

View reviewed changes

hae-on added 7 commits April 17, 2024 17:02

refactor: 스토리북 내부 컴포넌트로 교체

bba1706

refactor: 기본 이미지 랜덤 이미지로 변경

4ad3aa3

refactor: 레시피 랭킹 컴포넌트 교체

3dd571c

refactor: recipe item 컴포넌트 export 방식 변경

08259c4

refactor: 상품 상세 포함된 꿀조합 컴포넌트 수정

a6a656e

refactor: 꿀조합 페이지 컴포넌트 변경

be48d52

chore: lint 적용

d49e5c5

xodms0309 reviewed Apr 17, 2024

View reviewed changes

Leejin-Yang reviewed Apr 17, 2024

View reviewed changes

hae-on added 2 commits April 18, 2024 13:12

refactor: image 감싸는 div에 line height 0 부여

33ccebc

refactor: 컴포넌트에서 바로 recipe 받도록 수정

f3281b0

hae-on merged commit bf46a51 into feat/v2 Apr 18, 2024
2 of 3 checks passed

hae-on deleted the feat/issue-81 branch April 18, 2024 14:35

	<Link to={`${id}`}>{children}</Link>
	<Link to={id}}>{children}</Link>

		const { recipe } = useRecipeItemValueContext();
		const { title } = recipe;

	const { recipe } = useRecipeItemValueContext();
	const { title } = recipe;
	const { recipe: { title } } = useRecipeItemValueContext();

		const RecipeItem = ({ children }: PropsWithChildren) => {
		const { recipe } = useRecipeItemValueContext();

	const RecipeItem = ({ children }: PropsWithChildren) => {
	const { recipe } = useRecipeItemValueContext();
	const RecipeItem = ({ recipe, children }: PropsWithChildren) => {


		export default RecipeItem;

		export const DefaultRecipeItem = () => {

	export const DefaultRecipeItem = () => {
	export const DefaultRecipeItem = ({recipe}) => {

refactor: 기초 recipe item 컴포넌트 구현 #83

refactor: 기초 recipe item 컴포넌트 구현 #83

Conversation

hae-on commented Apr 12, 2024

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

github-actions bot commented Apr 13, 2024

xodms0309 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

github-actions bot commented Apr 14, 2024

Leejin-Yang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xodms0309 commented Apr 14, 2024

github-actions bot commented Apr 15, 2024

hae-on commented Apr 15, 2024

xodms0309 Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xodms0309 Apr 17, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Apr 17, 2024

hae-on commented Apr 17, 2024

1. 이미지를 감싸고 있는 div 아래쪽에 보면 공간이 있는데 이 부분이 아래 요소를 밀어냅니다.

2. DiskIconButton의 bottom이 어디 기준으로 잡히는지 알 수 없습니다.

3. type 문제

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 commented Apr 17, 2024

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

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 18, 2024

hae-on commented Apr 18, 2024

Creative-Lee commented Apr 18, 2024

xodms0309 left a comment •

edited

Loading

xodms0309 Apr 15, 2024 •

edited

Loading

xodms0309 Apr 17, 2024 •

edited

Loading