Merge pull request #43 from wafflestudio/27-feature-posts_uploader_info

Author: kimnamheeee

src/components/post/PostInfoSection.tsx

@@ -1,21 +1,37 @@
+import { useState } from 'react'
+import { MoreHorizontal } from 'lucide-react'
 import type { PostData } from './PostDetail'
+import PostMenuModal from './PostMenuModal'
 
 interface PostInfoSectionProps {
   data: PostData | null
 }
 
 export default function PostInfoSection({ data }: PostInfoSectionProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
   return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center gap-3 border-b border-gray-200 p-4">
-        <img
-          src={data?.userImage || 'https://via.placeholder.com/32'}
-          className="h-8 w-8 rounded-full object-cover"
-          alt="profile"
-        />
-        <div className="text-sm font-semibold text-black">
-          {data?.username || 'loading...'}
+    <div className="flex h-full flex-col bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 p-4">
+        <div className="flex items-center gap-3">
+          <img
+            src={data?.userImage || 'https://via.placeholder.com/32'}
+            className="h-8 w-8 rounded-full object-cover"
+            alt="profile"
+          />
+          <div className="flex flex-col">
+            <div className="text-sm font-semibold text-black">
+              {data?.username || 'loading...'}
+            </div>
+          </div>
         </div>
+
+        <button
+          onClick={() => setIsModalOpen(true)}
+          className="p-1 transition-opacity hover:opacity-50"
+        >
+          <MoreHorizontal className="h-6 w-6 text-black" />
+        </button>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4">
@@ -27,19 +43,23 @@ export default function PostInfoSection({ data }: PostInfoSectionProps) {
           />
           <div className="text-sm text-black">
             <span className="mr-2 font-semibold">{data?.username}</span>
-            {data?.caption}
+            <span className="whitespace-pre-wrap">{data?.caption}</span>
+            <div className="mt-2 text-xs text-gray-500">
+              {data?.createdAt
+                ? new Date(data.createdAt).toLocaleDateString()
+                : ''}
+            </div>
           </div>
         </div>
       </div>
 
       <div className="border-t border-gray-200 p-4 text-black">
-        <div className="mb-1 text-sm font-semibold">
-          좋아요 {data?.likeCount?.toLocaleString() || 0}개
-        </div>
         <div className="text-[10px] text-gray-500 uppercase">
           {data?.createdAt ? new Date(data.createdAt).toLocaleDateString() : ''}
         </div>
       </div>
+
+      {isModalOpen && <PostMenuModal onClose={() => setIsModalOpen(false)} />}
     </div>
   )
 }

src/components/post/PostMenuModal.tsx

@@ -0,0 +1,43 @@
+interface PostMenuModalProps {
+  onClose: () => void
+}
+
+export default function PostMenuModal({ onClose }: PostMenuModalProps) {
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4">
+      <div
+        className="w-full max-w-[550px] overflow-hidden rounded-[32px] bg-white text-center text-[14px]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button className="w-full border-b border-gray-200 py-3 font-bold text-red-500 transition-colors active:bg-gray-100">
+          신고
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 font-bold text-red-500 transition-colors active:bg-gray-100">
+          팔로우 취소
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 transition-colors active:bg-gray-100">
+          게시물로 이동
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 transition-colors active:bg-gray-100">
+          공유 대상...
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 transition-colors active:bg-gray-100">
+          링크 복사
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 transition-colors active:bg-gray-100">
+          퍼가기
+        </button>
+        <button className="w-full border-b border-gray-200 py-3 transition-colors active:bg-gray-100">
+          이 계정 정보
+        </button>
+        <button
+          onClick={onClose}
+          className="w-full py-3 transition-colors active:bg-gray-100"
+        >
+          취소
+        </button>
+      </div>
+      <div className="absolute inset-0 -z-10" onClick={onClose} />
+    </div>
+  )
+}