Merge pull request #109 from Ureca-Mini-Project-Team4/feature/comment

FEAT: #108 Comment 수정 및 import react 제거

Author: abyss-s

react-app/src/components/Comment/Comment.tsx

@@ -1,4 +1,5 @@
 import Profile from '../Profile/Profile';
+import { Dropdown } from './Dropdown';
 
 interface CommentProps {
   nickname: string | null;
@@ -8,13 +9,18 @@ interface CommentProps {
 const Comment = ({ nickname, comment }: CommentProps) => {
   return (
     <div className="w-[300px] pt-[5px] pb-[5px] h-auto sm:w-[450px] flex flex-initial rounded-xl sm:rounded-2xl border-solid border-[1px] border-gray-100 items-center">
-      <div className="flex gap-[10px] pl-3 pr-3 items-center">
-        <div className="h-full flex items-start">
-          <Profile nickname={nickname} />
+      <div className="flex justify-between w-full">
+        <div className="flex gap-[10px] pl-3 pr-3 items-center">
+          <div className="h-full flex items-start">
+            <Profile nickname={nickname} />
+          </div>
+          <div className="font-pm flex flex-col gap-[5px]">
+            <div className="text-[8px] sm:text-[12px] text-gray-600 mt-[5px]">{nickname}</div>
+            <div className="text-[10px] sm:text-[15px] mb-[5px]">{comment}</div>
+          </div>
         </div>
-        <div className="font-pm flex flex-col gap-[5px]">
-          <div className="text-[8px] sm:text-[12px] text-gray-600 mt-[5px]">{nickname}</div>
-          <div className="text-[10px] sm:text-[15px] mb-[5px]">{comment}</div>
+        <div className="pr-3 flex items-center">
+          <Dropdown data={['수정', '삭제']} />
         </div>
       </div>
     </div>

react-app/src/components/Comment/Dropdown.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface DropdownProps {
+  data: string[];
+}
+
+export const Dropdown = ({ data }: DropdownProps) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
+        setShowOptions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={selectRef}>
+      <div className="items-center cursor-pointer" onClick={() => setShowOptions((prev) => !prev)}>
+        <p className="text-gray-500 text-lg">…</p>
+      </div>
+      {showOptions && (
+        <ul className="absolute z-1 flex flex-col bg-white border border-gray-300 rounded-md">
+          {data.map((item, index) => (
+            <li
+              key={index}
+              className="w-fit font-pm text-xs sm:text-sm pt-1.5 pb-1.5 pl-2 pr-2 text-center text-gray-600 hover:bg-blue-600 hover:text-white cursor-pointer rounded-md transition"
+            >
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

react-app/src/components/Winner/Winner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { WinnerProps } from './Winner.types';
 
 const Winner = ({ name, question }: WinnerProps) => {