[feat] 마이페이지 탭 기능 완성 #32

kdt-8-4 · Nov 23, 2023 · bf6687d · bf6687d
1 parent a70b182
commit bf6687d
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 98 deletions.
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -3,7 +3,7 @@ import { Link } from "@mui/icons-material";
 import "../../style/login.scss";
 import CloseIcon from "@mui/icons-material/Close";
 import Menubar from "../../component/MenuBar";
-import { useState, ChangeEvent, FormEvent } from "react";
+import { useState, ChangeEvent, FormEvent, useEffect } from "react";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 
@@ -21,43 +21,25 @@ export default function Login() {
 
   const handleLogin = async (e: FormEvent) => {
     e.preventDefault();
-    try {
-      const respone = await axios({
-        method: "GET",
-        url: '13.124.197.227:8080/user/api/login?email="user100@test.com&password="1234"',
-        headers: {
-          Authorization: "weatherfit",
-        },
-      });
 
-      /*
-      const res = await axios.post("/user/signin", { email, pw });
+    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);
+        }
+      };
 
-      // 응답 상태 코드가 200이면 로그인 성공
-      if (res.status === 200) {
-        alert(`${res.data.ninkname}님 반갑습니다!`);
-        router.push("/"); // 로그인 성공 후 메인으로 이동
-      } else {
-        // 로그인 실패 시 서버에서 보낸 에러 메시지를 출력
-        alert(res.data.message);
-      }
-      */
-
-      /*
-      // if (email === userData.email && pw === userData.pw) {
-      //   alert(`${userData.name}님 반갑습니다!`);
-      //   router.push("/"); // 로그인 성공 후 메인으로 이동
-      // } else if (email === userData.email && pw != userData.pw) {
-      //   alert("비밀번호가 틀렸습니다.");
-      // } else if (email != userData.email && pw === userData.pw) {
-      //   alert("아이디가 틀렸습니다.");
-      // } else {
-      //   alert("로그인에 실패하였습니다.");
-      // }
-      */
-    } catch (error) {
-      console.error(error);
-    }
+      dataFunc();
+    });
   };
 
   const handleInputChange =

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -1,75 +1,53 @@
 "use client";
 import { useState } from "react";
-import Image from "next/image";
 import "../../style/mypage.scss";
+import SettingsIcon from "@mui/icons-material/Settings";
 import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
-import GridOnOutlinedIcon from "@mui/icons-material/GridOnOutlined";
-import GridOnIcon from "@mui/icons-material/GridOn";
-import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
-import FavoriteIcon from "@mui/icons-material/Favorite";
 import Menubar from "@/component/MenuBar";
+import TabBar from "@/component/TabBar";
+import Profile from "@/component/Profile";
 // import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'; // > 아이콘
 
 export default function Mypage() {
-  const [liked, setLiked] = useState<boolean>(false);
+  const [showProfileModify, setShowProfileModify] = useState<boolean>(false);
 
-  const handleLikeClick = () => {
-    setLiked(!liked);
+  const handleSettingsClick = () => {
+    setShowProfileModify(!showProfileModify);
   };
-
   return (
-    <div className="container">
-      {/* header 넣을지 말지 */}
-      {/* <header>로고 이미지</header> */}
-      <p className="title">마이페이지</p>
-      <div className="mypage_body">
-        {/* ------------- 프로필 부분 ------------- */}
-        <div className="user">
-          <div className="user_profile">
-            <AccountCircleOutlinedIcon className="user_image" />
-            <p className="user_name">김똥이</p>
-          </div>
-          <div className="user_info">
-            <div className="num_box">
-              <p className="user_post">내 게시물</p>
-              <p className="user_post_num">7</p>
+    <>
+      <div className="container">
+        {/* header 넣을지 말지 */}
+        {/* <header>로고 이미지</header> */}
+        <div className="top">
+          <h2 className="title">마이페이지</h2>
+          <SettingsIcon className="setting" onClick={handleSettingsClick} />
+        </div>
+        <div className="mypage_body">
+          {/* ------------- 프로필 부분 ------------- */}
+          <div className="user">
+            <div className="user_profile">
+              <AccountCircleOutlinedIcon className="user_image" />
+              <p className="user_name">김똥이</p>
             </div>
-            <div className="num_box">
-              <p className="user_like">좋아요 한 게시물</p>
-              <p className="user_like_num">10</p>
+            <div className="user_info">
+              <div className="num_box">
+                <p className="user_post">내 게시물</p>
+                <p className="user_post_num">7</p>
+              </div>
+              <div className="num_box">
+                <p className="user_like">좋아요 한 게시물</p>
+                <p className="user_like_num">10</p>
+              </div>
             </div>
           </div>
+          {/* --------------------------------------- */}
+          {/* ------------- tap 부분 ------------- */}
+          <TabBar />
         </div>
-        {/* --------------------------------------- */}
-        {/* ------------- tap 부분 ------------- */}
-        <div className="tap_bar">
-          <GridOnOutlinedIcon className="icon mypost_icon" />
-          {liked ? (
-            <FavoriteIcon
-              className="icon pulllike_icon"
-              onClick={handleLikeClick}
-            />
-          ) : (
-            <FavoriteBorderOutlinedIcon
-              className="icon like_icon"
-              onClick={handleLikeClick}
-            />
-          )}
-        </div>
-        {/* --------------------------------------- */}
-        {/* ------------- post 부분 ------------- */}
-        <div className="post_box">
-          <div className="post">1</div>
-          <div className="post">2</div>
-          <div className="post">3</div>
-          <div className="post">4</div>
-          <div className="post">5</div>
-          <div className="post">6</div>
-          <div className="post">7</div>
-          <div className="post">8</div>
-        </div>
+        <Menubar />
       </div>
-      <Menubar />
-    </div>
+      {showProfileModify ? <Profile /> : null}
+    </>
   );
 }
diff --git a/src/component/LikePost.tsx b/src/component/LikePost.tsx
@@ -0,0 +1,11 @@
+export default function LikePost() {
+  return (
+    <div className="post_box">
+      <div className="post">1</div>
+      <div className="post">2</div>
+      <div className="post">3</div>
+      <div className="post">4</div>
+      <div className="post">5</div>
+    </div>
+  );
+}
diff --git a/src/component/MyPost.tsx b/src/component/MyPost.tsx
@@ -0,0 +1,14 @@
+export default function MyPost() {
+  return (
+    <div className="post_box">
+      <div className="post">1</div>
+      <div className="post">2</div>
+      <div className="post">3</div>
+      <div className="post">4</div>
+      <div className="post">5</div>
+      <div className="post">6</div>
+      <div className="post">7</div>
+      <div className="post">8</div>
+    </div>
+  );
+}
diff --git a/src/component/Profile.tsx b/src/component/Profile.tsx
@@ -0,0 +1,3 @@
+export default function Profile() {
+  return <div className="modal_container">프로필 수정창</div>;
+}
diff --git a/src/component/TabBar.tsx b/src/component/TabBar.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+import GridOnOutlinedIcon from "@mui/icons-material/GridOnOutlined";
+import GridOnTwoToneIcon from "@mui/icons-material/GridOnTwoTone";
+import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import LikePost from "./LikePost";
+import MyPost from "./MyPost";
+
+export default function TabBar() {
+  const [grid, setGrid] = useState<boolean>(true);
+  const [liked, setLiked] = useState<boolean>(false);
+
+  const handleGridClick = () => {
+    if (!liked && grid) {
+      setGrid(grid);
+    } else {
+      setGrid(true);
+      setLiked(false);
+    }
+  };
+
+  const handleLikeClick = () => {
+    if (!grid && liked) {
+      setLiked(liked);
+    } else {
+      setLiked(true);
+      setGrid(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="tab_bar">
+        {grid ? (
+          <GridOnTwoToneIcon
+            className="icon click_icon"
+            onClick={handleGridClick}
+          />
+        ) : (
+          <GridOnOutlinedIcon className="icon" onClick={handleGridClick} />
+        )}
+
+        {liked ? (
+          <FavoriteIcon className="icon click_icon" onClick={handleLikeClick} />
+        ) : (
+          <FavoriteBorderOutlinedIcon
+            className="icon"
+            onClick={handleLikeClick}
+          />
+        )}
+      </div>
+      {/* post 부분 */}
+      {grid ? <MyPost /> : null}
+      {liked ? <LikePost /> : null}
+    </>
+  );
+}
diff --git a/src/style/mypage.scss b/src/style/mypage.scss
@@ -9,14 +9,21 @@
     width: 100%;
     margin-top: 2%;
   }
-  .title {
+  .top {
     font-size: 150%;
     font-weight: bold;
-    text-align: center;
+    // text-align: center;
     width: 100%;
     padding: 1% 0 1% 0;
     border-bottom: solid 2px #d0dbff;
     margin: 2% 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .title {
+      width: 90%;
+      text-align: center;
+    }
   }
   .mypage_body {
     width: 90%;
@@ -64,16 +71,17 @@
       // }
     }
     // --------------------------------------
-    .tap_bar {
+    .tab_bar {
       height: 6vh;
       margin-bottom: 2%;
       .icon {
         height: 100%;
         width: 50%;
         cursor: pointer;
+        color: #a8bbff;
       }
-      .like_icon {
-        color: aqua;
+      .click_icon {
+        border-bottom: solid #a8bbff;
       }
     }
     .post_box {
@@ -92,3 +100,7 @@
     }
   }
 }
+
+.profile {
+  background-color: antiquewhite;
+}