Merge pull request StudyBadge-TenTen#141 from StudyBadge-TenTen/hotfix

[StudyBadge_FE StudyBadge-TenTen#117 ]: 디렉토리 구조에 맞춰 정리 + 필요 없는 코드 삭제

src/components/channel/ChannelBook.tsx

@@ -28,17 +28,10 @@ const ChannelBook = (): JSX.Element => {
   const { data } = useGetStudyInfo(Number(channelId));
   const { selectedDate, setSelectedDate } = useSelectedDateStore();
   const { setSelectedMonth } = useSelectedMonthStore();
-  // const isMemberData = useQuery<boolean, AxiosError>({
-  //   queryKey: ["isMember", channelId],
-  //   queryFn: () => getIsMember(Number(channelId)),
-  //   enabled: !!accessToken, // accessToken이 있는 경우에만 쿼리 실행
-  // });
   const memberTab = ["정보", "일정", "멤버", "출석현황"];
   const transTab = useMemo(() => transTabName(tab ?? "information"), [tab]);
   usePageScrollTop();
 
-  // const today = moment(new Date()).format("YYYY-MM-DD");
-
   // URL에서 탭 상태 설정
   useEffect(() => {
     if (transTab && transTab !== tabState) {

src/components/channel/KingOfAttendance.tsx

@@ -7,7 +7,7 @@ import { useAuthStore } from "@/store/auth-store";
 import PersonIcon from "../common/PersonIcon";
 
 const KingOfAttendance = () => {
-  // todo: params에서 channelId를 가져와 멤버별 출석현황 조회 -> 가장 높은 출석률 값 구하기 -> 해당 출석률인 멤버들 렌더링
+  // params에서 channelId를 가져와 멤버별 출석현황 조회 -> 가장 높은 출석률 값 구하기 -> 해당 출석률인 멤버들 렌더링
   const { accessToken, isMember } = useAuthStore();
   const { channelId } = useParams();
   const [bestMembers, setBestMembers] = useState<AttendanceResponseType[]>();

src/components/channel/MemberList.tsx

@@ -12,7 +12,7 @@ import { AxiosError } from "axios";
 import { useAuthStore } from "@/store/auth-store";
 import PersonIcon from "../common/PersonIcon";
 import MemberSkeleton from "../skeleton/MemberSkeleton";
-import { skeletonList } from "@/constants/skeletonList";
+import { SKELETON_LIST } from "@/constants/skeleton-list";
 
 const banishContent = `해당 멤버를 스터디에서 퇴출시키겠습니까?\n(퇴출 시 총 예치금에서 퇴출 멤버가 지불한 예치금을 전액 제외합니다.)`;
 
@@ -120,7 +120,7 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
                   </div>
                 ))}
               {isLoading
-                ? skeletonList.map((value) => <MemberSkeleton key={`skeleton_${value}`} />)
+                ? SKELETON_LIST.map((value) => <MemberSkeleton key={`skeleton_${value}`} />)
                 : !isLoading &&
                   Array.isArray(data.studyMembers) &&
                   data.studyMembers.map((member) => (
@@ -212,7 +212,7 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
                   </div>
                 ))}
               {isLoading
-                ? skeletonList.map((value) => <MemberSkeleton key={`skeleton_${value}`} />)
+                ? SKELETON_LIST.map((value) => <MemberSkeleton key={`skeleton_${value}`} />)
                 : !isLoading &&
                   Array.isArray(data.studyMembers) &&
                   data.studyMembers.map((member) => (

src/components/channel/Recruitment.tsx

@@ -12,7 +12,7 @@ import { useAuthStore } from "@/store/auth-store";
 import PersonIcon from "../common/PersonIcon";
 import axios from "axios";
 import { CustomErrorType } from "@/types/common";
-import { skeletonList } from "@/constants/skeletonList";
+import { SKELETON_LIST } from "@/constants/skeleton-list";
 import RecruitSkeleton from "../skeleton/RecruitSkeleton";
 
 const Recruitment = (): JSX.Element => {
@@ -144,7 +144,7 @@ const Recruitment = (): JSX.Element => {
           </div>
           <div className="h-[85%] bg-white rounded-b-[50px] px-4 py-4 sm:px-14 sm:py-10">
             <div className="h-full overflow-y-scroll custom-scroll px-4">
-              {isLoading && skeletonList.map((value) => <RecruitSkeleton key={`skeleton_${value}`} />)}
+              {isLoading && SKELETON_LIST.map((value) => <RecruitSkeleton key={`skeleton_${value}`} />)}
               {!isLoading &&
                 data &&
                 data.participants &&

src/components/main/CreateStudy.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useStudyStore } from "../../store/study-store";
-import { koreanRegions } from "../common/KoreanRegions";
+import { KOREAN_REGIONS } from "../../constants/korean-regions";
 import moment from "moment";
 import { postStudyChannel } from "../../services/channel-api";
 import { PENALTY_SYSTEM } from "../../constants/penalty-system-info";
@@ -201,7 +201,7 @@ const CreateStudy: React.FC = () => {
               required
             >
               <option value="">시/도 선택</option>
-              {koreanRegions.map((region) => (
+              {KOREAN_REGIONS.map((region) => (
                 <option key={region.name} value={region.name}>
                   {region.name}
                 </option>
@@ -218,13 +218,11 @@ const CreateStudy: React.FC = () => {
                 required
               >
                 <option value="">구/군 선택</option>
-                {koreanRegions
-                  .find((region) => region.name === selectedRegion.region)
-                  ?.districts.map((district) => (
-                    <option key={district} value={district}>
-                      {district}
-                    </option>
-                  ))}
+                {KOREAN_REGIONS.find((region) => region.name === selectedRegion.region)?.districts.map((district) => (
+                  <option key={district} value={district}>
+                    {district}
+                  </option>
+                ))}
               </select>
             )}
           </div>

src/components/main/StudyList.tsx

@@ -8,7 +8,7 @@ import Filter from "./Filter";
 import { useQuery } from "@tanstack/react-query";
 import CardSkeleton from "../skeleton/CardSkeleton";
 import { StudyListResponseType } from "../../types/study-channel-type";
-import { skeletonList } from "@/constants/skeletonList";
+import { SKELETON_LIST } from "@/constants/skeleton-list";
 // import { useAuthStore } from "@/store/auth-store";
 
 const StudyList = (): JSX.Element => {
@@ -143,7 +143,7 @@ const StudyList = (): JSX.Element => {
       </div>
       <div className="study-cards-container w-full flex justify-center items-center flex-wrap">
         {/* 받은 채널 리스트의 길이만큼 map을 이용해 Card 생성 or 스켈레톤 렌더링 */}
-        {isLoading && skeletonList.map((card) => <CardSkeleton key={card} />)}
+        {isLoading && SKELETON_LIST.map((card) => <CardSkeleton key={card} />)}
         {!isLoading &&
           data &&
           Array.isArray(studyList) &&

src/components/profile/HistoryList.tsx

@@ -6,7 +6,7 @@ import moment from "moment";
 import { useQuery } from "@tanstack/react-query";
 import { PaymentHistoryType, PointHistoryType } from "../../types/profile-type";
 import Modal from "../common/Modal";
-import { skeletonList } from "@/constants/skeletonList";
+import { SKELETON_LIST } from "@/constants/skeleton-list";
 
 const HistoryList = ({ type }: { type: "POINT" | "PAYMENT" }): JSX.Element => {
   const [latestPointList, setLatestPointList] = useState<PointHistoryType[]>([]);
@@ -133,7 +133,7 @@ const HistoryList = ({ type }: { type: "POINT" | "PAYMENT" }): JSX.Element => {
     } else if (paymentQuery.isLoading) {
       return (
         <div className="w-full h-fit min-h-96 flex flex-col justify-center items-center">
-          {skeletonList.map((value) => (
+          {SKELETON_LIST.map((value) => (
             <div key={`skeleton_${value}`} className="w-full h-4 bg-Gray-1 my-6 rounded-[50px] animate-pulse"></div>
           ))}
         </div>
@@ -199,7 +199,7 @@ const HistoryList = ({ type }: { type: "POINT" | "PAYMENT" }): JSX.Element => {
     } else if (pointQuery.isLoading) {
       return (
         <div className="w-full h-fit min-h-96 flex flex-col justify-center items-center">
-          {skeletonList.map((value) => (
+          {SKELETON_LIST.map((value) => (
             <div key={`skeleton_${value}`} className="w-full h-4 bg-Gray-1 my-6 rounded-[50px] animate-pulse"></div>
           ))}
         </div>