[feat] 마이페이지 탭 기능 추가 & 정보 수정 제작 중 #32

kdt-8-4 · Nov 24, 2023 · a2f8eb8 · a2f8eb8
1 parent bf6687d
commit a2f8eb8
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 32 deletions.
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -7,13 +7,6 @@ import { useState, ChangeEvent, FormEvent, useEffect } from "react";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 
-// 임시 데이터
-const userData = {
-  email: "testuser",
-  pw: "testPw",
-  name: "테스트",
-};
-
 export default function Login() {
   const router = useRouter();
   const [email, setEmail] = useState<string>("");
@@ -22,24 +15,37 @@ export default function Login() {
   const handleLogin = async (e: FormEvent) => {
     e.preventDefault();
 
-    useEffect(() => {
-      const dataFunc = async () => {
-        try {
-          const respone = await axios({
-            method: "GET",
-            url: "https://www.jerneithe.site/user/signin?email=user100@test.com&password=1234",
-            headers: {
-              Authorization: "weatherfit",
-            },
-          });
-          console.log(respone);
-        } catch (error) {
-          console.error(error);
-        }
-      };
+    try {
+      const respone = await axios({
+        method: "GET",
+        url: `https://www.jerneithe.site/user/api/login?email=${email}&password=${pw}`,
+        // headers: {
+        //   Authorization: "weatherfit",
+        // },
+      });
+      console.log("login respone: ", respone);
+    } catch (error) {
+      console.error("login error: ", error);
+    }
+
+    // useEffect(() => {
+    //   const dataFunc = async () => {
+    //     try {
+    //       const respone = await axios({
+    //         method: "GET",
+    //         url: `https://www.jerneithe.site/user/api/login?email=${email}&password=${pw}`,
+    //         // headers: {
+    //         //   Authorization: "weatherfit",
+    //         // },
+    //       });
+    //       console.log(respone);
+    //     } catch (error) {
+    //       console.error(error);
+    //     }
+    //   };
 
-      dataFunc();
-    });
+    //   dataFunc();
+    // });
   };
 
   const handleInputChange =

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -1,19 +1,22 @@
 "use client";
-import { useState } from "react";
+import React, { useState } from "react";
 import "../../style/mypage.scss";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
 import Menubar from "@/component/MenuBar";
 import TabBar from "@/component/TabBar";
-import Profile from "@/component/Profile";
+import ProfileModal from "@/component/ProfileModal";
 // import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'; // > 아이콘
 
 export default function Mypage() {
+  // 회원 정보 수정 모달
   const [showProfileModify, setShowProfileModify] = useState<boolean>(false);
 
+  // 회원 정보 수정 모달 이벤트
   const handleSettingsClick = () => {
     setShowProfileModify(!showProfileModify);
   };
+
   return (
     <>
       <div className="container">
@@ -47,7 +50,9 @@ export default function Mypage() {
         </div>
         <Menubar />
       </div>
-      {showProfileModify ? <Profile /> : null}
+      {showProfileModify && (
+        <ProfileModal handleSettingsClick={handleSettingsClick} />
+      )}
     </>
   );
 }
diff --git a/src/component/Profile.tsx b/src/component/Profile.tsx
diff --git a/src/component/ProfileModal.tsx b/src/component/ProfileModal.tsx
@@ -0,0 +1,28 @@
+import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
+
+// 회원 정보 수정 모달 컴포넌트
+
+interface handleSettingsClickProps {
+  handleSettingsClick: () => void;
+}
+
+export default function ProfileModal(props: handleSettingsClickProps) {
+  // 전달받은 state 함수
+  const { handleSettingsClick } = props;
+
+  return (
+    <div className="modal_back">
+      <div className="modal_content">
+        <h2>회원정보 수정</h2>
+        <button onClick={handleSettingsClick}>닫기</button>
+        <AccountCircleOutlinedIcon className="user_image" />
+        <input placeholder="닉네임" />
+        <input placeholder="비밀번호" />
+      </div>
+      <button type="button">수정</button>
+      <button type="button">로그아웃</button>
+    </div>
+  );
+}
+
+// onClick={(e: React.MouseEvent) => e.stopPropagation()}
diff --git a/src/style/mypage.scss b/src/style/mypage.scss
@@ -101,6 +101,41 @@
   }
 }
 
-.profile {
-  background-color: antiquewhite;
+.modal_back {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .modal_content {
+    padding: 1.5rem 3rem;
+    width: 28.125rem;
+    border-radius: 0.313rem;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    input {
+      display: flex;
+      align-items: center;
+      margin-top: 0.625rem;
+      border: 0.063rem solid gray;
+      padding: 0.8rem 1rem;
+      font-size: 1rem;
+    }
+    div {
+      display: flex;
+      justify-content: space-evenly;
+      margin-top: 1.25rem;
+      button {
+        border: none;
+        width: 6.875rem;
+        padding: 0.8rem 1.8rem;
+        font-size: 0.9rem;
+      }
+    }
+  }
 }