Release v1.0.8 (#129)

* 어드민 서류확인페이지 오류 수정 및 검색창 기능 수정 (#128)

* Feat: 서류확인 페이지 테이블 구현

* Feat: 트랙별 조회기능 구현

* Chore: 쓰지않는 훅 삭제

* Feat: 서류합격자 조회기능 구현

* Feat: 모달창 open 기능 구현

* Chore: 필요없는 파일 제거

* Refactor: TrackSelectBar lazyloading 적용

* Feat: 검색창 실시간 동기화로 변경, 디바운스적용

* Feat: 모바일 캐러셀 링크 추가

---------

Co-authored-by: CHAE_WON_SHIN <[email protected]>

src/apis/hooks/admin/docs/useGetSearch.ts

@@ -15,7 +15,7 @@ const getSearchPath = () => '/api/admin/application/search';
 const searchQueryKey = [getSearchPath()];
 
 export const getSearch = async (
-  name: string,
+  name: string | undefined,
   page: number,
   size: number
 ): Promise<SearchInterface> => {
@@ -29,7 +29,11 @@ export const getSearch = async (
   return response.data;
 };
 
-export const useGetSearch = (name: string, page: number, size: number) => {
+export const useGetSearch = (
+  name: string | undefined,
+  page: number,
+  size: number
+) => {
   const accessToken = sessionStorage.getItem('accessToken');
 
   return useQuery<SearchInterface, Error>({

src/apis/hooks/admin/docs/useGetTrack.ts

@@ -0,0 +1,38 @@
+import { fetchInstance } from '@gdsc/apis/instance/Api_JWT';
+
+import { useQuery } from '@tanstack/react-query';
+
+export interface TrackInterface {
+  TOTAL: number;
+  FRONT_END: number;
+  BACK_END: number;
+  ANDROID: number;
+  AI: number;
+  DESIGNER: number;
+  [key: string]: number;
+}
+
+const getTrackPath = () => '/api/admin/application/statistic/track';
+
+const statisticQueryKey = [getTrackPath()];
+
+const getTrack = async (): Promise<TrackInterface> => {
+  const response = await fetchInstance.get<TrackInterface>(getTrackPath());
+
+  const total = Object.values(response.data).reduce((accumulator, current) => {
+    return accumulator + current;
+  }, 0);
+
+  const trackData: TrackInterface = { ...response.data, TOTAL: total };
+  return trackData;
+};
+
+export const useGetTrack = () => {
+  const accessToken = sessionStorage.getItem('accessToken');
+
+  return useQuery<TrackInterface, Error>({
+    queryKey: [statisticQueryKey],
+    queryFn: getTrack,
+    enabled: !!accessToken,
+  });
+};

src/constants/DocsTableColumns.tsx

@@ -0,0 +1,33 @@
+import star from '@gdsc/assets/admin/miniStar.svg';
+
+import { MemberData } from '@gdsc/types/AdminInterface';
+import { createColumnHelper } from '@tanstack/react-table';
+
+const columnHelper = createColumnHelper<MemberData>();
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const year = String(date.getFullYear()).slice(2);
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+};
+
+export const columns = () => [
+  columnHelper.accessor('marked', {
+    header: '',
+    cell: ({ getValue }) => {
+      return getValue() ? <img src={star} alt='marked' /> : null;
+    },
+  }),
+  columnHelper.accessor('name', { header: '이름' }),
+  columnHelper.accessor('submittedAt', {
+    header: '지원일자',
+    cell: (props) => <p>{formatDate(props.getValue())}</p>,
+  }),
+  columnHelper.accessor('studentNumber', { header: '학번' }),
+  columnHelper.accessor('major', { header: '학과' }),
+  columnHelper.accessor('track', { header: '지원영역' }),
+  columnHelper.accessor('open', { header: '열람' }),
+];

src/pages/admin/AdminDocConfirmPage.tsx

@@ -1,29 +1,38 @@
 import { useState, lazy } from 'react';
 
 import { useGetStatistic } from '@gdsc/apis/hooks/admin/docs/useGetStatistic';
+import { useGetTrack } from '@gdsc/apis/hooks/admin/docs/useGetTrack';
 
 import { DisplayLayout } from '@gdsc/styles/LayoutStyle';
 
 import { PassBtn, ButtonBox, InfoBox } from './AdminDocConfirmPage.style';
 
-const TableSection = lazy(() => import('./components/docs/TableSection'));
+const TrackSelectBar = lazy(() => import('./components/docs/TrackSelectBar'));
+
+const DocsTable = lazy(
+  () => import('@gdsc/pages/admin/components/docs/DocsTable')
+);
 const Stars = lazy(() => import('./components/docs/Stars'));
 const CurrentApplyInfo = lazy(
   () => import('./components/docs/CurrentApplyInfo')
 );
 const AdminSearchBar = lazy(() => import('./components/AdminSearchBar'));
 
 const AdminDocConfirmPage = () => {
-  const [isSelected, setIsSelected] = useState(false);
   const [isMarked, setIsMarked] = useState<boolean>(false);
   const [searchName, setSearchName] = useState<string>('');
+  const [trackIdx, setTrackIdx] = useState<number>(0);
 
   const handlePassCheck = () => {
-    setIsSelected((prev) => !prev);
     setIsMarked((prev) => !prev);
   };
 
-  const { data } = useGetStatistic();
+  const { data: applyData } = useGetStatistic();
+  const { data: trackData } = useGetTrack();
+
+  const handleTrackSelect = (index: number) => {
+    setTrackIdx(index);
+  };
 
   const handleSearchNameChange = (name: string) => {
     setSearchName(name);
@@ -33,15 +42,22 @@ const AdminDocConfirmPage = () => {
     <DisplayLayout>
       <InfoBox>
         <ButtonBox>
-          <PassBtn isSelected={isSelected} onClick={handlePassCheck}>
+          <PassBtn isSelected={isMarked} onClick={handlePassCheck}>
             <Stars color='white' />
             서류합격자 조회
           </PassBtn>
         </ButtonBox>
         <AdminSearchBar onSearch={handleSearchNameChange} />
       </InfoBox>
-      {data && <CurrentApplyInfo response={data} />}
-      <TableSection total={data?.total} isMarked={isMarked} name={searchName} />
+      {applyData && <CurrentApplyInfo response={applyData} />}
+      {trackData && (
+        <TrackSelectBar trackData={trackData} onSelect={handleTrackSelect} />
+      )}
+      <DocsTable
+        searchName={searchName}
+        trackIdx={trackIdx}
+        isMarked={isMarked}
+      />
     </DisplayLayout>
   );
 };

src/pages/admin/components/AdminSearchBar.style.ts

@@ -11,7 +11,7 @@ export const SearchBarContainer = styled.form`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
 
   padding: 0px 20px;
   box-sizing: border-box;

src/pages/admin/components/AdminSearchBar.tsx

@@ -1,4 +1,6 @@
-import { useState, useRef, useEffect, forwardRef } from 'react';
+import { useState, useEffect } from 'react';
+
+import { useDebounce } from '@gdsc/hooks/useDebounce';
 
 import SearchIcon from '@gdsc/assets/SearchIcon.svg';
 
@@ -8,42 +10,27 @@ import {
   SearchInput,
 } from './AdminSearchBar.style';
 
-const InputField = forwardRef<HTMLInputElement>((props, ref) => {
-  return (
-    <SearchInput
-      ref={ref}
-      type='text'
-      placeholder='검색할 이름을 입력하세요'
-      {...props}
-    />
-  );
-});
-
-InputField.displayName = 'InputField';
-
 const AdminSearchBar = ({ onSearch }: { onSearch: (name: string) => void }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [clickTrigger, setClickTrigger] = useState<boolean>(false);
-
-  const handleClick = () => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      onSearch(inputRef.current.value);
-    }
-    setClickTrigger((prev) => !prev);
-  };
+  const [inputValue, setInputValue] = useState<string>('');
+  const debouncedInputValue = useDebounce(inputValue, 400);
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    handleClick();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
   };
 
-  useEffect(() => {}, [clickTrigger]);
+  useEffect(() => {
+    onSearch(debouncedInputValue);
+  }, [debouncedInputValue, onSearch]);
 
   return (
-    <SearchBarContainer onSubmit={handleSubmit}>
+    <SearchBarContainer>
       <SearchIconImg src={SearchIcon} alt='search' />
-      <InputField ref={inputRef} />
+      <SearchInput
+        type='text'
+        value={inputValue}
+        onChange={handleChange}
+        placeholder='검색할 이름을 입력하세요.'
+      />
     </SearchBarContainer>
   );
 };