Merge pull request #58 from codeit-2team/feat/57

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

Author: evaain706

src/app/(with-header)/activities/[activitiesId]/components/ReviewCard.tsx

@@ -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>
+        <p className='text-sm leading-relaxed text-black md:text-lg'>
+          {reviewText}
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(with-header)/activities/[activitiesId]/page.tsx

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