#377 Refactor: 기수 관련 UI 수정 및 추가 api 연결

src/api/admin/cardinal/postCardinal.ts

@@ -3,17 +3,19 @@ import axios from 'axios';
 const BASE_URL = import.meta.env.VITE_API_URL;
 const PATH = '/api/v1/admin/cardinals';
 
+// 새로운 기수 등록
 const postCardinalApi = async (
   cardinalNumber: number,
   year: number,
   semester: number,
+  inProgress: boolean,
 ) => {
   const accessToken = localStorage.getItem('accessToken');
 
   try {
     const response = await axios.post(
       `${BASE_URL}${PATH}`,
-      { cardinalNumber, year, semester },
+      { cardinalNumber, year, semester, inProgress },
       {
         headers: {
           Authorization: `Bearer ${accessToken}`,
@@ -27,4 +29,30 @@ const postCardinalApi = async (
   }
 };
 
-export default postCardinalApi;
+// 기수 수정
+const patchCardinalApi = async (
+  id: number,
+  year: number,
+  semester: number,
+  inProgress: boolean,
+) => {
+  const accessToken = localStorage.getItem('accessToken');
+
+  try {
+    const response = await axios.patch(
+      `${BASE_URL}${PATH}`,
+      { id, year, semester, inProgress },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      },
+    );
+
+    return response.data;
+  } catch (error: any) {
+    throw new Error(error.response?.data?.message || '기수 수정 실패');
+  }
+};
+
+export { patchCardinalApi, postCardinalApi };

src/api/useGetCardinals.tsx

@@ -17,7 +17,11 @@ export const getAllCardinals = async () => {
 
 export const useGetAllCardinals = () => {
   const [allCardinals, setAllCardinals] = useState<
-    { id: number; cardinalNumber: number }[]
+    {
+      status: string; // 기수 상태값 추가 ( IN_PROGRESS 이면 현재 기수 )
+      id: number;
+      cardinalNumber: number;
+    }[]
   >([]);
   const [error, setError] = useState<string | null>(null);
 

src/components/Admin/Box.tsx

@@ -9,40 +9,70 @@ export interface BoxProps {
   lastColor?: string;
   minWidth?: string;
   isCardinalBox?: boolean;
+  onClick?: () => void;
+  isClick?: boolean;
+  isSelected?: boolean;
+  isIncomplete?: boolean;
 }
 
 export const Wrapper = styled.div<{
   color: string;
   isCardinalBox: boolean;
+  isClick?: boolean;
+  isSelected?: boolean;
+  isIncomplete?: boolean;
 }>`
   width: ${({ isCardinalBox }) => (isCardinalBox ? 'none' : '234px')};
   min-width: ${({ isCardinalBox }) => (isCardinalBox ? '234px' : 'none')};
   height: 164px;
-  background-color: ${(props) => props.color};
+  background-color: ${({ isIncomplete, isSelected, color }) => {
+    if (isIncomplete) return 'transparent';
+    if (isSelected) return theme.color.gray[18];
+    return color;
+  }};
+  border: ${({ isIncomplete }) =>
+    isIncomplete ? `1.5px dashed ${theme.color.gray[18]}` : 'none'};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 16px;
   box-sizing: border-box;
+  cursor: ${({ isClick }) => (isClick ? 'pointer' : 'auto')};
+
+  ${({ isClick, isSelected, isIncomplete }) =>
+    isClick &&
+    !isSelected &&
+    !isIncomplete &&
+    `
+    &:hover {
+      background-color: ${theme.color.gray[18]};
+    }
+  `}
 `;
 
-export const Title = styled.div<{ isHidden?: boolean }>`
+export const Title = styled.div<{
+  isHidden?: boolean;
+  isIncomplete?: boolean;
+}>`
   font-size: 18px;
   font-family: ${theme.font.regular};
-  color: ${theme.color.gray[100]};
+  color: ${({ isIncomplete }) =>
+    isIncomplete ? theme.color.gray[18] : theme.color.gray[100]};
 `;
 
-export const Description = styled.div`
+export const Description = styled.div<{ isIncomplete?: boolean }>`
   font-size: 24px;
   font-family: ${theme.font.semiBold};
-  color: ${theme.color.gray[100]};
+  color: ${({ isIncomplete }) =>
+    isIncomplete ? theme.color.gray[18] : theme.color.gray[100]};
   margin-top: 20px;
 `;
 
-export const Last = styled.div<{ lastColor?: string }>`
+export const Last = styled.div<{ lastColor?: string; isIncomplete?: boolean }>`
   font-size: 18px;
   font-family: ${theme.font.regular};
-  color: ${({ lastColor }) => lastColor || '#979797'};
+  color: ${({ isIncomplete, lastColor }) =>
+    isIncomplete ? '#909393' : lastColor || '#979797'};
 `;
 
 const Box: React.FC<BoxProps> = ({
@@ -52,12 +82,25 @@ const Box: React.FC<BoxProps> = ({
   color,
   lastColor,
   isCardinalBox = false,
+  onClick,
+  isClick = false,
+  isSelected = false,
+  isIncomplete = false,
 }) => {
   return (
-    <Wrapper color={color} isCardinalBox={isCardinalBox}>
-      {title && <Title>{title}</Title>}
-      <Description>{description}</Description>
-      <Last lastColor={lastColor}>{last}</Last>
+    <Wrapper
+      onClick={onClick}
+      color={color}
+      isCardinalBox={isCardinalBox}
+      isClick={isClick}
+      isSelected={isSelected}
+      isIncomplete={isIncomplete}
+    >
+      {title && <Title isIncomplete={isIncomplete}>{title}</Title>}
+      <Description isIncomplete={isIncomplete}>{description}</Description>
+      <Last lastColor={lastColor} isIncomplete={isIncomplete}>
+        {last}
+      </Last>
     </Wrapper>
   );
 };

src/components/Admin/ButtonGroup.tsx

@@ -18,10 +18,9 @@ const ButtonGroupContainer = styled.div<{ hasEndGap?: boolean }>`
   justify-content: center;
   align-items: center;
   gap: 12px;
-  padding-right: 20px;
+  padding: 10px;
   overflow-x: auto;
   white-space: nowrap;
-  padding-left: 10px;
   &::-webkit-scrollbar {
     height: 3px;
   }
@@ -30,7 +29,7 @@ const ButtonGroupContainer = styled.div<{ hasEndGap?: boolean }>`
     hasEndGap &&
     `
     & > :last-child {
-    margin-left:150px
+    margin-left:188px
     }
 
       @media (max-width: 900px) {

src/components/Admin/CardinalInfo.tsx

@@ -1,15 +1,30 @@
 import theme from '@/styles/theme';
+import Box from '@/components/Admin/Box';
 import * as S from '@/styles/admin/cardinal/CardinalInfo.styled';
 import AddCardinal from '@/components/Admin/AddCardinal';
 import useGetAllCardinals from '@/api/useGetCardinals';
 import { useEffect, useState } from 'react';
 import { useGetAdminUsers } from '@/api/admin/member/getAdminUser';
+import { useMemberContext } from '@/components/Admin/context/MemberContext';
+import CardinalModal from '@/components/Admin/Modal/CardinalModal';
 
 const CardinalInfo: React.FC = () => {
+  const { selectedCardinal, setSelectedCardinal } = useMemberContext();
   const { allCardinals } = useGetAllCardinals();
   const { allUsers } = useGetAdminUsers();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentEditingCardinal, setCurrentEditingCardinal] = useState<{
+    id: number;
+    cardinalNumber: number;
+  } | null>(null);
   const [cardinalList, setCardinalList] = useState<
-    { id: number; year?: number; semester?: number; cardinalNumber: number }[]
+    {
+      id: number;
+      year?: number;
+      semester?: number;
+      cardinalNumber: number;
+      status?: string;
+    }[]
   >([]);
 
   useEffect(() => {
@@ -27,6 +42,19 @@ const CardinalInfo: React.FC = () => {
 
   const totalMembers = allUsers.length;
 
+  const handleCardinalClick = (cardinal: {
+    id: number;
+    year?: number;
+    semester?: number;
+    cardinalNumber: number;
+  }) => {
+    if (!cardinal.year || !cardinal.semester) {
+      setCurrentEditingCardinal(cardinal);
+      setIsModalOpen(true);
+    } else {
+      setSelectedCardinal(cardinal.cardinalNumber);
+    }
+  };
   return (
     <S.CardinalBoxWrapper>
       <S.ScrollContainer>
@@ -38,6 +66,8 @@ const CardinalInfo: React.FC = () => {
           color={theme.color.gray[18]}
           lastColor="#D3D3D3"
           isCardinalBox
+          isClick
+          onClick={() => setSelectedCardinal(null)}
         />
         {cardinalList.map((cardinal) => {
           const memberCount = getMemberCountByCardinal(cardinal.cardinalNumber);
@@ -47,17 +77,34 @@ const CardinalInfo: React.FC = () => {
               : `노정완 외 ${memberCount}명`;
 
           return (
-            <S.CardinalBox
+            <Box
               key={cardinal.id}
-              title={`${cardinal.year}년 ${cardinal.semester}학기`}
+              title={
+                cardinal.year && cardinal.semester
+                  ? `${cardinal.year}년 ${cardinal.semester}학기 ${
+                      cardinal.status === 'IN_PROGRESS' ? '(현재)' : ''
+                    }`
+                  : '정보를 입력해주세요'
+              }
               description={`${cardinal.cardinalNumber}기`}
               last={lastText}
               color={theme.color.gray[65]}
               lastColor="#D3D3D3"
               isCardinalBox
+              isClick
+              isIncomplete={!cardinal.year || !cardinal.semester}
+              isSelected={selectedCardinal === cardinal.cardinalNumber}
+              onClick={() => handleCardinalClick(cardinal)}
             />
           );
         })}
+        {isModalOpen && currentEditingCardinal && (
+          <CardinalModal
+            isOpen={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            initialCardinal={currentEditingCardinal}
+          />
+        )}
       </S.ScrollContainer>
     </S.CardinalBoxWrapper>
   );

src/components/Admin/CardinalSearchBar.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import CardinalDropDown from '@/components/Admin/Cardinal';
 import SearchBar, { SearchBarWrapper } from '@/components/Admin/SearchBar';
 
@@ -7,17 +7,16 @@ interface CombinedSearchBarProps {
   setSelectedCardinal: Dispatch<SetStateAction<number | null>>;
 }
 
-const CombinedSearchBar: React.FC<CombinedSearchBarProps> = () => {
-  const [selectedCardinal, setSelectedCardinal] = useState<null | number>(null);
-
+const CombinedSearchBar: React.FC<CombinedSearchBarProps> = ({
+  selectedCardinal,
+  setSelectedCardinal,
+}) => {
   return (
     <SearchBarWrapper>
       <div>
         <CardinalDropDown
           selectedCardinal={selectedCardinal}
-          setSelectedCardinal={(value) => {
-            setSelectedCardinal(value);
-          }}
+          setSelectedCardinal={setSelectedCardinal}
         />
       </div>
       <SearchBar isWrapped={false} />

src/components/Admin/DirectCardinal.tsx

@@ -21,25 +21,26 @@ const DirectCardinalDropdown: React.FC<DirectCardinalProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { allCardinals } = useGetAllCardinals();
-  const [isCustomInput] = useState(false);
+  const [isCustomInput, setIsCustomInput] = useState(false);
 
   const sortedCardinals = [...allCardinals].reverse();
 
   const toggleDropdown = () => setIsOpen(!isOpen);
 
   const selectCardinal = (value: number) => {
     setSelectedCardinal(value, false);
+    setIsCustomInput(false);
     setIsOpen(false);
   };
 
   const handleCustomInput = () => {
     setSelectedCardinal(0, true);
+    setIsCustomInput(true);
     setIsOpen(false);
   };
 
   const getDisplayText = () => {
-    if (isCustomInput || selectedCardinal === 0 || selectedCardinal === null)
-      return '직접 입력';
+    if (isCustomInput || selectedCardinal === null) return '직접 입력';
     return `${selectedCardinal}기`;
   };