Merge pull request #23 from prgrms-fe-devcourse/feat/#13

[Feat] 마이페이지에서 수정버튼의 modal 구현

package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.79.3",
+    "sass-embedded": "^1.79.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

src/pages/MyPage.tsx

@@ -1,16 +1,26 @@
 import "../styles/scss/Mypage.scss"; 
-import profilePhoto from "../assets/chun_bong.png";
+import profileImage from "../assets/chun_bong.png";
 import settingIcon from "../assets/Setting.svg";
 
+import { useState } from "react";
+import SetModal from "./SettingModal";
+
 const MyPage = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false); // 0928 - 모달 상태 관리 추가
+
+  // 0928 - 모달 열기/닫기 함수 추가 
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
   return (
     <div className="page-container">
       <div className="setting-section">
-        <img className="setting" src={settingIcon} alt="Setting" />
+        <img className="setting" src={settingIcon} alt="Setting" onClick={toggleModal}/>
       </div>
       <div className="profile-section">
-        <img className="profile-image" src={profilePhoto} alt="Profile" />
-        <h2 className="userid">chun_bong</h2>
+        <img className="profile-image" src={profileImage} alt="Profile" />
+        <h2 className="user-id">chun_bong</h2>
         <div>
           <p className="introduce-text">
             안녕 나는 박춘봉이다 여기는 자기소개문구 입력란이다. 자기소개 문구
@@ -25,7 +35,10 @@ const MyPage = () => {
       </div>
       <div className="tab-content">
         <p>탭하면 보이는 공간</p>
-      </div>w
+      </div>
+
+      {/* 0928 - 모달이 열릴 때만 렌더링 추가 */}
+      {isModalOpen && <SetModal onClose={toggleModal} />} 
     </div>
   );
 };

src/pages/SettingModal.tsx

@@ -0,0 +1,72 @@
+import "../styles/scss/Setting.scss";
+import profileImage from "../assets/chun_bong.png";
+import settingIcon from "../assets/Setting.svg";
+import backImg from "../assets/_.png"
+
+const SettingModal = ({ onClose }: { onClose: () => void }) => {
+  return (
+
+    <div className="settingContainer">
+
+
+      <div className="setting-content">
+        {/* 뒤로가기 이미지 */}
+      <button className="baack-image" onClick={onClose}>
+          <img src={backImg}alt="back-image"></img>
+         </button>
+        {/* 프로필(사진, 아이디, 비밀번호) */}
+        <div className="profile-section">
+
+         <p className="title">설정</p>
+
+
+
+          <div className="image-container">
+            <img
+              className="setting-image"
+              src={profileImage}
+              alt="setting-image"
+            />
+            {/* 프로필 사진 수정 버튼 */}
+            <button className="setting-btn">
+              <img src={settingIcon} alt="Setting" />
+            </button>
+          </div>
+
+          <div className="setting-user-info">
+            <p className="setting-user-id">chun_bong</p>
+            <p className="setting-user-email">[email protected]</p>
+          </div>
+
+        </div>
+        <hr className="top"/>
+
+
+        {/* 비밀번호 */}
+        <div className="password-section">
+          <label htmlFor="current-password">기존 비밀번호 확인</label>
+          <input type="password" id="current-password" />
+
+          <label htmlFor="new-password">새 비밀번호 입력</label>
+          <input type="password" id="new-password" />
+        </div>
+
+        {/* 자기소개 */}
+        <hr className=" bottom"/>
+
+        <div className="intro-section">
+          <label htmlFor="intro">자기소개 수정</label>
+          <textarea id="intro-textarea" maxLength={50} />
+        </div>
+
+        {/* 임시로 추가한 수정 취소 버튼들 */}
+        <div className="settingbutton-section">
+          <button className="fix-button" onClick={onClose}>수정</button>
+          <button className="cancel-button" onClick={onClose}>취소</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingModal;

src/styles/css/Mypage.css

@@ -22,7 +22,7 @@ body {
   border-radius: 100%;
 }
 
-.userid {
+.user-id {
   margin: 17px 0;
 }
 

src/styles/css/Setting.css

@@ -0,0 +1,65 @@
+.settingContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  /* display: block; */
+  justify-content: center;
+  align-items: center;
+}
+
+.settingContainer .setting-content {
+  position: relative;
+  width: 500px;
+  padding: 20px;
+  border-radius: 30px;
+  background-color: white;
+  z-index: 1001;
+}
+
+.settingContainer .setting-content .profile-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.settingContainer .setting-content .profile-section .image-container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+.settingContainer .setting-content .profile-section .setting-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+.settingContainer .setting-content .profile-section .setting-btn {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.settingContainer .setting-content .profile-section .setting-btn img {
+  width: 25px;
+  height: 25px;
+}
+.settingContainer .setting-content .profile-section .setting-user-info {
+  margin-top: 15px;
+  text-align: center;
+}
+.settingContainer .setting-content .profile-section .setting-user-info .setting-user-id {
+  font-size: 25px;
+  font-weight: bold;
+  color: black;
+}
+.settingContainer .setting-content .profile-section .setting-user-info .setting-user-email {
+  font-size: 15px;
+  font-weight: bold;
+  color: #bcbcbc;
+}

src/styles/scss/Mypage.scss

@@ -22,7 +22,7 @@ body {
     border-radius: 100%;
   }
 
-  .userid {
+  .user-id {
     margin: 17px 0;
   }
 

src/styles/scss/Setting.scss

@@ -0,0 +1,178 @@
+$modal-width: 500px;
+$background-color: rgba(0, 0, 0, 0.5);
+$modal-padding: 20px;
+$modal-border-radius: 30px;
+$z-index-overlay: 1000;
+$z-index-modal: 1001; //modal이 위에 뜨게 z-index 지정
+
+@mixin center-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.settingContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $background-color;
+    z-index: $z-index-overlay;
+    @include center-flex;
+
+    .setting-content {
+        position: relative;
+        width: $modal-width;
+        padding: $modal-padding;
+        border-radius: $modal-border-radius;
+        background-color: white;
+        z-index: $z-index-modal;
+        // 뒤로가기 버튼
+        .baack-image{
+            background-color: white;
+            border: none;
+            margin-top: 10px;
+        }
+        .top{
+            position: relative;
+            bottom: 30px;
+            font-weight: bold;
+            font-size: 25px;
+         border: solid yellow 1px
+        }
+
+        // 사용자 프로필 관련 부분
+        .profile-section { 
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+
+            .title{
+                position: relative;
+                bottom: 30px;
+                font-weight: bold;
+                font-size: 25px;
+
+            }
+            // 프로필 + 버튼 부분 (이미지) 
+            .image-container {
+                position: relative;
+                width: 100px;
+                height: 100px;
+            }
+
+            // 수정 modal 프로필 사진
+            .setting-image { 
+                width: 100px;
+                height: 100px;
+                border-radius: 50%;
+            }
+
+            // 수정 modal 프로필 사진 수정 버튼
+            .setting-btn {
+                position: absolute;
+                bottom: 0px;
+                right: 0px;
+                background: none;
+                border: none;
+                cursor: pointer;
+
+                img {
+                    width: 25px;
+                    height: 25px;
+                }
+            }
+
+            // 사용자 정보(아이디, 이메일)
+            .setting-user-info {
+                margin-top: 15px;
+                text-align: center;
+
+                .setting-user-id {
+                    font-size: 25px;
+                    font-weight: bold;
+                    color: black;
+                }
+
+                .setting-user-email {
+                    font-size: 15px;
+                    font-weight: bold;
+                    color: #bcbcbc;
+                }
+            }
+
+        }
+        // 사용자 정보 (비밀번호입력창)
+            .password-section{
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 20px;
+
+                label{
+                    margin-bottom:5px; 
+                    font-weight:bold;
+                }
+                input{
+                    margin-bottom:10px ;
+                    border-radius:5px ;
+                    border:1px solid  #a0a0a0;
+                    height: 30px;
+                }
+            }
+            // {노란색 줄}
+            .bottom{
+                position: relative;
+                bottom: 10px;
+                font-weight: bold;
+                font-size: 25px;
+             border: solid yellow 1px   
+            }
+            // 사용자 정보(자기소개)
+                .intro-section{
+                    display: flex;
+                    flex-direction: column;
+                    margin-bottom:20px ;
+
+                    label{
+                        margin-bottom:5px; 
+                        font-weight:bold;
+                    }
+                    textarea{
+                        text-align: center;
+                        padding: 30px 10px;
+                        width: 100%;
+                        height: 80px;
+                    }
+                }
+                // 수정 취소 버튼
+                    .settingbutton-section{
+                     display: flex;   
+                     justify-content: center;
+                     gap:80px;
+
+                    .fix-button{
+                        padding: 10px 30px;
+                        border-radius: 10px;
+                        font-size: 16px;
+                        color: rgb(229, 229, 27);
+                        background-color: white;
+                        border-color: yellow;
+                     }
+                    .cancel-button{
+                        padding: 10px 30px;
+                        border-radius: 10px;
+                        font-size: 16px;
+                        color: rgb(188, 188, 188);
+                        background-color: white;
+                        border-color: rgb(175, 188, 175);
+                    }
+
+                    }
+
+
+    }
+}
+
+