From 46e0d91b4220268ef1e9ef7b43eca003354dd5cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=95=9C=EC=9E=88=EB=8A=94-=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84?= <myungsoocc@gmail.com>
Date: Mon, 18 Aug 2025 18:56:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A4=ED=94=88=EC=B1=84=ED=8C=85?=
 =?UTF-8?q?=EB=B0=A9=20=EB=A9=94=EC=9D=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\354\235\230_\353\214\200\355\231\224.svg" | 52 +++++++++++++++++++
 ...\354\235\230_\353\214\200\355\231\224.svg" | 26 ++++++++++
 src/components/Profile.tsx                    |  4 +-
 src/components/TopicProfileContainer.tsx      |  9 ++--
 4 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 "public/image/F\354\235\230_\353\214\200\355\231\224.svg"
 create mode 100644 "public/image/N\354\235\230_\353\214\200\355\231\224.svg"

diff --git "a/public/image/F\354\235\230_\353\214\200\355\231\224.svg" "b/public/image/F\354\235\230_\353\214\200\355\231\224.svg"
new file mode 100644
index 0000000..ef96965
--- /dev/null
+++ "b/public/image/F\354\235\230_\353\214\200\355\231\224.svg"
@@ -0,0 +1,52 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1665_9532)">
+<path d="M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" fill="url(#paint0_linear_1665_9532)"/>
+<g filter="url(#filter0_f_1665_9532)">
+<ellipse cx="23.75" cy="31" rx="16.75" ry="13" fill="url(#paint1_linear_1665_9532)"/>
+</g>
+<path d="M26.9999 5.03058C35.8364 5.03058 43.0001 12.1941 43.0002 21.0306C43.0002 28.812 37.4448 35.2945 30.0842 36.732L21.3078 44.4987C20.9917 44.7785 20.4929 44.5652 20.4772 44.1434L20.2104 36.9785C11.977 36.3218 5.50017 29.433 5.50017 21.0306C5.50029 12.1941 12.6637 5.03032 21.5002 5.03032L26.9999 5.03058Z" fill="white"/>
+<path d="M16.5968 24.7278C14.9239 23.0316 14.025 20.9304 14 18.6013C14.025 15.2089 16.5219 12.5 19.768 12.5C21.6157 12.5 23.1888 13.3608 24.2375 14.7025C25.3112 13.3608 26.9093 12.5 28.757 12.5C31.9781 12.5 34.5 15.2089 34.5 18.6013C34.5 20.9304 33.6011 23.0316 31.9032 24.7278L24.2375 32.5L16.5968 24.7278Z" fill="url(#paint2_linear_1665_9532)"/>
+<mask id="mask0_1665_9532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="12" width="21" height="21">
+<path d="M16.5968 24.7278C14.9239 23.0316 14.025 20.9304 14 18.6013C14.025 15.2089 16.5219 12.5 19.768 12.5C21.6157 12.5 23.1888 13.3608 24.2375 14.7025C25.3112 13.3608 26.9093 12.5 28.757 12.5C31.9781 12.5 34.5 15.2089 34.5 18.6013C34.5 20.9304 33.6011 23.0316 31.9032 24.7278L24.2375 32.5L16.5968 24.7278Z" fill="url(#paint3_linear_1665_9532)"/>
+</mask>
+<g mask="url(#mask0_1665_9532)">
+<g filter="url(#filter1_f_1665_9532)">
+<ellipse cx="24.25" cy="26.5" rx="7.75" ry="6" fill="#FFDC92"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1665_9532" x="-3" y="8" width="53.5" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_1665_9532"/>
+</filter>
+<filter id="filter1_f_1665_9532" x="8.5" y="12.5" width="31.5" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_1665_9532"/>
+</filter>
+<linearGradient id="paint0_linear_1665_9532" x1="24" y1="-5" x2="24.0765" y2="50.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3BC1"/>
+<stop offset="0.458845" stop-color="#FF986E"/>
+<stop offset="1" stop-color="#FF6354"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1665_9532" x1="23.75" y1="18" x2="23.75" y2="44" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE692"/>
+<stop offset="1" stop-color="#FFE692" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1665_9532" x1="24.8529" y1="4.2647" x2="24.9023" y2="41.3235" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3BC1"/>
+<stop offset="0.458845" stop-color="#FFB698"/>
+<stop offset="1" stop-color="#FF6354"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1665_9532" x1="24.8529" y1="4.2647" x2="24.9023" y2="41.3235" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3BC1"/>
+<stop offset="0.458845" stop-color="#FFB698"/>
+<stop offset="1" stop-color="#FF6354"/>
+</linearGradient>
+<clipPath id="clip0_1665_9532">
+<path d="M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git "a/public/image/N\354\235\230_\353\214\200\355\231\224.svg" "b/public/image/N\354\235\230_\353\214\200\355\231\224.svg"
new file mode 100644
index 0000000..2eb4998
--- /dev/null
+++ "b/public/image/N\354\235\230_\353\214\200\355\231\224.svg"
@@ -0,0 +1,26 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="24" fill="url(#paint0_linear_1665_9513)"/>
+<g opacity="0.9">
+<path d="M33.2858 35.7714C33.9199 36.5008 33.8426 37.6062 33.1132 38.2403C33.0352 38.3081 32.9518 38.3659 32.8662 38.4175C33.4147 39.145 33.3152 40.1828 32.6172 40.7897C31.8879 41.4237 30.7825 41.3463 30.1484 40.617C30.0506 40.5045 29.9714 40.382 29.9072 40.2548C29.8135 40.4213 29.6922 40.5762 29.5397 40.7088C28.8259 41.3293 27.7438 41.2536 27.1232 40.5398C26.5174 39.8428 26.5764 38.7958 27.244 38.1691C26.6321 37.2995 26.7653 36.0905 27.5852 35.3777C28.4604 34.6172 29.7865 34.7099 30.5473 35.5848C30.5915 35.6357 30.6328 35.6886 30.6713 35.7423C30.7167 35.6925 30.7649 35.6441 30.817 35.5988C31.5463 34.9648 32.6517 35.0423 33.2858 35.7714Z" fill="#EBEBEB"/>
+<path d="M33.2858 35.7714C33.9199 36.5008 33.8426 37.6062 33.1132 38.2403C33.0352 38.3081 32.9518 38.3659 32.8662 38.4175C33.4147 39.145 33.3152 40.1828 32.6172 40.7897C31.8879 41.4237 30.7825 41.3463 30.1484 40.617C30.0506 40.5045 29.9714 40.382 29.9072 40.2548C29.8135 40.4213 29.6922 40.5762 29.5397 40.7088C28.8259 41.3293 27.7438 41.2536 27.1232 40.5398C26.5174 39.8428 26.5764 38.7958 27.244 38.1691C26.6321 37.2995 26.7653 36.0905 27.5852 35.3777C28.4604 34.6172 29.7865 34.7099 30.5473 35.5848C30.5915 35.6357 30.6328 35.6886 30.6713 35.7423C30.7167 35.6925 30.7649 35.6441 30.817 35.5988C31.5463 34.9648 32.6517 35.0423 33.2858 35.7714Z" fill="url(#paint1_linear_1665_9513)" fill-opacity="0.2"/>
+</g>
+<path opacity="0.8" d="M24.6822 44.2593C24.2054 44.4449 23.6753 44.2448 23.4316 43.8113C22.8532 43.9284 22.2578 43.6173 22.0364 43.0486C21.8286 42.5147 22.0178 41.9256 22.4599 41.6032C22.4842 41.2611 22.6993 40.9462 23.0401 40.8136C23.3286 40.7014 23.6389 40.7463 23.8786 40.9053C23.9355 40.8724 23.9947 40.8413 24.0578 40.8167C24.7254 40.557 25.4773 40.8882 25.7372 41.5557C25.9541 42.1135 25.7586 42.7294 25.2991 43.0686C25.4213 43.5571 25.1637 44.0717 24.6822 44.2593Z" fill="#EBEBEB"/>
+<path d="M29.3008 5C34.7171 5 39.1599 9.31202 39.6201 14.8076C42.211 16.1374 44 18.9701 44 22.25C44 26.462 41.0494 29.9334 37.2393 30.4346C36.1936 34.1401 32.896 36.8477 28.9863 36.8477C26.9856 36.8476 25.1466 36.136 23.6855 34.9473C22.2245 36.136 20.3855 36.8475 18.3848 36.8477C13.9223 36.8477 10.2524 33.3217 9.82422 28.8086C6.49077 28.0307 4 24.9434 4 21.25C4 17.5728 6.46884 14.4958 9.78027 13.7012C9.89416 8.87565 13.6975 5.00009 18.376 5C20.3222 5 22.1173 5.67106 23.5586 6.80176C25.2023 5.66404 27.1766 5.00009 29.3008 5Z" fill="white"/>
+<path d="M24 10.5L27.3411 17.6589L34.5 21L27.3411 24.3411L24 31.5L20.6589 24.3411L13.5 21L20.6589 17.6589L24 10.5Z" fill="url(#paint2_linear_1665_9513)"/>
+<defs>
+<linearGradient id="paint0_linear_1665_9513" x1="24" y1="-3.5" x2="24.0755" y2="51.7499" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF54AF"/>
+<stop offset="0.466346" stop-color="#AE36D7"/>
+<stop offset="1" stop-color="#3B48FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1665_9513" x1="32.0213" y1="40.0434" x2="30.3618" y2="34.0549" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1665_9513" x1="23.9524" y1="10.5" x2="24.0287" y2="31.4999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF54AF"/>
+<stop offset="0.466346" stop-color="#AE36D7"/>
+<stop offset="1" stop-color="#3B48FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 36895d9..579a0eb 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -12,6 +12,7 @@ interface ProfileProps {
   topicData?: {
     chatTitle: string;
     description: string;
+    image: string;
   };
 }
 const Profile = ({
@@ -64,8 +65,7 @@ const Profile = ({
     if (mode === "friend" && info) {
       return `/public/image/${info.mbti}_profile.png`;
     } else if (mode === "topic" && topicData) {
-      //FIXME: 디자인 정해지면 수정
-      return "/icon/starbubble.svg";
+      return topicData.image;
     }
     return "";
   };
diff --git a/src/components/TopicProfileContainer.tsx b/src/components/TopicProfileContainer.tsx
index 4085b79..c76d331 100644
--- a/src/components/TopicProfileContainer.tsx
+++ b/src/components/TopicProfileContainer.tsx
@@ -3,16 +3,19 @@ import Profile from "@/components/Profile";
 type TopicData = {
   chatTitle: string;
   description: string;
+  image: string;
 };
 
 const topicData: TopicData[] = [
   {
-    chatTitle: "T의 대화",
-    description: "mbti t인사람들 모임"
+    chatTitle: "N의 대화",
+    description: "망상력 N% 대화방",
+    image: "/image/N의_대화.svg"
   },
   {
     chatTitle: "F의 대화",
-    description: "mbti f인사람들 모임"
+    description: "F 감성 대화방",
+    image: "/image/F의_대화.svg"
   }
 ];