Feature/wineid #49

626-ju · 2025-07-24T04:59:04Z

📦 Pull Request

https://whyne-fe-git-fork-626-ju-feature-wineid-626-jus-projects.vercel.app/wines/123

📝 요약(Summary)

와인 상세페이지 ui 구현입니다.
api 연결은 아직 안되어 있어요

💬 공유사항 to 리뷰어

공용 컴포에 있던 리뷰 카드 저만 쓰는 것 같은데
수치 조정이 필요한 부분이 있어서 조금 건드려뒀습니다.
혹시 다른 분들 쓰셔야 하면 미리 말씀해주세요
assets 폴더 안에 쓰는 페이지 별로 폴더를 분리해야 할까요?
일단은 루트에다 뒀는데 기존에 있던 icons 안에 넣을지 아니면 새로 폴더를 만들지 결정해주시면 될 것 같습니다.
테일윈드에 미리 정의 되지 않았지만 시안에는 표기되어 있는
-> ex) margin-bottom: 6.5px, margin-bottm:22px, width 값들 등등
때문에 [ ] 표기법과 같이 쓰다보니 많이 지저분해진 것 같습니다...
저번에 멘토님께서 말씀해주신 매직넘버를 -> 상수로 분리하기에는 종류가 너무 많고
어느 요소에 해당 값이 적용되는지 파악하는 게 어려워 질 것 같은데
1. 차라리 [ ] 로 통일하는 게 나을지?
2. 시안과 다르더라도 정의된 클래스이름만 쓸 건지?
3. 크리티컬하지 않으면 그냥 넘어갈 것인지
이야기해보면 좋을 것 같습니다.

1차 qa 반영

좋아요 눌렀을 때 하트 꽉 찬 하트로 바꾸기
카드 열기 버튼 아래 여백 줄이기
태블릿, 모바일 리뷰목록 위에 간격 더 주기
mb-10 md:mb-[60px]
유저기본이미지 배경 색 그레이로 바꾸기
케밥svg Path인걸로 바꾸기

🗂️ 관련 이슈

📸 스크린샷

✅ 체크리스트

빌드 및 테스트 통과
ESLint/Prettier 검사 통과

vercel · 2025-07-24T08:19:02Z

Someone is attempting to deploy a commit to the 626-ju's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-07-24T08:19:56Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
whyne-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 25, 2025 6:22am

dwkim101 · 2025-07-24T09:06:21Z

src/pages/wines/[wineid].tsx

+      </ImageCard>
+      <div className='flex flex-col xl:flex-row max-w-[1140px] w-full mx-auto justify-between '>
+        <div className='flex-col  order-2 xl:order-1 xl:max-w-[1140px] '>
+          <h2 className='hidden xl:block mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>


hidden(display:none)은 시각적으로나 접근성측면에서나 완전 무시되기때문에 특정한 경우가 아니면, 특히 지금과 같은 경우에는 sr-only를 추천드려요. (특정한 경우* 탭ui, 모달ui 등)

Suggested change

<h2 className='hidden xl:block mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>

<h2 className='sr-only xl:block mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>

dwkim101 · 2025-07-24T09:17:46Z

src/pages/wines/[wineid].tsx

+          <ul>
+            {testReviews.map((review) => (
+              <li key={review.id} className='mb-[16px] md:mb-[24px] xl:mb-[20px]'>
+                <ReviewCard


compound 패턴 추천드립니다
이유는 아래와 같습니다

ReviewCard의 인터페이스(prop)이 많아서 파악/예측하기 어렵습니다 => ReviewCard가 들고있는 관심사가 너무 많습니다

slot prop으로 내려준 컴포넌트는 리렌더링되면서 (여기선 단순ui지만)내부에 상태를 관리하는 컴포넌트라면 문제가 생길수있습니다.

넵 감사합니다! 반영하도록 하겠습니다 :)

-sr-only였다가 xl:not-sr-only로 변경하면 기존에 설정해둔 마진이 오버라이딩 되는 것 같아 기존마진에 ! 사용했습니다.

youdaeng2 · 2025-07-24T10:41:30Z

src/components/wineDetail/Kebab.tsx

 function Kebab() {
+  //유진님이 만든 거랑 겹치는 거 같은데 나중에 합쳐지면 그걸로 수정해두겠습니다.
+  function onSelect(value: string) {
+    //-> 요거 혹시 저번에 멘토님께서 제네릭 관련 피드백 해주신 거 반영되어 있을까요???


아직입니다! 1차 QA 피드백 반영 후 바로 수정하겠습니다.

summerDev96 · 2025-07-25T05:25:01Z

src/components/common/card/ReviewCard.tsx

+ReviewCard.ToggleButton = function TogleButton({ reviewId }: ToggleButtonProps) {
+  const isOpen = useReviewCardStore((state) => state.allReviews[reviewId]?.isOpen);
+  const toggleReviewOpen = useReviewCardStore((state) => state.toggleReviewOpen);
+  return (
+    <Button
+      size={null} //버튼 디폴트 덮어씌우기
+      width={null}
+      variant='onlyCancel'
+      onClick={() => toggleReviewOpen(reviewId)}
+      className={cn(
+        'border-0 mx-auto  [&_svg]:w-[30px] [&_svg]:h-[30px] block transition-all duration-500 ease-in-out mt-[-30px]',
+        {
+          'scale-y-[-1] mt-0': isOpen,
+        },
+      )}
+    >
+      <ShowMoreBtn />
+    </Button>


합성 컴포넌트로 변경하니 컴포넌트의 역할 구분이 잘 되어보이네요

llmojoll

고생하셨습니다 점점 완성되어 가는 느낌이 드네요
말씀하신 assets폴더는 저도 루트에 다 넣어놔서... 정리하긴 해야 할 것 같습니다
테일윈드는 저도 이것저것 복잡하게 섞여있는데요 어느정도 통일을 해야 한다고 생각합니다

summerDev96 · 2025-07-25T05:29:45Z

src/components/wineDetail/WineReviewCard.tsx

+    <ReviewCard>
+      <ReviewCard.UserHeader
+        userIcon={<UserDefaultImg className='size-10 md:size-16' />}
+        reviewId={id}
+      >
+        <LikeButton isLike={false} />
+        <Kebab />
+      </ReviewCard.UserHeader>
+      <ReviewCard.TagAndRating reviewId={id}></ReviewCard.TagAndRating>
+      <ReviewCard.ReviewBody
+        reviewId={id}
+        flavorSliderSlot={
+          <FlavorSliderList
+            lightBold={lightBold}
+            smoothTannic={smoothTannic}
+            drySweet={drySweet}
+            softAcidic={softAcidic}
+          />
+        }
+      ></ReviewCard.ReviewBody>
+      <ReviewCard.ToggleButton reviewId={id} />
+    </ReviewCard>


props를 많이 줄여서 깔끔해보이네요! 굿굿 👍

summerDev96 · 2025-07-25T05:30:22Z

src/components/wineDetail/WineRating.tsx

+      className='mb-10 md:mb-[60px] md:px-[63px] xl:px-0 w-full xl:max-w-[280px] mx-auto xl:mx-0 order-1 xl:order-2  
+      flex flex-col md:flex-row md:gap-20 xl:gap-0 xl:flex-col xl:relative'


클래스가 너무 길어져서 변수로 빼도 좋을 것 같습니다!

summerDev96 · 2025-07-25T05:31:19Z

src/pages/_document.tsx

+        <meta property='og:image' content={defaultOGImage} />
+        <meta property='og:url' content={BASE_URL} />


메타태그 이미지 설정해주신 부분 확인했습니다

summerDev96 · 2025-07-25T05:38:50Z

src/stores/reviewCardStore.ts

+//use-sync-external-store 패키지 설치 후 useStoreWithEqualityFn으로 타입 지정해야 shallow제대로 인식
+//-> 이거 외에 패키지 설치 안하는 방식으로 이것저것 해봤는데 도무지 못 찾겠네요 ㅠ
+//-> 일단 쓰긴했는데 왜 이 패키지가 필요한지 잘 모르겠습니다. 예전에 그냥 리액트+js로만 했을 때는 없어도 잘 인식했던 것 같은데...
+
+//원시타입 === 비교/ 객체,배열 얕은 비교
+const useReviewCardStore = <T>(selector: (state: ReviewStates) => T): T =>
+  useStoreWithEqualityFn(reviewStore, selector, shallow);
+
+export default useReviewCardStore;


이부분은 합성 컴포넌트 만들면서 한번 확인해보겠습니다!

626-ju added 13 commits July 23, 2025 00:09

feat: [wineid]ui구현+리뷰카드 수치조정

31c6320

fix: gnb z인덱스 위치 수정

61a4e6e

feat: shadcn progress추가

d36663d

feat:프로그레스 ui추가

97cfb38

refactor: WineRating.tsx 배치 개선

2e45e7d

Merge branch 'dev' into feature/wineid

6996733

feat:평균별점 컴포넌트 추가 + 별점 뱃지 내부간격 소폭 조정

c904f73

Merge branch 'dev' into feature/wineid

275c726

feat: FlavorSliderList 추가+케밥+좋아요버튼 추가

6a07a20

feat: ReviewCard컴포넌트에 useClickToggle 훅 추가하기

b6d0cd7

feat: 카드 열고 닫고 애니메이션 추가

e769a1b

style: 포맷팅

f8b1e8d

refactor: 테스트용 더미 파일 분리

e9fe01b

626-ju requested review from llmojoll and summerDev96 July 24, 2025 04:59

626-ju added 3 commits July 24, 2025 17:00

refactor: 1차 qa 피드백 반영

813f3e5

build: svg파일들 폴더 변경에 따른 임포트 경로 수정

4c0cbe9

Merge branch 'dev' into feature/wineid

dca39e1

vercel bot deployed to Preview July 24, 2025 08:20 View deployment

chore: 불필요한 주석 제거

91064d0

dwkim101 reviewed Jul 24, 2025

View reviewed changes

feat: 케밥에 추가 드랍다운 추가+추후 유진님 껄로 교체

fc5f8c1

dwkim101 reviewed Jul 24, 2025

View reviewed changes

626-ju added 2 commits July 24, 2025 18:18

feat: og 이미지 추가

e4007fc

fix: env들어간 거 빼기

49419ad

vercel bot deployed to Preview July 24, 2025 09:23 View deployment

626-ju added 2 commits July 24, 2025 18:28

fix:og이미지 누락 수정

16d5e45

refactor(mentor): hidden->sr-only

60ab8e4

-sr-only였다가 xl:not-sr-only로 변경하면 기존에 설정해둔 마진이 오버라이딩 되는 것 같아 기존마진에 ! 사용했습니다.

vercel bot deployed to Preview July 24, 2025 10:16 View deployment

youdaeng2 reviewed Jul 24, 2025

View reviewed changes

refactor(mentor): 리뷰카드 -> 주스탄드기반 합성컴포넌트

a04e9a4

vercel bot deployed to Preview July 24, 2025 16:39 View deployment

fix: 텍스트에 적용되는 트랜지션 제거

d62a492

vercel bot deployed to Preview July 24, 2025 17:45 View deployment

626-ju added 3 commits July 25, 2025 12:34

chore: 설명 주석 추가

4b8c7bd

chore: 사용하지 않는 useClickToggle.tsx삭제(hooks폴더도 같이)

2e26ed2

chore:스테이징 누락된 파일 추가

8f8152a

vercel bot deployed to Preview July 25, 2025 04:31 View deployment

Merge branch 'dev' into feature/wineid

ee8b03d

summerDev96 approved these changes Jul 25, 2025

View reviewed changes

llmojoll approved these changes Jul 25, 2025

View reviewed changes

summerDev96 approved these changes Jul 25, 2025

View reviewed changes

refactor:wineid 이미지 카드 그라데이션 추가+처음 리뷰는 열리게

26d2e5c

626-ju merged commit 1b87c36 into codeit-part3-7:dev Jul 25, 2025
1 of 2 checks passed

vercel bot deployed to Preview July 25, 2025 06:22 View deployment

	<h2 className='hidden xl:block mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>
	<h2 className='sr-only xl:block mb-[22px] xl:custom-text-xl-bold'>리뷰 목록</h2>

		className='mb-10 md:mb-[60px] md:px-[63px] xl:px-0 w-full xl:max-w-[280px] mx-auto xl:mx-0 order-1 xl:order-2
		flex flex-col md:flex-row md:gap-20 xl:gap-0 xl:flex-col xl:relative'

		<meta property='og:image' content={defaultOGImage} />
		<meta property='og:url' content={BASE_URL} />

Feature/wineid #49

Feature/wineid #49

Uh oh!

Conversation

626-ju commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Pull Request

📝 요약(Summary)

💬 공유사항 to 리뷰어

🗂️ 관련 이슈

📸 스크린샷

✅ 체크리스트

Uh oh!

vercel bot commented Jul 24, 2025

Uh oh!

vercel bot commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dwkim101 Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

llmojoll left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

626-ju commented Jul 24, 2025 •

edited

Loading

vercel bot commented Jul 24, 2025 •

edited

Loading

dwkim101 Jul 24, 2025 •

edited

Loading