✨ Feat: MyPage 유저 관련 기능 구현 완료

donga-it-club · Apr 8, 2024 · 2d611bc · 2d611bc
1 parent d869462
commit 2d611bc
Show file tree

Hide file tree

Showing 12 changed files with 328 additions and 113 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { getCurrentUser } from 'aws-amplify/auth';
+import { RecoilRoot } from 'recoil';
 import MainLayout from './components/layout/MainLayout';
 import InviteTeamModal from '@/components/inviteTeam/InviteTeamModal';
 import SubLayout from '@/components/layout/PageSubLayout';
@@ -52,82 +53,84 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
 const App = () => {
   return (
     <>
-      <Router>
-        <Routes>
-          <Route element={<SubLayout />}>
+      <RecoilRoot>
+        <Router>
+          <Routes>
+            <Route element={<SubLayout />}>
+              <Route
+                path="/create"
+                element={
+                  <PrivateRoute>
+                    <CreateRetroPage />
+                  </PrivateRoute>
+                }
+              ></Route>
+              <Route
+                path="/invite"
+                element={
+                  <PrivateRoute>
+                    <InviteTeamModal />
+                  </PrivateRoute>
+                }
+              ></Route>
+              <Route
+                path="/WriteRetroTeamPage"
+                element={
+                  <PrivateRoute>
+                    <WriteRetroTeamPage />
+                  </PrivateRoute>
+                }
+              ></Route>
+            </Route>
             <Route
-              path="/create"
+              path="/WriteRetroPersonalPage"
               element={
                 <PrivateRoute>
-                  <CreateRetroPage />
+                  <WriteRetroPersonalPage />
                 </PrivateRoute>
               }
             ></Route>
             <Route
-              path="/invite"
+              path="/WriteRetroReviseTeamPage"
               element={
                 <PrivateRoute>
-                  <InviteTeamModal />
+                  <WriteRetroReviseTeamPage />
                 </PrivateRoute>
               }
             ></Route>
             <Route
-              path="/WriteRetroTeamPage"
+              path="/WriteRetroRevisePersonalPage"
               element={
                 <PrivateRoute>
-                  <WriteRetroTeamPage />
+                  <WriteRetroRevisePersonalPage />
                 </PrivateRoute>
               }
             ></Route>
-          </Route>
-          <Route
-            path="/WriteRetroPersonalPage"
-            element={
-              <PrivateRoute>
-                <WriteRetroPersonalPage />
-              </PrivateRoute>
-            }
-          ></Route>
-          <Route
-            path="/WriteRetroReviseTeamPage"
-            element={
-              <PrivateRoute>
-                <WriteRetroReviseTeamPage />
-              </PrivateRoute>
-            }
-          ></Route>
-          <Route
-            path="/WriteRetroRevisePersonalPage"
-            element={
-              <PrivateRoute>
-                <WriteRetroRevisePersonalPage />
-              </PrivateRoute>
-            }
-          ></Route>
-          <Route element={<ProfileLayout />}>
+            <Route element={<ProfileLayout />}>
+              <Route
+                path="/my"
+                element={
+                  <PrivateRoute>
+                    <MyPage />
+                  </PrivateRoute>
+                }
+              ></Route>
+            </Route>
+            <Route element={<MainLayout />}>
+              <Route path="/" element={<HomePage />}></Route>
+            </Route>
+            <Route path="/login" element={<AuthPage />}></Route>
             <Route
-              path="/my"
+              path="/survey"
               element={
                 <PrivateRoute>
-                  <MyPage />
+                  <SurveyPage />
                 </PrivateRoute>
               }
             ></Route>
-          </Route>
-          <Route element={<MainLayout />}>
-            <Route path="/" element={<HomePage />}></Route>
-          </Route>
-          <Route path="/login" element={<AuthPage />}></Route>
-          <Route
-            path="/survey"
-            element={
-              <PrivateRoute>
-                <SurveyPage />
-              </PrivateRoute>
-            }
-          ></Route>
-        </Routes>
-      </Router>
+          </Routes>
+        </Router>
+      </RecoilRoot>
     </>
   );
 };

diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx
@@ -32,7 +32,7 @@ const MainNavBar = () => {
     }
   };
 
-  // 로그아웃을 처리 함수
+  // 로그아웃 처리 함수
   async function handleSignOut() {
     try {
       await signOut({ global: true });

diff --git a/src/components/layout/parts/ProfileNavBar.tsx b/src/components/layout/parts/ProfileNavBar.tsx
@@ -1,10 +1,63 @@
+import { useState, useEffect } from 'react';
 import { Gear, PersonCircle } from 'react-bootstrap-icons';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+import { getCurrentUser, signOut, fetchUserAttributes } from 'aws-amplify/auth';
+import { useRecoilState } from 'recoil';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
 import Alarm from '@/components/alarm/Alarm';
+import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/layout/layout.style';
 
 const PageNavBar = () => {
+  const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  // const [userNickname, setUserNickname] = useState<string | null>(null);
+  const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
+
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    }
+  };
+
+  const handleLoginOrLogout = () => {
+    if (isLoggedIn) {
+      handleSignOut(); // 로그아웃 처리 함수 호출
+    }
+  };
+
+  // 로그아웃 처리 함수
+  async function handleSignOut() {
+    try {
+      await signOut({ global: true });
+      setIsLoggedIn(false); // 로그인 상태 업데이트
+      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
+    } catch (error) {
+      console.log('로그아웃 에러', error);
+    }
+  }
+
+  // 닉네임 관련
+  async function handleFetchUserAttributes() {
+    try {
+      const userAttributes = await fetchUserAttributes();
+      console.log(userAttributes);
+      setUserNickname(userAttributes.nickname || null);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    checkLoginStatus();
+    handleFetchUserAttributes();
+  }, []);
+
   return (
     <>
       <S.Container>
@@ -29,15 +82,17 @@ const PageNavBar = () => {
                 }}
               >
                 <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>
 
             <S.IconStyle border-radius="45%">
               <Gear />
             </S.IconStyle>
             <Alarm />
-            <S.Link href="#">Logout</S.Link>
+            <Button style={{ marginRight: '0.3rem' }} variant="ghost" onClick={handleLoginOrLogout}>
+              {isLoggedIn ? 'Logout' : 'Login'}
+            </Button>
           </div>
         </S.RightBox>
       </S.Container>

diff --git a/src/components/my/DeleteAccountBox.tsx b/src/components/my/DeleteAccountBox.tsx
@@ -1,6 +1,6 @@
 import { InfoCircle } from 'react-bootstrap-icons';
+import { AccountSettings } from '@aws-amplify/ui-react';
 import {
-  Button,
   Modal,
   ModalCloseButton,
   ModalContent,
@@ -9,10 +9,24 @@ import {
   ModalOverlay,
   useDisclosure,
 } from '@chakra-ui/react';
+import { deleteUser } from 'aws-amplify/auth';
 import * as S from '@/styles/my/myPage.style';
+import '@/styles/user/AuthPage.css';
 
 const DeleteAccountButton = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen, onClose } = useDisclosure();
+
+  const handleSuccess = () => {
+    alert('성공적으로 탈퇴되었습니다.');
+  };
+
+  async function handleDelete() {
+    try {
+      await deleteUser();
+    } catch (error) {
+      console.log(error);
+    }
+  }
 
   return (
     <>
@@ -24,23 +38,25 @@ const DeleteAccountButton = () => {
           삭제 후 복구 할 수 없습니다.
         </div>
       </S.SubName>
-      <div style={{ display: 'flex', flexDirection: 'row-reverse', margin: '10px' }}>
-        <S.OrdinaryButton id="mypage_rmacc" color="orange" onClick={onOpen}>
-          계정 삭제
-        </S.OrdinaryButton>
-      </div>
+      <S.deleteContainer>
+        <AccountSettings.DeleteUser
+          onSuccess={handleSuccess}
+          handleDelete={handleDelete}
+          displayText={{
+            deleteAccountButtonText: '계정 삭제',
+            cancelButtonText: '취소',
+            confirmDeleteButtonText: '삭제',
+            warningText: '계정을 삭제하시겠습니까? 관련 데이터도 함께 삭제됩니다.',
+          }}
+        />
+      </S.deleteContainer>
       <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader margin="auto auto">진심이지?</ModalHeader>
+          <ModalHeader margin="auto auto">계정을 삭제하시겠습니까?</ModalHeader>
           <ModalCloseButton />
 
-          <ModalFooter>
-            <Button colorScheme="red" mr={3}>
-              삭제하기
-            </Button>
-            <Button onClick={onClose}>취소하기</Button>
-          </ModalFooter>
+          <ModalFooter></ModalFooter>
         </ModalContent>
       </Modal>
     </>

diff --git a/src/components/my/EmailBox.tsx b/src/components/my/EmailBox.tsx
@@ -1,22 +1,35 @@
-import google from '@/../public/google.png';
-import kakao from '@/../public/kakao.png';
+import { useState, useEffect } from 'react';
+import { IoMailOutline } from 'react-icons/io5';
+import { fetchUserAttributes } from 'aws-amplify/auth';
 import * as S from '@/styles/my/myPage.style';
+
 const EmailBox = () => {
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  async function handleFetchUserAttributes() {
+    try {
+      const userAttributes = await fetchUserAttributes();
+      console.log(userAttributes);
+      setUserEmail(userAttributes.email || null);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    handleFetchUserAttributes();
+  }, []);
+
   return (
     <>
-      <S.MainName>이메일 </S.MainName>
+      <S.MainName>이메일</S.MainName>
       <S.DivingLine />
-      <S.LoginBox background_color="white">
-        <a style={{ margin: 'auto 10px' }}>[email protected]</a>
-      </S.LoginBox>
-      <S.LoginBox background_color="#FFEB00">
-        <S.KakaoIcon src={kakao} />
-        <a style={{ margin: 'auto 5px' }}>[email protected]</a>
-      </S.LoginBox>
-      <S.LoginBox background_color="white">
-        <S.KakaoIcon src={google} />
-        <a style={{ margin: 'auto 5px' }}>[email protected]</a>
-      </S.LoginBox>
+      <S.LoginContainer>
+        <S.LoginBox background_color="white">
+          <IoMailOutline />
+          <div style={{ margin: 'auto 10px' }}>{userEmail}</div>
+        </S.LoginBox>
+      </S.LoginContainer>
     </>
   );
 };