Merge branch 'main' into GGFE-216-관리자-컴포넌트-css-리팩토링

.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'

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>

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>

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: [
-            '메인 페이지에 선물 도착 알림을 받으면 상점 페이지 보관함 탭으로 이동',
-            '선물 받은 아이템엔 선물 상자가 표시됨',
-            '선물 상자를 누르면 선물을 보낸 유저 확인 가능',
+            '알림 탭에서 선물 도착 알림을 받으면 상점 페이지 보관함 탭으로 이동',
+            '새롭게 추가된 아이템의 선물 상자 표시를 꾹 누르면 선물을 보낸 유저 확인 가능',
           ],
         },
       ],

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>

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

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>
+  );
+}

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>
   );

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,

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,

styles/modal/store/UserCoinHistoryModal.module.scss

@@ -20,8 +20,5 @@
     font-size: 1.3rem;
     color: #ffffff;
     justify-content: space-between;
-    .currentCoin {
-      @include ggCoin;
-    }
   }
 }

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);
+  }
+}