Feature/mypage flow#103

app/(afterLogin)/mypage/MypageActivity.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { LikedPrompt, MyPrompt } from "@/app/types/type";
+import {
+  LikedArticleCard,
+  MyArticleCard,
+} from "@/components/mypage/articleCard";
+import { toasts } from "@/components/shared/toast";
+import { cn } from "@/lib/utils";
+
+export default function MypageActivitySection() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const activeSub = searchParams.get("sub") || "liked";
+
+  const handleSubTabChange = (sub: "liked" | "posted") => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("sub", sub);
+    router.push(`/mypage?${params.toString()}`, { scroll: false });
+  };
+
+  const handleCopy = async (e: React.MouseEvent, content: string) => {
+    e.stopPropagation(); // 카드의 onClick이 실행되지 않도록 차단
+    try {
+      await navigator.clipboard.writeText(content);
+      toasts.success("프롬프트가 클립보드에 복사되었습니다!");
+    } catch {
+      alert("복사에 실패했습니다.");
+    }
+  };
+
+  const handleCardClick = (id: number) => {
+    router.push(`/prompts/${id}`);
+  };
+
+  // 실제 API 데이터 구조에 맞춘 임시 데이터
+  // 1. 좋아요 한 프롬프트 데이터
+  const mockLikedPrompts = [
+    {
+      promptId: 1024,
+      title: "좋아요 - 자소서를 위한 GPT 프롬프트",
+      description: "이 프롬프트는 좋아요 탭에서만 보입니다.",
+      isLiked: true,
+    },
+    {
+      promptId: 1025,
+      title: "좋아요 - 면접 대비 프롬프트",
+      description: "상세한 설명이 들어가는 영역입니다.",
+      isLiked: true,
+    },
+  ];
+
+  // 2. 내가 게시한 프롬프트 데이터 (createdAt 포함)
+  const mockMyPrompts = [
+    {
+      promptId: 2048,
+      title: "게시글 - 나만의 비밀 프롬프트",
+      description: "내가 직접 작성해서 게시한 프롬프트입니다.",
+      createdAt: "2026-02-18T10:00:00", // n시간 전/일 전 테스트용
+    },
+    {
+      promptId: 2049,
+      title: "게시글 - 효율적인 코딩 프롬프트",
+      description: "코딩 효율을 200% 높여주는 마법의 문장들.",
+      createdAt: "2026-01-20T13:50:00",
+    },
+  ];
+  const currentList = activeSub === "liked" ? mockLikedPrompts : mockMyPrompts;
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      {/* 서브 탭 메뉴 */}
+      <div className="flex w-full bg-gray-0 border border-gray-100 rounded-[8px] overflow-hidden p-1 shadow-sm">
+        <button
+          onClick={() => handleSubTabChange("liked")}
+          className={cn(
+            "flex-1 py-2.5 label-medium !font-bold transition-all rounded-[6px]",
+            activeSub === "liked"
+              ? "bg-blue-600 text-gray-0 shadow-sm"
+              : "text-gray-500 hover:bg-gray-50"
+          )}
+        >
+          좋아요한 프롬프트
+        </button>
+        <button
+          onClick={() => handleSubTabChange("posted")}
+          className={cn(
+            "flex-1 py-2.5 label-medium !font-bold transition-all rounded-[6px]",
+            activeSub === "posted"
+              ? "bg-blue-600 text-gray-0 shadow-sm"
+              : "text-gray-500 hover:bg-gray-50"
+          )}
+        >
+          게시한 프롬프트
+        </button>
+      </div>
+
+      {/* 리스트 영역 */}
+      <div className="flex flex-col gap-4">
+        {activeSub === "liked"
+          ? (mockLikedPrompts as LikedPrompt[]).map((prompt) => (
+              <LikedArticleCard
+                key={prompt.promptId}
+                title={prompt.title}
+                content={prompt.description}
+                onCopy={(e) => handleCopy(e, prompt.description)}
+                onClick={() => handleCardClick(prompt.promptId)}
+              />
+            ))
+          : (mockMyPrompts as MyPrompt[]).map((prompt) => (
+              <MyArticleCard
+                key={prompt.promptId}
+                title={prompt.title}
+                content={prompt.description}
+                createdAt={prompt.createdAt}
+                onClick={() => handleCardClick(prompt.promptId)}
+              />
+            ))}
+      </div>
+    </div>
+  );
+}

app/(afterLogin)/mypage/MypageLeftSection.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import UserProfile from "@/components/mypage/user-profile";
+import { BaseButton } from "@/components/shared/button";
+
+interface UserData {
+  nickname: string;
+  email: string;
+  profileImage: string;
+  introduction: string;
+  provider: "KAKAO" | "NAVER";
+}
+
+export default function MypageLeftSection() {
+  const router = useRouter();
+  const [userData, setUserData] = useState<UserData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadUserData = async () => {
+      try {
+        //나중에 다른것들처럼 mock api생성 후 연결 예정
+        // 테스트용 더미 데이터
+        setUserData({
+          nickname: "개구리",
+          email: "frog@example.com",
+          profileImage: "",
+          introduction: "반갑습니다!",
+          provider: "KAKAO",
+        });
+      } catch (error) {
+        console.error("유저 정보 로드 실패:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadUserData();
+  }, []);
+
+  const handleLogout = async () => {
+    if (confirm("로그아웃 하시겠습니까?")) {
+      try {
+        //로그아웃 호출
+
+        alert("로그아웃 되었습니다.");
+        router.push("/"); //로그아웃되고 어느 페이지로 이동?
+        router.refresh();
+      } catch (error) {
+        console.error("Logout failed:", error);
+      }
+    }
+  };
+
+  if (isLoading) return <div>로딩 중...</div>;
+  if (!userData) return <div>유저 정보가 없습니다.</div>;
+
+  const handleWithdraw = async () => {
+    const isConfirmed = confirm(
+      "정말로 탈퇴하시겠습니까?\n탈퇴 시 모든 데이터가 삭제되며 복구할 수 없습니다."
+    );
+
+    if (isConfirmed) {
+      try {
+        // 탈퇴 기능 호출
+        alert("회원 탈퇴가 완료되었습니다.");
+        router.push("/");
+      } catch (error) {
+        alert("탈퇴 처리 중 오류가 발생했습니다.");
+      }
+    }
+  };
+  return (
+    <div className="flex flex-col gap-5">
+      <UserProfile
+        nickname={userData.nickname}
+        email={userData.email}
+        profileImage={userData.profileImage}
+        provider={userData.provider}
+        introduction={userData.introduction}
+      />
+
+      <BaseButton
+        onClick={handleLogout}
+        variant={"secondary"}
+        className="bg-gray-0"
+      >
+        로그아웃
+      </BaseButton>
+
+      <button onClick={handleWithdraw} className="text-error">
+        계정 탈퇴
+      </button>
+    </div>
+  );
+}