Skip to content

feat/57 리뷰카드 컴포넌트 UI 구현 #58

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.

Sign up for GitHub

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

Merged
evaain706 merged 1 commit into from
Jul 21, 2025
Merged

feat/57 리뷰카드 컴포넌트 UI 구현 #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Avatar from '@/components/Avatar';

interface UserReviewProps {
userName: string;
date: string;
reviewText: string;
avatarSrc: string;
}

export default function ReviewCard({
userName,
date,
reviewText,
avatarSrc,
}: UserReviewProps) {
return (
<div className='mx-auto flex max-w-md items-start gap-6 p-6 text-black md:max-w-2xl'>
<Avatar src={avatarSrc} size='sm' />
<div className='grid flex-1 gap-6'>
<div className='flex items-center gap-10 text-sm md:text-lg'>
<p className='font-bold'>{userName}</p>
<p className='text-black'>|</p>
<p className='text-gray-600'>{date}</p>
</div>
Comment on lines +20 to +24
Copy link

@coderabbitai coderabbitai bot Jul 19, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

접근성과 시맨틱을 개선하세요.

구분자로 사용된 파이프 문자(|)가 스크린 리더에서 의미 없이 읽힐 수 있습니다. 또한 날짜 정보에 대한 시맨틱 마크업이 부족합니다.

        <div className='flex items-center gap-10 text-sm md:text-lg'>
          <p className='font-bold'>{userName}</p>
-          <p className='text-black'>|</p>
-          <p className='text-gray-600'>{date}</p>
+          <span className='text-black' aria-hidden="true">|</span>
+          <time className='text-gray-600'>{date}</time>
        </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className='flex items-center gap-10 text-sm md:text-lg'>
<p className='font-bold'>{userName}</p>
<p className='text-black'>|</p>
<p className='text-gray-600'>{date}</p>
</div>
<div className='flex items-center gap-10 text-sm md:text-lg'>
<p className='font-bold'>{userName}</p>
<span className='text-black' aria-hidden="true">|</span>
<time className='text-gray-600'>{date}</time>
</div>
🤖 Prompt for AI Agents 
In src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx
around lines 20 to 24, the pipe character used as a separator is not accessible
for screen readers and the date lacks semantic markup. Replace the pipe
character with a visually hidden separator for screen readers or use CSS for
visual separation, and wrap the date in a <time> element with a proper datetime
attribute to improve semantic meaning and accessibility.

<p className='text-sm leading-relaxed text-black md:text-lg'>
{reviewText}
</p>
</div>
</div>
);
}
7 changes: 7 additions & 0 deletions src/app/(with-header)/activities/[activitiesId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { mockActivity } from './mock/mock';
import Title from './components/Title';
import ImageGrid from './components/ImageGrid';
import ReviewCard from './components/ReviewCard';

export default function ActivityDetailPage() {
const {
Expand Down Expand Up @@ -36,6 +37,12 @@ export default function ActivityDetailPage() {
<p>{description}</p>
</div>
</div>
<ReviewCard
userName='강지현'
date='2023. 2. 4'
reviewText='전문가가 직접 강사로 참여하기 때문에 어떤 수준의 춤추는 사람도 쉽게 이해할 수 있었습니다. 이번 체험을 거쳐 저의 춤추기 실력은 더욱 향상되었어요.'
avatarSrc='/test/image1.png'
/>
Comment on lines +40 to +45
Copy link

@coderabbitai coderabbitai bot Jul 19, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

하드코딩된 테스트 데이터를 동적 데이터로 교체하세요.

현재 정적 데이터로 구현되어 있는데, 향후 실제 리뷰 데이터와 연동할 계획을 세우고 구조를 개선하는 것을 권장합니다.

다음과 같은 개선 사항을 고려해보세요:

  1. 리뷰 데이터 구조화:
interface Review {
  id: string;
  userName: string;
  date: string;
  reviewText: string;
  avatarSrc: string;
}
  1. 여러 리뷰 지원:
{mockActivity.reviews?.map((review) => (
  <ReviewCard
    key={review.id}
    userName={review.userName}
    date={review.date}
    reviewText={review.reviewText}
    avatarSrc={review.avatarSrc}
  />
))}
  1. 이미지 경로 검증: /test/image1.png 경로가 실제로 존재하는지 확인하세요.

이미지 파일이 존재하는지 확인해보겠습니다:

🏁 Script executed:

#!/bin/bash
# 테스트 이미지 파일 존재 여부 확인
find . -name "image1.png" -path "*/test/*" 2>/dev/null
ls -la public/test/image1.png 2>/dev/null || echo "이미지 파일이 존재하지 않습니다"

Length of output: 174

동적 리뷰 데이터 연동 및 구조화 필요

이미지 경로(/public/test/image1.png)는 정상적으로 존재함을 확인했습니다.
하지만 현재 코드에는 여전히 하드코딩된 단일 리뷰만 출력되고 있어, 아래 개선이 필요합니다:

  • 대상 파일: src/app/(with-header)/activities/[activitiesId]/page.tsx (40–45줄)
  • Review 인터페이스 정의: 
    interface Review {
  id: string;
  userName: string;
  date: string;
  reviewText: string;
  avatarSrc: string;
}
  • 복수의 리뷰를 렌더링하도록 데이터 매핑 사용: 
    {mockActivity.reviews?.map((review) => (
  <ReviewCard
    key={review.id}
    userName={review.userName}
    date={review.date}
    reviewText={review.reviewText}
    avatarSrc={review.avatarSrc}
  />
))}
  • 향후 실제 API 또는 DB 연동 시 해당 구조를 그대로 활용할 수 있도록 준비해주세요.
🤖 Prompt for AI Agents 
In src/app/(with-header)/activities/[activitiesId]/page.tsx around lines 40 to
45, the code currently renders a single hardcoded ReviewCard component. To fix
this, define a Review interface matching the given structure, then replace the
hardcoded ReviewCard with a map over mockActivity.reviews, rendering a
ReviewCard for each review using review.id as the key and passing the
appropriate props. This will enable dynamic rendering of multiple reviews and
prepare the code for future API or database integration.

</div>
);
}