feat: 전역에서 유저 인증 처리를 하기 위한 컴포넌트 추가

choooz · Oct 11, 2023 · 1754092 · 1754092
1 parent 05986fa
commit 1754092
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/apps/chooz/lib/utils/userStorage.ts b/apps/chooz/lib/utils/userStorage.ts
@@ -1,5 +1,3 @@
-"use client";
-
 export const USER_STORAGE_KEY = "CHOOZ_USER";
 
 interface Token {

diff --git a/apps/jurumarble/src/app/layout.tsx b/apps/jurumarble/src/app/layout.tsx
@@ -6,6 +6,7 @@ import type { Metadata } from "next";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { injectStyle } from "react-toastify/dist/inject-style";
+import AuthProcess from "components/AuthProcess";
 
 export const metadata: Metadata = {
   title: "주루마블",
@@ -24,11 +25,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <ReactQueryProvider>
           <StyledComponents>
             <StyledLayout>
-              <>
-                <div id="portal" />
-                {children}
-                <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
-              </>
+              <div id="portal" />
+              <AuthProcess />
+              {children}
+              <ToastContainer position="top-center" autoClose={2000} hideProgressBar />
             </StyledLayout>
           </StyledComponents>
         </ReactQueryProvider>

diff --git a/apps/jurumarble/src/app/my/components/UseInfoContainer.tsx b/apps/jurumarble/src/app/my/components/UseInfoContainer.tsx
@@ -6,7 +6,6 @@ import styled, { css } from "styled-components";
 import Image from "next/image";
 import { DrinkImage } from "public/images";
 import useGetUserInfo from "services/useGetUserInfo";
-import { useRouter } from "next/navigation";
 
 function UserInfoContainer() {
   const { userInfo } = useGetUserInfo();
@@ -15,9 +14,6 @@ function UserInfoContainer() {
 
   const { gender, nickname, yearOfBirth, mbti, imageUrl } = userInfo;
 
-  const router = useRouter();
-  if (!(gender && yearOfBirth && mbti)) router.replace(Path.REGISTER_PAGE);
-
   const date = new Date();
   const age = date.getFullYear() - yearOfBirth;
   const ageRange = Math.floor(age / 10) * 10;

diff --git a/apps/jurumarble/src/app/my/components/VoteItem.tsx b/apps/jurumarble/src/app/my/components/VoteItem.tsx
@@ -1,14 +1,12 @@
 import Path from "lib/Path";
 import { useRouter } from "next/navigation";
-import { ExImg1 } from "public/images";
 import useBookmarkService from "services/useBookmarkService";
 import { Content } from "src/types/vote";
 import styled, { css } from "styled-components";
 import ChipContainer from "./ChipContainer";
 import VoteDescription from "./VoteDescription";
 
 type Props = Pick<Content, "voteId" | "region" | "title" | "imageA" | "imageB">;
-const getSafeImage = (image: string) => (image.includes("http") ? image : ExImg1);
 
 function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
   const { isBookmark, mutateBookMark } = useBookmarkService(voteId);
@@ -27,7 +25,7 @@ function VoteItem({ voteId, region, title, imageA, imageB }: Props) {
         mutateBookMark={mutateBookMark}
         isBookmark={isBookmark}
       />
-      <VoteDescription imageA={getSafeImage(imageA)} imageB={getSafeImage(imageB)} />
+      <VoteDescription imageA={imageA} imageB={imageB} />
     </Container>
   );
 }

diff --git a/apps/jurumarble/src/components/AuthProcess.tsx b/apps/jurumarble/src/components/AuthProcess.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import useGetUserInfo from "services/useGetUserInfo";
+import Path from "lib/Path";
+
+function AuthProcess() {
+  const { userInfo } = useGetUserInfo();
+  if (!userInfo) return null;
+  const { gender, yearOfBirth, mbti } = userInfo!;
+  const router = useRouter();
+  if (!(gender && yearOfBirth && mbti)) router.replace(Path.REGISTER_PAGE);
+
+  return <></>;
+}
+
+export default AuthProcess;