Merge branch 'main' into GGFE-217-ranklist-api

.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/EmptyImage.tsx

@@ -0,0 +1,17 @@
+import NotiEmptyEmoji from 'public/image/noti_empty.svg';
+import styles from 'styles/EmptyImage.module.scss';
+
+function EmptyImage() {
+  return (
+    <div className={styles.emptyWrapper}>
+      <div className={styles.threeDots}>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+      </div>
+      <NotiEmptyEmoji />
+    </div>
+  );
+}
+
+export default EmptyImage;

components/Layout/NotiBar/NotiItem.tsx

@@ -35,6 +35,11 @@ export default function NotiItem({ data }: NotiItemProps) {
       style: styles.canceldByMan,
       content: message,
     },
+    // TODO: 고치기
+    GIFT: {
+      style: styles.gift,
+      content: message,
+    },
   };
 
   const notiWrapperStyle = isChecked ? styles.readWrap : styles.unreadWrap;

components/admin/announcement/AnnounceEdit.tsx

@@ -27,7 +27,6 @@ export default function AnnounceEdit() {
     SUCCESS: '공지사항이 성공적으로 삭제되었습니다.',
     AN100: '삭제 할 활성화된 공지사항이 없습니다.',
   };
-  const koreaTimeOffset = 1000 * 60 * 60 * 9;
 
   useEffect(() => {
     resetHandler();

components/admin/announcement/AnnounceList.tsx

@@ -6,12 +6,20 @@ import {
   TableBody,
   TableCell,
   TableContainer,
-  TableHead,
   TableRow,
 } from '@mui/material';
+import {
+  IAnnouncement,
+  IAnnouncementTable,
+} from 'types/admin/adminAnnouncementTypes';
 import { QUILL_FORMATS } from 'types/quillTypes';
 import { instanceInManage } from 'utils/axios';
+import { dateToStringShort } from 'utils/handleTime';
 import { tableFormat } from 'constants/admin/table';
+import {
+  AdminEmptyItem,
+  AdminTableHead,
+} from 'components/admin/common/AdminTable';
 import PageNation from 'components/Pagination';
 import styles from 'styles/admin/announcement/AnnounceList.module.scss';
 import 'react-quill/dist/quill.snow.css';
@@ -24,28 +32,13 @@ const Quill = dynamic(() => import('react-quill'), {
 
 const tableTitle: { [key: string]: string } = {
   content: '내용',
-  createdAt: '생성일',
+  createdAt: '생성 시간',
   creatorIntraId: '생성한 사람',
-  deletedAt: '삭제일',
+  deletedAt: '삭제 시간',
   deleterIntraId: '삭제한 사람',
-  modifiedAt: '수정 여부',
+  modifiedAt: '수정 시간',
 };
 
-interface IAnnouncement {
-  content: string;
-  creatorIntraId: string;
-  deleterIntraId: string;
-  deletedAt: Date;
-  createdAt: Date;
-  modifiedAt: Date;
-}
-
-interface IAnnouncementTable {
-  announcementList: IAnnouncement[];
-  totalPage: number;
-  currentPage: number;
-}
-
 export default function AnnounceList() {
   const [announcementInfo, setAnnouncementInfo] = useState<IAnnouncementTable>({
     announcementList: [],
@@ -59,7 +52,22 @@ export default function AnnounceList() {
       const res = await instanceInManage.get(
         `/announcement?page=${currentPage}&size=3`
       );
-      setAnnouncementInfo({ ...res.data, currentPage: currentPage });
+      setAnnouncementInfo({
+        announcementList: res.data.announcementList.map(
+          (announcement: IAnnouncement) => {
+            return {
+              ...announcement,
+              createdAt: dateToStringShort(new Date(announcement.createdAt)),
+              deletedAt: announcement.deletedAt
+                ? dateToStringShort(new Date(announcement.deletedAt))
+                : null,
+              modifiedAt: dateToStringShort(new Date(announcement.modifiedAt)),
+            };
+          }
+        ),
+        totalPage: res.data.totalPage,
+        currentPage: currentPage,
+      });
     } catch (e) {
       console.error('MS01');
     }
@@ -76,15 +84,7 @@ export default function AnnounceList() {
       </div>
       <TableContainer className={styles.tableContainer} component={Paper}>
         <Table className={styles.table} aria-label='customized table'>
-          <TableHead className={styles.tableHeader}>
-            <TableRow>
-              {tableFormat['announcement'].columns.map((columnName) => (
-                <TableCell className={styles.tableHeaderItem} key={columnName}>
-                  {tableTitle[columnName]}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
+          <AdminTableHead tableName={'announcement'} table={tableTitle} />
           <TableBody className={styles.tableBody}>
             {announcementInfo.announcementList.length > 0 ? (
               announcementInfo.announcementList.map(
@@ -112,15 +112,9 @@ export default function AnnounceList() {
                             className={styles.tableBodyItem}
                             key={index}
                           >
-                            {columnName === 'createdAt' ||
-                            columnName === 'deletedAt' ||
-                            columnName === 'modifiedAt'
-                              ? announcement[columnName as keyof IAnnouncement]
-                                  ?.toString()
-                                  .replace('T', ' ')
-                              : announcement[
-                                  columnName as keyof IAnnouncement
-                                ]?.toString()}
+                            {announcement[
+                              columnName as keyof IAnnouncement
+                            ]?.toString()}
                           </TableCell>
                         );
                       }
@@ -129,9 +123,7 @@ export default function AnnounceList() {
                 )
               )
             ) : (
-              <TableRow>
-                <TableCell>기존 공지사항이 없습니다</TableCell>
-              </TableRow>
+              <AdminEmptyItem content={'기존 공지사항이 없습니다'} />
             )}
           </TableBody>
         </Table>

components/admin/coin/CoinMain.tsx

@@ -5,7 +5,6 @@ import styles from 'styles/admin/coin/CoinMain.module.scss';
 export default function CoinMain() {
   return (
     <div className={styles.mainContainer}>
-      <div className={styles.title}>재화 정책 관리</div>
       <div className={styles.subContainer}>
         <div className={styles.sectionTitle}>재화 정책 변경</div>
         <CoinPolicy />

components/admin/coin/CoinPolicy.tsx

@@ -6,23 +6,21 @@ import {
   TableBody,
   TableCell,
   TableContainer,
-  TableHead,
   TableRow,
 } from '@mui/material';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
+import { AdminTableHead } from 'components/admin/common/AdminTable';
 import styles from 'styles/admin/coin/CoinPolicy.module.scss';
 
-const coinPolicyTableTitle: { [key: string]: string } = {
+const tableTitle: { [key: string]: string } = {
   attendance: '출석 획득',
   normal: '일반게임 획득',
   rankWin: '랭크게임 승리 획득',
   rankLose: '랭크게임 패배 획득',
   edit: '정책 등록',
 };
 
-const tableColumnName = ['attendance', 'normal', 'rankWin', 'rankLose', 'edit'];
-
 function CoinPolicy() {
   const attendanceRef = useRef<HTMLInputElement>(null);
   const normalRef = useRef<HTMLInputElement>(null);
@@ -58,45 +56,35 @@ function CoinPolicy() {
   };
 
   return (
-    <>
-      <TableContainer className={styles.tableContainer} component={Paper}>
-        <Table className={styles.table} aria-label='customized table'>
-          <TableHead className={styles.tableHeader}>
-            <TableRow>
-              {tableColumnName.map((column, idx) => (
-                <TableCell className={styles.tableHeaderItem} key={idx}>
-                  {coinPolicyTableTitle[column]}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody className={styles.tableBody}>
-            <TableRow className={styles.tableRow}>
-              <TableCell className={styles.tableBodyItem}>
-                <input type='number' ref={attendanceRef} />
-              </TableCell>
-              <TableCell className={styles.tableBodyItem}>
-                <input type='number' ref={normalRef} />
-              </TableCell>
-              <TableCell className={styles.tableBodyItem}>
-                <input type='number' ref={rankWinRef} />
-              </TableCell>
-              <TableCell className={styles.tableBodyItem}>
-                <input type='number' ref={rankLoseRef} />
-              </TableCell>
-              <TableCell className={styles.tableBodyItem}>
-                <button
-                  className={styles.editBtn}
-                  onClick={() => editCoinPolicy()}
-                >
-                  등록
-                </button>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </>
+    <TableContainer className={styles.tableContainer} component={Paper}>
+      <Table className={styles.table} aria-label='customized table'>
+        <AdminTableHead tableName={'coinPolicy'} table={tableTitle} />
+        <TableBody className={styles.tableBody}>
+          <TableRow className={styles.tableRow}>
+            <TableCell className={styles.tableBodyItem}>
+              <input type='number' ref={attendanceRef} />
+            </TableCell>
+            <TableCell className={styles.tableBodyItem}>
+              <input type='number' ref={normalRef} />
+            </TableCell>
+            <TableCell className={styles.tableBodyItem}>
+              <input type='number' ref={rankWinRef} />
+            </TableCell>
+            <TableCell className={styles.tableBodyItem}>
+              <input type='number' ref={rankLoseRef} />
+            </TableCell>
+            <TableCell className={styles.tableBodyItem}>
+              <button
+                className={styles.editBtn}
+                onClick={() => editCoinPolicy()}
+              >
+                등록
+              </button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }