From c4e2eba1cd2b2667a4e1ec88a7c358425c823880 Mon Sep 17 00:00:00 2001
From: bsko98 <bsko98@naver.com>
Date: Mon, 29 Sep 2025 15:01:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20=EC=BA=90?=
 =?UTF-8?q?=EB=A6=AD=ED=84=B0=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20?=
 =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserInfoComponent.jsx |  7 ++-
 src/mappers/classIconMap.js          | 65 ++++++++++++++++++++++++++++
 src/pages/MyPartyPage.jsx            | 11 ++++-
 3 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 src/mappers/classIconMap.js

diff --git a/src/components/UserInfoComponent.jsx b/src/components/UserInfoComponent.jsx
index 38a1f27..11adb1c 100644
--- a/src/components/UserInfoComponent.jsx
+++ b/src/components/UserInfoComponent.jsx
@@ -1,14 +1,13 @@
 import React from 'react'
 import './UserInfoComponent.css'
 
-const UserInfoComponent = ({userInfo}) => {
+const UserInfoComponent = ({userInfo, classIcon}) => {
   return (
-  <div className='user-info-cotainer' onClick={()=>console.log(userInfo)}>
+  <div className='user-info-cotainer' onClick={()=>console.log(classIcon)}>
       <div className="user-info-nickname">{userInfo.name}</div>
       <div className="user-info-details">
           <div className="user-info-class-info">
-          {/* 나중에 이미지 태그 추가해주면 됨 */}
-          <img  src={userInfo.imageUrl} alt="직업 아이콘" className="user-info-class-icon" /> 
+          <img  src={classIcon} alt="직업 아이콘" className="user-info-class-icon" /> 
           <div className="user-info-job-text">{userInfo.job}</div>
           </div>
           <div className="user-info-divider" />
diff --git a/src/mappers/classIconMap.js b/src/mappers/classIconMap.js
new file mode 100644
index 0000000..7096901
--- /dev/null
+++ b/src/mappers/classIconMap.js
@@ -0,0 +1,65 @@
+import Shadowhunter from "../assets/images/classIcon/ClassIcon-Assassin-Shadowhunter.svg"
+import Deathblade from "../assets/images/classIcon/ClassIcon-Assassin-Deathblade.svg"
+import Reaper from "../assets/images/classIcon/ClassIcon-Assassin-Reaper.svg"
+import Souleater from "../assets/images/classIcon/ClassIcon-Assassin-Souleater.svg"
+import Deadeye from "../assets/images/classIcon/ClassIcon-Gunner-Deadeye.svg"  
+import Artillerist from "../assets/images/classIcon/ClassIcon-Gunner-Artillerist.svg"
+import Sharpshooter from "../assets/images/classIcon/ClassIcon-Gunner-Sharpshooter.svg"
+import Machinist from "../assets/images/classIcon/ClassIcon-Gunner-Machinist.svg"
+import Gunslinger from "../assets/images/classIcon/ClassIcon-Gunner-Gunslinger.svg"
+import Arcanist from "../assets/images/classIcon/ClassIcon-Mage-Arcanist.svg"
+import Summoner from "../assets/images/classIcon/ClassIcon-Mage-Summoner.svg"
+import Bard from "../assets/images/classIcon/ClassIcon-Mage-Bard.svg"
+import Sorceress from "../assets/images/classIcon/ClassIcon-Mage-Sorceress.svg"
+
+import Wardancer from "../assets/images/classIcon/ClassIcon-Martial_Artist-Wardancer.svg"
+import Scrapper from "../assets/images/classIcon/ClassIcon-Martial_Artist-Scrapper.svg"
+import Soulfist from "../assets/images/classIcon/ClassIcon-Martial_Artist-Soulfist.svg"
+import Glaivier from "../assets/images/classIcon/ClassIcon-Martial_Artist-Glaivier.svg"
+import Striker from "../assets/images/classIcon/ClassIcon-Martial_Artist-Striker.svg"
+import Breaker from "../assets/images/classIcon/ClassIcon-Martial_Artist-Breaker.svg"
+
+import Artist from "../assets/images/classIcon/ClassIcon-Specialist-Artist.svg"
+import Aeromancer from "../assets/images/classIcon/ClassIcon-Specialist-Aeromancer.svg"
+import Wild_Soul from "../assets/images/classIcon/ClassIcon-Specialist-Wild_Soul.svg"
+
+
+import Berserker from "../assets/images/classIcon/ClassIcon-Warrior-Berserker.svg"
+import Destroyer from "../assets/images/classIcon/ClassIcon-Warrior-Destroyer.svg"
+import Gunlancer from "../assets/images/classIcon/ClassIcon-Warrior-Gunlancer.svg"
+import Paladin from "../assets/images/classIcon/ClassIcon-Warrior-Paladin.svg"
+import Slayer from "../assets/images/classIcon/ClassIcon-Warrior-Slayer.svg"
+import Valkyrie from "../assets/images/classIcon/ClassIcon-Warrior-Valkyrie.svg"
+
+ 
+
+export const CLASS_ICON_MAP = {
+    "assassin_1" : Shadowhunter,
+    "assassin_2" : Deathblade,
+    "assassin_3" : Reaper,
+    "assassin_4" : Souleater,
+    "gunner_1" : Deadeye,
+    "gunner_2" : Artillerist,
+    "gunner_3" : Sharpshooter,
+    "gunner_4" : Machinist,
+    "gunner_5" : Gunslinger,   
+    "mage_1" : Arcanist,
+    "mage_2" : Summoner,
+    "mage_3" : Bard,
+    "mage_4" : Sorceress,
+    "martial_artist_1" : Wardancer,
+    "martial_artist_2" : Scrapper,    
+    "martial_artist_3" : Soulfist,
+    "martial_artist_4" : Glaivier,
+    "martial_artist_5" : Striker,
+    "martial_artist_6" : Breaker,
+    "specialist_1" : Artist,
+    "specialist_2" : Aeromancer,
+    "specialist_3" : Wild_Soul,  
+    "warrior_1" : Berserker,
+    "warrior_2" : Destroyer,
+    "warrior_3" : Gunlancer,
+    "warrior_4" : Paladin,
+    "warrior_5" : Slayer,
+    "warrior_6" : Valkyrie,
+}
\ No newline at end of file
diff --git a/src/pages/MyPartyPage.jsx b/src/pages/MyPartyPage.jsx
index 2d7d863..1815914 100644
--- a/src/pages/MyPartyPage.jsx
+++ b/src/pages/MyPartyPage.jsx
@@ -4,6 +4,7 @@ import UserInfoComponent from "../components/UserInfoComponent.jsx";
 import { ReactComponent as SendChattingButton } from "../assets/images/SendChattingButton.svg";
 import PartyInfoModal from "../components/PartyInfoModal.jsx";
 import { socketManager } from "../socket/socket.js";
+import { CLASS_ICON_MAP } from "../mappers/classIconMap.js";
 
 const MyPartyPage = ({ state }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -37,6 +38,10 @@ const MyPartyPage = ({ state }) => {
     return partyLeaderId === currentUserId;
   }
 
+  const getClassIcon=(user)=>{
+    return CLASS_ICON_MAP[user.chooseCharacter.job];
+  }
+
   useEffect(()=>{
     setIsPartyOpen(state.myParty.allow);
   },[state.myParty.allow])
@@ -109,6 +114,7 @@ const MyPartyPage = ({ state }) => {
                               <div className="party-memeber-info">
                                 <UserInfoComponent
                                   userInfo={member.chooseCharacter}
+                                  classIcon={getClassIcon(member)}
                                 />
                                 <div className="kick-button-container">
                                   <button
@@ -156,7 +162,10 @@ const MyPartyPage = ({ state }) => {
               <div className="my-party-waitting-container">
                 {state.myParty.volunteers.map((user, idx) => (
                   <div className="my-party-waitting-row" key={idx}>
-                    <UserInfoComponent userInfo={user} />
+                    <UserInfoComponent 
+                      userInfo={user}
+                      classIcon={getClassIcon(user)}
+                    />
                     <div className="my-party-waitting-button-row">
                       <div className="kick-button2">추방</div>
                       <div className="accept-button">수락</div>

From 097fec1d1b3467e6c7a7d779b71d3d9b0c81e006 Mon Sep 17 00:00:00 2001
From: bsko98 <bsko98@naver.com>
Date: Mon, 29 Sep 2025 21:48:41 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=9E=90=EC=8B=9D=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80=ED=99=98?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserInfoComponent.jsx | 11 ++++++++---
 src/pages/MyPartyPage.jsx            |  7 -------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/UserInfoComponent.jsx b/src/components/UserInfoComponent.jsx
index 11adb1c..ef9f2bf 100644
--- a/src/components/UserInfoComponent.jsx
+++ b/src/components/UserInfoComponent.jsx
@@ -1,13 +1,18 @@
 import React from 'react'
 import './UserInfoComponent.css'
+import { CLASS_ICON_MAP } from "../mappers/classIconMap.js";
+
+const UserInfoComponent = ({userInfo}) => {
+  const getClassIcon=(job)=>{
+    return CLASS_ICON_MAP[job];
+  }
 
-const UserInfoComponent = ({userInfo, classIcon}) => {
   return (
-  <div className='user-info-cotainer' onClick={()=>console.log(classIcon)}>
+  <div className='user-info-cotainer'>
       <div className="user-info-nickname">{userInfo.name}</div>
       <div className="user-info-details">
           <div className="user-info-class-info">
-          <img  src={classIcon} alt="직업 아이콘" className="user-info-class-icon" /> 
+          <img  src={getClassIcon(userInfo.job)} alt="직업 아이콘" className="user-info-class-icon" /> 
           <div className="user-info-job-text">{userInfo.job}</div>
           </div>
           <div className="user-info-divider" />
diff --git a/src/pages/MyPartyPage.jsx b/src/pages/MyPartyPage.jsx
index 1815914..8c46616 100644
--- a/src/pages/MyPartyPage.jsx
+++ b/src/pages/MyPartyPage.jsx
@@ -4,7 +4,6 @@ import UserInfoComponent from "../components/UserInfoComponent.jsx";
 import { ReactComponent as SendChattingButton } from "../assets/images/SendChattingButton.svg";
 import PartyInfoModal from "../components/PartyInfoModal.jsx";
 import { socketManager } from "../socket/socket.js";
-import { CLASS_ICON_MAP } from "../mappers/classIconMap.js";
 
 const MyPartyPage = ({ state }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -38,10 +37,6 @@ const MyPartyPage = ({ state }) => {
     return partyLeaderId === currentUserId;
   }
 
-  const getClassIcon=(user)=>{
-    return CLASS_ICON_MAP[user.chooseCharacter.job];
-  }
-
   useEffect(()=>{
     setIsPartyOpen(state.myParty.allow);
   },[state.myParty.allow])
@@ -114,7 +109,6 @@ const MyPartyPage = ({ state }) => {
                               <div className="party-memeber-info">
                                 <UserInfoComponent
                                   userInfo={member.chooseCharacter}
-                                  classIcon={getClassIcon(member)}
                                 />
                                 <div className="kick-button-container">
                                   <button
@@ -164,7 +158,6 @@ const MyPartyPage = ({ state }) => {
                   <div className="my-party-waitting-row" key={idx}>
                     <UserInfoComponent 
                       userInfo={user}
-                      classIcon={getClassIcon(user)}
                     />
                     <div className="my-party-waitting-button-row">
                       <div className="kick-button2">추방</div>