feat: 기존 캐릭터 이미지를 클래스 아이콘으로 변경

src/components/UserInfoComponent.jsx

@@ -1,14 +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];
+  }
+
   return (
-  <div className='user-info-cotainer' onClick={()=>console.log(userInfo)}>
+  <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={userInfo.imageUrl} 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" />

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,
+}

src/pages/MyPartyPage.jsx

@@ -156,7 +156,9 @@ 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}
+                    />
                     <div className="my-party-waitting-button-row">
                       <div className="kick-button2">추방</div>
                       <div className="accept-button">수락</div>