[GGFE-239] 트로피 이미지 + 확성기 기본문구 수정

components/Layout/MegaPhone.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
+import { Item } from 'types/itemTypes';
 import useAxiosGet from 'hooks/useAxiosGet';
 import useInterval from 'hooks/useInterval';
 import styles from 'styles/Layout/MegaPhone.module.scss';
@@ -17,50 +18,11 @@ type MegaphoneContainerProps = {
 };
 
 const adminContent: IMegaphoneContent = {
-  megaphoneId: 1,
+  megaphoneId: 0,
   content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
   intraId: '관리자',
 };
 
-const megaphoneContent: IMegaphoneContent = {
-  megaphoneId: 2,
-  content: '확성기 : 오늘 하루 42GG는 내가 접수한다 📢😎',
-  intraId: '절찬 판매 중!',
-};
-
-const profileContent: IMegaphoneContent = {
-  megaphoneId: 3,
-  content: '이미지 변경권 : 잘 지내? 프사 바꿨네...',
-  intraId: '절찬 판매 중!',
-};
-
-const edgeContent: IMegaphoneContent = {
-  megaphoneId: 4,
-  content: 'Edge 뽑기 : 난 "Edge"로 말해',
-  intraId: '절찬 판매 중!',
-};
-
-const backgroundContent: IMegaphoneContent = {
-  megaphoneId: 5,
-  content: '배경 뽑기 : 난 "Background"부터가 달라',
-  intraId: '절찬 판매 중!',
-};
-
-const idContent: IMegaphoneContent = {
-  megaphoneId: 6,
-  content: 'ID 색깔 변경권 : 남들과는 다르게! ID 색깔을 바꿔보세요!',
-  intraId: '절찬 판매 중!',
-};
-
-const defaultContents: MegaphoneList = [
-  adminContent,
-  megaphoneContent,
-  profileContent,
-  edgeContent,
-  backgroundContent,
-  idContent,
-];
-
 export const MegaphoneContainer = ({
   children,
   count,
@@ -99,22 +61,31 @@ export const MegaphoneItem = ({ content, intraId }: IMegaphoneContent) => {
 };
 
 const Megaphone = () => {
-  const [contents, setContents] = useState<MegaphoneList>(defaultContents);
+  const [contents, setContents] = useState<MegaphoneList>([]);
+  const [itemList, setItemList] = useState<Item[]>([]);
 
-  const getMegaphoneHandler = useAxiosGet<any>({
-    url: `/pingpong/megaphones`,
+  const getItemListHandler = useAxiosGet<any>({
+    url: `/pingpong/items/store`,
     setState: (data) => {
-      setContents(data.length > 0 ? data : defaultContents);
+      setItemList(data.itemList);
     },
+    err: 'HB01',
+    type: 'setError',
+  });
+
+  const getMegaphoneHandler = useAxiosGet<any>({
+    url: `/pingpong/megaphones`,
+    setState: setContents,
     err: 'HJ01',
     type: 'setError',
   });
 
   useEffect(() => {
+    getItemListHandler();
     getMegaphoneHandler();
   }, []);
 
-  return (
+  return contents.length > 0 ? (
     <MegaphoneContainer count={contents.length}>
       {contents.map((content, idx) => (
         <MegaphoneItem
@@ -124,6 +95,20 @@ const Megaphone = () => {
         />
       ))}
     </MegaphoneContainer>
+  ) : (
+    <MegaphoneContainer count={itemList.length + 1}>
+      <MegaphoneItem
+        content={adminContent.content}
+        intraId={adminContent.intraId}
+      />
+      {itemList.map((item, idx) => (
+        <MegaphoneItem
+          content={item.itemName + ' : ' + item.mainContent}
+          intraId={'절찬 판매 중!'}
+          key={idx}
+        />
+      ))}
+    </MegaphoneContainer>
   );
 };
 

components/rank/topRank/RankListItemMain.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { TbQuestionMark } from 'react-icons/tb';
-import { userImages, RankUser, NormalUser } from 'types/rankTypes';
+import { userImages } from 'types/rankTypes';
 import { colorToggleSelector } from 'utils/recoil/colorMode';
 import PlayerImage from 'components/PlayerImage';
 import styles from 'styles/rank/RankListMain.module.scss';
@@ -16,7 +16,7 @@ export default function RankListItemMain({
   user,
   rank,
 }: RankListItemMainProps) {
-  const { intraId, userImageUri, tierImageUri, edge } = user || {};
+  const { intraId, imageUri, tierImage, edge } = user || {};
   const Mode = useRecoilValue(colorToggleSelector);
   const renderLink = intraId !== 'intraId';
 
@@ -40,7 +40,7 @@ export default function RankListItemMain({
             {renderLink ? (
               <Link href={`users/detail?intraId=${intraId}`}>
                 <PlayerImage
-                  src={userImageUri}
+                  src={imageUri}
                   styleName={
                     rank === 1
                       ? `ranktropybig ${edge ? edge.toLowerCase() : 'basic'}`
@@ -50,7 +50,7 @@ export default function RankListItemMain({
                 />
                 <div className={`${styles.tierImageId}`}>
                   <PlayerImage
-                    src={tierImageUri}
+                    src={tierImage}
                     styleName={'ranktier'}
                     size={10}
                   />

components/rank/topRank/RankListMain.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { userImages, RankUser, NormalUser, Rank } from 'types/rankTypes';
+import { userImages } from 'types/rankTypes';
 import { colorToggleSelector } from 'utils/recoil/colorMode';
 import RankListItemMain from 'components/rank/topRank/RankListItemMain';
 import useRankListMain from 'hooks/rank/useRankListMain';
@@ -72,20 +72,20 @@ export default function RankListMain({ isMain, season }: RankListMainProps) {
 const dummyRankList: userImages[] = [
   {
     intraId: 'intraId',
-    tierImageUri: '',
-    userImageUri: '',
+    tierImage: '',
+    imageUri: '',
     edge: 'BASIC',
   },
   {
     intraId: 'intraId',
-    tierImageUri: '',
-    userImageUri: '',
+    tierImage: '',
+    imageUri: '',
     edge: 'BASIC',
   },
   {
     intraId: 'intraId',
-    tierImageUri: '',
-    userImageUri: '',
+    tierImage: '',
+    imageUri: '',
     edge: 'BASIC',
   },
 ];

pages/api/pingpong/rank/NORMAL.ts

@@ -8,20 +8,20 @@ export default function handler(
   const userImages: userImages[] = [
     {
       intraId: 'jeyoonnormal',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR2',
     },
     {
       intraId: 'hyobicho',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR3',
     },
     {
       intraId: 'hyungipa',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR4',
     },
   ];

pages/api/pingpong/rank/RANK.ts

@@ -8,20 +8,20 @@ export default function handler(
   const userImages: userImages[] = [
     {
       intraId: 'jeyoon',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR2',
     },
     {
       intraId: 'hyobicho',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR3',
     },
     {
       intraId: 'hyungipa',
-      userImageUri: '/image/fallBackSrc.jpeg',
-      tierImageUri: '/image/fallBackSrc.jpeg',
+      imageUri: '/image/fallBackSrc.jpeg',
+      tierImage: '/image/fallBackSrc.jpeg',
       edge: 'COLOR4',
     },
   ];

types/rankTypes.ts

@@ -30,8 +30,8 @@ export interface Rank {
 
 export interface userImages {
   intraId: string;
-  userImageUri: string;
-  tierImageUri: string;
+  imageUri: string;
+  tierImage: string;
   edge: string;
 }