Merge pull request #134 from Garodden/feature/front_user

Feat: User 프론트 백엔드 연동 작업
DuckOriDuck · May 10, 2024 · 10a16e3 · 10a16e3
2 parents 24c1b1c + 435b026
commit 10a16e3
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 19 deletions.
diff --git a/src/front/src/App.jsx b/src/front/src/App.jsx
@@ -9,6 +9,7 @@ import ChatBox from "./components/ChatBox";
 import MyPage from "./routes/Mypage";
 import UserPage from "./routes/UserPage";
 import PasswordFind from "./routes/PasswordFind";
+import Resign from "./routes/Resign";
 
 
 
@@ -33,6 +34,10 @@ const router = createBrowserRouter([
         path: "/chat",
         element: <ChatBox></ChatBox>
       },
+      {
+        path: "/resign",
+        element: <Resign></Resign>
+      },
       {
         path: "/mypage",
         element: <MyPage></MyPage>

diff --git a/src/front/src/index.jsx b/src/front/src/index.jsx
@@ -2,17 +2,22 @@ import { useState, createContext, useEffect } from 'react';
 
 const GlobalContext = createContext({
   isLogin: false,
-  setLogin: () =>{}
+  userInfo: {},
+  setLogin: () =>{},
+  setUserInfo: () =>{}
 });
 
 const ContextProvider = ({children}) =>{
   // 생성자
   const [isLogin, setLogin] = useState(false);
+  const [userInfo, setUserInfo] = useState({});
 
   return (
       <GlobalContext.Provider value={{
         isLogin,
+        userInfo,
         setLogin, 
+        setUserInfo
       }}>
           {children}
       </GlobalContext.Provider>

diff --git a/src/front/src/routes/Main.jsx b/src/front/src/routes/Main.jsx
@@ -28,12 +28,12 @@ const Main = () =>{
         <div>로그인 된거</div> :
         (<main className="flex h-screen">
             <section className=" flex-grow-[6] bg-[#6866EB] px-16 py-24 text-white">
-                <h1 className="text-6xl font-bold">About Us</h1>
+                <h1 className="text-6xl font-bold">1inked 1n</h1>
                 <div className="mt-48 text-4xl font-bold grid gap-4">
-                    <h2>1</h2>
-                    <h2>2</h2>
-                    <h2>3</h2>
-                    <h2>4</h2>
+                    <h2>해외 취업 고민하는 우리</h2>
+                    <h2>1inked 1n에서</h2>
+                    <h2>자소서 첨삭부터</h2>
+                    <h2>전문가 매칭까지</h2>
                 </div>
             </section>
             <section className="flex-grow-[4] login flex flex-col items-center justify-center">

diff --git a/src/front/src/routes/Mypage.jsx b/src/front/src/routes/Mypage.jsx
@@ -1,6 +1,6 @@
 import Header from "@/components/Layout/Header.jsx";
 import {Avatar, AvatarImage, AvatarFallback} from "@/components/ui/avatar.jsx";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Link} from "react-router-dom";
 import {Tabs, TabsList, TabsTrigger, TabsContent} from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
@@ -9,6 +9,8 @@ import { Button } from "@/components/ui/button";
 import FollowInfo from "@/components/FollowInfo";
 import MyResumes from "@/components/MyResumes";
 import { anchorScrollCallback } from "@/utils/common";
+import { saveProfileReqParam } from "@/utils/Parameter";
+import { fetchUserProfile, saveProfile } from "@/utils/API";
 
 const MyPage = () => {
     //Mypage, UserPage는 유저 정보를 통해 pageOwner인지 판단한 후 구별이 가능
@@ -23,11 +25,36 @@ const MyPage = () => {
     const [location, setLocation] = useState('Location');
     const [description, setDescription] = useState('Description');
     const [username, setUsername] = useState('Username');
+    const [file, setFile] = useState(null);
+
+    useEffect(() =>{
+        fetchUserProfile("[email protected]")
+        .then(async (userInfo) => {
+            setUsername(userInfo.realName);
+            setIdentity(userInfo.identity);
+            setLocation(userInfo.location);
+            setDescription(userInfo.description);
+
+            //user Profile image 설정
+            setProfilePic(`data:image/png;base64,${userInfo.image}`);
+        });
+    },[]);
 
     const toggleEditing = () => {
         setEditing(!editing);
     };
 
+    //프로필 변경 사항 저장 API
+    const doSaveProfile = () =>{
+        const reqParam = saveProfileReqParam("[email protected]", identity, location, description, file);
+
+        saveProfile(reqParam)
+        .then((response) => {
+            console.log(response);
+            toggleEditing();
+        });
+    }
+
     const handleProfilePicChange = (event) => {
         const file = event.target.files[0];
         const reader = new FileReader();
@@ -53,7 +80,7 @@ const MyPage = () => {
                         <strong>{username}</strong>
                         <div className="flex gap-2 text-black/65">
                             <Link to="/findPassword">비밀번호 변경</Link>
-                            <Link to="">회원 탈퇴</Link>
+                            <Link to="/resign">회원 탈퇴</Link>
                         </div>
                     </div>
                     <div className="flex flex-col gap-4">
@@ -63,8 +90,8 @@ const MyPage = () => {
                                     <Input className="w-full mt-2" maxLength={100} type="text" value={identity} onChange={e => setIdentity(e.target.value)}/>
                                     <Input className="w-full" maxLength={50} type="text" value={location} onChange={e => setLocation(e.target.value)}/>
                                     <Textarea className="w-full resize-none" maxLength={2000} value={description} onChange={e => setDescription(e.target.value)}/>
-                                    <Input type="file" onChange={handleProfilePicChange}/>
-                                    <Button onClick={toggleEditing} variant="ghost" className="text-black text-opacity-40">
+                                    <Input type="file" accept=".png" onChange={(ev) => { handleProfilePicChange(ev); setFile(ev.target.files[0])}}/>
+                                    <Button onClick={doSaveProfile} variant="ghost" className="text-black text-opacity-40">
                                         Save Changes
                                     </Button>
                                 </>) :

diff --git a/src/front/src/routes/Resign.jsx b/src/front/src/routes/Resign.jsx
@@ -3,20 +3,25 @@ import {useNavigate} from "react-router-dom";
 import {GlobalContext} from "..";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent,AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog";
 import LabelSection from "@/components/Layout/LabelSection";
+import { withdrawReqParam } from "@/utils/Parameter";
+import { logout, withdraw } from "@/utils/API";
 
 const Resign = () => {
-    const { setLogin } = useContext(GlobalContext);
     const navigate = useNavigate();
     const [currentPassword, setCurrentPassword] = useState('');
 
     const handleResign = () => {
-        if (window.confirm("정말로 회원을 탈퇴하시겠습니까?")) {
-            // 회원 탈퇴 로직을 실행
-            alert("회원 탈퇴가 완료되었습니다.");
-            setLogin(false);
+        //가데이터
+        const reqParam = withdrawReqParam("[email protected]", currentPassword, true);
+
+        withdraw(reqParam)
+        .then((response) => {
+            alert("회원탈퇴에 성공했습니다. 그동안 저희 서비스를 이용해주셔서 감사합니다.");
+            logout();
             navigate("/login");
-        }
+        });
     };
 
     // Navigate to mypage
@@ -33,9 +38,24 @@ const Resign = () => {
                     <Input id="cur_pwd" type="password" placeholder="current password"
                            value={currentPassword} onChange={(e => setCurrentPassword(e.target.value))}/>
                 </LabelSection>
-                <Button className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600" onClick={handleResign}>
-                    <div>탈퇴하기</div>
-                </Button>
+                <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                        <Button className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600">탈퇴하기</Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>정말 회원 탈퇴하시겠어요?</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                회원 탈퇴 이후엔 되돌릴 수 없어요. 신중하게 선택해주세요. 정말 탈퇴하시겠어요?
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel>취소</AlertDialogCancel>
+                            <AlertDialogAction onClick={handleResign}>탈퇴</AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+
                 <Button className="bg-[#6866EB] mt-4 w-full hover:bg-violet-600" onClick={handleGoBack}>
                     <div>돌아가기</div>
                 </Button>

diff --git a/src/front/src/utils/API.js b/src/front/src/utils/API.js
@@ -133,6 +133,13 @@ export const changePassword = async (changePasswordReqParam) =>{
     .then((response) => response.data);
 }
 
+export const fetchUserProfile = async (email) =>{
+    const fetchUserProfileURL = URL + `/api/user?email=${email}`;
+
+    return OneinkedGet(fetchUserProfileURL)
+    .then((response) =>  response.data);
+}
+
 
 export const saveProfile = async (saveProfileReqParam) =>{
     const saveProfileURL = URL + "/api/profile";