[Feat/#270] 관리자 페이지 - 모임 신청 부분 만들기 (#277)

* feat: MoimSubmitter 탭 부분 만들기 * feat: 관리자 페이지 퍼블리싱 완료! * feat: 참가자 입금 확인 부분에서 참가자 모임 신청 전체 내역 get 해오는 useFetchMoimSubmitter 만들기 * feat: 입금대기 > 승인대기로 바꾸는 usePatchMoimSubmitter.ts 만들기 * chore: 이메일, 사이트 부분 줄넘김 가능하도록 word-break 속성 주기 * chore: 자잘한 문구 수정 * chore: 호스트 > 스픽커 이름 변경 * refactor: 코드리뷰 반영 * chore: yarn generate-types 해서 카테고리 대신 키워드 받기! * refactor: 코드리뷰 반영 * fix: eslint, build에러 수정중 * fix: lint 수정 --------- Co-authored-by: Yoo TaeSeung <[email protected]>
PICK-PLE · Sep 13, 2024 · a5e7c73 · a5e7c73
1 parent db0a2cb
commit a5e7c73
Show file tree

Hide file tree

Showing 13 changed files with 417 additions and 172 deletions.
diff --git a/src/apis/domains/moim/useFetchMoimBanner.ts b/src/apis/domains/moim/useFetchMoimBanner.ts
@@ -1,4 +1,5 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
+
 import { get } from '@apis/api';
 import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
 

diff --git a/src/apis/domains/submitter/useFetchMoimSubmitter.ts b/src/apis/domains/submitter/useFetchMoimSubmitter.ts
@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { get } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+import { components } from '@schema';
+import { ApiResponseType } from '@types';
+
+type MoImSubmitterListGetResponse = components['schemas']['MoimSubmissionAllResponse'];
+
+const getMoimSubmitterList = async (): Promise<MoImSubmitterListGetResponse[] | null> => {
+  try {
+    const response =
+      await get<ApiResponseType<MoImSubmitterListGetResponse[]>>(`/v2/moim-submission-list`);
+    return response.data.data;
+  } catch (error) {
+    console.error('error:', error);
+    return null;
+  }
+};
+
+export const useFetchMoimSubmitterList = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL],
+    queryFn: () => getMoimSubmitterList(),
+  });
+};
diff --git a/src/apis/domains/submitter/usePatchHostSubmitter.ts b/src/apis/domains/submitter/usePatchHostSubmitter.ts
@@ -22,7 +22,7 @@ export const usePatchHostSubmitter = () => {
   return useMutation({
     mutationFn: ({ submitterId }: PatchHostSubmitterRequest) => patchHostSubmitter({ submitterId }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.HOST_SUBMIT_REQUEST] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.HOST_SUBMITTER] });
     },
   });
 };
diff --git a/src/apis/domains/submitter/usePatchMoimSubmitter.ts b/src/apis/domains/submitter/usePatchMoimSubmitter.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { patch } from '@apis/api';
+import { QUERY_KEY } from '@apis/queryKeys/queryKeys';
+
+export interface PatchMoimSubmitterRequest {
+  moimSubmissionId: number;
+}
+
+const patchMoimSubmitter = async ({ moimSubmissionId }: PatchMoimSubmitterRequest) => {
+  try {
+    const response = await patch(`/v2/moimSubmission/${moimSubmissionId}`, { moimSubmissionId });
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export const usePatchMoimSubmitter = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ moimSubmissionId }: PatchMoimSubmitterRequest) =>
+      patchMoimSubmitter({ moimSubmissionId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MOIM_SUBMITTER_ALL_REQUEST] });
+    },
+  });
+};
diff --git a/src/apis/queryKeys/queryKeys.ts b/src/apis/queryKeys/queryKeys.ts
@@ -24,6 +24,8 @@ export const QUERY_KEY = {
   MOIM_LIST_BY_CATEGORY: 'moimListByCategory',
   HOST_SUBMITTER: 'hostSubmitter',
   HOST_SUBMIT_REQUEST: 'hostSubmitRequest',
+  MOIM_SUBMITTER_ALL: 'moimSubmitterAll',
+  MOIM_SUBMITTER_ALL_REQUEST: 'miomSubmitterAllRequest',
   REVIEW_MOIM_INFO: 'reviewMoimInfo',
   REVIEW_TAG_LIST: 'reviewTagList',
   MOIM_NOTICE_DETAIL: 'moimNoticeDetail',

diff --git a/src/pages/admin/components/HostSubmitter/HostSubmitter.style.ts b/src/pages/admin/components/HostSubmitter/HostSubmitter.style.ts
@@ -0,0 +1,47 @@
+import { css, Theme } from '@emotion/react';
+
+import { flexGenerator } from '@styles/generator';
+
+export const tableLayoutStyle = css`
+  ${flexGenerator('column', 'flex-start', 'flex-start')}
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 3rem 2rem;
+`;
+
+export const tableContainerStyle = css`
+  border-collapse: collapse;
+  width: 100%;
+`;
+
+export const tableStyle = css`
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+`;
+
+export const titleStyle = (theme: Theme) => css`
+  ${theme.font['subhead01-sb-18']}
+`;
+
+export const trStyle = (theme: Theme) => css`
+  & > th {
+    background-color: #f2f2f2;
+    padding: 0.5rem;
+    text-align: center;
+    vertical-align: middle;
+    word-break: keep-all;
+    border: 1px solid ${theme.color.lightgray1};
+    ${theme.font['subhead05-sb-14']}
+
+    max-width: 10rem;
+  }
+
+  & > td {
+    padding: 0.5rem;
+    text-align: center;
+    border: 1px solid ${theme.color.lightgray0};
+    word-break: break-all;
+    ${theme.font['subhead06-m-14']}
+  }
+`;
diff --git a/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx b/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx
@@ -0,0 +1,80 @@
+import { useFetchHostSubmitterList } from '@apis/domains/submitter/useFetchHostSubmitterList';
+import { usePatchHostSubmitter } from '@apis/domains/submitter/usePatchHostSubmitter';
+
+import {
+  tableContainerStyle,
+  tableLayoutStyle,
+  tableStyle,
+  titleStyle,
+  trStyle,
+} from '@pages/admin/components/HostSubmitter/HostSubmitter.style';
+
+const SUBMITTER_STATUS = {
+  approve: '승인 완료',
+  pending: '승인 대기',
+};
+
+const HostSubmitter = () => {
+  const { data: hostSubmitterList } = useFetchHostSubmitterList() || [];
+  const { mutate } = usePatchHostSubmitter();
+
+  const handleButtonClick = (submitterId: number) => {
+    mutate({ submitterId });
+  };
+
+  return (
+    <div css={tableLayoutStyle}>
+      <h1 css={titleStyle}>PICKPLE 스픽커 승인</h1>
+      <div css={tableContainerStyle}>
+        <table css={tableStyle}>
+          <thead>
+            <tr css={trStyle}>
+              <th>신청 순서</th>
+              <th>게스트 ID</th>
+              <th>닉네임</th>
+              <th>[1] 호스트 소개</th>
+              <th>[2] 모임 목표</th>
+              <th>[3] 호스트 설명 링크</th>
+              <th>[4] 호스트 닉네임</th>
+              <th>[5] 키워드 </th>
+              <th>[6] 모임 계획</th>
+              <th>[7] 이메일 </th>
+              <th> 상태 </th>
+              <th> 승인여부 </th>
+            </tr>
+          </thead>
+          <tbody>
+            {hostSubmitterList?.map((item, index) => (
+              <tr key={index} css={trStyle}>
+                <td>{item.submitterId}</td>
+                <td>{item.guestId}</td>
+                <td>{item.guestNickname}</td>
+                <td>{item.intro}</td>
+                <td>{item.goal}</td>
+                <td>
+                  <a href={`${item.link}`} target="_blank">
+                    {item.link}
+                  </a>
+                </td>
+                <td>{item.nickname}</td>
+                <td>{item.userKeyword}</td>
+                <td>{item.plan}</td>
+                <td>{item.email}</td>
+                <td>{SUBMITTER_STATUS[item.submitterState as keyof typeof SUBMITTER_STATUS]}</td>
+                <td>
+                  {item.submitterState === 'approve' ? (
+                    <div>승인</div>
+                  ) : (
+                    <button onClick={() => handleButtonClick(item.submitterId || 0)}>승인</button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default HostSubmitter;
diff --git a/...page/HostSubmitter/HostSubmitter.style.ts → ...ents/MoimSubmitter/MoimSubmitter.style.ts b/...page/HostSubmitter/HostSubmitter.style.ts → ...ents/MoimSubmitter/MoimSubmitter.style.ts
@@ -2,33 +2,13 @@ import { css, Theme } from '@emotion/react';
 
 import { flexGenerator } from '@styles/generator';
 
-export const adminLayoutStyle = (theme: Theme) => css`
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: ${theme.color.white};
-`;
-
 export const tableLayoutStyle = css`
   ${flexGenerator('column', 'flex-start', 'flex-start')}
   gap: 1rem;
   flex-wrap: wrap;
   padding: 3rem 2rem;
 `;
 
-export const inputLayoutStyle = (theme: Theme) => css`
-  ${flexGenerator('column', 'center', 'center')}
-  gap: 1rem;
-  height: 50%;
-  ${theme.font['subhead05-sb-14']}
-`;
-
-export const commonContainerStyle = css`
-  ${flexGenerator('column', 'center', 'center')}
-`;
-
 export const tableContainerStyle = css`
   border-collapse: collapse;
   width: 100%;
@@ -41,39 +21,25 @@ export const tableStyle = css`
 `;
 
 export const titleStyle = (theme: Theme) => css`
-  ${theme.font['body01-r-15']}
+  ${theme.font['subhead01-sb-18']}
 `;
 
 export const thStyle = (theme: Theme) => css`
   background-color: #f2f2f2;
   padding: 0.5rem;
   text-align: center;
   vertical-align: middle;
+  word-break: keep-all;
   border: 1px solid ${theme.color.lightgray1};
-  ${theme.font['subhead02-sb-16']}
+  ${theme.font['subhead05-sb-14']}
 
   max-width: 10rem;
 `;
 
-export const thLargeStyle = (theme: Theme) => css`
-  background-color: #f2f2f2;
-  padding: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
-  border: 1px solid #ddd;
-  ${theme.font['subhead02-sb-16']}
-
-  width: 20rem;
-`;
-
 export const tdStyle = (theme: Theme) => css`
   padding: 0.5rem;
   text-align: center;
-  border: 1px solid #ddd;
-  ${theme.font['subhead03-m-16']}
-`;
-
-export const inputStyle = css`
-  width: 30rem;
-  height: 4rem;
+  border: 1px solid ${theme.color.lightgray0};
+  word-break: break-all;
+  ${theme.font['subhead06-m-14']}
 `;