Merge pull request #339 from MovieReviewComment/feature/issue-162/ref…

…actor-card

[#162] Refactor ReviewCard

ui/src/components/common/server/card.tsx

@@ -0,0 +1,29 @@
+import { getValidChildrenOfType } from '@/lib/utils/common/get-valid-children-of-type';
+
+function Card({ children }: { children: React.ReactNode }) {
+  const header = getValidChildrenOfType(children, CardHeader);
+  const body = getValidChildrenOfType(children, CardBody);
+  const footer = getValidChildrenOfType(children, CardFooter);
+
+  return (
+    <div className="flex flex-col border-t p-6 [&:first-child]:border-none">
+      {header}
+      {body}
+      {footer}
+    </div>
+  );
+}
+
+function CardHeader({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+function CardBody({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+function CardFooter({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+export default Object.assign(Card, { Header: CardHeader, Body: CardBody, Footer: CardFooter });

ui/src/components/review/server/review-card-body.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+import Text from '@/components/common/server/text';
+
+import { parseReviewContent } from '@/lib/utils/review/parse-review-content';
+
+export function ReviewCardBody({ reviewId, content }: { reviewId: number; content: string }) {
+  const { description } = parseReviewContent(content);
+
+  return (
+    <>
+      <Link href={`/review/${reviewId}`} className="mt-4">
+        <Text lineClamp={3}>{description}</Text>
+      </Link>
+    </>
+  );
+}

ui/src/components/review/client/review-card.tsx → ui/src/components/review/server/review-card-footer.tsx

@@ -1,35 +1,27 @@
 import { ChatBubbleOvalLeftIcon } from '@heroicons/react/24/outline';
-import Link from 'next/link';
 
 import UserChip from '@/components/auth/client/user-chip';
 import Text from '@/components/common/server/text';
 import Time from '@/components/common/server/time';
 
-import type { Review } from '@/lib/definitions/review';
-import { parseReviewContent } from '@/lib/utils/review/parse-review-content';
-
-export function ReviewCard({ review }: { review: Review }) {
-  const { content, createdAt, movieName, nickname, tag, updatedAt, title, replyCount } = review;
-
-  const { description } = parseReviewContent(content);
-
+export function ReviewCardFooter({
+  replyCount,
+  createdAt,
+  updatedAt,
+  nickname,
+  tag,
+}: {
+  replyCount: number;
+  createdAt: string;
+  updatedAt: string;
+  nickname: string;
+  tag: string;
+}) {
   const isUpdated = createdAt !== updatedAt;
   const dateStr = isUpdated ? updatedAt : createdAt;
 
   return (
-    <div className="flex flex-col border-t p-6 [&:first-child]:border-none">
-      <Link href={`/review/${review.id}`} className="w-fit">
-        <Text size="xl" weight="bold">
-          {title}
-        </Text>
-      </Link>
-
-      <Text weight="medium">{movieName}</Text>
-
-      <Link href={`/review/${review.id}`} className="mt-4">
-        <Text lineClamp={3}>{description}</Text>
-      </Link>
-
+    <>
       <div className="mt-3 flex items-center gap-1">
         {/* TODO: this has to be Link with scrollIntoView reply */}
         <ChatBubbleOvalLeftIcon className="w-4" />
@@ -48,6 +40,6 @@ export function ReviewCard({ review }: { review: Review }) {
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 }

ui/src/components/review/server/review-card-header.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+import Text from '@/components/common/server/text';
+
+export function ReviewCardHeader({
+  reviewId,
+  title,
+  movieName,
+}: {
+  reviewId: number;
+  title: string;
+  movieName: string;
+}) {
+  return (
+    <>
+      <Link href={`/review/${reviewId}`} className="w-fit">
+        <Text size="xl" weight="bold">
+          {title}
+        </Text>
+      </Link>
+
+      <Text weight="medium">{movieName}</Text>
+    </>
+  );
+}

ui/src/components/review/client/review-card.stories.tsx → ui/src/components/review/server/review-card.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ReviewCard } from '@/components/review/client/review-card';
+import { ReviewCard } from '@/components/review/server/review-card';
 
 const meta = {
   title: 'Review/ReviewCard',

ui/src/components/review/server/review-card.tsx

@@ -0,0 +1,32 @@
+import Card from '@/components/common/server/card';
+import { ReviewCardBody } from '@/components/review/server/review-card-body';
+import { ReviewCardFooter } from '@/components/review/server/review-card-footer';
+import { ReviewCardHeader } from '@/components/review/server/review-card-header';
+
+import type { Review } from '@/lib/definitions/review';
+
+export function ReviewCard({ review }: { review: Review }) {
+  const { content, createdAt, movieName, nickname, tag, updatedAt, title, replyCount, id } = review;
+
+  return (
+    <Card>
+      <Card.Header>
+        <ReviewCardHeader reviewId={id} title={title} movieName={movieName} />
+      </Card.Header>
+
+      <Card.Body>
+        <ReviewCardBody reviewId={id} content={content} />
+      </Card.Body>
+
+      <Card.Footer>
+        <ReviewCardFooter
+          replyCount={replyCount}
+          createdAt={createdAt}
+          updatedAt={updatedAt}
+          nickname={nickname}
+          tag={tag}
+        />
+      </Card.Footer>
+    </Card>
+  );
+}

ui/src/components/review/server/review-cards-list.tsx

@@ -1,6 +1,6 @@
 import Pagination from '@/components/common/client/pagination';
-import { ReviewCard } from '@/components/review/client/review-card';
 import { NoReview } from '@/components/review/server/no-review';
+import { ReviewCard } from '@/components/review/server/review-card';
 
 import { listReviews } from '@/lib/apis/review/server';
 import type { ListReviewsQuery } from '@/lib/definitions/review';