From 6abe835ee7229fdc958e0b475168fcebd85f962f Mon Sep 17 00:00:00 2001
From: hyobin <hyobb109@gmail.com>
Date: Fri, 4 Aug 2023 16:33:18 +0900
Subject: [PATCH 1/7] =?UTF-8?q?[Feat]=20[GGFE-164]=20=EA=B5=AC=EB=A7=A4=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=BD=94=EC=9D=B8=20=EB=B6=80=EC=A1=B1=ED=95=A0=20?=
 =?UTF-8?q?=EB=95=8C=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modal/ModalProvider.tsx            |  7 +++--
 .../modal/store/purchase/NoCoinModal.tsx      | 26 +++++++++++++++++
 hooks/modal/store/purchase/useNoCoinModal.ts  | 20 +++++++++++++
 styles/modal/store/NoCoinModal.module.scss    | 28 +++++++++++++++++++
 types/modalTypes.ts                           |  8 +++++-
 5 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 components/modal/store/purchase/NoCoinModal.tsx
 create mode 100644 hooks/modal/store/purchase/useNoCoinModal.ts
 create mode 100644 styles/modal/store/NoCoinModal.module.scss

diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx
index 2ef2c3c1e..292212080 100644
--- a/components/modal/ModalProvider.tsx
+++ b/components/modal/ModalProvider.tsx
@@ -24,6 +24,7 @@ import AdminModifyScoreModal from './admin/AdminModifyScoreModal';
 import styles from 'styles/modal/Modal.module.scss';
 import BuyModal from './store/purchase/BuyModal';
 import GiftModal from './store/purchase/GiftModal';
+import NoCoinModal from './store/purchase/NoCoinModal';
 
 export default function ModalProvider() {
   const [
@@ -40,6 +41,7 @@ export default function ModalProvider() {
       penaltyId,
       ISeason,
       ModifyScore,
+      priceTag,
     },
     setModal,
   ] = useRecoilState(modalState);
@@ -76,8 +78,9 @@ export default function ModalProvider() {
       <AdminModifyScoreModal {...ModifyScore} />
     ) : null,
     'USER-KAKAO_EDIT': <KakaoEditModal />,
-    'PURCHASE-BUY': <BuyModal />,
-    'PURCHASE-GIFT': <GiftModal />,
+    'PURCHASE-BUY': priceTag ? <BuyModal {...priceTag} /> : null,
+    'PURCHASE-GIFT': priceTag ? <GiftModal {...priceTag} /> : null,
+    'PURCHASE-NO_COIN': <NoCoinModal />,
   };
 
   useEffect(() => {
diff --git a/components/modal/store/purchase/NoCoinModal.tsx b/components/modal/store/purchase/NoCoinModal.tsx
new file mode 100644
index 000000000..e376b8b02
--- /dev/null
+++ b/components/modal/store/purchase/NoCoinModal.tsx
@@ -0,0 +1,26 @@
+import useNoCoinModal from 'hooks/modal/store/purchase/useNoCoinModal';
+import styles from 'styles/modal/store/NoCoinModal.module.scss';
+
+export default function NoCoinModal() {
+  const { onPlay, onCancel } = useNoCoinModal();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.phrase}>
+        <div className={styles.emoji}>😥</div>
+        <div className={styles.message}>보유 코인이 부족합니다</div>
+        <div className={styles.details}>
+          💸게임에 참여하여 코인을 획득해보세요💸
+        </div>
+      </div>
+      <div className={styles.buttons}>
+        <div className={styles.negative}>
+          <input onClick={onCancel} type='button' value='취소' />
+        </div>
+        <div className={styles.positive}>
+          <input onClick={onPlay} type='button' value='게임 참여' />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/hooks/modal/store/purchase/useNoCoinModal.ts b/hooks/modal/store/purchase/useNoCoinModal.ts
new file mode 100644
index 000000000..1400262b3
--- /dev/null
+++ b/hooks/modal/store/purchase/useNoCoinModal.ts
@@ -0,0 +1,20 @@
+import { useSetRecoilState } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+import router from 'next/router';
+
+const useNoCoinModal = () => {
+  const setModal = useSetRecoilState(modalState);
+
+  const onPlay = () => {
+    setModal({ modalName: null });
+    router.push(`/match`);
+  };
+
+  const onCancel = () => {
+    setModal({ modalName: null });
+  };
+
+  return { onPlay, onCancel };
+};
+
+export default useNoCoinModal;
diff --git a/styles/modal/store/NoCoinModal.module.scss b/styles/modal/store/NoCoinModal.module.scss
new file mode 100644
index 000000000..64f1e3a4e
--- /dev/null
+++ b/styles/modal/store/NoCoinModal.module.scss
@@ -0,0 +1,28 @@
+@import 'styles/common.scss';
+
+.container {
+  @include modalContainer('SKYPINK');
+}
+
+.phrase {
+  @include modal-phrase;
+  color: rgba(49, 47, 49, 1);
+  .message {
+    font-size: 1.125rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    line-height: 200%;
+  }
+  .details {
+    font-size: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 550;
+    letter-spacing: 0.04rem;
+    color: black;
+  }
+}
+
+.buttons {
+  @include modalButton;
+}
diff --git a/types/modalTypes.ts b/types/modalTypes.ts
index e5c5b8b4c..564cc12c8 100644
--- a/types/modalTypes.ts
+++ b/types/modalTypes.ts
@@ -14,7 +14,7 @@ type UserModal = 'PROFILE_EDIT' | 'KAKAO_EDIT';
 
 type FixedModal = 'AFTER_GAME' | 'STAT';
 
-type PurchaseModal = 'BUY' | 'GIFT';
+type PurchaseModal = 'BUY' | 'GIFT' | 'NO_COIN';
 
 type AdminModal =
   | 'PROFILE'
@@ -62,6 +62,11 @@ export interface manual {
   radioMode: MatchMode;
 }
 
+export interface PriceTag {
+  product: string;
+  price: number;
+}
+
 export interface Modal {
   modalName: ModalName;
   manual?: manual;
@@ -76,4 +81,5 @@ export interface Modal {
   penaltyId?: number;
   ISeason?: ISeason;
   ModifyScore?: ModifyScoreType;
+  priceTag?: PriceTag;
 }

From eb1743cec4af2a645f10fac270b840d05cfd6dd4 Mon Sep 17 00:00:00 2001
From: hyobin <hyobb109@gmail.com>
Date: Fri, 4 Aug 2023 16:34:25 +0900
Subject: [PATCH 2/7] =?UTF-8?q?[Feat]=20[GGFE-164]=20=EA=B5=AC=EB=A7=A4,?=
 =?UTF-8?q?=20=EC=84=A0=EB=AC=BC=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=9D=B4=EB=A6=84,=EA=B0=80=EA=B2=A9=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modal/store/purchase/BuyModal.tsx  | 16 ++++++++---
 components/modal/store/purchase/GiftModal.tsx | 14 ++++++++--
 components/shop/ItemCard.tsx                  | 28 +++++++++++++++++--
 styles/modal/store/BuyModal.module.scss       | 25 ++++++++++++++++-
 styles/modal/store/GiftModal.module.scss      | 23 +++++++++++++++
 5 files changed, 96 insertions(+), 10 deletions(-)

diff --git a/components/modal/store/purchase/BuyModal.tsx b/components/modal/store/purchase/BuyModal.tsx
index fa043ea5d..a6e68ce81 100644
--- a/components/modal/store/purchase/BuyModal.tsx
+++ b/components/modal/store/purchase/BuyModal.tsx
@@ -1,21 +1,29 @@
 import useBuyModal from 'hooks/modal/store/purchase/useBuyModal';
 import styles from 'styles/modal/store/BuyModal.module.scss';
+import { PriceTag } from 'types/modalTypes';
 
-export default function BuyModal() {
+export default function BuyModal({ product, price }: PriceTag) {
   const { onPurchase, onCancel } = useBuyModal();
 
   return (
     <div className={styles.container}>
       <div className={styles.phrase}>
-        <div className={styles.emoji}>🏓</div>
+        <div className={styles.emoji}>🛍️</div>
         <div className={styles.message}>구매하시겠습니까?</div>
+        <div className={styles.itemInfo}>
+          <div className={styles.itemName}>아이템: {product}</div>
+          <div className={styles.itemPrice}>가격: {price}</div>
+        </div>
+        <div className={styles.warning}>
+          <p>⚠ 구매한 아이템은 환불이 불가합니다 ⚠</p>
+        </div>
       </div>
       <div className={styles.buttons}>
         <div className={styles.negative}>
-          <input onClick={onCancel} type='button' value='취소' />
+          <input onClick={onCancel} type='button' value='아니오' />
         </div>
         <div className={styles.positive}>
-          <input onClick={onPurchase} type='button' value='확인' />
+          <input onClick={onPurchase} type='button' value='예' />
         </div>
       </div>
     </div>
diff --git a/components/modal/store/purchase/GiftModal.tsx b/components/modal/store/purchase/GiftModal.tsx
index 1ab4e94fa..f5a5b8cfc 100644
--- a/components/modal/store/purchase/GiftModal.tsx
+++ b/components/modal/store/purchase/GiftModal.tsx
@@ -1,14 +1,22 @@
 import useGiftModal from 'hooks/modal/store/purchase/useGiftModal';
 import styles from 'styles/modal/store/GiftModal.module.scss';
+import { PriceTag } from 'types/modalTypes';
 
-export default function GiftModal() {
+export default function GiftModal({ product, price }: PriceTag) {
   const { onPurchase, onCancel } = useGiftModal();
 
   return (
     <div className={styles.container}>
       <div className={styles.phrase}>
-        <div className={styles.emoji}>🏓</div>
-        <div className={styles.message}>선물하시겠습니까?</div>
+        <div className={styles.emoji}>🎁</div>
+        <div className={styles.message}>선물하기</div>
+        <div className={styles.itemInfo}>
+          <div className={styles.itemName}>아이템: {product}</div>
+          <div className={styles.itemPrice}>가격: {price}</div>
+        </div>
+        <div className={styles.warning}>
+          <p>⚠ 선물한 아이템은 환불 및 취소가 불가합니다 ⚠</p>
+        </div>
       </div>
       <div className={styles.buttons}>
         <div className={styles.negative}>
diff --git a/components/shop/ItemCard.tsx b/components/shop/ItemCard.tsx
index 1c73399e0..b595edc5b 100644
--- a/components/shop/ItemCard.tsx
+++ b/components/shop/ItemCard.tsx
@@ -8,14 +8,32 @@ import { modalState } from 'utils/recoil/modal';
 export default function ItemCard({ item }: { item: Item }) {
   const setModal = useSetRecoilState<Modal>(modalState);
 
+  // TODO: 상점 페이지에서 코인 정보 받아오기
+  const coin = 1000;
+
   const handleGift = () => {
     setModal({
       modalName: 'PURCHASE-GIFT',
+      priceTag: {
+        product: item.itemName,
+        price: item.salePrice,
+      },
     });
   };
+
   const handleBuying = () => {
     setModal({
       modalName: 'PURCHASE-BUY',
+      priceTag: {
+        product: item.itemName,
+        price: item.salePrice,
+      },
+    });
+  };
+
+  const handleNoCoin = () => {
+    setModal({
+      modalName: 'PURCHASE-NO_COIN',
     });
   };
 
@@ -49,10 +67,16 @@ export default function ItemCard({ item }: { item: Item }) {
           <p>{item.content}</p>
         </div>
         <div className={styles.buttons}>
-          <button className={styles.gift} onClick={handleGift}>
+          <button
+            className={styles.gift}
+            onClick={item.salePrice < coin ? handleGift : handleNoCoin}
+          >
             선물하기
           </button>
-          <button className={styles.buy} onClick={handleBuying}>
+          <button
+            className={styles.buy}
+            onClick={item.salePrice < coin ? handleBuying : handleNoCoin}
+          >
             구매하기
           </button>
         </div>
diff --git a/styles/modal/store/BuyModal.module.scss b/styles/modal/store/BuyModal.module.scss
index 103a3e6e2..ae1700c8c 100644
--- a/styles/modal/store/BuyModal.module.scss
+++ b/styles/modal/store/BuyModal.module.scss
@@ -1,7 +1,7 @@
 @import 'styles/common.scss';
 
 .container {
-  @include modalContainer('SKYPINK');
+  @include modalContainer('PINKVIOLET');
 }
 
 .phrase {
@@ -14,6 +14,29 @@
     letter-spacing: 0.04rem;
     line-height: 200%;
   }
+  .itemInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    line-height: 150%;
+    .itemName {
+      color: #666666;
+    }
+    .itemPrice {
+      color: #666666;
+    }
+  }
+  .warning {
+    font-size: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    color: #ff0000;
+  }
 }
 
 .buttons {
diff --git a/styles/modal/store/GiftModal.module.scss b/styles/modal/store/GiftModal.module.scss
index 103a3e6e2..7e17559ab 100644
--- a/styles/modal/store/GiftModal.module.scss
+++ b/styles/modal/store/GiftModal.module.scss
@@ -14,6 +14,29 @@
     letter-spacing: 0.04rem;
     line-height: 200%;
   }
+  .itemInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    line-height: 150%;
+    .itemName {
+      color: #666666;
+    }
+    .itemPrice {
+      color: #666666;
+    }
+  }
+  .warning {
+    font-size: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    color: #ff0000;
+  }
 }
 
 .buttons {

From dbe1c4e98f6eca7a3cac92b9de36786ac72115f1 Mon Sep 17 00:00:00 2001
From: Hyobin Cho <hyobicho@c1r7s4.42seoul.kr>
Date: Fri, 4 Aug 2023 21:27:18 +0900
Subject: [PATCH 3/7] =?UTF-8?q?[Feat]=20[GGFE-164]=20=EC=84=A0=EB=AC=BC=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9C=A0=EC=A0=80=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modal/store/purchase/GiftModal.tsx | 14 +++++
 components/shop/GiftSearchBar.tsx             | 55 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 components/shop/GiftSearchBar.tsx

diff --git a/components/modal/store/purchase/GiftModal.tsx b/components/modal/store/purchase/GiftModal.tsx
index f5a5b8cfc..2e9caf283 100644
--- a/components/modal/store/purchase/GiftModal.tsx
+++ b/components/modal/store/purchase/GiftModal.tsx
@@ -1,15 +1,29 @@
+import GiftSearchBar from 'components/shop/GiftSearchBar';
 import useGiftModal from 'hooks/modal/store/purchase/useGiftModal';
 import styles from 'styles/modal/store/GiftModal.module.scss';
 import { PriceTag } from 'types/modalTypes';
 
+interface Gift {
+  itemId: number;
+  ownerId: string;
+}
+
 export default function GiftModal({ product, price }: PriceTag) {
   const { onPurchase, onCancel } = useGiftModal();
 
+  const gift: Gift = {
+    itemId: 1,
+    ownerId: 'test',
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.phrase}>
         <div className={styles.emoji}>🎁</div>
         <div className={styles.message}>선물하기</div>
+        <GiftSearchBar />
+        {/* TODO: 선택한 유저 없을 땐 선물할 유저를 골라주세요 띄우기 */}
+        <div className={styles.message}>💗{gift.ownerId}에게 선물💗</div>
         <div className={styles.itemInfo}>
           <div className={styles.itemName}>아이템: {product}</div>
           <div className={styles.itemPrice}>가격: {price}</div>
diff --git a/components/shop/GiftSearchBar.tsx b/components/shop/GiftSearchBar.tsx
new file mode 100644
index 000000000..2af4abe61
--- /dev/null
+++ b/components/shop/GiftSearchBar.tsx
@@ -0,0 +1,55 @@
+import { GoSearch } from 'react-icons/go';
+import { IoIosCloseCircle } from 'react-icons/io';
+import styles from 'styles/main/SearchBar.module.scss';
+
+import useSearchBar from 'hooks/useSearchBar';
+
+export default function GiftSearchBar() {
+  const {
+    keyword,
+    setKeyword,
+    keywordHandler,
+    showDropDown,
+    setShowDropDown,
+    searchResult,
+    searchBarRef,
+    handleKeyDown,
+  } = useSearchBar();
+
+  return (
+    <div className={styles.searchBar} ref={searchBarRef}>
+      <input
+        type='text'
+        onChange={keywordHandler}
+        onKeyDown={handleKeyDown}
+        onFocus={() => setShowDropDown(true)}
+        placeholder='유저 검색하기'
+        maxLength={15}
+        value={keyword}
+      />
+      <div className={styles.icons}>
+        {keyword ? (
+          <span className={styles.reset} onClick={() => setKeyword('')}>
+            <IoIosCloseCircle />
+          </span>
+        ) : (
+          <span>
+            <GoSearch />
+          </span>
+        )}
+      </div>
+      {showDropDown && keyword && (
+        <div className={styles.dropdown}>
+          {searchResult.length ? (
+            searchResult.map((intraId: string) => (
+              // TODO: 선택한 유저 아이디를 FOR '검색한 사람 아이디' 부분에 넣어주기
+              <div key={intraId}>{intraId}</div>
+            ))
+          ) : (
+            <div>검색 결과가 없습니다.</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

From 767c9452f4a156d2558e8795832e71bc0cba7785 Mon Sep 17 00:00:00 2001
From: Hyobin Cho <hyobicho@c1r8s2.42seoul.kr>
Date: Sun, 6 Aug 2023 22:03:34 +0900
Subject: [PATCH 4/7] =?UTF-8?q?[Feat]=20[GGFE-164]=20=EC=84=A0=EB=AC=BC?=
 =?UTF-8?q?=ED=95=A0=20=EC=9C=A0=EC=A0=80=20=EC=95=84=EC=9D=B4=EB=94=94=20?=
 =?UTF-8?q?=EB=B0=9B=EC=95=84=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modal/store/purchase/GiftModal.tsx | 27 ++++++++++---------
 components/shop/GiftSearchBar.tsx             | 27 +++++++++++++++----
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/modal/store/purchase/GiftModal.tsx b/components/modal/store/purchase/GiftModal.tsx
index 2e9caf283..23064a9dc 100644
--- a/components/modal/store/purchase/GiftModal.tsx
+++ b/components/modal/store/purchase/GiftModal.tsx
@@ -1,33 +1,33 @@
 import GiftSearchBar from 'components/shop/GiftSearchBar';
 import useGiftModal from 'hooks/modal/store/purchase/useGiftModal';
+import { useEffect, useState } from 'react';
 import styles from 'styles/modal/store/GiftModal.module.scss';
 import { PriceTag } from 'types/modalTypes';
 
-interface Gift {
-  itemId: number;
-  ownerId: string;
-}
-
+// TODO: itemId도 받아오기
 export default function GiftModal({ product, price }: PriceTag) {
   const { onPurchase, onCancel } = useGiftModal();
+  const [recipient, setRecipient] = useState<string>(''); // TODO: recipient를 GiftSearchBar에서 받아오기
 
-  const gift: Gift = {
-    itemId: 1,
-    ownerId: 'test',
-  };
+  useEffect(() => {
+    console.log('recipient: ', recipient);
+  }, [recipient]);
 
   return (
     <div className={styles.container}>
       <div className={styles.phrase}>
         <div className={styles.emoji}>🎁</div>
         <div className={styles.message}>선물하기</div>
-        <GiftSearchBar />
-        {/* TODO: 선택한 유저 없을 땐 선물할 유저를 골라주세요 띄우기 */}
-        <div className={styles.message}>💗{gift.ownerId}에게 선물💗</div>
         <div className={styles.itemInfo}>
           <div className={styles.itemName}>아이템: {product}</div>
           <div className={styles.itemPrice}>가격: {price}</div>
         </div>
+        <GiftSearchBar recipient={recipient} setRecipient={setRecipient} />
+        {recipient !== '' && (
+          <div className={styles.recipient}>
+            {recipient}님에게 선물하시겠습니까?
+          </div>
+        )}
         <div className={styles.warning}>
           <p>⚠ 선물한 아이템은 환불 및 취소가 불가합니다 ⚠</p>
         </div>
@@ -36,8 +36,9 @@ export default function GiftModal({ product, price }: PriceTag) {
         <div className={styles.negative}>
           <input onClick={onCancel} type='button' value='취소' />
         </div>
+        {/* TODO: 보내기 버튼 클릭 시 POST */}
         <div className={styles.positive}>
-          <input onClick={onPurchase} type='button' value='확인' />
+          <input onClick={onPurchase} type='button' value='보내기' />
         </div>
       </div>
     </div>
diff --git a/components/shop/GiftSearchBar.tsx b/components/shop/GiftSearchBar.tsx
index 2af4abe61..08b20ace9 100644
--- a/components/shop/GiftSearchBar.tsx
+++ b/components/shop/GiftSearchBar.tsx
@@ -1,10 +1,16 @@
 import { GoSearch } from 'react-icons/go';
+import { useEffect, Dispatch, SetStateAction } from 'react';
 import { IoIosCloseCircle } from 'react-icons/io';
 import styles from 'styles/main/SearchBar.module.scss';
-
 import useSearchBar from 'hooks/useSearchBar';
 
-export default function GiftSearchBar() {
+export default function GiftSearchBar({
+  recipient,
+  setRecipient,
+}: {
+  recipient: string;
+  setRecipient: Dispatch<SetStateAction<string>>;
+}) {
   const {
     keyword,
     setKeyword,
@@ -16,14 +22,23 @@ export default function GiftSearchBar() {
     handleKeyDown,
   } = useSearchBar();
 
+  const handleClick = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    intraId: string
+  ) => {
+    setKeyword(intraId);
+    setRecipient(intraId);
+    setShowDropDown(false);
+  };
+
   return (
-    <div className={styles.searchBar} ref={searchBarRef}>
+    <div id={styles.gift} className={styles.searchBar} ref={searchBarRef}>
       <input
         type='text'
         onChange={keywordHandler}
         onKeyDown={handleKeyDown}
         onFocus={() => setShowDropDown(true)}
-        placeholder='유저 검색하기'
+        placeholder='선물할 유저 검색하기'
         maxLength={15}
         value={keyword}
       />
@@ -43,7 +58,9 @@ export default function GiftSearchBar() {
           {searchResult.length ? (
             searchResult.map((intraId: string) => (
               // TODO: 선택한 유저 아이디를 FOR '검색한 사람 아이디' 부분에 넣어주기
-              <div key={intraId}>{intraId}</div>
+              <div key={intraId} onClick={(e) => handleClick(e, intraId)}>
+                {intraId}
+              </div>
             ))
           ) : (
             <div>검색 결과가 없습니다.</div>

From ba2b3e73755b0087c04626fafa135e6808638108 Mon Sep 17 00:00:00 2001
From: Hyobin Cho <hyobicho@c1r8s2.42seoul.kr>
Date: Sun, 6 Aug 2023 22:04:20 +0900
Subject: [PATCH 5/7] =?UTF-8?q?[Style]=20[GGFE-164]=20GiftSearchBar=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/main/SearchBar.module.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/styles/main/SearchBar.module.scss b/styles/main/SearchBar.module.scss
index ed4180a4f..68a9f734e 100644
--- a/styles/main/SearchBar.module.scss
+++ b/styles/main/SearchBar.module.scss
@@ -70,3 +70,14 @@
     border-radius: 0 0 $mini-radius $mini-radius;
   }
 }
+
+#gift {
+  input {
+    width: calc(100% - 1.5rem);
+  }
+  .icons {
+    span {
+      font-size: 0.9rem;
+    }
+  }
+}

From 0d764e3c15770f0faab65bb09d855cd9f228d89a Mon Sep 17 00:00:00 2001
From: Hyobin Cho <hyobicho@c1r8s2.42seoul.kr>
Date: Sun, 6 Aug 2023 22:05:02 +0900
Subject: [PATCH 6/7] =?UTF-8?q?[Style]=20[GGFE-164]=20=EA=B5=AC=EB=A7=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20margin=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/modal/store/BuyModal.module.scss    |  1 +
 styles/modal/store/GiftModal.module.scss   | 11 +++++++++++
 styles/modal/store/NoCoinModal.module.scss |  2 ++
 3 files changed, 14 insertions(+)

diff --git a/styles/modal/store/BuyModal.module.scss b/styles/modal/store/BuyModal.module.scss
index ae1700c8c..0a544eda7 100644
--- a/styles/modal/store/BuyModal.module.scss
+++ b/styles/modal/store/BuyModal.module.scss
@@ -7,6 +7,7 @@
 .phrase {
   @include modal-phrase;
   color: rgba(49, 47, 49, 1);
+  margin-bottom: 0.875rem;
   .message {
     font-size: 1.125rem;
     font-family: 'NanumSquare_acR', sans-serif;
diff --git a/styles/modal/store/GiftModal.module.scss b/styles/modal/store/GiftModal.module.scss
index 7e17559ab..657817eb9 100644
--- a/styles/modal/store/GiftModal.module.scss
+++ b/styles/modal/store/GiftModal.module.scss
@@ -7,6 +7,7 @@
 .phrase {
   @include modal-phrase;
   color: rgba(49, 47, 49, 1);
+  margin-bottom: 0.875rem;
   .message {
     font-size: 1.125rem;
     font-family: 'NanumSquare_acR', sans-serif;
@@ -14,6 +15,16 @@
     letter-spacing: 0.04rem;
     line-height: 200%;
   }
+
+  .recipient {
+    font-size: 1rem;
+    margin-top: 0.875rem;
+    font-family: 'NanumSquare_acR', sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.04rem;
+    line-height: 200%;
+  }
+
   .itemInfo {
     display: flex;
     flex-direction: column;
diff --git a/styles/modal/store/NoCoinModal.module.scss b/styles/modal/store/NoCoinModal.module.scss
index 64f1e3a4e..83fdf408a 100644
--- a/styles/modal/store/NoCoinModal.module.scss
+++ b/styles/modal/store/NoCoinModal.module.scss
@@ -6,6 +6,7 @@
 
 .phrase {
   @include modal-phrase;
+  margin-bottom: 0.875rem;
   color: rgba(49, 47, 49, 1);
   .message {
     font-size: 1.125rem;
@@ -15,6 +16,7 @@
     line-height: 200%;
   }
   .details {
+    margin: 0.875rem;
     font-size: 0.875rem;
     font-family: 'NanumSquare_acR', sans-serif;
     font-weight: 550;

From 9ab034aab4b137ee81bc721735c98228fef12ee1 Mon Sep 17 00:00:00 2001
From: hyobin <hyobb109@gmail.com>
Date: Mon, 7 Aug 2023 11:14:32 +0900
Subject: [PATCH 7/7] =?UTF-8?q?[Style]=20[GGFE-164]=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=ED=85=9C,=20=EA=B0=80=EA=B2=A9=20=ED=91=9C=EC=8B=9C=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modal/store/purchase/BuyModal.tsx  | 10 ++++++++--
 components/modal/store/purchase/GiftModal.tsx | 10 ++++++++--
 styles/modal/store/BuyModal.module.scss       | 15 ++++++++++-----
 styles/modal/store/GiftModal.module.scss      | 19 +++++++++++++------
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/components/modal/store/purchase/BuyModal.tsx b/components/modal/store/purchase/BuyModal.tsx
index a6e68ce81..ca3272a62 100644
--- a/components/modal/store/purchase/BuyModal.tsx
+++ b/components/modal/store/purchase/BuyModal.tsx
@@ -11,8 +11,14 @@ export default function BuyModal({ product, price }: PriceTag) {
         <div className={styles.emoji}>🛍️</div>
         <div className={styles.message}>구매하시겠습니까?</div>
         <div className={styles.itemInfo}>
-          <div className={styles.itemName}>아이템: {product}</div>
-          <div className={styles.itemPrice}>가격: {price}</div>
+          <div className={styles.itemName}>
+            <div>아이템:</div>
+            <div>{product}</div>
+          </div>
+          <div className={styles.itemPrice}>
+            <div>가격:</div>
+            <div>{price}</div>
+          </div>
         </div>
         <div className={styles.warning}>
           <p>⚠ 구매한 아이템은 환불이 불가합니다 ⚠</p>
diff --git a/components/modal/store/purchase/GiftModal.tsx b/components/modal/store/purchase/GiftModal.tsx
index 23064a9dc..a15ba6986 100644
--- a/components/modal/store/purchase/GiftModal.tsx
+++ b/components/modal/store/purchase/GiftModal.tsx
@@ -19,8 +19,14 @@ export default function GiftModal({ product, price }: PriceTag) {
         <div className={styles.emoji}>🎁</div>
         <div className={styles.message}>선물하기</div>
         <div className={styles.itemInfo}>
-          <div className={styles.itemName}>아이템: {product}</div>
-          <div className={styles.itemPrice}>가격: {price}</div>
+          <div className={styles.itemName}>
+            <div>아이템:</div>
+            <div>{product}</div>
+          </div>
+          <div className={styles.itemPrice}>
+            <div>가격:</div>
+            <div>{price}</div>
+          </div>
         </div>
         <GiftSearchBar recipient={recipient} setRecipient={setRecipient} />
         {recipient !== '' && (
diff --git a/styles/modal/store/BuyModal.module.scss b/styles/modal/store/BuyModal.module.scss
index 0a544eda7..3b9bebb1e 100644
--- a/styles/modal/store/BuyModal.module.scss
+++ b/styles/modal/store/BuyModal.module.scss
@@ -16,19 +16,24 @@
     line-height: 200%;
   }
   .itemInfo {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 0.875rem;
     font-size: 0.875rem;
     font-family: 'NanumSquare_acR', sans-serif;
     font-weight: 700;
     letter-spacing: 0.04rem;
     line-height: 150%;
+    color: #666666;
     .itemName {
-      color: #666666;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
     }
     .itemPrice {
-      color: #666666;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
     }
   }
   .warning {
diff --git a/styles/modal/store/GiftModal.module.scss b/styles/modal/store/GiftModal.module.scss
index 657817eb9..96e666f9d 100644
--- a/styles/modal/store/GiftModal.module.scss
+++ b/styles/modal/store/GiftModal.module.scss
@@ -6,11 +6,12 @@
 
 .phrase {
   @include modal-phrase;
+  font-family: 'NanumSquare_acR', sans-serif;
   color: rgba(49, 47, 49, 1);
   margin-bottom: 0.875rem;
+
   .message {
     font-size: 1.125rem;
-    font-family: 'NanumSquare_acR', sans-serif;
     font-weight: 700;
     letter-spacing: 0.04rem;
     line-height: 200%;
@@ -26,21 +27,27 @@
   }
 
   .itemInfo {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 0.875rem;
     font-size: 0.875rem;
     font-family: 'NanumSquare_acR', sans-serif;
     font-weight: 700;
     letter-spacing: 0.04rem;
     line-height: 150%;
+    color: #666666;
     .itemName {
-      color: #666666;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
     }
     .itemPrice {
-      color: #666666;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
     }
   }
+
   .warning {
     font-size: 0.875rem;
     font-family: 'NanumSquare_acR', sans-serif;