어드민페이지 모달창 닫을 때 마크 정보 넘기기 구현 (#178)

* fix: 모달창 닫을 때 리스트 업데이트되도록 수정 * style: 모달창 스타일 수정 * fix: 메모 줄바꿈 안됨 오류 수정 * fix: 메모 동시 수정 시 마지막만 반영되는 오류 수정 * style: 기수별 지원서 조회 퍼블리싱 * feat: 지원서 기수별 필터링 기능 추가 * fix: skeleton에 memo version 추가 * feat: 드롭다운리스트 기수 선택 시 사라지기 추가 * fix: 기수정보 초기화 데이터 수정 및 기수별 조회 버튼 이름 수정
GDG-on-Campus-KNU · Dec 28, 2024 · a5c9d9b · a5c9d9b
1 parent 8fce87b
commit a5c9d9b
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 26 deletions.
diff --git a/src/apis/hooks/admin/docs/useGetApplyDocs.ts b/src/apis/hooks/admin/docs/useGetApplyDocs.ts
@@ -18,7 +18,8 @@ export const getApplyDocs = async (
   track: string,
   isMarked: boolean,
   page: number,
-  size: number
+  size: number,
+  classYearId: number
 ): Promise<applyDocsInterface> => {
   const response = await fetchInstance.get<applyDocsInterface>(
     getApplyDocsPath(),
@@ -28,6 +29,7 @@ export const getApplyDocs = async (
         isMarked,
         page,
         size,
+        classYearId,
       },
     }
   );
@@ -38,17 +40,19 @@ export const useGetApplyDocs = (
   track: string,
   isMarked: boolean,
   page: number,
-  size: number
+  size: number,
+  classYearId: number
 ) => {
   const accessToken = sessionStorage.getItem('accessToken');
 
   return useQuery<applyDocsInterface, Error>({
-    queryKey: [applyDocsQueryKey, track, isMarked, page, size],
-    queryFn: () => getApplyDocs(track, isMarked, page, size),
+    queryKey: [applyDocsQueryKey, track, isMarked, page, size, classYearId],
+    queryFn: () => getApplyDocs(track, isMarked, page, size, classYearId),
     enabled:
       !!accessToken &&
       track !== undefined &&
       isMarked !== undefined &&
-      page !== undefined,
+      page !== undefined &&
+      classYearId !== undefined,
   });
 };
diff --git a/src/apis/hooks/admin/docs/useGetDocsDetail.ts b/src/apis/hooks/admin/docs/useGetDocsDetail.ts
@@ -9,6 +9,7 @@ export type AnswerData = {
 
 export interface DocsDetailInterface {
   id: number;
+  version: number;
   name: string;
   studentNumber: string;
   major: string;
@@ -38,6 +39,7 @@ export const getDocsDetail = async (
       },
     }
   );
+
   return response.data;
 };
 

diff --git a/src/apis/hooks/admin/docs/usePatchDocsMemo.ts b/src/apis/hooks/admin/docs/usePatchDocsMemo.ts
@@ -4,15 +4,21 @@ import { fetchInstance } from '@gdg/apis/instance/Api_JWT';
 
 const patchMemoPath = () => '/api/admin/application/note';
 
-const patchDocsMemo = async (id: number, memo: string): Promise<void> => {
-  // console.log(memo);
+const patchDocsMemo = async (
+  id: number,
+  memo: { note: string; version: number }
+): Promise<void> => {
   await fetchInstance.patch(patchMemoPath(), memo, { params: { id } });
 };
 
 export const usePatchDocsMemo = () => {
   const accessToken = sessionStorage.getItem('accessToken');
 
-  const mutation = useMutation<void, Error, { id: number; memo: string }>({
+  const mutation = useMutation<
+    void,
+    Error,
+    { id: number; memo: { note: string; version: number } }
+  >({
     mutationFn: ({ id, memo }) => {
       if (!accessToken) {
         return Promise.reject(new Error('액세스 토큰이 없습니다.'));

diff --git a/src/pages/admin/AdminDocConfirmPage.style.ts b/src/pages/admin/AdminDocConfirmPage.style.ts
@@ -16,6 +16,11 @@ export const PassBtn = styled.button<{ isSelected: boolean }>`
   transition: background-color 0.3s ease;
 `;
 
+export const ButtonContainer = styled.div`
+  width: auto;
+  height: 40px;
+`;
+
 export const ButtonBox = styled.div`
   display: flex;
   flex-direction: row;

diff --git a/src/pages/admin/AdminDocConfirmPage.tsx b/src/pages/admin/AdminDocConfirmPage.tsx
@@ -4,8 +4,13 @@ import { useGetStatistic } from '@gdg/apis/hooks/admin/docs/useGetStatistic';
 import { useGetTrack } from '@gdg/apis/hooks/admin/docs/useGetTrack';
 import { DisplayLayout } from '@gdg/styles/LayoutStyle';
 
-import { PassBtn, ButtonBox, InfoBox } from './AdminDocConfirmPage.style';
-
+import ClassYearIdDropDown from './components/docs/ClassYearIdDropDown';
+import {
+  PassBtn,
+  ButtonContainer,
+  ButtonBox,
+  InfoBox,
+} from './AdminDocConfirmPage.style';
 const TrackSelectBar = lazy(() => import('./components/docs/TrackSelectBar'));
 
 const DocsTable = lazy(
@@ -21,11 +26,22 @@ const AdminDocConfirmPage = () => {
   const [isMarked, setIsMarked] = useState<boolean>(false);
   const [searchName, setSearchName] = useState<string>('');
   const [trackIdx, setTrackIdx] = useState<number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const [classYearId, setClassYearId] = useState<number>(4);
 
   const handlePassCheck = () => {
     setIsMarked((prev) => !prev);
   };
 
+  const handleClassYearIdCheck = () => {
+    setIsDropdownOpen((prev) => !prev);
+  };
+
+  const handleYearIdClick = (id: number) => {
+    setClassYearId(id);
+    setIsDropdownOpen(false);
+  };
+
   const { data: applyData } = useGetStatistic();
   const { data: trackData } = useGetTrack();
 
@@ -45,17 +61,30 @@ const AdminDocConfirmPage = () => {
             <Stars color='white' />
             서류합격자 조회
           </PassBtn>
+          <ButtonContainer>
+            <PassBtn
+              isSelected={isDropdownOpen}
+              onClick={handleClassYearIdCheck}
+            >
+              {`${classYearId}기 ${'\u00A0'} ▾`}
+            </PassBtn>
+            {isDropdownOpen && (
+              <ClassYearIdDropDown onYearIdClick={handleYearIdClick} />
+            )}
+          </ButtonContainer>
         </ButtonBox>
         <AdminSearchBar onSearch={handleSearchNameChange} />
       </InfoBox>
       {applyData && <CurrentApplyInfo response={applyData} />}
       {trackData && (
         <TrackSelectBar trackData={trackData} onSelect={handleTrackSelect} />
       )}
+
       <DocsTable
         searchName={searchName}
         trackIdx={trackIdx}
         isMarked={isMarked}
+        classYearId={classYearId}
       />
     </DisplayLayout>
   );

diff --git a/src/pages/admin/components/docs/ApplyDetailModal.style.ts b/src/pages/admin/components/docs/ApplyDetailModal.style.ts
@@ -14,7 +14,7 @@ export const ModalBackdrop = styled.div`
 export const ModalWrapper = styled.div`
   width: 90%;
   height: 85vh;
-  min-width: 900px;
+  max-width: 1100px;
   min-height: 500px;
 
   ${displayCenter}
@@ -120,10 +120,10 @@ export const SelfIntroduce = styled.div`
   overflow-y: scroll;
 
   color: black;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   font-weight: 200;
 
-  margin-top: 5px;
+  margin-top: 10px;
 `;
 
 export const ButtonContainer = styled.div`

diff --git a/src/pages/admin/components/docs/ApplyDetailModal.tsx b/src/pages/admin/components/docs/ApplyDetailModal.tsx
@@ -55,6 +55,7 @@ interface Answer {
 
 interface DetailInfo {
   id: number;
+  version: number;
   name: string;
   studentNumber: string;
   major: string;
@@ -142,6 +143,9 @@ const ApplyDetailModal = ({
   };
 
   const trackData = detail ? getQuestionsByTrack(detail.track) : null;
+  const emptyAnswer = '해당 질문에 대한 답변이 작성되지 않았습니다.';
+
+  console.log(detail);
 
   return (
     <ModalBackdrop>
@@ -177,7 +181,7 @@ const ApplyDetailModal = ({
                 <SelfIntroduce>
                   {detail.answers.length > 0
                     ? `${detail.answers[0].answer}`
-                    : `${trackData.Question1.main}란이 비어있습니다.`}
+                    : emptyAnswer}
                 </SelfIntroduce>
                 <DividingLine />
 
@@ -187,7 +191,7 @@ const ApplyDetailModal = ({
                 <SelfIntroduce>
                   {detail.answers.length > 1
                     ? `${detail.answers[1].answer}`
-                    : `${trackData.Question2.main}란이 비어있습니다.`}
+                    : emptyAnswer}
                 </SelfIntroduce>
                 <DividingLine />
 
@@ -197,7 +201,7 @@ const ApplyDetailModal = ({
                 <SelfIntroduce>
                   {detail.answers.length > 2
                     ? `${detail.answers[2].answer}`
-                    : `${trackData.Question3.main}란이 비어있습니다.`}
+                    : emptyAnswer}
                 </SelfIntroduce>
                 <DividingLine />
 
@@ -207,7 +211,7 @@ const ApplyDetailModal = ({
                 <SelfIntroduce>
                   {detail.answers.length > 3
                     ? `${detail.answers[3].answer}`
-                    : `${trackData.Question4.main}란이 비어있습니다.`}
+                    : emptyAnswer}
                 </SelfIntroduce>
                 <DividingLine />
               </IntroContainer>
@@ -234,7 +238,11 @@ const ApplyDetailModal = ({
                 <DividingLine />
                 <TechStack techStack={detail.techStack} link={detail.link} />
                 <DividingLine />
-                <Memo id={detail.id} note={detail.note} />
+                <Memo
+                  id={detail.id}
+                  version={detail.version}
+                  note={detail.note}
+                />
                 <DividingLine />
                 <ButtonContainer>
                   <CommonBtn

diff --git a/src/pages/admin/components/docs/ApplyDetailModalSkeleton.tsx b/src/pages/admin/components/docs/ApplyDetailModalSkeleton.tsx
@@ -76,7 +76,7 @@ const ApplyDetailModalSkeleton = () => {
           <DividingLine />
           <TechStack techStack='  ,  ,  ' link='' />
           <DividingLine />
-          <Memo id={null} note='' />
+          <Memo id={null} version={0} note='' />
           <DividingLine />
           <ButtonContainer>
             <CommonBtn

diff --git a/src/pages/admin/components/docs/ClassYearIdDropDown.tsx b/src/pages/admin/components/docs/ClassYearIdDropDown.tsx
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+
+import { displayCenter } from '@gdg/styles/LayoutStyle';
+
+import { DividingLine } from './ApplyDetailModal.style';
+
+const DropdownContainer = styled.div`
+  position: relative;
+  top: 0;
+  left: 0;
+  margin-top: 2px;
+  z-index: 10;
+
+  background-color: var(--color-white);
+  border-radius: 12px;
+  padding: 15px;
+
+  ${displayCenter}
+  align-items: center;
+  flex-direction: column;
+`;
+
+const YearIdButton = styled.div`
+  ${displayCenter}
+
+  width: 100%;
+
+  background-color: transparent;
+  color: var(--color-black);
+  border: none;
+  outline: none;
+
+  &:hover {
+    cursor: pointer;
+    font-weight: bold;
+  }
+`;
+
+const ClassYearIdDropDown = ({
+  onYearIdClick,
+}: {
+  onYearIdClick: (id: number) => void;
+}) => {
+  const yearIdList = [1, 2, 3, 4];
+
+  return (
+    <DropdownContainer>
+      {yearIdList.map((id) => (
+        <div key={id}>
+          <YearIdButton
+            onClick={() => onYearIdClick(id)}
+          >{`${id}기`}</YearIdButton>
+          {id < yearIdList.length && <DividingLine />}
+        </div>
+      ))}
+    </DropdownContainer>
+  );
+};
+
+export default ClassYearIdDropDown;
diff --git a/src/pages/admin/components/docs/DocsTable.tsx b/src/pages/admin/components/docs/DocsTable.tsx
@@ -46,21 +46,24 @@ const DocsTable = ({
   searchName,
   trackIdx,
   isMarked,
+  classYearId,
 }: {
   searchName?: string | undefined;
   trackIdx: number;
   isMarked: boolean;
+  classYearId: number;
 }) => {
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [currentGroup, setCurrentGroup] = useState<number>(0);
   const [docsList, setDocsList] = useState<applyDocsInterface | null>(null);
   const [openDetail, setOpenDetail] = useState<number | null>(null);
 
-  const { data: docsData } = useGetApplyDocs(
+  const { data: docsData, refetch: refetchDocs } = useGetApplyDocs(
     getTrack(trackIdx),
     isMarked,
     currentPage,
-    7
+    7,
+    classYearId
   );
   const { data: searchData } = useGetSearch(searchName, currentPage, 7);
 
@@ -70,7 +73,7 @@ const DocsTable = ({
 
   const handleCloseModal = () => {
     setOpenDetail(null);
-    // window.location.reload();
+    refetchDocs();
   };
 
   useEffect(() => {