Merge branch 'dev' into feat/a-side-ui-change

src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+
+interface Props extends IntersectionObserverInit {
+  onIntersect: IntersectionObserverCallback;
+  triggerOnce?: boolean;
+}
+
+const DEFAULT_THRESHOLD = 1.0;
+
+export const useIntersectionObserver = ({
+  root,
+  rootMargin = '0px',
+  threshold = DEFAULT_THRESHOLD,
+  onIntersect,
+  triggerOnce = false,
+}: Props) => {
+  const [target, setTarget] = useState<HTMLElement | null | undefined>(null);
+
+  useEffect(() => {
+    if (!target) {
+      return;
+    }
+
+    let observer: IntersectionObserver;
+    if (triggerOnce) {
+      observer = new IntersectionObserver(onIntersectOnce(onIntersect, triggerOnce, target), {
+        root,
+        rootMargin,
+        threshold,
+      });
+    } else {
+      observer = new IntersectionObserver(onIntersect, { root, rootMargin, threshold });
+    }
+
+    observer.observe(target);
+
+    return () => {
+      if (target) {
+        observer.unobserve(target);
+      }
+    };
+  }, [root, rootMargin, onIntersect, threshold, target, triggerOnce]);
+
+  return [setTarget];
+};
+
+const onIntersectOnce = (
+  callback: IntersectionObserverCallback,
+  triggerOnce: boolean,
+  target: HTMLElement
+) => {
+  return (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
+    callback(entries, observer);
+
+    if (target && triggerOnce && Boolean(entries?.some((entry) => entry.isIntersecting))) {
+      observer.unobserve(target);
+    }
+  };
+};

src/routes/A/ATopics.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import useTopics, { TopicsRequestDTO, useTrendingTopics } from '@apis/topic/useTopics';
 import useVoteTopic from '@apis/topic/useVoteTopic';
@@ -14,6 +14,8 @@ import { colors } from '@styles/theme';
 
 import { ALogoIcon, UpDownChevronIcon } from '@icons/index';
 
+import { useIntersectionObserver } from '@hooks/useIntersectionObserver';
+
 import { ResponseError } from '@apis/fetch';
 
 import { Container } from './ATopics.styles';
@@ -108,6 +110,7 @@ const ATopics = () => {
               />
             );
           })}
+          <div ref={setTargetRef} />
         </Col>
       </Container>
     </Layout>

src/routes/MyPage/MyPage.tsx

@@ -13,6 +13,8 @@ import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import useActionSheet from '@hooks/useModal/useActionSheet';
 
+import { useAuthStore } from '@store/auth';
+
 import { colors } from '@styles/theme';
 
 import { AlbumIcon, CameraIcon, RightChevronIcon, TrashIcon } from '@icons/index';
@@ -29,6 +31,7 @@ import {
 
 const MyPage = () => {
   const navigate = useNavigate();
+  const logout = useAuthStore((state) => state.logout);
 
   const profileImageInputRef = useRef<HTMLInputElement>(null);
 
@@ -156,6 +159,10 @@ const MyPage = () => {
     ],
   });
 
+  const handleLogout = () => {
+    logout();
+  };
+
   return (
     <Layout
       hasBottomNavigation={true}
@@ -216,15 +223,19 @@ const MyPage = () => {
               </Text>
             </Row>
             <Divider />
-            <Text
-              style={{ padding: '0 7px' }}
-              size={16}
-              weight={400}
-              color={colors.white_40}
-              align="start"
-            >
-              로그아웃
-            </Text>
+            <Row>
+              <button onClick={handleLogout}>
+                <Text
+                  style={{ padding: '0 7px' }}
+                  size={16}
+                  weight={400}
+                  color={colors.white}
+                  align="start"
+                >
+                  로그아웃
+                </Text>
+              </button>
+            </Row>
           </Col>
         </Col>
         <ImageInput

src/routes/index.tsx

@@ -28,11 +28,13 @@ const Signup = lazy(() => import('./Auth/signup/Signup'));
 
 const AuthRoute = () => {
   const reLogin = useAuthStore((store) => store.reLogin);
+  const [isLoading, setIsLoading] = useState(true);
 
   useLayoutEffect(() => {
     const handleReLogin = async () => {
       try {
         await reLogin();
+        setIsLoading(false);
       } catch (e) {
         console.error(e);
       }
@@ -42,9 +44,10 @@ const AuthRoute = () => {
   }, []);
 
   return (
-    <Suspense fallback={<Loading />}>
+    <>
+      {isLoading && <Loading />}
       <Outlet />
-    </Suspense>
+    </>
   );
 };
 
@@ -87,7 +90,11 @@ const Router = () => {
     )
   );
 
-  return <RouterProvider router={router} />;
+  return (
+    <Suspense fallback={<Loading />}>
+      <RouterProvider router={router} />
+    </Suspense>
+  );
 };
 
 export default Router;