diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
new file mode 100644
index 000000000..2ef3ee076
--- /dev/null
+++ b/.github/workflows/test-deploy.yml
@@ -0,0 +1,40 @@
+name: Test Deploy to Vercel
+
+# action을 돌리기 전에 secret을 설정해야 한다.
+# - TEST_DEPLOY_REPO_OWNER : vercel과 연결된 repository의 owner
+# - TEST_DEPLOY_REPO_OWNER_TOKEN : vercel과 연결된 repository의 owner의 token (repo 권한 필요)
+
+on:
+  push:
+    branches:
+      - test-deploy
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: create build.sh
+        run: |
+          touch build.sh
+          echo "#!/bin/sh" >> build.sh
+          echo "cd ../" >> build.sh
+          echo "mkdir output" >> build.sh
+          echo "cp -R ./42gg.client/* ./output" >> build.sh
+          echo "cp -R ./output ./42gg.client/" >> build.sh
+          chmod +x build.sh
+
+      - name: run build.sh
+        run: sh ./build.sh
+
+      - name: Pushes to another repository
+        uses: cpina/github-action-push-to-another-repository@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.TEST_DEPLOY_REPO_OWNER_TOKEN }}
+        with:
+          source-directory: 'output'
+          destination-github-username: ${{ secrets.TEST_DEPLOY_REPO_OWNER }}
+          destination-repository-name: '42gg.client'
+          target-branch: 'test-deploy'
+          commit-message: '[Test-Deploy] Update from 42gg.client'
diff --git a/components/modal/admin/AdminDeleteItem.tsx b/components/modal/admin/AdminDeleteItem.tsx
index bb06a27ca..2bf49c915 100644
--- a/components/modal/admin/AdminDeleteItem.tsx
+++ b/components/modal/admin/AdminDeleteItem.tsx
@@ -7,7 +7,7 @@ import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/modal/AdminDeleteItem.module.scss';
 
 export default function AdminDeleteItemModal(props: Item) {
-  const { itemId, itemName, content } = props;
+  const { itemId, itemName, mainContent } = props;
   const setModal = useSetRecoilState(modalState);
   const setSnackBar = useSetRecoilState(toastState);
   const user = useRecoilValue(userState).intraId;
@@ -52,7 +52,7 @@ export default function AdminDeleteItemModal(props: Item) {
             <div className={styles.bodyText}>설명 :</div>
             <textarea
               className={styles.contentBlank}
-              value={content}
+              value={mainContent}
               readOnly
             />
           </div>
diff --git a/components/modal/admin/AdminEditItem.tsx b/components/modal/admin/AdminEditItem.tsx
index 4f0b396c6..1049aec4c 100644
--- a/components/modal/admin/AdminEditItem.tsx
+++ b/components/modal/admin/AdminEditItem.tsx
@@ -9,7 +9,7 @@ import useUploadImg from 'hooks/useUploadImg';
 import styles from 'styles/admin/modal/AdminEditItem.module.scss';
 
 export default function AdminEditItemModal(props: Item) {
-  const { itemId, itemName, content, imageUri, originalPrice, discount } =
+  const { itemId, itemName, mainContent, imageUri, originalPrice, discount } =
     props;
   const creator = useRecoilValue(userState).intraId;
   const setModal = useSetRecoilState(modalState);
@@ -115,7 +115,7 @@ export default function AdminEditItemModal(props: Item) {
               className={styles.contentBlank}
               type='text'
               name='content'
-              defaultValue={content}
+              defaultValue={mainContent}
               required
             />
           </div>
diff --git a/components/modal/store/StoreManualModal.tsx b/components/modal/store/StoreManualModal.tsx
index 64bcb3103..e7fe0e13d 100644
--- a/components/modal/store/StoreManualModal.tsx
+++ b/components/modal/store/StoreManualModal.tsx
@@ -44,7 +44,7 @@ const modalContents: contentsType = {
           tag: '',
           content: [
             '상점 페이지 구매 탭에서 판매 중인 아이템을 살펴보세요',
-            '보유한 코인을 한도로 원하는 아이템 구매가 가능합니다',
+            '보유한 코인으로 원하는 아이템 구매가 가능합니다',
           ],
         },
       ],
@@ -60,7 +60,7 @@ const modalContents: contentsType = {
         {
           tag: '',
           content: [
-            '상점 페이지에 보유 코인을 눌러보세요',
+            '상점 페이지에서 코인을 눌러보세요',
             '코인 획득 및 사용 내역을 확인할 수 있습니다',
           ],
         },
@@ -74,7 +74,7 @@ const modalContents: contentsType = {
         {
           tag: '',
           content: [
-            '상점 페이지 구매 탭에서 원하는 아이템의 구매하기 버튼 누르기',
+            '구매 탭에서 원하는 아이템의 구매하기 버튼 누르기',
             '아이템과 가격, 주의사항을 확인하고 확인 버튼을 누르면 구매 완료!',
           ],
         },
@@ -88,7 +88,7 @@ const modalContents: contentsType = {
         {
           tag: '',
           content: [
-            '상점 페이지 구매 탭에서 원하는 아이템의 선물하기 버튼 누르기',
+            '구매 탭에서 원하는 아이템의 선물하기 버튼 누르기',
             '선물하고 싶은 유저 선택',
             '아이템과 가격, 선물 받을 유저의 아이디, 주의사항을 확인하고 보내기 버튼을 누르면 선물 완료!',
           ],
@@ -106,9 +106,8 @@ const modalContents: contentsType = {
         {
           tag: '',
           content: [
-            '메인 페이지에 선물 도착 알림을 받으면 상점 페이지 보관함 탭으로 이동',
-            '선물 받은 아이템엔 선물 상자가 표시됨',
-            '선물 상자를 누르면 선물을 보낸 유저 확인 가능',
+            '알림 탭에서 선물 도착 알림을 받으면 상점 페이지 보관함 탭으로 이동',
+            '새롭게 추가된 아이템의 선물 상자 표시를 꾹 누르면 선물을 보낸 유저 확인 가능',
           ],
         },
       ],
diff --git a/components/modal/store/UserCoinHistoryModal.tsx b/components/modal/store/UserCoinHistoryModal.tsx
index 6da329657..6f8e16b70 100644
--- a/components/modal/store/UserCoinHistoryModal.tsx
+++ b/components/modal/store/UserCoinHistoryModal.tsx
@@ -11,6 +11,7 @@ import {
 } from 'components/modal/ModalButton';
 import CoinHistoryContainer from 'components/modal/store/CoinHistoryContainer';
 import PageNation from 'components/Pagination';
+import CoinImage from 'components/store/CoinImage';
 import styles from 'styles/modal/store/UserCoinHistoryModal.module.scss';
 
 export default function UserCoinHistoryModal({ coin }: ICoin) {
@@ -54,15 +55,7 @@ export default function UserCoinHistoryModal({ coin }: ICoin) {
       <div className={styles.title}>GG코인 내역</div>
       <div className={styles.balance}>
         <div>현재 코인</div>
-        <div className={styles.currentCoin}>
-          <Image
-            src='/image/coinImage.svg'
-            alt={'coin'}
-            width={25}
-            height={25}
-          />
-          {coin} &nbsp;
-        </div>
+        <CoinImage amount={coin} size={25} />
       </div>
       <CoinHistoryContainer useCoinList={coinHistoryList.useCoinList} />
       <div>
diff --git a/components/mode/modeWraps/StoreModeWrap.tsx b/components/mode/modeWraps/StoreModeWrap.tsx
index 366852485..c5347dc87 100644
--- a/components/mode/modeWraps/StoreModeWrap.tsx
+++ b/components/mode/modeWraps/StoreModeWrap.tsx
@@ -6,6 +6,7 @@ import { StoreMode } from 'types/storeTypes';
 import { ICoin } from 'types/userTypes';
 import { modalState } from 'utils/recoil/modal';
 import StoreModeRadioBox from 'components/mode/modeItems/StoreModeRadioBox';
+import CoinImage from 'components/store/CoinImage';
 import styles from 'styles/mode/StoreModeWrap.module.scss';
 
 type StoreModeWrapProps = {
@@ -44,8 +45,7 @@ export function StoreModeWrap({
           매뉴얼
         </button>
         <div className={styles.coins} onClick={viewCoinHistory}>
-          <Image src='/image/coinImage.svg' alt='coin' width={20} height={20} />
-          {coin.coin.toLocaleString()}
+          <CoinImage amount={coin.coin} size={20} />
         </div>
       </div>
       <StoreModeRadioBox
diff --git a/components/store/CoinImage.tsx b/components/store/CoinImage.tsx
new file mode 100644
index 000000000..76bb176b5
--- /dev/null
+++ b/components/store/CoinImage.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image';
+import styles from 'styles/store/CoinImage.module.scss';
+
+export default function CoinImage({
+  amount,
+  size,
+}: {
+  amount: number;
+  size: number;
+}) {
+  return (
+    <div className={styles.ggCoin}>
+      <Image src='/image/coinImage.svg' alt='coin' width={size} height={size} />
+      {amount.toLocaleString()}
+    </div>
+  );
+}
diff --git a/components/store/purchase/ItemCard.tsx b/components/store/purchase/ItemCard.tsx
index c773ee573..8928a9524 100644
--- a/components/store/purchase/ItemCard.tsx
+++ b/components/store/purchase/ItemCard.tsx
@@ -38,63 +38,44 @@ export default function ItemCard({ item, coin }: { item: Item; coin: number }) {
 
   return (
     <div className={styles.itemCard}>
+      {item.discount > 0 && (
+        <div className={styles.badge}>{item.discount}%</div>
+      )}
+
       <div className={styles.preview}>
         <div className={styles.img}>
           {item.imageUri && (
             <Image src={item.imageUri} alt={item.itemName} fill />
           )}
         </div>
-        {item.discount && <div className={styles.badge}>{item.discount}%</div>}
       </div>
-      <div className={styles.details}>
-        <div className={styles.itemPriceTag}>
-          <div className={styles.title}>
-            <h4>{item.itemName}</h4>
-          </div>
-          <div className={styles.priceTags}>
-            {item.discount ? (
-              <h5 className={styles.onDiscount}>{item.originalPrice}</h5>
-            ) : (
-              <h5 className={styles.originalPrice}>
-                <Image
-                  src='/image/coinImage.svg'
-                  alt={'coin'}
-                  width={16}
-                  height={16}
-                />
-                {item.originalPrice}
-              </h5>
-            )}
-            {item.discount !== 0 && (
-              <h5 className={styles.discountedPrice}>
-                <Image
-                  src='/image/coinImage.svg'
-                  alt={'coin'}
-                  width={20}
-                  height={20}
-                />
-                {item.salePrice}
-              </h5>
-            )}
-          </div>
-        </div>
-        <div className={styles.content}>
-          <p>{item.content}</p>
-        </div>
-        <div className={styles.buttons}>
-          <button
-            className={styles.gift}
-            onClick={item.salePrice < coin ? handleGift : handleNoCoin}
-          >
-            선물하기
-          </button>
-          <button
-            className={styles.buy}
-            onClick={item.salePrice < coin ? handleBuying : handleNoCoin}
-          >
-            구매하기
-          </button>
-        </div>
+      <div className={styles.title}>{item.itemName}</div>
+      <div className={styles.priceTag}>
+        <Image src='/image/coinImage.svg' alt={'coin'} width={15} height={15} />
+        <span
+          className={item.discount > 0 ? styles.onDiscount : styles.salePrice}
+        >
+          {item.originalPrice}
+        </span>
+        {item.discount > 0 && (
+          <span className={styles.salePrice}>{item.salePrice}</span>
+        )}
+      </div>
+      <div className={styles.mainContent}>{item.mainContent}</div>
+      <div className={styles.subContent}>{item.subContent}</div>
+      <div className={styles.buttons}>
+        <button
+          className={styles.gift}
+          onClick={item.salePrice < coin ? handleGift : handleNoCoin}
+        >
+          선물하기
+        </button>
+        <button
+          className={styles.buy}
+          onClick={item.salePrice < coin ? handleBuying : handleNoCoin}
+        >
+          구매하기
+        </button>
       </div>
     </div>
   );
diff --git a/pages/api/pingpong/items/store.ts b/pages/api/pingpong/items/store.ts
index 2735a4e18..3afce0b65 100644
--- a/pages/api/pingpong/items/store.ts
+++ b/pages/api/pingpong/items/store.ts
@@ -4,8 +4,9 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 const itemList: Item[] = [
   {
     itemId: 1,
-    itemName: '프로필 사진 변경권',
-    content: '42gg의 프로필 사진을 변경할 수 있는 아이템',
+    itemName: '이미지 변경권',
+    mainContent: '프사 바꿔',
+    subContent: '프로필 이미지를 원하는 이미지로 변경할 수 있는 아이템입니다.',
     itemType: 'PROFILE_IMAGE',
     imageUri: '/image/fallBackSrc.jpeg',
     originalPrice: 100,
@@ -15,7 +16,9 @@ const itemList: Item[] = [
   {
     itemId: 2,
     itemName: '확성기',
-    content: '확성기 설명',
+    mainContent: '오늘 42GG는 내가 접수한다📢😎',
+    subContent:
+      '24시간 동안 모든 페이지 상단에 메시지를 띄울 수 있는 아이템입니다. 사용 다음날 적용됩니다.',
     itemType: 'MEGAPHONE',
     imageUri: '/image/fallBackSrc.jpeg',
     originalPrice: 20,
@@ -24,8 +27,10 @@ const itemList: Item[] = [
   },
   {
     itemId: 3,
-    itemName: '프로필 배경색',
-    content: '프로필 배경색 설명',
+    itemName: '배경 뽑기',
+    mainContent: '난 “Background”부터가 달라',
+    subContent:
+      '랜덤으로 내 프로필 페이지의 배경을 변경할 수 있는 아이템입니다.',
     itemType: 'PROFILE_BACKGROUND',
     imageUri: '/image/fallBackSrc.jpeg',
     originalPrice: 300,
@@ -34,8 +39,9 @@ const itemList: Item[] = [
   },
   {
     itemId: 4,
-    itemName: '프로필 이미지띠',
-    content: '설명',
+    itemName: 'Edge 뽑기',
+    mainContent: '난 “Edge”로 말해..',
+    subContent: '랜덤으로 프로필 테두리 색상을 변경할 수 있는 아이템입니다.',
     itemType: 'PROFILE_BAND',
     imageUri: '/image/fallBackSrc.jpeg',
     originalPrice: 50,
@@ -44,8 +50,10 @@ const itemList: Item[] = [
   },
   {
     itemId: 5,
-    itemName: '이름 색 변경',
-    content: '설명',
+    itemName: 'ID 색깔 변경권',
+    mainContent: '남들과는 다르게! ID 색깔을 바꿔보세요!',
+    subContent:
+      '색상코드를 직접 입력하여 랭킹 페이지의 ID 색상을 바꿀 수 있는 아이템입니다.',
     itemType: 'TEXT_COLOR',
     imageUri: '/image/fallBackSrc.jpeg',
     originalPrice: 200,
diff --git a/stories/admin/AdminEditItem.stories.tsx b/stories/admin/AdminEditItem.stories.tsx
index 6b019eabd..57965a3a3 100644
--- a/stories/admin/AdminEditItem.stories.tsx
+++ b/stories/admin/AdminEditItem.stories.tsx
@@ -8,7 +8,7 @@ const meta: Meta<typeof AdminEditItemModal> = {
   argTypes: {
     itemId: Number,
     itemName: String,
-    content: String,
+    mainContent: String,
     imageUri: String,
     originalPrice: Number,
     discount: Number,
@@ -22,7 +22,7 @@ export const Megaphone: Story = {
   args: {
     itemId: 1,
     itemName: '확성기',
-    content: '확성기입니다',
+    mainContent: '확성기입니다',
     imageUri: 'https://picsum.photos/200/300?grayscale',
     originalPrice: 42,
     discount: 50,
@@ -33,7 +33,7 @@ export const ProfileChange: Story = {
   args: {
     itemId: 2,
     itemName: '프로필 변경권',
-    content: '프로필 변경권입니다',
+    mainContent: '프로필 변경권입니다',
     imageUri: 'https://picsum.photos/200/300?grayscale',
     originalPrice: 42,
     discount: 50,
@@ -43,7 +43,7 @@ export const ProfileBackgroundChange: Story = {
   args: {
     itemId: 3,
     itemName: '프로필 배경 변경권',
-    content: '프로필 배경 변경권입니다',
+    mainContent: '프로필 배경 변경권입니다',
     imageUri: 'https://picsum.photos/200/300?grayscale',
     originalPrice: 100,
     discount: 40,
diff --git a/styles/modal/store/UserCoinHistoryModal.module.scss b/styles/modal/store/UserCoinHistoryModal.module.scss
index 86750c095..cc29c07b5 100644
--- a/styles/modal/store/UserCoinHistoryModal.module.scss
+++ b/styles/modal/store/UserCoinHistoryModal.module.scss
@@ -20,8 +20,5 @@
     font-size: 1.3rem;
     color: #ffffff;
     justify-content: space-between;
-    .currentCoin {
-      @include ggCoin;
-    }
   }
 }
diff --git a/styles/store/CoinImage.module.scss b/styles/store/CoinImage.module.scss
new file mode 100644
index 000000000..c84539567
--- /dev/null
+++ b/styles/store/CoinImage.module.scss
@@ -0,0 +1,9 @@
+@import 'styles/common.scss';
+
+.ggCoin {
+  color: $coin-yellow;
+  img {
+    margin-right: 0.2rem;
+    transform: translateY(0.2rem);
+  }
+}
diff --git a/styles/store/ItemCard.module.scss b/styles/store/ItemCard.module.scss
index ba2ef344e..a8dfa595b 100644
--- a/styles/store/ItemCard.module.scss
+++ b/styles/store/ItemCard.module.scss
@@ -1,114 +1,110 @@
 @import 'styles/common.scss';
 
 .itemCard {
-  position: relative;
-  display: flex;
-  width: 90%;
-  flex-direction: column;
-  margin: 1rem auto;
-  overflow: hidden;
+  display: grid;
+  width: 100%;
+  height: 12.5rem;
+  padding: 0.2rem 0 0.2rem 0.2rem;
+  margin-bottom: 0.7rem;
   font-family: 'NanumSquare_acR', sans-serif;
-  background: white;
-  border-radius: 1rem;
+  background: #ffffff5f;
+  border-radius: 0.3rem;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: repeat(6, auto);
+  grid-template-areas:
+    'image header header ribbon'
+    'image price price price'
+    'image mainContent mainContent mainContent'
+    'image subContent subContent subContent'
+    'image subContent subContent subContent'
+    'image footer footer footer';
+  column-gap: 0.5rem;
 
   .preview {
+    grid-area: image;
     position: relative;
-    height: inherit;
-
+    width: 9.5rem;
+    height: 9.5rem;
+    margin: 1.25rem 0;
     .img {
-      max-width: 100%;
-      height: 8rem;
-      max-height: 100%;
-    }
-    .badge {
-      position: absolute;
-      top: 7%;
-      right: 0;
-      width: 3rem;
-      color: #fff;
-      text-align: center;
-      background-color: #c03434;
-      border-radius: 1.25rem 0 0 1.25rem;
+      object-fit: cover;
     }
   }
 
-  .details {
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    padding-top: 0.5rem;
-    padding-right: 1rem;
-    padding-left: 1rem;
-    background-color: $g1-bottom;
-
-    .itemPriceTag {
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-      justify-content: space-between;
-      color: $coin-yellow;
-      .title {
-        font-weight: bold;
-        color: black;
-        text-align: center;
-      }
-      .priceTags {
-        @include ggCoin;
-        .originalPrice {
-          padding: 0;
-          margin: 0;
-          font-size: 1rem;
-        }
-
-        .onDiscount {
-          padding: 0;
-          margin: 0;
-          font-size: 0.8rem;
-          text-decoration: line-through 0.1rem solid #ff4040;
-        }
-
-        .discountedPrice {
-          padding: 0;
-          margin: 0;
-          font-size: 1rem;
-          font-weight: bold;
-          text-align: center;
-          transform: translateY(-0.05rem);
-        }
-      }
+  .title {
+    margin-top: 1rem;
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: black;
+    grid-area: header;
+  }
+  .priceTag {
+    grid-area: price;
+    font-size: 0.9rem;
+    color: $coin-yellow;
+    @include ggCoin;
+    .salePrice {
+      font-weight: bold;
     }
-    .content {
-      color: #282828;
+    .onDiscount {
+      margin-right: 0.2rem;
+      text-decoration: line-through 0.1rem solid #c03434;
     }
-    .buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-evenly;
-      align-items: center;
-      margin-top: 1rem;
-      margin-bottom: 0.5rem;
-
-      .gift {
-        width: 40%;
-        height: 1.5rem;
-        color: white;
-        background: linear-gradient(
-          180deg,
-          #ea80ea 0%,
-          rgba(211, 36, 182, 0.72) 100%
-        );
-        border-style: none;
-        border-radius: 0.625rem;
-      }
-      .buy {
-        width: 40%;
-        height: 1.5rem;
-        color: white;
-        background: $btn-purple;
-        border-style: none;
-        border-radius: 0.625rem;
-      }
+  }
+  .mainContent {
+    padding-right: 0.3rem;
+    font-size: 0.9rem;
+    font-style: italic;
+    color: #282828;
+    grid-area: mainContent;
+  }
+  .subContent {
+    padding-right: 0.5rem;
+    overflow: scroll;
+    font-size: 0.8rem;
+    color: #343434;
+    grid-area: subContent;
+  }
+  .buttons {
+    grid-area: footer;
+    display: flex;
+    justify-content: space-evenly;
+    .gift {
+      width: auto;
+      min-width: 4rem;
+      height: 1.5rem;
+      font-family: 'NanumSquare_acR', sans-serif;
+      color: white;
+      background: linear-gradient(
+        180deg,
+        #ea80ea 0%,
+        rgba(211, 36, 182, 0.72) 100%
+      );
+      border-style: none;
+      border-radius: 0.3rem;
+    }
+    .buy {
+      width: auto;
+      min-width: 4rem;
+      height: 1.5rem;
+      font-family: 'NanumSquare_acR', sans-serif;
+      color: white;
+      background: $btn-purple;
+      border-style: none;
+      border-radius: 0.3rem;
     }
   }
 }
+
+.badge {
+  width: 2.5rem;
+  height: 1rem;
+  padding-top: 0.1rem;
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: #fff;
+  text-align: center;
+  background-color: #c03434;
+  border-radius: 1.25rem 0 0 1.25rem;
+  grid-area: ribbon;
+}
diff --git a/types/itemTypes.ts b/types/itemTypes.ts
index 7c5c45967..7e2684047 100644
--- a/types/itemTypes.ts
+++ b/types/itemTypes.ts
@@ -1,7 +1,8 @@
 export interface Item {
   itemId: number;
   itemName: string;
-  content: string;
+  mainContent: string;
+  subContent: string;
   itemType: string;
   imageUri: string;
   originalPrice: number;