From 8ca61c05fdd06bbfc8fcd7921e37eb4ffeb137a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Tue, 29 Apr 2025 09:30:31 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/images/layout/modal_close.svg   |  3 ++
 .../images/layout/modal_header_icon.svg       |  4 ++
 src/app/main/page.tsx                         |  2 +-
 src/components/main/MemberInformationPop.tsx  | 41 ++++++++++++++++---
 src/styles/components/_index.scss             |  3 +-
 src/styles/components/_pop-contents.scss      | 16 ++++++++
 src/styles/layout/_layout.scss                |  1 +
 src/styles/layout/_pop-common.scss            | 38 +++++++++++++++--
 8 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 public/assets/images/layout/modal_close.svg
 create mode 100644 public/assets/images/layout/modal_header_icon.svg
 create mode 100644 src/styles/components/_pop-contents.scss

diff --git a/public/assets/images/layout/modal_close.svg b/public/assets/images/layout/modal_close.svg
new file mode 100644
index 0000000..e8a1829
--- /dev/null
+++ b/public/assets/images/layout/modal_close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.7072 5.29289C6.31668 4.90237 5.68351 4.90237 5.29299 5.29289C4.90246 5.68342 4.90246 6.31658 5.29299 6.7071L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.293 18.7071C17.6835 19.0976 18.3167 19.0976 18.7072 18.7071C19.0977 18.3166 19.0977 17.6834 18.7072 17.2929L13.4143 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5857L6.7072 5.29289Z" fill="#101010"/>
+</svg>
diff --git a/public/assets/images/layout/modal_header_icon.svg b/public/assets/images/layout/modal_header_icon.svg
new file mode 100644
index 0000000..604629e
--- /dev/null
+++ b/public/assets/images/layout/modal_header_icon.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2104 18.9998V16.9001C15.2104 15.9767 14.882 15.1046 14.3177 14.4725C13.7907 13.8824 13.1027 13.5487 12.3926 13.5092L12.2499 13.5053H4.74992C3.98984 13.5053 3.24431 13.8429 2.68218 14.4725C2.1178 15.1046 1.7894 15.9767 1.7894 16.9001V18.9998C1.7894 19.4445 1.43594 19.805 0.999923 19.805C0.563909 19.805 0.210449 19.4445 0.210449 18.9998V16.9001C0.210449 15.5957 0.672785 14.3313 1.51493 13.3881C2.35931 12.4424 3.52093 11.8947 4.74992 11.8947H12.2499L12.4797 11.901C13.623 11.9647 14.6933 12.5016 15.4849 13.3881C16.3271 14.3313 16.7894 15.5957 16.7894 16.9001V18.9998C16.7894 19.4445 16.4359 19.805 15.9999 19.805C15.5639 19.805 15.2104 19.4445 15.2104 18.9998Z" fill="white"/>
+<path d="M11.681 5.04991C11.6809 3.25793 10.2568 1.80526 8.49996 1.80526C6.74315 1.80531 5.31899 3.25796 5.31894 5.04991C5.31894 6.84189 6.74312 8.2945 8.49996 8.29455C10.2568 8.29455 11.681 6.84193 11.681 5.04991ZM13.2599 5.04991C13.2599 7.73139 11.1289 9.90508 8.49996 9.90508C5.87109 9.90503 3.73999 7.73136 3.73999 5.04991C3.74004 2.36849 5.87112 0.194787 8.49996 0.194736C11.1288 0.194736 13.2599 2.36846 13.2599 5.04991Z" fill="white"/>
+</svg>
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index 17fad20..1394195 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -13,7 +13,7 @@ export default function MainPage(){
       </div>
       <Footer/>
     </div>
-      <MemberInformationPop/>
+    <MemberInformationPop/>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/components/main/MemberInformationPop.tsx b/src/components/main/MemberInformationPop.tsx
index fbedf2e..7e7da41 100644
--- a/src/components/main/MemberInformationPop.tsx
+++ b/src/components/main/MemberInformationPop.tsx
@@ -4,13 +4,44 @@ export default function MemberInformationPop(){
       <div className="modal-dialog">
         <div className="modal-content">
           <div className="modal-header">
-            sdasd
+            <div className="modal-header-inner">
+              <div className="modal-name-wrap">
+                <div className="modal-img">
+                  <img src="/assets/images/layout/modal_header_icon.svg" alt="" />
+                </div>
+                <div className="modal-name">会員情報</div>
+              </div>
+              <button className="modal-close"></button>
+            </div>
           </div>
           <div className="modal-body">
-            asdasdasd
-          </div>
-          <div className="modal-footer">
-            sdsd
+            <div className="member-infor-form-wrap">
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">名前</div>
+                <input type="text" className="input-frame" defaultValue={'Hong gi'} disabled/>
+              </div>
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">ユーザーID </div>
+                <input type="text" className="input-frame" defaultValue={'KG123'} disabled/>
+              </div>
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">メールアドレス</div>
+                <input type="text" className="input-frame" defaultValue={'Kim@interplug.co.kr'} disabled/>
+              </div>
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">電話番号</div>
+                <input type="text" className="input-frame" defaultValue={'02123456'} disabled/>
+              </div>
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">販売店名</div>
+                <input type="text" className="input-frame" defaultValue={'Interplug'} disabled/>
+              </div>
+              <div className="member-infor-bx">
+                <div className="member-infor-tit">建設ID</div>
+                <input type="text" className="input-frame" defaultValue={'Interplug2'} disabled/>
+              </div>
+            </div>
+            <button className="btn-frame n-blue icon">パスワードリセット<i className="btn-arr"></i></button>
           </div>
         </div>
       </div>
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index e5fc943..b531da7 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,2 +1,3 @@
 @forward 'main';
-@forward 'login';
\ No newline at end of file
+@forward 'login';
+@forward 'pop-contents';
\ No newline at end of file
diff --git a/src/styles/components/_pop-contents.scss b/src/styles/components/_pop-contents.scss
new file mode 100644
index 0000000..2a108ae
--- /dev/null
+++ b/src/styles/components/_pop-contents.scss
@@ -0,0 +1,16 @@
+@use "../abstracts" as *;
+
+// 회원정보 팝업
+.member-infor-form-wrap{
+  margin-bottom: 20px;
+  .member-infor-bx{
+    margin-bottom: 18px;
+    &:last-child{
+      margin-bottom: 0;
+    }
+    .member-infor-tit{
+      @include defaultFont($font-s-13, $font-w-500, $font-c);
+      margin-bottom: 12px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/layout/_layout.scss b/src/styles/layout/_layout.scss
index b08d147..ae46baa 100644
--- a/src/styles/layout/_layout.scss
+++ b/src/styles/layout/_layout.scss
@@ -116,6 +116,7 @@ header{
     .profile-name{
       font-family: 'Pretendard', sans-serif;
       @include defaultFont($font-s-15, $font-w-600, $black-1010);
+      cursor: pointer;
     }
     .profile-company{
       font-family: 'Pretendard', sans-serif;
diff --git a/src/styles/layout/_pop-common.scss b/src/styles/layout/_pop-common.scss
index 8898dcd..5efcb2d 100644
--- a/src/styles/layout/_pop-common.scss
+++ b/src/styles/layout/_pop-common.scss
@@ -14,10 +14,10 @@
     position: relative;
     display: flex;
     align-items: center;
-    min-height: calc(100% - (24px * 2));
+    min-height: calc(100% - (14px * 2));
     max-width: 860px;
     z-index:111000;
-    margin: 24px auto;
+    margin: 14px auto;
     pointer-events: none;
     font-size: $font-s-14;
     .modal-content{
@@ -32,13 +32,13 @@
       .modal-header {
         display: block;
         position:relative;
-        padding:10px
+        padding:20px 20px 0;
       }
       .modal-body {
         position: relative;
         -ms-flex: 1 1 auto;
         flex: 1 1 auto;
-        padding: 10px;
+        padding: 32px 20px 20px;
       }
       .modal-footer {
         display: -ms-flexbox;
@@ -51,4 +51,34 @@
       }
     }
   }
+}
+
+// modal-header
+.modal-header-inner{
+  @include flex(0px);
+  align-items: center;
+  .modal-name-wrap{
+    @include flex(12px);
+    align-items: center;
+    .modal-img{
+      @include flex(0px);
+      align-items: center;
+      justify-content: center;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      background-color: $black-1010;
+    }
+    .modal-name{
+      @include defaultFont($font-s-15, $font-w-600, $black-1010)
+    }
+  }
+  .modal-close{
+    display: block;
+    margin-left: auto;
+    width: 24px;
+    height: 24px;
+    background: url(/assets/images/layout/modal_close.svg)no-repeat center;
+    background-size: cover;
+  }
 }
\ No newline at end of file