[FE][Feature] 회원가입시 SurveyPage로 이동

src/App.tsx

@@ -25,7 +25,6 @@ interface PrivateRouteProps {
 const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [isChecking, setIsChecking] = useState(true);
-  const location = useLocation();
 
   useEffect(() => {
     checkLoginStatus();
@@ -51,6 +50,27 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
 
 // App 컴포넌트 수정
 const App = () => {
+  const SurveyControl = () => {
+    const checkSurveyVisited = () => {
+      // localStorage에서 값을 가져오되, 없으면 'false'를 기본값으로 사용
+      const visited = localStorage.getItem('surveyVisited');
+      return visited !== null ? visited === 'true' : false;
+    };
+
+    const location = useLocation();
+
+    useEffect(() => {
+      // 추가적인 페이지 접근 로직이 필요하면 여기에 구현
+    }, [location]);
+
+    // surveyVisited 값이 'true'인 경우, 홈 페이지로 리다이렉트
+    if (checkSurveyVisited()) {
+      return <Navigate to="/" replace />;
+    }
+    // 그 외의 경우 (값이 'false'이거나 없는 경우), SurveyPage를 보여줌
+    return <SurveyPage />;
+  };
+
   return (
     <>
       <RecoilRoot>
@@ -124,7 +144,7 @@ const App = () => {
               path="/survey"
               element={
                 <PrivateRoute>
-                  <SurveyPage />
+                  <SurveyControl />
                 </PrivateRoute>
               }
             ></Route>

src/components/layout/parts/MainNavBar.tsx

@@ -2,18 +2,17 @@ import { useEffect, useState } from 'react';
 import { PersonCircle } from 'react-bootstrap-icons';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
-import { getCurrentUser, signOut } from 'aws-amplify/auth';
+import { fetchUserAttributes, getCurrentUser, signOut } from 'aws-amplify/auth';
+import { useRecoilState } from 'recoil';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
+import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/layout/layout.style';
 
 const MainNavBar = () => {
   const navigate = useNavigate();
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  useEffect(() => {
-    checkLoginStatus();
-  }, []);
+  const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
 
   const checkLoginStatus = async () => {
     try {
@@ -43,6 +42,26 @@ const MainNavBar = () => {
     }
   }
 
+  // 닉네임 관련
+  async function handleFetchUserAttributes() {
+    try {
+      const userAttributes = await fetchUserAttributes();
+      console.log(userAttributes);
+      setUserNickname(userAttributes.nickname || null);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    checkLoginStatus();
+    handleFetchUserAttributes();
+  }, []);
+
+  const navigateToMyPage = () => {
+    navigate('/my');
+  };
+
   return (
     <>
       <div style={{ backgroundColor: 'white', zIndex: 1 }}>
@@ -65,10 +84,12 @@ const MainNavBar = () => {
                     textAlign: 'center',
                     alignContent: 'center',
                     margin: '2px',
+                    cursor: 'pointer',
                   }}
+                  onClick={navigateToMyPage}
                 >
                   <PersonCircle style={{ width: '30px', margin: 'auto 3px' }} />
-                  <p style={{ margin: 'auto 10px' }}>Clayton Santos</p>
+                  <p style={{ margin: 'auto 10px' }}>{userNickname}</p>
                 </div>
               </S.IconStyle>
 

src/components/my/DeleteAccountBox.tsx

@@ -1,4 +1,5 @@
 import { InfoCircle } from 'react-bootstrap-icons';
+import { useNavigate } from 'react-router-dom';
 import { AccountSettings } from '@aws-amplify/ui-react';
 import {
   Modal,
@@ -15,9 +16,12 @@ import '@/styles/user/AuthPage.css';
 
 const DeleteAccountButton = () => {
   const { isOpen, onClose } = useDisclosure();
+  const navigate = useNavigate();
 
   const handleSuccess = () => {
     alert('성공적으로 탈퇴되었습니다.');
+    localStorage.removeItem('surveyVisited');
+    navigate('/');
   };
 
   async function handleDelete() {

src/pages/AuthPage.tsx

@@ -50,7 +50,7 @@ const AuthPageContent: React.FC = () => {
 
   useEffect(() => {
     if (authStatus === 'authenticated') {
-      navigate('/');
+      navigate('/survey');
     }
   }, [authStatus, navigate]);
 

src/pages/SurveyPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Text, Button, Divider } from '@chakra-ui/react';
 import AgeInput from '@/components/survey/AgeInput';
 import CityRadio from '@/components/survey/CityRadio';
@@ -9,6 +9,9 @@ import PurposeCheckbox from '@/components/survey/PurposeCheckbox';
 import * as S from '@/styles/survey/SurveyPage.style';
 
 const SurveyPage: React.FC = () => {
+  useEffect(() => {
+    localStorage.setItem('surveyVisited', 'true');
+  }, []);
   return (
     <>
       <S.Background>