From c3c7a66e8d0af81acdfb334326bc6c5fb09cb65e Mon Sep 17 00:00:00 2001 From: jeongmingong Date: Tue, 9 Apr 2024 10:55:13 +0900 Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat:=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=ED=9B=84=20=EC=B5=9C=EC=B4=88=20=ED=95=9C?= =?UTF-8?q?=20=EB=B2=88=EB=A7=8C=20SurveyPage=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 24 ++++++++++++++-- src/components/layout/parts/MainNavBar.tsx | 33 ++++++++++++++++++---- src/components/my/DeleteAccountBox.tsx | 4 +++ src/pages/AuthPage.tsx | 2 +- src/pages/SurveyPage.tsx | 5 +++- 5 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0242b54..fa8e051 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,7 +25,6 @@ interface PrivateRouteProps { const PrivateRoute: React.FC = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [isChecking, setIsChecking] = useState(true); - const location = useLocation(); useEffect(() => { checkLoginStatus(); @@ -51,6 +50,27 @@ const PrivateRoute: React.FC = ({ 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 ; + } + // 그 외의 경우 (값이 'false'이거나 없는 경우), SurveyPage를 보여줌 + return ; + }; + return ( <> @@ -124,7 +144,7 @@ const App = () => { path="/survey" element={ - + } > diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx index 84464de..af10dcf 100644 --- a/src/components/layout/parts/MainNavBar.tsx +++ b/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 ( <>
@@ -65,10 +84,12 @@ const MainNavBar = () => { textAlign: 'center', alignContent: 'center', margin: '2px', + cursor: 'pointer', }} + onClick={navigateToMyPage} > -

Clayton Santos

+

{userNickname}

diff --git a/src/components/my/DeleteAccountBox.tsx b/src/components/my/DeleteAccountBox.tsx index 516bb76..ff1e668 100644 --- a/src/components/my/DeleteAccountBox.tsx +++ b/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() { diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx index f95ecda..fe2a108 100644 --- a/src/pages/AuthPage.tsx +++ b/src/pages/AuthPage.tsx @@ -50,7 +50,7 @@ const AuthPageContent: React.FC = () => { useEffect(() => { if (authStatus === 'authenticated') { - navigate('/'); + navigate('/survey'); } }, [authStatus, navigate]); diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx index 85280c1..0710627 100644 --- a/src/pages/SurveyPage.tsx +++ b/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 ( <>