From fc173881866290d6e7d38eef439ba6c4e77ddee1 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: Fri, 11 Oct 2024 17:43:23 +0900
Subject: [PATCH] =?UTF-8?q?=EB=82=B4=EC=A0=95=EB=B3=B4=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=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

---
 src/app/myprofile/page.jsx                    |  18 +++
 .../canvas/estimatepop/FileDownOptionPop.jsx  |   2 +-
 src/components/publishpage/PublishPage.jsx    |   9 ++
 src/components/sub/myprofile/MyProfilePop.jsx | 117 ++++++++++++++++++
 src/styles/_reset.scss                        |   9 ++
 src/styles/_submodal.scss                     |  34 ++++-
 6 files changed, 187 insertions(+), 2 deletions(-)
 create mode 100644 src/app/myprofile/page.jsx
 create mode 100644 src/components/sub/myprofile/MyProfilePop.jsx

diff --git a/src/app/myprofile/page.jsx b/src/app/myprofile/page.jsx
new file mode 100644
index 0000000..a0ae90a
--- /dev/null
+++ b/src/app/myprofile/page.jsx
@@ -0,0 +1,18 @@
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+import MyProfilePop from "@/components/sub/myprofile/MyProfilePop";
+import '@/styles/contents.scss'
+
+export default function MyProfilePage(){
+    return(
+        <div className="wrap">
+            <Header/>
+            <div className="content">
+            </div>
+            <Footer/>
+            
+            {/* 내정보 조회 팝업 */}
+            <MyProfilePop/>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/canvas/estimatepop/FileDownOptionPop.jsx b/src/components/canvas/estimatepop/FileDownOptionPop.jsx
index bd3bc6a..3c085f0 100644
--- a/src/components/canvas/estimatepop/FileDownOptionPop.jsx
+++ b/src/components/canvas/estimatepop/FileDownOptionPop.jsx
@@ -10,7 +10,7 @@ export default function FileDownOptionPop(){
                     <div className="modal-body">
                         <div className="modal-body-inner">
                             <div className="explane">ダウンロードする文書のオプションを選択したら、 [文書のダウンロード]ボタンをクリックします。</div>
-                            <div className="common-table bt-able">
+                            <div className="common-table">
                                 <table>
                                     <colgroup>
                                         <col style={{width: '260px'}}/>
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index 537701d..fed13c8 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/src/components/publishpage/PublishPage.jsx
@@ -98,6 +98,15 @@ export default function PublishPage() {
                 </td>
                 <td className="t-center">2024-10-10</td>
               </tr>
+              <tr>
+                <td className="t-center"><strong>MyProFilePage</strong></td>			
+                <td><strong className="title">내정보 조회 팝업</strong></td>
+                <td><Link href="/myprofile" target="_blank">MyProFile</Link></td>
+                <td className="coding_stat_web">
+                  <span></span>
+                </td>
+                <td className="t-center">2024-10-11</td>
+              </tr>
               <tr>
                 <td className="t-center" rowSpan={3}><strong>LoginPage</strong></td>			
                 <td><strong className="title">로그인</strong></td>
diff --git a/src/components/sub/myprofile/MyProfilePop.jsx b/src/components/sub/myprofile/MyProfilePop.jsx
new file mode 100644
index 0000000..4f502a2
--- /dev/null
+++ b/src/components/sub/myprofile/MyProfilePop.jsx
@@ -0,0 +1,117 @@
+'use client'
+
+import { useState } from "react"
+
+export default function MyProfilePop(){
+    const [blink, setBlink] = useState(false);
+    return(
+        <div className="modal-popup">
+            <div className="modal-dialog ">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="title">My profile </h1>
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="modal-body-inner">
+                            <div className="common-table">
+                                <table>
+                                    <colgroup>
+                                        <col style={{width: '170px'}}/>
+                                        <col />
+                                    </colgroup>
+                                    <tbody>
+                                        <tr>
+                                            <th>ユーザーID</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='nakazawaESS' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>担当者名ふりがな</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='セキヤミツヒロ' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>担当者名</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='関谷充弘' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>パスワード</th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="password-input mr10">
+                                                        <input type={`${blink ? 'text':'password'}`} />
+                                                        <button className={`blink ${blink ? 'on':''}`} onClick={() => setBlink(!blink)}></button>
+                                                    </div>
+                                                    <span className="mr10">※半角10文字以内</span>
+                                                    <button className="btn-origin grey mr5">パスワード変更</button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>変更パスワードの入力 <span className="red">*</span></th>
+                                            <td>
+                                                <div className="form-flex-wrap">
+                                                    <div className="input-wrap mr10" style={{flex: 1}}>
+                                                        <input type="password" className="input-light" />
+                                                    </div>
+                                                    <button className="btn-origin grey mr5">変更</button>
+                                                    <button className="btn-origin white ">変更しない</button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>部署名</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='エコ事業部' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>電話番号</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>FAX番号</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='07-0000-0000' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th>メールアドレス</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='test.test@nakazawa-kenpan.co.jp' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div className="footer-btn-wrap">
+                            <button className="btn-origin navy ">確認</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index b575113..3ee3adb 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -308,6 +308,14 @@ button{
             background-color: #607F9A;
         }
     }
+    &.white{
+        border: 1px solid #94A0AD;
+        background-color: #fff;
+        color: #94A0AD;
+        &:hover{
+            background-color: #fff;
+        }
+    }
 }
 
 // select
@@ -437,6 +445,7 @@ button{
         margin-bottom: 10px;
     }
 }
+input[type=password],
 input[type=number],
 input[type=text]{
     &.input-origin{
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index 452c6cb..cd00e78 100644
--- a/src/styles/_submodal.scss
+++ b/src/styles/_submodal.scss
@@ -216,4 +216,36 @@
     }
 }
 
-// 문서 다운로드 옵션
+// 내정보 조회 팝업
+.password-input{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 30px;
+    border: 1px solid #EEE;
+    padding: 0 10px;
+    border-radius: 2px;
+    input{
+        width: 100%;
+        height: 100%;
+        font-size: 13px;
+        color: #45576F;
+        font-family: 'Noto Sans JP', sans-serif;
+        font-weight: 400;
+        &::placeholder{
+            color: #D1D7E0;
+        }
+    }
+    .blink{
+        flex: none;
+        width: 19px;
+        height: 100%;
+        background-image: url(../../public/static/images/main/password_hidden.svg);
+        background-size: 19px 13px;
+        background-repeat: no-repeat;
+        background-position: center;
+        &.on{
+            background-image: url(../../public/static/images/main/password_visible.svg);
+        }
+    }
+}
\ No newline at end of file