Fix/348

src/components/ui/PaymentReceiver/index.tsx

@@ -6,27 +6,27 @@ import styles from './index.module.scss';
 
 type PaymentReceiverProps = {
   paymentType: 'gift' | 'funding';
-  receivers: Receiver[];
+  receiver: Receiver;
 };
 
-const PaymentReceiver = ({ paymentType, receivers }: PaymentReceiverProps) => {
-  const TEXT_RECEIVERS =
-    receivers.length === 1 ? '님에게' : `님 외 ${receivers.length - 1}명에게`;
+const PaymentReceiver = ({ paymentType, receiver }: PaymentReceiverProps) => {
+  const RECEIVER_NAME = receiver.self ? '나' : receiver.name;
+  const RECEIVER_SUFFIX = receiver.self ? '에게' : '님에게';
 
-  const TEXT_ACTION =
+  const MESSAGE =
     paymentType === 'gift' ? '선물을 보냈습니다.' : '펀딩했습니다.';
 
   return (
     <div className={styles.wrapper_receiver}>
       <div className={styles.wrapper_profile}>
         <span className={styles.img_deco}>프로필사진 꾸밈용 컨페티</span>
-        <ProfileImg size="m" imgUrl={receivers[0].photoUrl} />
+        <ProfileImg size="m" imgUrl={receiver.photoUrl} />
       </div>
       <div className={styles.txt_action}>
-        <strong className={styles.txt_name}>{receivers[0].name}</strong>
-        {TEXT_RECEIVERS}
+        <strong className={styles.txt_name}>{RECEIVER_NAME}</strong>
+        {RECEIVER_SUFFIX}
         <br />
-        {TEXT_ACTION}
+        {MESSAGE}
       </div>
     </div>
   );

src/layouts/MyPage/FundingHistory/ContributedFunding/ContributedFundingItem/index.tsx

@@ -10,9 +10,9 @@ import styles from './index.module.scss';
 type ContributedFundingItemProps = { item: ContributedFundingItemType };
 
 const ContributedFundingItem = ({ item }: ContributedFundingItemProps) => {
-  const { product, fundingDetail } = item;
+  const { product, ...fundingDetail } = item;
   const { productId, name, photo, brandName } = product;
-  const { contributedAt, creatorName, contributedAmount, status } =
+  const { contributedAt, creatorName, contributedAmount, status, self } =
     fundingDetail;
 
   return (
@@ -31,7 +31,7 @@ const ContributedFundingItem = ({ item }: ContributedFundingItemProps) => {
       <div className={styles.wrapper_history}>
         <div className={styles.section_status}>
           <span className={styles.ico_receiver} />
-          {creatorName}
+          {self ? '나' : creatorName}
           <span className={styles.txt_detail}>
             상세보기
             <span className={styles.ico_detail} />

src/layouts/MyPage/FundingHistory/ContributedFunding/index.tsx

@@ -55,7 +55,7 @@ const ContributedFunding = () => {
           ) : (
             <ul>
               {fundingItems.map((item) => (
-                <li key={item.fundingDetail.fundingId}>
+                <li key={item.fundingId}>
                   <ContributedFundingItem item={item} />
                 </li>
               ))}

src/layouts/MyPage/GiftBox/GiftItem/index.tsx

@@ -13,6 +13,7 @@ const GiftItem = ({ gift, status }: GiftItemProps) => {
     brandName,
     productName,
     productThumbnail,
+    self,
     senderName,
     expiredAt,
     receivedAt,
@@ -41,7 +42,7 @@ const GiftItem = ({ gift, status }: GiftItemProps) => {
       <div className={styles.wrapper_receive_info}>
         <span className={styles.txt_sender}>
           <span className={styles.txt_from}>from. </span>
-          {senderName}
+          {self ? '나' : senderName}
         </span>
         <span className={styles.txt_date}>
           {new Date(receivedAt).toLocaleString()}

src/layouts/MyPage/OrderHistory/OrderItem/index.tsx

@@ -21,7 +21,7 @@ const OrderItem = ({ item }: OrderItemProps) => {
       <div className={styles.wrapper_order}>
         <div className={styles.section_receiver}>
           <span className={styles.ico_receiver} />
-          {item.receiverName}
+          {item.self ? '나' : item.receiverName}
           <span className={styles.txt_detail}>
             상세보기
             <span className={styles.ico_detail} />

src/mocks/giftHandler.ts

@@ -9,6 +9,7 @@ const gifts: Gift[] = Array.from({ length: 50 }).map((_, i) => ({
   productName: `사용가능 상품${i}`,
   productThumbnail:
     'https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20201230180133_cd30cb29560f4f1f8c7f380eb94e3cf1.png',
+  self: false,
   senderName: '홍길동',
   receivedAt: '2022-05-23T23:59:59',
   expiredAt: '2024-12-31T23:59:59',

src/mocks/paymentHandler.ts

@@ -14,6 +14,7 @@ import {
 } from 'types/payment';
 
 const receiver = {
+  self: false,
   name: '김펀딩',
   photoUrl:
     'https://gift-s.kakaocdn.net/dn/gift/images/m640/bg_profile_default.png',

src/pages/FundingComplete/index.tsx

@@ -27,7 +27,7 @@ const FundingComplete = () => {
   return (
     <MainWrapper>
       <section className={styles.wrapper_content}>
-        <PaymentReceiver receivers={[receiver]} paymentType="funding" />
+        <PaymentReceiver receiver={receiver} paymentType="funding" />
 
         <div className={styles.area_item}>
           <div className={styles.txt_title}>기여한 펀딩</div>

src/pages/GiftComplete/index.tsx

@@ -27,7 +27,7 @@ const GiftComplete = () => {
   return (
     <MainWrapper>
       <section className={styles.wrapper_content}>
-        <PaymentReceiver receivers={[receiver]} paymentType="gift" />
+        <PaymentReceiver receiver={receiver} paymentType="gift" />
 
         <div className={styles.area_item}>
           <div className={styles.txt_title}>보낸 선물</div>

src/stories/GiftItem.stories.tsx

@@ -29,6 +29,7 @@ const giftData: Gift = {
   productName: '상품',
   productThumbnail:
     'https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20201230180133_cd30cb29560f4f1f8c7f380eb94e3cf1.png',
+  self: false,
   senderName: '홍길동',
   receivedAt: '2022-05-23T23:59:59',
   expiredAt: '2024-12-31T23:59:59',

src/types/Gift.ts

@@ -10,6 +10,7 @@ export type Gift = {
   brandName: string;
   productName: string;
   productThumbnail: string;
+  self: boolean;
   senderName: string;
   receivedAt: string;
   expiredAt: string;

src/types/fundingHistory.ts

@@ -8,14 +8,13 @@ export type ContributedFundingItemType = {
     price: number;
     brandName: string;
   };
-  fundingDetail: {
-    fundingId: number;
-    fundingDetailId: number;
-    contributedAmount: number;
-    contributedAt: string;
-    creatorName: string;
-    status: ContributedFundingItemStatus;
-  };
+  fundingId: number;
+  fundingDetailId: number;
+  contributedAmount: number;
+  contributedAt: string;
+  creatorName: string;
+  self: boolean;
+  status: ContributedFundingItemStatus;
 };
 
 export const REGISTERED_ITEM_STATUS = {

src/types/order.ts

@@ -3,6 +3,7 @@ import { ProductItem } from 'types/productItem';
 export type OrderItemType = {
   id: number;
   orderNumber: string;
+  self: boolean;
   receiverName: string;
   product: Pick<
     ProductItem,

src/types/payment.ts

@@ -1,6 +1,7 @@
 import { ProductItem } from './productItem';
 
 export type Receiver = {
+  self: boolean;
   name: string;
   photoUrl: string;
 };