[feat] 댓글 컴포넌트 제작

src/components/molecules/commentCard/CommentCard.tsx

@@ -0,0 +1,47 @@
+'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}
+            className='cursor-pointer'
+          >
+            <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/components/molecules/commentCard/index.ts

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

src/components/molecules/foldableSpan/FoldableImage.tsx

@@ -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/components/molecules/foldableSpan/index.ts

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

src/features/comment/components/Comment.stories.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/features/comment/components/Comment.tsx

@@ -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>
+  );
+};

src/features/comment/components/CommentDropdown.tsx

@@ -0,0 +1,9 @@
+export const CommentDropdown = () => {
+  return (
+    <div className='h-25 absolute right-0 top-4 w-28 rounded-md bg-gray-200 font-pretendard text-white shadow-lg'>
+      <button className='w-full py-3 text-center'>수정하기</button>
+      <div className='border-[1px] border-gray-300' />
+      <button className='w-full py-3 text-center'>삭제하기</button>
+    </div>
+  );
+};

src/features/comment/components/index.ts

@@ -0,0 +1,2 @@
+export { CommentDropdown } from './CommentDropdown';
+export { Comment } from './Comment';

src/hooks/useDropdown.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useDropdown = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  const handleToggleDropdown = (e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
+    setIsDropdownOpen((prev) => !prev);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // 여기 조건문을 통해 클릭한 영역이 ThreeDot이 아니면 dropdown 컴포넌트가 사라지도록 만듭니다.
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+
+  return { isDropdownOpen, handleToggleDropdown, dropdownRef, triggerRef };
+};

src/utils/time.ts

@@ -26,3 +26,22 @@ export const getFormattedYearMonth = (time: string) => {
 
   return `${year}년 ${month}월`;
 };
+
+export const detailDate = (pastTime: Date) => {
+  const milliSeconds =
+    new Date().getMilliseconds() - pastTime.getMilliseconds();
+  const seconds = milliSeconds / 1000;
+  if (seconds < 60) return `방금 전`;
+  const minutes = seconds / 60;
+  if (minutes < 60) return `${Math.floor(minutes)}분 전`;
+  const hours = minutes / 60;
+  if (hours < 24) return `${Math.floor(hours)}시간 전`;
+  const days = hours / 24;
+  if (days < 7) return `${Math.floor(days)}일 전`;
+  const weeks = days / 7;
+  if (weeks < 5) return `${Math.floor(weeks)}주 전`;
+  const months = days / 30;
+  if (months < 12) return `${Math.floor(months)}개월 전`;
+  const years = days / 365;
+  return `${Math.floor(years)}년 전`;
+};