Merge branch 'dev' into fe/dev/feat_main_design/#1681

frontend/src/Cabinet/components/CabinetInfoArea/CountTime/CodeAndTime.tsx

@@ -5,6 +5,7 @@ import { myCabinetInfoState } from "@/Cabinet/recoil/atoms";
 import alertImg from "@/Cabinet/assets/images/cautionSign.svg";
 import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg";
 import { MyCabinetInfoResponseDto } from "@/Cabinet/types/dto/cabinet.dto";
+import useDebounce from "@/Cabinet/hooks/useDebounce";
 
 interface CountTimeProps {
   minutes: string;
@@ -17,13 +18,18 @@ const CodeAndTime = ({ minutes, seconds, isTimeOver }: CountTimeProps) => {
     useRecoilValue<MyCabinetInfoResponseDto>(myCabinetInfoState);
   const code = myCabinetInfo.shareCode + "";
   const [copySuccess, setCopySuccess] = useState(false);
+  const { debounce } = useDebounce();
 
   const handleCopyClick = () => {
     navigator.clipboard.writeText(code).then(() => {
       setCopySuccess(true);
-      setTimeout(() => {
-        setCopySuccess(false);
-      }, 2000);
+      debounce(
+        "codeCopyClick",
+        () => {
+          setCopySuccess(false);
+        },
+        2000
+      );
     });
   };
 

frontend/src/Cabinet/components/Card/DisplayStyleCard/DisplayStyleCard.tsx

@@ -75,7 +75,6 @@ const DisplayStyleCard = ({
 };
 
 const DisplayStyleCardWrapper = styled.div`
-  z-index: 1;
   align-self: start;
 `;
 

frontend/src/Cabinet/components/Club/ClubMemberList/ClubMemberList.container.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
-import { targetClubUserInfoState, userState } from "@/Cabinet/recoil/atoms";
+import { useRecoilState } from "recoil";
+import { targetClubUserInfoState } from "@/Cabinet/recoil/atoms";
 import ClubMemberList from "@/Cabinet/components/Club/ClubMemberList/ClubMemberList";
 import {
   ClubInfoResponseDto,
   ClubUserResponseDto,
 } from "@/Cabinet/types/dto/club.dto";
+import useDebounce from "@/Cabinet/hooks/useDebounce";
 import useMenu from "@/Cabinet/hooks/useMenu";
 
 export type TClubMemberModalState = "addModal";
@@ -27,7 +28,6 @@ const ClubMemberListContainer = ({
 }: ClubMemberListContainerProps) => {
   const [moreButton, setMoreButton] = useState<boolean>(true);
   const [members, setMembers] = useState<ClubUserResponseDto[]>([]);
-  // const [sortMembers, setSortMembers] = useState<ClubUserResponseDto[]>([]);
   const [clubModal, setClubModal] = useState<ICurrentClubMemberModalStateInfo>({
     addModal: false,
   });
@@ -36,12 +36,16 @@ const ClubMemberListContainer = ({
   const [targetClubUser, setTargetClubUser] = useRecoilState(
     targetClubUserInfoState
   );
-
+  const { debounce } = useDebounce();
   const clickMoreButton = () => {
     setIsLoading(true);
-    setTimeout(() => {
-      setPage(page + 1);
-    }, 100);
+    debounce(
+      "clubMemberList",
+      () => {
+        setPage(page + 1);
+      },
+      300
+    );
   };
 
   const selectClubMemberOnClick = (member: ClubUserResponseDto) => {

frontend/src/Cabinet/components/Search/SearchCabinetDetails.tsx

@@ -49,9 +49,7 @@ const SearchCabinetDetails = (props: ISearchDetail) => {
   );
   const { openCabinet, closeCabinet } = useMenu();
   const CabinetIcon =
-    cabinetIconComponentMap[
-      cabinetInfo?.lentType || CabinetType.PRIVATE
-    ];
+    cabinetIconComponentMap[cabinetInfo?.lentType || CabinetType.PRIVATE];
 
   const clickSearchItem = () => {
     if (
@@ -150,7 +148,6 @@ const SearchCabinetDetails = (props: ISearchDetail) => {
   );
 };
 
-
 const WrapperStyled = styled.div`
   width: 350px;
   height: 110px;
@@ -252,4 +249,3 @@ const ButtonWrapper = styled.div`
 `;
 
 export default SearchCabinetDetails;
-

frontend/src/Cabinet/components/Search/SearchNoCabinetDetails.tsx

@@ -145,7 +145,6 @@ const SearchNoCabinetDetails = (props: ISearchDetail) => {
   );
 };
 
-
 const WrapperStyled = styled.div`
   width: 350px;
   height: 110px;

frontend/src/Cabinet/components/Store/CoinLog/CoinLog.tsx

@@ -11,6 +11,7 @@ import { ReactComponent as CoinIcon } from "@/Cabinet/assets/images/coinIcon.svg
 import { ReactComponent as Select } from "@/Cabinet/assets/images/selectMaincolor.svg";
 import { CoinLogToggleType } from "@/Cabinet/types/enum/store.enum";
 import { axiosCoinLog } from "@/Cabinet/api/axios/axios.custom";
+import useDebounce from "@/Cabinet/hooks/useDebounce";
 import { formatDate } from "@/Cabinet/utils/dateUtils";
 
 const toggleList: toggleItem[] = [
@@ -44,10 +45,11 @@ const CoinLog = () => {
   const [userInfo] = useRecoilState(userState);
   const size = 5;
   // NOTE : size 만큼 데이터 불러옴
+  const { debounce } = useDebounce();
 
-  const getCoinLog = async (type: CoinLogToggleType) => {
+  const getCoinLog = async () => {
     try {
-      const response = await axiosCoinLog(type, page, size);
+      const response = await axiosCoinLog(toggleType, page, size);
       if (page === 0) {
         setCoinLogs(response.data.result);
       } else {
@@ -71,9 +73,7 @@ const CoinLog = () => {
   };
 
   useEffect(() => {
-    setTimeout(() => {
-      getCoinLog(toggleType);
-    }, 333);
+    debounce("coinLog", getCoinLog, 100);
   }, [page, toggleType]);
 
   useEffect(() => {

frontend/src/Cabinet/components/UserCabinetInfoArea/UserCabinetInfoArea.tsx

@@ -59,7 +59,7 @@ const UserCabinetInfoArea: React.FC<{
       <CabinetTypeIconStyled>
         <CabinetTypeIcon />
       </CabinetTypeIconStyled>
-      <TextStyled fontSize="1rem" fontColor="var(--normal-text-color))">
+      <TextStyled fontSize="1rem" fontColor="var(--normal-text-color)">
         {selectedUserInfo.name}
       </TextStyled>
 

frontend/src/Cabinet/pages/AvailablePage.tsx

@@ -98,10 +98,6 @@ const AvailablePage = () => {
 
   useEffect(() => {
     deleteRecoilPersistFloorSection();
-    setTimeout(() => {
-      // 새로고침 광클 방지를 위한 초기 로딩 딜레이
-      setIsLoaded(true);
-    }, 500);
   }, []);
 
   useEffect(() => {
@@ -156,7 +152,7 @@ const AvailablePage = () => {
         />
       </MultiToggleSwitchStyled>
 
-      {isLoaded && cabinets ? (
+      {Object.keys(cabinets).length ? (
         Object.entries(cabinets).map(([key, value]) => (
           <FloorContainer
             key={key}

frontend/src/Cabinet/pages/ItemUsageLogPage.tsx

@@ -7,6 +7,7 @@ import { ItemIconMap } from "@/Cabinet/assets/data/maps";
 import { ReactComponent as DropdownChevron } from "@/Cabinet/assets/images/dropdownChevron.svg";
 import { StoreItemType } from "@/Cabinet/types/enum/store.enum";
 import { axiosGetItemUsageHistory } from "@/Cabinet/api/axios/axios.custom";
+import useDebounce from "@/Cabinet/hooks/useDebounce";
 
 const mapItemNameToType = (itemName: string): StoreItemType => {
   switch (itemName) {
@@ -55,8 +56,9 @@ const ItemUsageLogPage = () => {
   const [isMoreBtnLoading, setIsMoreBtnLoading] = useState<boolean>(true);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const size = 5;
+  const { debounce } = useDebounce();
 
-  const getItemUsageLog = async (page: number, size: number) => {
+  const getItemUsageLog = async () => {
     try {
       const data = await axiosGetItemUsageHistory(page, size);
       const newLogs = createLogEntries(data);
@@ -72,13 +74,19 @@ const ItemUsageLogPage = () => {
 
   useEffect(() => {
     setTimeout(() => {
-      getItemUsageLog(page, size);
+      getItemUsageLog();
     }, 333);
   }, [page]);
 
   const handleMoreClick = () => {
-    setPage((prev) => prev + 1);
     setIsMoreBtnLoading(true);
+    debounce(
+      "itemUsageLog",
+      () => {
+        setPage((prev) => prev + 1);
+      },
+      333
+    );
   };
 
   return (
@@ -111,7 +119,6 @@ const ItemUsageLogPage = () => {
                 <ButtonContainerStyled>
                   <MoreButtonStyled
                     onClick={handleMoreClick}
-                    disabled={isMoreBtnLoading}
                     isMoreBtnLoading={isMoreBtnLoading}
                   >
                     {isMoreBtnLoading ? (

frontend/src/Cabinet/pages/PostLogin.tsx

@@ -46,6 +46,7 @@ const PostLogin = (): JSX.Element => {
       let time = setTimeout(() => {
         navigate("/home");
       }, 600);
+
       return () => {
         clearTimeout(time);
       };