fix

src/app/my-page/page.tsx

@@ -7,13 +7,15 @@ import { GradeIcon, getGradeName } from "@/app/components/GradeIcon";
 import { HeroBanner } from "@/app/components/HeroBanner";
 import { PostList } from "@/app/components/PostList";
 import ProfileLabelIcon from "@/app/svgs/profilelableicon";
-import { ProfileImageEditor } from "@/app/components/ProfileImageEditor";
-export default async function MyPage({ searchParams }: { searchParams: Promise<{ tab?: string; page?: string; sort?: string; q?: string }> }) {
+import { ProfileEditTrigger } from "@/app/components/ProfileEditTrigger";
+import { SendMessageForm } from "@/app/components/SendMessageForm";
+export default async function MyPage({ searchParams }: { searchParams: Promise<{ tab?: string; page?: string; sort?: string; q?: string; to?: string }> }) {
   const sp = await searchParams;
   const activeTab = sp?.tab || "posts";
   const page = parseInt(sp?.page || "1", 10);
   const sort = sp?.sort || "recent";
   const q = sp?.q || "";
+  const toUserId = sp?.to || "";
 
   // 현재 로그인한 사용자 정보 가져오기
   let currentUser: {
@@ -123,11 +125,7 @@ export default async function MyPage({ searchParams }: { searchParams: Promise<{
               {/* 닉네임 */}
               <div className="flex items-center gap-[4px]">
                 <span className="text-[20px] font-bold text-[#5c5c5c] truncate max-w-[200px]">{currentUser.nickname || "사용자"}</span>
-                <button className="w-[20px] h-[20px] shrink-0">
-                  <svg width="20" height="20" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1.05882 10.9412H1.94929L9.17506 3.71541L8.28459 2.82494L1.05882 10.0507V10.9412ZM0.638118 12C0.457294 12 0.305765 11.9388 0.183529 11.8165C0.0611764 11.6942 0 11.5427 0 11.3619V10.1389C0 9.96682 0.0330587 9.80277 0.0991764 9.64677C0.165176 9.49077 0.256118 9.35483 0.372 9.23894L9.31094 0.304058C9.41765 0.207117 9.53547 0.132235 9.66441 0.0794118C9.79347 0.0264706 9.92877 0 10.0703 0C10.2118 0 10.3489 0.025118 10.4815 0.0753533C10.6142 0.125589 10.7316 0.20547 10.8339 0.315L11.6959 1.18782C11.8055 1.29006 11.8835 1.40771 11.9301 1.54076C11.9767 1.67382 12 1.80688 12 1.93994C12 2.08194 11.9758 2.21741 11.9273 2.34635C11.8788 2.47541 11.8017 2.59329 11.6959 2.7L2.76106 11.628C2.64518 11.7439 2.50924 11.8348 2.35324 11.9008C2.19724 11.9669 2.03318 12 1.86106 12H0.638118ZM8.72206 3.27794L8.28459 2.82494L9.17506 3.71541L8.72206 3.27794Z" fill="#707070"/>
-                  </svg>
-                </button>
+                <ProfileEditTrigger initialProfileImageUrl={currentUser.profileImage || null} />
               </div>
               {/* 관리자 설정 버튼 */}
               {"isAdmin" in (currentUser as any) && (currentUser as any).isAdmin && (
@@ -141,8 +139,7 @@ export default async function MyPage({ searchParams }: { searchParams: Promise<{
                 </div>
               )}
             </div>
-            {/* 프로필 이미지 편집 */}
-            <ProfileImageEditor initialUrl={currentUser.profileImage || null} />
+            {/* 프로필 수정은 연필 아이콘(모달)에서 처리 */}
             {/* 레벨/등급/포인트 정보 - 가로 배치 */}
             <div className="flex gap-3 md:gap-[16px] items-center justify-center">
               <div className="flex items-center gap-[4px] min-w-0">
@@ -277,16 +274,71 @@ export default async function MyPage({ searchParams }: { searchParams: Promise<{
             </div>
           );
         })()}
-        {activeTab === "messages-received" && (
-          <div className="bg-white rounded-[24px] p-4">
-            <div className="text-center text-neutral-500 py-10">받은 쪽지함 기능은 준비 중입니다.</div>
-          </div>
-        )}
-        {activeTab === "messages-sent" && (
-          <div className="bg-white rounded-[24px] p-4">
-            <div className="text-center text-neutral-500 py-10">보낸 쪽지함 기능은 준비 중입니다.</div>
-          </div>
-        )}
+        {activeTab === "messages-received" && (async () => {
+          const pageSize = 20;
+          const messages = await prisma.message.findMany({
+            where: { receiverId: currentUser.userId },
+            orderBy: { createdAt: "desc" },
+            take: pageSize,
+            skip: (page - 1) * pageSize,
+            select: { id: true, body: true, createdAt: true, sender: { select: { userId: true, nickname: true } } },
+          });
+          return (
+            <div className="bg-white rounded-[24px] p-4">
+              <ul className="divide-y divide-neutral-200">
+                {messages.map((m) => (
+                  <li key={m.id} className="py-3 flex items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm text-neutral-800">
+                        <Link href={`/users/${m.sender.userId}`} className="font-semibold hover:underline">{m.sender.nickname || "알 수 없음"}</Link>
+                        <span className="text-xs text-neutral-500 ml-2">{new Date(m.createdAt).toLocaleString()}</span>
+                      </div>
+                      <div className="text-sm text-neutral-700 mt-1 whitespace-pre-wrap break-words">{m.body}</div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })()}
+        {activeTab === "messages-sent" && (async () => {
+          const pageSize = 20;
+          const receiver = toUserId ? await prisma.user.findUnique({ where: { userId: toUserId }, select: { userId: true, nickname: true } }) : null;
+          const messages = await prisma.message.findMany({
+            where: { senderId: currentUser.userId },
+            orderBy: { createdAt: "desc" },
+            take: pageSize,
+            skip: (page - 1) * pageSize,
+            select: { id: true, body: true, createdAt: true, receiver: { select: { userId: true, nickname: true } } },
+          });
+          return (
+            <div className="bg-white rounded-[24px] p-4 space-y-6">
+              {receiver ? (
+                <div className="border border-neutral-200 rounded-md p-3">
+                  <SendMessageForm receiverId={receiver.userId} receiverNickname={receiver.nickname} />
+                </div>
+              ) : (
+                <div className="text-sm text-neutral-500">닉네임 메뉴에서 ‘쪽지쓰기’를 클릭하면 작성 폼이 나타납니다.</div>
+              )}
+              <div>
+                <h3 className="text-sm font-semibold text-neutral-900 mb-2">보낸 쪽지</h3>
+                <ul className="divide-y divide-neutral-200">
+                  {messages.map((m) => (
+                    <li key={m.id} className="py-3 flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm text-neutral-800">
+                          <Link href={`/users/${m.receiver.userId}`} className="font-semibold hover:underline">{m.receiver.nickname || "알 수 없음"}</Link>
+                          <span className="text-xs text-neutral-500 ml-2">{new Date(m.createdAt).toLocaleString()}</span>
+                        </div>
+                        <div className="text-sm text-neutral-700 mt-1 whitespace-pre-wrap break-words">{m.body}</div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          );
+        })()}
       </section>
     </div>
   );