[FE] UT피드백에 의한 편집 페이지 새로고침 로직 문제를 해결한다 (#886)

woowacourse-teams · Oct 24, 2024 · 0c32ae8 · 0c32ae8
1 parent d3b6e50
commit 0c32ae8
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 39 deletions.
diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/useDefaultRoomName.ts b/frontend/src/components/NewChecklist/NewRoomInfoForm/useDefaultRoomName.ts
@@ -13,11 +13,13 @@ const useDefaultRoomName = () => {
     if (!checklistList) return;
     if (roomName.rawValue !== initialRoomInfo.roomName.rawValue) return;
     const count = checklistList.filter(
-      checklist => new Date(checklist.createdAt).getUTCDay() === new Date().getUTCDay(),
+      checklist =>
+        new Date(checklist.createdAt).getUTCDay() === new Date().getUTCDay() &&
+        checklist.roomName !== '예시용 체크리스트',
     ).length;
 
     const date = new Date();
-    roomName.set(`${date.getMonth() + 1}월 ${date.getDate()}일 ${count}번째 방`);
+    roomName.set(`${date.getMonth() + 1}월 ${date.getDate()}일 ${count + 1}번째 방`);
   }, [checklistList]);
 };
 

diff --git a/frontend/src/components/_common/Like/LikeButton.tsx b/frontend/src/components/_common/Like/LikeButton.tsx
@@ -14,7 +14,7 @@ const LikeButton = ({ isLiked = false, checklistId }: Props) => {
   const [localIsLiked, setLocalIsLiked] = useState(isLiked);
 
   const { mutate: toggleLike, variables, isPending } = useToggleLikeQuery();
-  const debouncedIsLiked = useDebounce({ value: localIsLiked, delay: 500 });
+  const debouncedIsLiked = useDebounce({ value: localIsLiked, delay: 200 });
 
   useEffect(() => {
     if (debouncedIsLiked !== isLiked) {
@@ -41,7 +41,6 @@ const LikeButton = ({ isLiked = false, checklistId }: Props) => {
       onClick={handleClickLike}
       fill={fill ? theme.palette.red500 : 'NONE'}
       stroke={fill ? theme.palette.red500 : theme.palette.grey500}
-      tabIndex={1}
       aria-label="좋아요 버튼"
     />
   );

diff --git a/frontend/src/components/_common/Modal/Modal.tsx b/frontend/src/components/_common/Modal/Modal.tsx
@@ -38,23 +38,26 @@ const Modal = ({
 }: ModalProps) => {
   if (!modalRoot) return null;
 
-  return createPortal(
-    <FocusTrap onEscapeFocusTrap={onClose}>
-      <S.ModalWrapper open={isOpen}>
-        {hasDim && <S.ModalBackground onClick={hasDim ? onClose : () => {}} hasDim={hasDim} />}
-        <S.ModalOuter $position={position} $size={size} color={color} isOpen={isOpen}>
-          <S.ModalInner isOpen={isOpen}>
-            {children}
-            {hasCloseButton && (
-              <S.CloseButton role="button" onClick={onClose} aria-label="모달 끄기">
-                <CloseIcon />
-              </S.CloseButton>
-            )}
-          </S.ModalInner>
-        </S.ModalOuter>
-      </S.ModalWrapper>
-    </FocusTrap>,
-    modalRoot,
+  return (
+    isOpen &&
+    createPortal(
+      <FocusTrap onEscapeFocusTrap={onClose}>
+        <S.ModalWrapper open={isOpen}>
+          {hasDim && <S.ModalBackground onClick={hasDim ? onClose : () => {}} hasDim={hasDim} />}
+          <S.ModalOuter $position={position} $size={size} color={color} isOpen={isOpen}>
+            <S.ModalInner isOpen={isOpen}>
+              {children}
+              {hasCloseButton && (
+                <S.CloseButton role="button" onClick={onClose} aria-label="모달 끄기">
+                  <CloseIcon />
+                </S.CloseButton>
+              )}
+            </S.ModalInner>
+          </S.ModalOuter>
+        </S.ModalWrapper>
+      </FocusTrap>,
+      modalRoot,
+    )
   );
 };
 

diff --git a/frontend/src/routers/GoogleAnalytics.tsx b/frontend/src/routers/GoogleAnalytics.tsx
diff --git a/frontend/src/routers/router.tsx b/frontend/src/routers/router.tsx
@@ -5,7 +5,6 @@ import FooterLayout from '@/components/_common/layout/FooterLayout';
 import { ROUTE_PATH } from '@/constants/routePath';
 import SignInPage from '@/pages/SignInPage';
 import SignUpPage from '@/pages/SignUpPage';
-import GoogleAnalytics from '@/routers/GoogleAnalytics';
 
 const MainPage = React.lazy(() => import('@/pages/MainPage'));
 const ChecklistListPage = React.lazy(() => import('@/pages/ChecklistListPage'));
@@ -24,7 +23,6 @@ const router = createBrowserRouter([
   {
     element: (
       <Suspense>
-        <GoogleAnalytics />
         <Outlet />
       </Suspense>
     ),

diff --git a/frontend/src/store/roomInfoNonValidatedStore.ts b/frontend/src/store/roomInfoNonValidatedStore.ts
@@ -1,4 +1,5 @@
 import { createStore } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 import { DEFAULT_POSITION } from '@/constants/map';
 import { Position } from '@/types/address';
@@ -21,12 +22,23 @@ const defaultStates = {
   position: DEFAULT_POSITION,
 };
 
-const roomInfoNonValidatedStore = createStore<States & { actions: Actions }>()(set => ({
-  ...defaultStates,
-  actions: {
-    set: (name, value) => set({ [name]: value }),
-    resetAll: () => set(defaultStates),
-  },
-}));
+const roomInfoNonValidatedStore = createStore<States & { actions: Actions }>()(
+  persist(
+    set => ({
+      ...defaultStates,
+      actions: {
+        set: (name, value) => set({ [name]: value }),
+        resetAll: () => set(defaultStates),
+      },
+    }),
+    {
+      name: 'roomInfo-nonvalidated',
+      partialize: store => {
+        const { actions: _, ...state } = store;
+        return { ...state };
+      },
+    },
+  ),
+);
 
 export default roomInfoNonValidatedStore;