MBTips · Soohyuniii · Apr 24, 2025 · Apr 10, 2025 · Apr 14, 2025 · Apr 14, 2025
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/public/icon/close.svg b/public/icon/close.svg
diff --git a/public/icon/error.svg b/public/icon/error.svg
diff --git a/public/icon/kakaotalk.svg b/public/icon/kakaotalk.svg
diff --git a/public/icon/twitter.svg b/public/icon/twitter.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,42 +20,43 @@ import MbtiTestQuestions from "@/pages/MbtiTestQuestions";
 import MbtiTestResult from "@/pages/MbtiTestResult";
 import CenteredLayout from "@/components/CenteredLayout";
 import { initGA, trackPageView } from "@/libs/analytics";
+import Error from "@/pages/Error";
 
 const PageTracker = () => {
   const location = useLocation();
   const { pathname, state } = location;
 
   const trackedPaths = [
-    { path: "/", page: "홈", element: "" },
-    { path: "/login", page: "로그인/회원가입", element: "로그인" },
-    { path: "/contents", page: "일반콘텐츠", element: "" },
-    { path: "/my-info", page: "내 정보", element: "" },
-    { path: "/chat", page: "채팅방", element: "" },
-    { path: "/select-info", page: "빠른 대화 설정", element: "" },
-    { path: "/select-info", page: "친구 저장", element: "대화 시작하기" }
+    { path: "/", page: "홈" },
+    { path: "/login", page: "로그인/회원가입" },
+    { path: "/contents", page: "일반콘텐츠" },
+    { path: "/my-info", page: "내 정보" },
+    { path: "/chat", page: "채팅방" },
+    { path: "/select-info", page: "빠른 대화 설정" },
+    { path: "/select-info", page: "친구 저장" }
   ];
 
   useEffect(() => {
     const trackedContentPaths = ["/contents/1", "/contents/2"];
 
-    trackedPaths.forEach(({ path, page, element }) => {
+    trackedPaths.forEach(({ path, page }) => {
       // 콘텐츠 상세 페이지 (일반 콘텐츠만 추적)
       if (trackedContentPaths.includes(pathname)) {
         if (path === "/contents") {
-          trackPageView(path, { page, element });
+          trackPageView(path, page);
         }
       }
       // select-info 페이지에서 state로 분기
       else if (pathname === "/select-info" && path === pathname) {
         if (state === "fastFriend" && page === "빠른 대화 설정") {
-          trackPageView(path, { page, element });
+          trackPageView(path, page);
         } else if (state === "virtualFriend" && page === "친구 저장") {
-          trackPageView(path, { page, element });
+          trackPageView(path, page);
         }
       }
       // 나머지 일반 path
       else if (pathname === path && path !== "/select-info") {
-        trackPageView(path, { page, element });
+        trackPageView(path, page);
       }
     });
   }, [location.pathname, location.state]);
@@ -77,16 +78,23 @@ const App = () => {
           <Route path="/" element={<Home />} />
           <Route path="/select-info" element={<SelectInfo />} />
           <Route path="/chat" element={<Chat />} />
-          <Route path="/chat-recommend" element={<ChatRecommend />} />
-          <Route path="/chat-tips" element={<ChatTips />} />
-          <Route path="/chat-temporature" element={<ChatTemporature />} />
+          <Route
+            path="/chat-recommend/:virtualFriendId"
+            element={<ChatRecommend />}
+          />
+          <Route path="/chat-tips/:virtualFriendId" element={<ChatTips />} />
+          <Route
+            path="/chat-temporature/:conversationId"
+            element={<ChatTemporature />}
+          />
           <Route path="/contents/:id" element={<Content />} />
           <Route path="/login" element={<Login />} />
           <Route path="/my-info" element={<MyInfo />} />
           <Route path="/kakao-login" element={<KaKaoLogin />} />
-          <Route path="/mbti-test" element={<MbtiTestIntro />} />     
+          <Route path="/mbti-test" element={<MbtiTestIntro />} />
           <Route path="/mbti-test-progress" element={<MbtiTestQuestions />} />
           <Route path="/mbti-test-result" element={<MbtiTestResult />} />
+          <Route path="*" element={<Error statusCode="500" />} />
         </Routes>
       </CenteredLayout>
     </Router>

diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import useAuthStore from "@/store/useAuthStore";
 
 const instance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -8,4 +9,33 @@ const instance = axios.create({
   }
 });
 
+// 인증 절차가 필요한 API는 authInstance로 HTTP요청
+const authInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+
+// authInstance 헤더에 accessToken 추가하는 로직
+authInstance.interceptors.request.use(
+  (config) => {
+    if (!config.headers) {
+      config.headers = {};
+    }
+
+    const { accessToken } = useAuthStore.getState();
+
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
 export default instance;
+export { authInstance };
diff --git a/src/api/user.ts b/src/api/user.ts
@@ -0,0 +1,6 @@
+import { authInstance } from "@/api/axios";
+
+export const deleteUser = async () => {
+  const response = await authInstance.delete("/api/users");
+  return response.data;
+};
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { cls } from "@/utils/cls";
 import Indicator from "@/components/Indicator";
+import { trackEvent } from "@/libs/analytics";
 
 interface BannerImage {
   sm: string;
@@ -28,12 +29,14 @@ const bannerImages: BannerImage[] = [
     md: "/image/home_banner3_md.png",
     lg: "/image/home_banner3_lg.png",
     description: "MBTI별 피해야 할 대화스타일 및 주제"
-  },
+  }
 ];
 
 const Banner = () => {
   const [order, setOrder] = useState<number>(0);
 
+  const bannerEventElements = ["배너 1", "배너 2", "배너 3"];
+
   useEffect(() => {
     const interval = setInterval(() => {
       setOrder((prev) => (prev + 1) % bannerImages.length);
@@ -43,18 +46,33 @@ const Banner = () => {
 
   return (
     <div className="relative flex h-[184px] w-full">
-      <Link to={order === 0 ? "/mbti-test" : `/contents/${order}`} className="absolute w-full h-full">
+      <Link
+        to={order === 0 ? "/mbti-test" : `/contents/${order}`}
+        className="absolute h-full w-full"
+        onClick={() => {
+          if (bannerEventElements[order]) {
+            trackEvent("Click", {
+              page: "홈",
+              element: bannerEventElements[order]
+            });
+          }
+        }}
+      >
         {bannerImages.map((image, index) => (
           <picture
             key={index}
             className={cls(
-              "absolute transition-opacity duration-500 w-full h-full",
+              "absolute h-full w-full transition-opacity duration-500",
               order === index ? "opacity-100" : "opacity-0"
             )}
           >
             <source media="(min-width: 500px)" srcSet={image.lg} />
             <source media="(min-width: 375px)" srcSet={image.md} />
-            <img src={image.sm} alt={image.description} className="w-full h-full object-cover" />
+            <img
+              src={image.sm}
+              alt={image.description}
+              className="h-full w-full object-cover"
+            />
           </picture>
         ))}
       </Link>

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -1,31 +1,68 @@
-const Profile = () => {
-  return (
-    <div className="w-[157px] h-[192px] bg-white rounded-[8px] overflow-hidden relative border border-[#EEEEEE]">
-      <img
-        src="/public/icon/dustbin.svg"
-        alt="Delete"
-        className="absolute top-3 right-3 w-5 h-5 cursor-pointer"
-        width={16}
-        height={16}
-      />
+import { SetStateAction } from "react";
+import { useNavigate } from "react-router-dom";
+import { authInstance } from "@/api/axios";
+import { VirtualFriend } from "@/types/virtualFreind";
+
+interface ProfileProps {
+  info: VirtualFriend;
+  deleteIndex: number;
+  setVirtualFriendList: React.Dispatch<SetStateAction<VirtualFriend[]>>;
+}
+const Profile = ({ info, deleteIndex, setVirtualFriendList }: ProfileProps) => {
+  const navigate = useNavigate();
+
+  const handleDelete = async () => {
+    const res = await authInstance.delete(
+      `/api/virtual-friend/${info.virtualFriendId}`
+    );
+    if (res.status === 200) {
+      setVirtualFriendList((prevList) =>
+        prevList.filter((_, index) => index !== deleteIndex)
+      );
+    }
+  };
 
+  const handleNavigate = () => {
+    navigate("/chat", {
+      state: {
+        mode: "virtualFriend",
+        mbti: info.mbti,
+        id: info.virtualFriendId
+      }
+    });
+  };
+
+  return (
+    <div className="relative h-[192px] w-[157px] overflow-hidden rounded-[8px] border border-[#EEEEEE] bg-white lg:w-[200px]">
+      <button onClick={handleDelete}>
+        <img
+          src="/public/icon/dustbin.svg"
+          alt="Delete"
+          className="absolute top-3 right-3 h-5 w-5 cursor-pointer"
+          width={16}
+          height={16}
+        />
+      </button>
       <img
-        src="/public/image/ENTP.png"
+        src={`/public/image/${info.mbti}_profile.png`}
         alt="Profile"
-        className="absolute top-[12px] left-[11px] w-12 h-12 object-cover rounded-full"
+        className="absolute top-[12px] left-[11px] h-12 w-12 rounded-full object-cover"
       />
 
-      <div className="pt-[69px] px-4">
-        <h2 className="text-base flex items-center space-x-1">
-          <span className="font-bold">김엠비</span>
-          <span className="font-light text-gray-600">ENTP</span>
+      <div className="px-4 pt-[69px]">
+        <h2 className="flex items-center space-x-1 text-base">
+          <span className="font-bold">{info.virtualFriendName}</span>
+          <span className="font-light text-gray-600">{info.mbti}</span>
         </h2>
-        <p className="text-xs text-gray-600 mt-2 font-light">
-          20대 · 여자 · 직장동료 · 여행 · 사회생활
+        <p className="mt-2 text-xs font-light text-gray-600">
+          {info.virtualFriendAge} · {info.virtualFriendSex} ·{" "}
+          {info.virtualFriendRelationship}
         </p>
       </div>
-
-      <button className="w-full h-[41px] bg-primary-pale text-primary-normal font-bold py-2 text-sm absolute bottom-0">
+      <button
+        className="absolute bottom-0 h-[41px] w-full bg-primary-pale py-2 text-sm font-bold text-primary-normal"
+        onClick={handleNavigate}
+      >
         바로 대화하기
       </button>
     </div>

diff --git a/src/components/ProfileContainer.tsx b/src/components/ProfileContainer.tsx
@@ -0,0 +1,27 @@
+import Profile from "@/components/Profile";
+import { VirtualFriend } from "@/types/virtualFreind";
+import { SetStateAction } from "react";
+
+interface ProfileContainerProps {
+  list: VirtualFriend[];
+  setVirtualFriendList: React.Dispatch<SetStateAction<VirtualFriend[]>>;
+}
+const ProfileContainer = ({
+  list,
+  setVirtualFriendList
+}: ProfileContainerProps) => {
+  return (
+    <div className="grid grid-cols-2 gap-7">
+      {list.map((el, index) => (
+        <Profile
+          key={index}
+          info={el}
+          deleteIndex={index}
+          setVirtualFriendList={setVirtualFriendList}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ProfileContainer;
diff --git a/src/components/StrokeBanner.tsx b/src/components/StrokeBanner.tsx
@@ -5,7 +5,7 @@ const StrokeBanner = () => {
 
   const handleNavigate = () => {
     const mode = "virtualFriend";
-    navigate("/select-info", { state: mode });
+    navigate("/select-info", { state: { type: mode } });
   };
 
   return (

diff --git a/src/components/SubTitle.tsx b/src/components/SubTitle.tsx
@@ -15,8 +15,8 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
   };
 
   const handleNavigate = () => {
-    const mode = "virtualFriend";
-    navigate("/select-info", { state: mode });
+    const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
+    navigate("/select-info", { state: { type: type } });
   };
 
   return (