[feat] 댓글 컴포넌트 제작

Author: jungjunhyung99

src/assets/images/comment_image.png

@@ -0,0 +1,43 @@
+'use client';
+
+import ThreeDot from '@/assets/three_dots.svg';
+import { detailDate } from '@/utils/time';
+import { CommentDropdown } from '@/features/comment/components';
+import { useDropdown } from '@/hooks/useDropdown';
+
+interface CommentCardProps {
+  name: string;
+  text: string;
+  time: Date;
+}
+
+export const CommentCard = ({ name, text, time }: CommentCardProps) => {
+  const { isDropdownOpen, handleToggleDropdown, dropdownRef, triggerRef } =
+    useDropdown();
+
+  const handleClick = (e: React.MouseEvent) => {
+    handleToggleDropdown();
+    e.stopPropagation();
+  };
+  return (
+    <div className='flex flex-col pb-3'>
+      <div className='relative'>
+        <div className='flex justify-between pb-2 text-[12px]'>
+          <div className='flex items-center gap-2'>
+            <span className='text-sm text-gray-800'>{name}</span>
+            <span className='text-xs text-gray-600'>{detailDate(time)}</span>
+          </div>
+          <div ref={triggerRef} onClick={handleClick}>
+            <ThreeDot />
+          </div>
+        </div>
+        {isDropdownOpen && (
+          <div ref={dropdownRef} className='absolute right-0 top-6 z-10'>
+            <CommentDropdown />
+          </div>
+        )}
+      </div>
+      <span className='text-[16px] text-white'>{text}</span>
+    </div>
+  );
+};

src/assets/images/default_profile.png

@@ -0,0 +1 @@
+export { CommentCard } from './CommentCard';

src/assets/images/profile_heart.png

@@ -0,0 +1,54 @@
+'use client';
+
+import DownArrow from '@/assets/down_arrow.svg';
+import TopArrow from '@/assets/top_arrow.svg';
+import { StaticImageData } from 'next/image';
+import { useState } from 'react';
+import Image from 'next/image';
+
+interface FoldableImageProps {
+  spanText: string;
+  images: StaticImageData[];
+}
+
+export const FoldableImage = ({ spanText, images }: FoldableImageProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (images.length <= 3) return null;
+
+  if (isOpen)
+    return (
+      <div className='flex flex-col'>
+        <div className='grid grid-cols-3 gap-[3px]'>
+          {images?.map((image) => (
+            <Image src={image} width={90} height={90} alt='이미지' />
+          ))}
+        </div>
+        <div
+          className='flex cursor-pointer items-center justify-end gap-2'
+          onClick={() => setIsOpen(false)}
+        >
+          접기 <TopArrow />
+        </div>
+      </div>
+    );
+
+  return (
+    <div className='flex flex-col'>
+      <div className='grid grid-cols-3 gap-[3px] pb-2'>
+        {images
+          ?.slice(0, 3)
+          .map((image) => (
+            <Image src={image} width={90} height={90} alt='이미지' />
+          ))}
+      </div>
+      <div
+        className='flex cursor-pointer items-center justify-end gap-2'
+        onClick={() => setIsOpen(true)}
+      >
+        <span>{spanText}</span>
+        <DownArrow />
+      </div>
+    </div>
+  );
+};

src/assets/three_dots.svg

@@ -0,0 +1 @@
+export { FoldableImage } from './FoldableImage';

src/components/molecules/commentCard/CommentCard.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CommentImage from '@/assets/images/comment_image.png';
+import DefaultProfile from '@/assets/images/default_profile.png';
+import { Comment } from './';
+
+const meta: Meta<typeof Comment> = {
+  title: 'Components/Comment',
+  component: Comment,
+};
+
+export default meta;
+type Story = StoryObj<typeof Comment>;
+
+// 기본 카드
+export const Default: Story = {
+  args: {
+    name: '예신',
+    text: '여기 완전 좋다 그치? 여기로 가볼까?',
+    time: new Date(),
+    profile: DefaultProfile,
+    images: [
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+      CommentImage,
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className='w-[350px]'>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/cr2DuY0vceiMI5LlqWdKR2/Wedvice_%EB%94%94%EC%9E%90%EC%9D%B8?node-id=1493-6711&t=C1C6AY6noGiQkf3h-4',
+  },
+};

src/components/molecules/commentCard/index.ts

@@ -0,0 +1,37 @@
+import Image, { StaticImageData } from 'next/image';
+import { FoldableImage } from '../../../components/molecules/foldableSpan';
+import { CommentCard } from '@/components/molecules/commentCard';
+
+interface CommentProps {
+  name: string;
+  profile: StaticImageData;
+  text: string;
+  time: Date;
+  images?: StaticImageData[];
+}
+
+export const Comment = ({
+  name,
+  profile,
+  text,
+  time,
+  images = [],
+}: CommentProps) => {
+  return (
+    <div className='relative w-full p-[20px]'>
+      <div className='flex w-full gap-[12px]'>
+        <div className='w-[44px]'>
+          <Image src={profile} width={44} height={44} alt='프로필' />
+        </div>
+        <div className='flex-1 text-white'>
+          <CommentCard name={name} text={text} time={time} />
+
+          <FoldableImage
+            images={images}
+            spanText={`${images.length - 3}개 더보기`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};