Feature/Carousel

[Luganic]

📦 Pull Request

• 캐러셀 구현 후 테스트 완료했습니다

📝 요약(Summary)

• 캐러셀 버튼이 마지막까지 가면 흐림 표시가 됩니다.
• Link 연결로 카드 클릭 시 상세 페이지로 갑니다.

💬 공유사항 to 리뷰어

• 캐러셀 (carousel.tsx)
• 캐러셀 안 와인 카드 (WineCard.tsx)
• 캐러셀 컨테이너 (wineSlider.tsx)
• 캐러셀 전용 버튼 (ListSliderButton.tsx)

🗂️ 관련 이슈

📸 스크린샷

✅ 체크리스트

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

[vercel]

@Luganic 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.

[626-ju]

이런 식으로 하는 방법도 있었군요?
분명 각 뷰포트 별로 나눠서 보기엔 편할 수 있는 장점이 있는 것 같지만
이렇게 하는 사례를 거의 본 적이 없어서 저도 찾아보니

1.스크린 리더기나 크롤러 봇에게 혼란을 줄 수 있음.
2. 수정이 필요할 때 여러 곳을 하나하나 찾아야 함.
+수정이 필요한데, 누락이 될 수 있다는 점. +디버깅의 어려움

3.히든이여도 돔트리에는 그대로 남아있으니까 불필요한 리소스 낭비.

등의 문제가 있을 수도 있다고 하더라구요

그래도 오늘 봤을 때 ui상으로 크게 이상한건 없었으니 진행을 하구,
위에서 말한 점들이 신경 쓰이신다면 다음에 시간 남을 때 개인적으로 수정해보시는 것도 좋을 것 같네요!

[Luganic]

감사합니다 메모해놓겠습니다!

[youdaeng2]

중간에 힘드셨다고 하셨는데도 UI 완성하시느라 고생 많으셨어요!
전체적으로 깔끔하게 잘 정리돼서 보기 좋았습니다.
캐러셀 부분은 키보드 포커스 잘 되는지만 한번 더 확인해보시면 좋을 것 같아요
고생하셨습니다!

[youdaeng2]

저는 Badge 컴포넌트 사용하는 걸로 알고있는데 아닐까요!?!? 왜 버튼인지 모르겠습니다! 따로 로직이 있을까요?

[Luganic]

.... 왜그랬을까요. 이거 다시 확인하겠습니다.
말씀해주신대로 Badge 맞습니다

[youdaeng2]

모바일과 PC에서 별점 UI를 따로 렌더링하고 계신 것 같아요!

스타일과 위치 때문에 레이아웃을 다르게 구성하신 거라면 현재 방식도 괜찮지만
별점 렌더링 부분은 로직이 동일하므로 함수로 추출해서 중복을 줄이는 방법도 고려해보면 좋을 것 같습니다

예시로 제안드리자면:

1. 작성하신 코드와 마찬가지로 모바일/pc 별로 레이아웃은 나누되, 중복 제거를 위해 별 렌더링 함수를 따로 만들기

예시입니다

// 별 렌더링 함수
function renderStars(rating: number, size: 'sm' | 'md') {
  const starSizeClass = size === 'sm' ? 'w-3 h-3' : 'w-[16px] h-[16px]';

  return (
    <div className='flex gap-[4px] flex-nowrap'>
      {Array.from({ length: 5 }).map((_, i) => (
        <StarIcon
          key={i}
          className={cn(
            rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
            starSizeClass,
          )}
        />
      ))}
    </div>
  );
}

{/* 모바일에서는 */}
{renderStars(wine.rating, 'sm')}

{/* PC에서는 */}
{renderStars(wine.rating, 'md')}

이렇게 구성하시면 별점 관련 수정이 필요할 때도 유지보수가 훨씬 편할 것 같습니다.
혹시 별도로 분기하신 다른 이유가 있으실까요??

참고로 성주님께서 작성하신 wine.detail에도 별점 관련 컴포넌트가 있으니 한번 확인해보셔도 좋을 것 같습니다.