refactor: 전반적인 리팩토링 작업 및 오류 수정

src/apis/supportsAPI.ts

@@ -19,6 +19,8 @@ export const getPurchases = async (
       params: { page, size },
     });
 
+    console.log(response.data?.data?.content);
+
     return response.data?.data?.content ?? [];
   } catch {
     throw Error;
@@ -40,6 +42,8 @@ export const getAcceptedRequestTasks = async (
       params: { page, size },
     });
 
+    console.log(response.data?.data?.content);
+
     return response.data?.data?.content ?? [];
   } catch {
     throw Error;
@@ -61,6 +65,8 @@ export const getRejectedRequestTasks = async (
       params: { page, size },
     });
 
+    console.log(response.data?.data?.content);
+
     return response.data?.data?.content ?? [];
   } catch {
     throw Error;

src/components/my-page/ApplyStatus.tsx

@@ -22,10 +22,6 @@ export const ApplyStatus = ({
   applicationStatus,
   postType,
 }: ApplyStatusProps) => {
-  // const APPLY_RECORDS = [
-  //   { id: 'drerwr', role: '디자이너', current: 1, total: 4 },
-  // ];
-
   const handleAccept = async (id?: number) => {
     if (!id) {
       return;

src/components/my-page/CurrentPeople.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import styles from './applyStatus.module.scss';
 
 interface CurrentPeopleProps {
@@ -13,16 +14,11 @@ interface CurrentPeopleProps {
 }
 
 export const CurrentPeople = ({ currentMembers }: CurrentPeopleProps) => {
-  // const CURRENT_MEMBERS = [
-  //   {
-  //     id: 'serqe',
-  //     role: '디자이너',
-  //     current: 1,
-  //   },
-  // ];
-  {
-    console.log('해당 요청 과제의 현재 인원 : ', currentMembers);
-  }
+  const navigate = useNavigate();
+  const handleProfile = (userId: number, userType: string) => {
+    navigate(`/personal-profile/${userId}/${userType}`);
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.tableTitle}>현재 인원</div>
@@ -49,7 +45,13 @@ export const CurrentPeople = ({ currentMembers }: CurrentPeopleProps) => {
               <span>{member.approvedCount}</span>
               <span className={styles.divider} />
               <div className={styles.buttonGroup}>
-                <button className={styles.button}>프로필</button>
+                <button
+                  className={styles.button}
+                  onClick={() =>
+                    handleProfile(user.acceptedMemberId ?? 0, user.userType)
+                  }>
+                  프로필
+                </button>
                 <button className={styles.button}>메신저</button>
               </div>
             </div>

src/components/my-page/IdeaMarketPostHeader.tsx

@@ -1,24 +1,27 @@
 import { useNavigate } from 'react-router-dom';
 import styles from './ideaMarketPostHeader.module.scss';
+import { getCategoryLabel } from '../../utils/categoryMapping';
 
 interface PostHeaderProps {
   tab: string;
-  category: string;
+  specialization: string;
   title: string;
   price: number;
   ideaId: number;
 }
 
 export const IdeaMarketPostHeader = ({
   tab,
-  category,
+  specialization,
   title,
   price,
   ideaId,
 }: PostHeaderProps) => {
   const navigate = useNavigate();
   const FORMATTEDPRICE = price.toLocaleString();
 
+  const FORMATTED_SPECIALIZATION = getCategoryLabel(specialization);
+
   const handleEditNavigate = () => {
     if (ideaId) {
       navigate(`/my/posts/idea-market/registered/${ideaId}`);
@@ -37,7 +40,7 @@ export const IdeaMarketPostHeader = ({
         <div className={styles.imagePlaceholder} />
         <div className={styles.postcardInfo}>
           <div className={styles.postCardCategory}>
-            {tab} &gt; {category}
+            {tab} &gt; {FORMATTED_SPECIALIZATION}
           </div>
           <div className={styles.postCardTitle}>{title}</div>
           <div className={styles.price}>{FORMATTEDPRICE} 원</div>

src/components/my-page/PostHeader.tsx

@@ -3,10 +3,11 @@ import styles from './postHeader.module.scss';
 import { DeadlineLabel } from '../common/label/DeadlineLabel';
 import { calculateDday } from '../../utils/dateUtils';
 import { Image } from '../common/image/Image';
+import { getCategoryLabel } from '../../utils/categoryMapping.ts';
 
 interface PostHeaderProps {
   tab: string;
-  category: string;
+  specialization: string;
   title: string;
   deadline?: string;
   postImage?: string | null;
@@ -15,14 +16,15 @@ interface PostHeaderProps {
 
 export const PostHeader = ({
   tab,
-  category,
+  specialization,
   title,
   deadline,
   postImage,
   postId,
 }: PostHeaderProps) => {
   const navigate = useNavigate();
   const dDay = deadline ? calculateDday(deadline) : undefined;
+  const FORMATTED_SPECIALIZATION = getCategoryLabel(specialization);
 
   const handleEditNavigate = () => {
     let editPath = '/';
@@ -53,7 +55,7 @@ export const PostHeader = ({
         )}
         <div className={styles.postcardInfo}>
           <div className={styles.postcardCategory}>
-            {tab} {'>'} {category}
+            {tab} {'>'} {FORMATTED_SPECIALIZATION}
           </div>
           <p className={styles.postTitle}>{title}</p>
           {dDay !== undefined && <DeadlineLabel deadline={dDay} />}

src/components/my-page/apply/ApplyDetailsInfo.tsx

@@ -1,36 +1,52 @@
+import { useNavigate } from 'react-router-dom';
 import styles from './itemDetailsInfo.module.scss';
 import arrowItemDetailsButtonIcon from '../../../assets/icons/arrowButton.svg';
 import { Image } from '../../common/image/Image';
+import { getCategoryLabel } from '../../../utils/categoryMapping';
 
 interface ApplyDetailsInfoProps {
+  postId: number;
   tab: string;
-  category: string;
+  specialization: string;
   itemName: string;
   part: string;
 }
 
 export const ApplyDetailsInfo = ({
+  postId,
   tab,
-  category,
+  specialization,
   itemName,
   part,
 }: ApplyDetailsInfoProps) => {
+  const navigate = useNavigate();
+  const handleNavigate = () => {
+    if (tab === '요청 과제') navigate(`/request-assign/registered/${postId}`);
+    if (tab === '협업 광장')
+      navigate(`/collaboration/postdetailwithlink/${postId}`);
+  };
+
+  const FORMMATED_SPECIALIZATION = getCategoryLabel(specialization);
+  const FORMMATED_PART = getCategoryLabel(part);
+
   return (
     <>
       <div className={styles.itemDetails}>
         <div className={styles.mainImage}></div>
         <div className={styles.itemInfo}>
           <div className={styles.route}>
-            {tab} &gt; {category}
+            {tab} &gt; {FORMMATED_SPECIALIZATION}
           </div>
           <div className={styles.itemName}>{itemName}</div>
         </div>
         <div className={styles.quantityBox}>
           <span className={styles.quantityText}>지원파트</span>
-          <span className={styles.quantityValue}>{part}</span>
+          <span className={styles.quantityValue}>{FORMMATED_PART}</span>
         </div>
         <div className={styles.itemDetailsButtonContainer}>
-          <button className={styles.itemDetailsButton}>
+          <button
+            className={styles.itemDetailsButton}
+            onClick={handleNavigate}>
             <Image
               src={arrowItemDetailsButtonIcon}
               alt='화살표'

src/components/my-page/apply/ApplyTable.tsx

@@ -1,13 +1,26 @@
+//import { useNavigate } from 'react-router-dom';
 import styles from './applyTable.module.scss';
 
 interface ApplyTableProps {
   id: string;
+  userType: string;
   role: string;
   current: number;
   total: number;
 }
 
-export const ApplyTable = ({ id, role, current, total }: ApplyTableProps) => {
+export const ApplyTable = ({
+  id,
+  //userType,
+  role,
+  current,
+  total,
+}: ApplyTableProps) => {
+  // const navigate = useNavigate();
+  // const handleProfile = (userId: number, userType: string) => {
+  //   navigate(`/personal-profile/${userId}/${userType}`);
+  // };
+
   return (
     <div className={styles.tableRow}>
       <span>{id}</span>

src/components/my-page/apply/PostAuthorInfo.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { WriteMessageModal } from '../message/WriteMessageModal';
 import styles from './postAuthorInfo.module.scss';
 import Label from '../../common/label/Label';
 import arrowMessageButtonIcon from '../../../assets/icons/messageArrowButton.svg';
@@ -15,6 +17,11 @@ export const PostAuthorInfo = ({
   labelText,
   labelType,
 }: PostAuthorInfoProps) => {
+  const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);
+
+  const openMessageModal = () => setIsMessageModalOpen(true);
+  const closeMessageModal = () => setIsMessageModalOpen(false);
+
   return (
     <>
       <div className={styles.sellerInfoAndMessage}>
@@ -29,12 +36,23 @@ export const PostAuthorInfo = ({
           </div>
         </div>
         <div className={styles.messageButtonContainer}>
-          <button className={styles.messageButton}>메신저 보내기</button>
+          <button
+            className={styles.messageButton}
+            onClick={openMessageModal}>
+            메신저 보내기
+          </button>
           <Image
             src={arrowMessageButtonIcon}
             alt='화살표'
             className='arrowMessageButton'
           />
+
+          {isMessageModalOpen && (
+            <WriteMessageModal
+              onClose={closeMessageModal}
+              type='write'
+            />
+          )}
         </div>
       </div>
     </>

src/components/my-page/apply/PurchaseDetailsInfo.tsx

@@ -1,37 +1,53 @@
+import { useNavigate } from 'react-router-dom';
 import styles from './itemDetailsInfo.module.scss';
 import arrowItemDetailsButtonIcon from '../../../assets/icons/arrowButton.svg';
 import { Image } from '../../common/image/Image';
+import { getCategoryLabel } from '../../../utils/categoryMapping';
 
 interface PurchaseDetailsInfoProps {
+  ideaId: number;
   tab: string;
-  category: string;
+  specialization: string;
   itemName: string;
   price: number;
+  quantity: number;
 }
 
 export const PurchaseDetailsInfo = ({
+  ideaId,
   tab,
-  category,
+  specialization,
   itemName,
   price,
+  quantity,
 }: PurchaseDetailsInfoProps) => {
+  const FORMATTED_SPECIALIZATION = getCategoryLabel(specialization);
+
+  const navigate = useNavigate();
+  const handleNavigate = () => {
+    console.log('ideaId', ideaId);
+    navigate(`/idea-market/registered/${ideaId}`);
+  };
+
   return (
     <>
       <div className={styles.itemDetails}>
         <div className={styles.mainImage}></div>
         <div className={styles.itemInfo}>
           <div className={styles.route}>
-            {tab} &gt; {category}
+            {tab} &gt; {FORMATTED_SPECIALIZATION}
           </div>
           <div className={styles.itemName}>{itemName}</div>
-          <div className={styles.price}>{price.toLocaleString()}</div>
+          <div className={styles.price}>{price.toLocaleString()} 원</div>
         </div>
         <div className={styles.quantityBox}>
           <span className={styles.quantityText}>수량</span>
-          <span className={styles.quantityValue}>1개</span>
+          <span className={styles.quantityValue}>{quantity}개</span>
         </div>
         <div className={styles.itemDetailsButtonContainer}>
-          <button className={styles.itemDetailsButton}>
+          <button
+            className={styles.itemDetailsButton}
+            onClick={handleNavigate}>
             <Image
               src={arrowItemDetailsButtonIcon}
               alt='화살표'

src/constants/categoryMapper.ts

@@ -75,3 +75,8 @@ export const SKILL_PROFICIENCY_MAPPER_TO_ENG: Record<string, string> = {
   중: 'MEDIUM',
   하: 'LOW',
 };
+
+export const LABEL_TYPE_MAPPER: Record<string, string> = {
+  INDIVIDUAL: '개인',
+  COMPANY: '기업',
+};

src/pages/my-page/apply/ApplyCollaboration.tsx

@@ -88,8 +88,9 @@ export const ApplyCollaboration = () => {
             />
 
             <ApplyDetailsInfo
+              postId={collaboration.collaborationId}
               tab={'협업 광장'}
-              category={collaboration.specialization}
+              specialization={collaboration.specialization}
               itemName={collaboration.postTitle}
               part={collaboration.specialization}
             />
@@ -108,6 +109,7 @@ export const ApplyCollaboration = () => {
                 <ApplyTable
                   key={index}
                   id={teamInfo.joiners[index]?.joinerID}
+                  userType={teamInfo.joiners[index]?.userType}
                   role={teamInfo.domain}
                   current={teamInfo.occupied}
                   total={teamInfo.total}
@@ -138,8 +140,9 @@ export const ApplyCollaboration = () => {
             </div>
 
             <ApplyDetailsInfo
+              postId={collaboration.collaborationId}
               tab={'협업 광장'}
-              category={collaboration.specialization}
+              specialization={collaboration.specialization}
               itemName={collaboration.postTitle}
               part={collaboration.specialization}
             />