From 386dd5c8374a598a918f924078572a172f49fd76 Mon Sep 17 00:00:00 2001
From: jungjunhyung99 <55770796+jungjunhyung99@users.noreply.github.com>
Date: Mon, 24 Mar 2025 23:52:50 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EB=8C=93=EA=B8=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/comment_image.png           | Bin 0 -> 14767 bytes
 src/assets/images/default_profile.png         | Bin 0 -> 3909 bytes
 src/assets/images/profile_heart.png           | Bin 0 -> 2342 bytes
 src/assets/three_dots.svg                     |   5 ++
 .../molecules/commentCard/CommentCard.tsx     |  47 +++++++++++++++
 src/components/molecules/commentCard/index.ts |   1 +
 .../molecules/foldableSpan/FoldableImage.tsx  |  54 ++++++++++++++++++
 .../molecules/foldableSpan/index.ts           |   1 +
 .../comment/components/Comment.stories.tsx    |  47 +++++++++++++++
 src/features/comment/components/Comment.tsx   |  37 ++++++++++++
 .../comment/components/CommentDropdown.tsx    |   9 +++
 src/features/comment/components/index.ts      |   2 +
 src/hooks/useDropdown.ts                      |  36 ++++++++++++
 src/utils/time.ts                             |  19 ++++++
 14 files changed, 258 insertions(+)
 create mode 100644 src/assets/images/comment_image.png
 create mode 100644 src/assets/images/default_profile.png
 create mode 100644 src/assets/images/profile_heart.png
 create mode 100644 src/assets/three_dots.svg
 create mode 100644 src/components/molecules/commentCard/CommentCard.tsx
 create mode 100644 src/components/molecules/commentCard/index.ts
 create mode 100644 src/components/molecules/foldableSpan/FoldableImage.tsx
 create mode 100644 src/components/molecules/foldableSpan/index.ts
 create mode 100644 src/features/comment/components/Comment.stories.tsx
 create mode 100644 src/features/comment/components/Comment.tsx
 create mode 100644 src/features/comment/components/CommentDropdown.tsx
 create mode 100644 src/features/comment/components/index.ts
 create mode 100644 src/hooks/useDropdown.ts

diff --git a/src/assets/images/comment_image.png b/src/assets/images/comment_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9e3f09b6c8c1e2bee7dc3a798e42d980706d70c
GIT binary patch
literal 14767
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
JPDHLkV1lw7v~2(Y

literal 0
HcmV?d00001

diff --git a/src/assets/images/default_profile.png b/src/assets/images/default_profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..57f68fc840e5fa115b5b25a7dbcbf6172b7a319d
GIT binary patch
literal 3909
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
Tdtg(I00000NkvXXu0mjfMNmR_

literal 0
HcmV?d00001

diff --git a/src/assets/images/profile_heart.png b/src/assets/images/profile_heart.png
new file mode 100644
index 0000000000000000000000000000000000000000..409f19c7b950961819bd040032a9e40c0a513242
GIT binary patch
literal 2342
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
M07*qoM6N<$f`3VE>;M1&

literal 0
HcmV?d00001

diff --git a/src/assets/three_dots.svg b/src/assets/three_dots.svg
new file mode 100644
index 0000000..b86fbc4
--- /dev/null
+++ b/src/assets/three_dots.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.5" cy="10" r="1.5" fill="#A9AABC"/>
+<circle cx="10" cy="10" r="1.5" fill="#A9AABC"/>
+<circle cx="16.5" cy="10" r="1.5" fill="#A9AABC"/>
+</svg>
diff --git a/src/components/molecules/commentCard/CommentCard.tsx b/src/components/molecules/commentCard/CommentCard.tsx
new file mode 100644
index 0000000..71aa721
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/molecules/commentCard/index.ts b/src/components/molecules/commentCard/index.ts
new file mode 100644
index 0000000..5d20360
--- /dev/null
+++ b/src/components/molecules/commentCard/index.ts
@@ -0,0 +1 @@
+export { CommentCard } from './CommentCard';
diff --git a/src/components/molecules/foldableSpan/FoldableImage.tsx b/src/components/molecules/foldableSpan/FoldableImage.tsx
new file mode 100644
index 0000000..73d6fa3
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/molecules/foldableSpan/index.ts b/src/components/molecules/foldableSpan/index.ts
new file mode 100644
index 0000000..e66af13
--- /dev/null
+++ b/src/components/molecules/foldableSpan/index.ts
@@ -0,0 +1 @@
+export { FoldableImage } from './FoldableImage';
diff --git a/src/features/comment/components/Comment.stories.tsx b/src/features/comment/components/Comment.stories.tsx
new file mode 100644
index 0000000..064b198
--- /dev/null
+++ b/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',
+  },
+};
diff --git a/src/features/comment/components/Comment.tsx b/src/features/comment/components/Comment.tsx
new file mode 100644
index 0000000..a45f0e1
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/features/comment/components/CommentDropdown.tsx b/src/features/comment/components/CommentDropdown.tsx
new file mode 100644
index 0000000..beb4eb2
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/features/comment/components/index.ts b/src/features/comment/components/index.ts
new file mode 100644
index 0000000..5cbc54c
--- /dev/null
+++ b/src/features/comment/components/index.ts
@@ -0,0 +1,2 @@
+export { CommentDropdown } from './CommentDropdown';
+export { Comment } from './Comment';
diff --git a/src/hooks/useDropdown.ts b/src/hooks/useDropdown.ts
new file mode 100644
index 0000000..4d4aff2
--- /dev/null
+++ b/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 };
+};
diff --git a/src/utils/time.ts b/src/utils/time.ts
index e2c6928..197721e 100644
--- a/src/utils/time.ts
+++ b/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)}년 전`;
+};