From 318e269a825d12eddc6b3f7a75673bccee780e75 Mon Sep 17 00:00:00 2001
From: shane <psh40963@naver.com>
Date: Sat, 1 Mar 2025 07:59:56 +0900
Subject: [PATCH 1/4] Revert "design: minor adjustment"

This reverts commit 45fba7c58c4adb148892c740f7aafd88b4455283.
---
 src/main/resources/templates/dashboard.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index 321f3ebe..f23f4947 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -1,4 +1,4 @@
-<div class="dashboard-intro" th:if="${member == null}" v-cloak>
+<div class="dashboard-intro" th:if="${member == null}">
   <section class="py-5">
     <div class="row justify-content-center">
       <div class="col-12 col-md-10 col-lg-8">
@@ -46,7 +46,7 @@ <h1 class="card-title mb-3">주요 기능</h1>
   </section>
 </div>
 
-<div id="app" class="mt-4 dashboard m-3" v-if="memberId" v-cloak>
+<div id="app" class="mt-4 dashboard m-3" v-if="memberId">
   <div class="mb-4 my-section">
     <div class="bg-white rounded shadow-sm border">
       <div class="bg-secondary text-center py-2 rounded-top fw-bold text-uppercase text-white cursor-pointer"
@@ -71,7 +71,7 @@ <h5 class="mb-0 me-2"><i class="bi bi-person-badge me-2"></i>근무</h5>
           <h5 class="mb-1"><i class="bi bi-calendar-event me-2"></i>오늘 일정</h5>
           <ul class="list-unstyled">
             <li v-for="schedule in myInfo.schedules" :key="schedule.id" class="py-1 border-bottom last:border-0">
-              <span>{{ schedule.content }}</span>
+              <span class="fw-bold">{{ schedule.content }}</span>
               <span class="text-secondary ms-2">{{ printScheduleTime(schedule.startDateTime) }}</span>
             </li>
             <li v-if="myInfo.schedules.length === 0" class="text-muted">오늘의 일정이 없습니다.</li>
@@ -201,7 +201,7 @@ <h5 class="mb-1"><i class="bi bi-calendar-event me-2"></i>오늘 일정</h5>
                 <ul class="list-unstyled">
                   <li v-for="schedule in friend.schedules" :key="schedule.id"
                       class="text-sm py-1 border-bottom last:border-0">
-                    <span>{{ schedule.content }}</span>
+                    <span class="fw-semibold">{{ schedule.content }}</span>
                     <span class="text-secondary ms-2">{{ printScheduleTime(schedule.startDateTime) }}</span>
                   </li>
                 </ul>

From e48cb7a886a8f4d2877b730b2033e5e5eabb9d68 Mon Sep 17 00:00:00 2001
From: shane <psh40963@naver.com>
Date: Sat, 1 Mar 2025 08:00:00 +0900
Subject: [PATCH 2/4] Revert "fix: dock for guests"

This reverts commit 8fee05fb914a4a63ddf19cea7cf83cd7c28aa8ee.
---
 src/main/resources/templates/layout/footer.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/main/resources/templates/layout/footer.html b/src/main/resources/templates/layout/footer.html
index f3e14d9f..2d702644 100644
--- a/src/main/resources/templates/layout/footer.html
+++ b/src/main/resources/templates/layout/footer.html
@@ -15,12 +15,7 @@
       <br/>
       <span>홈</span>
     </a>
-    <a th:if="${loginMember != null}" th:href="@{/duty/{name}(name=${loginMember.id})}" class="link col-3">
-      <i class="bi bi-calendar2-week"></i>
-      <br/>
-      <span>내 시간표</span>
-    </a>
-    <a th:if="${loginMember == null}" th:href="@{/auth/login}" class="link col-3">
+    <a th:href="@{/duty/{name}(name=${loginMember?.id})}" class="link col-3">
       <i class="bi bi-calendar2-week"></i>
       <br/>
       <span>내 시간표</span>

From ba0c53a9d73c52479be70ebfd2824f4792a2d9dc Mon Sep 17 00:00:00 2001
From: shane <psh40963@naver.com>
Date: Sat, 1 Mar 2025 08:00:05 +0900
Subject: [PATCH 3/4] Revert "design: consider iPhone bottom bar"

This reverts commit e5aaf28959565de9a19bd533dc6e615cd8ebd40f.
---
 .../dutypark/duty/controller/DutyViewController.kt         | 7 +++++++
 src/main/resources/static/css/base.css                     | 4 ++--
 src/main/resources/static/css/mquery.css                   | 2 +-
 src/main/resources/templates/layout/footer.html            | 6 +++---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt b/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
index e5ee23a1..c6dce4ce 100644
--- a/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
+++ b/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
@@ -39,4 +39,11 @@ class DutyViewController(
         return layout(model, "duty/duty")
     }
 
+    @GetMapping("/duty")
+    fun retrieveMyDuty(
+        @Login loginMember: LoginMember,
+    ): String {
+        return "redirect:/duty/${loginMember.id}"
+    }
+
 }
diff --git a/src/main/resources/static/css/base.css b/src/main/resources/static/css/base.css
index 8b6c9879..f5129c42 100644
--- a/src/main/resources/static/css/base.css
+++ b/src/main/resources/static/css/base.css
@@ -559,13 +559,13 @@ a.homeButton:hover {
 
 #body {
     max-width: 64rem;
-    min-height: 80vh;
+    min-height: 82vh;
     padding: 10px;
     margin: 0 auto;
 }
 
 #footer {
-    height: 12vh;
+    height: 10vh;
     padding-top: 1rem;
     padding-right: 1rem;
     text-align: right;
diff --git a/src/main/resources/static/css/mquery.css b/src/main/resources/static/css/mquery.css
index d8a328e3..15e0a07e 100644
--- a/src/main/resources/static/css/mquery.css
+++ b/src/main/resources/static/css/mquery.css
@@ -5,7 +5,7 @@
     }
 
     #body {
-        height: 82vh;
+        height: 84vh;
         overflow-y: scroll;
     }
 
diff --git a/src/main/resources/templates/layout/footer.html b/src/main/resources/templates/layout/footer.html
index 2d702644..7b6b7166 100644
--- a/src/main/resources/templates/layout/footer.html
+++ b/src/main/resources/templates/layout/footer.html
@@ -1,4 +1,4 @@
-<div id="footer">
+<div id="footer" style="z-index:1;">
   <div class="pc-footer">
     <a class="fs-2" href="https://github.com/ShanePark/dutypark" target="_blank" aria-label="Github">
       <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
@@ -9,13 +9,13 @@
       <span>Shane Park © 2025</span>
     </a>
   </div>
-  <div class="mobile-footer row text-align-center fs-1 pb-5">
+  <div class="mobile-footer row text-align-center fs-1 pt-4">
     <a href="/" class="link col-3">
       <i class="bi bi-house-door"></i>
       <br/>
       <span>홈</span>
     </a>
-    <a th:href="@{/duty/{name}(name=${loginMember?.id})}" class="link col-3">
+    <a href="/duty" class="link col-3">
       <i class="bi bi-calendar2-week"></i>
       <br/>
       <span>내 시간표</span>

From 577cb6c6cd8b24ad249aee5f12fdb020a47dfb16 Mon Sep 17 00:00:00 2001
From: shane <psh40963@naver.com>
Date: Sat, 1 Mar 2025 08:00:14 +0900
Subject: [PATCH 4/4] Revert "Merge pull request #226 from ShanePark/#dev"

This reverts commit 70017a551869e460e32b50ede26b3f96b9441db4, reversing
changes made to a1cc893cf5ad80eb57fb668a1d4d43e98298f162.
---
 .../duty/controller/DutyViewController.kt     |   7 -
 src/main/resources/static/css/base.css        |  49 ++++-
 src/main/resources/static/css/mquery.css      |  41 +---
 .../resources/templates/layout/footer.html    |  44 +---
 .../resources/templates/member/login.html     |  43 ++--
 .../resources/templates/member/member.html    | 205 +++++++++---------
 6 files changed, 187 insertions(+), 202 deletions(-)

diff --git a/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt b/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
index c6dce4ce..e5ee23a1 100644
--- a/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
+++ b/src/main/kotlin/com/tistory/shanepark/dutypark/duty/controller/DutyViewController.kt
@@ -39,11 +39,4 @@ class DutyViewController(
         return layout(model, "duty/duty")
     }
 
-    @GetMapping("/duty")
-    fun retrieveMyDuty(
-        @Login loginMember: LoginMember,
-    ): String {
-        return "redirect:/duty/${loginMember.id}"
-    }
-
 }
diff --git a/src/main/resources/static/css/base.css b/src/main/resources/static/css/base.css
index f5129c42..ecb87932 100644
--- a/src/main/resources/static/css/base.css
+++ b/src/main/resources/static/css/base.css
@@ -267,7 +267,16 @@ a.homeButton:hover {
 
 .login-box {
     max-width: 50%;
+    background: #fff;
+    border-radius: 5px;
+    padding: 30px;
+    box-sizing: border-box;
     margin: 100px auto 0;
+    font-size: 1.5em;
+}
+
+.login-box .form-group {
+    margin-bottom: 1em;
 }
 
 .login-box .sso-login:hover {
@@ -275,6 +284,32 @@ a.homeButton:hover {
     filter: brightness(95%);
 }
 
+.login-box .sso-login img {
+    width: 100%;
+    margin-top: 10px;
+}
+
+.form-buttons {
+    text-align: center;
+}
+
+.form-buttons div {
+    padding: 0 10px;
+}
+
+.form-buttons button {
+    width: 100%;
+    margin-top: 10px;
+    margin-left: 0;
+    margin-right: 0;
+    background-color: #eaeaea;
+    border: 0;
+}
+
+.form-buttons button:hover {
+    background-color: #ccc;
+}
+
 .day-grid {
     padding-left: 0;
     width: 100%;
@@ -559,13 +594,13 @@ a.homeButton:hover {
 
 #body {
     max-width: 64rem;
-    min-height: 82vh;
+    min-height: 86vh;
     padding: 10px;
     margin: 0 auto;
 }
 
 #footer {
-    height: 10vh;
+    min-height: 6vh;
     padding-top: 1rem;
     padding-right: 1rem;
     text-align: right;
@@ -585,6 +620,12 @@ a.homeButton:hover {
     border: 2px solid red;
 }
 
+.sso-logins .sso-service {
+    justify-content: space-between;
+    display: flex;
+    padding: 10px;
+}
+
 .sso-logins .sso-icon {
     width: 50px;
     height: 50px;
@@ -791,7 +832,3 @@ input[readonly], textarea[readonly] {
 .friend-section .handle {
     cursor: grab;
 }
-
-.mobile-footer {
-    display: none;
-}
diff --git a/src/main/resources/static/css/mquery.css b/src/main/resources/static/css/mquery.css
index 15e0a07e..cbc991cc 100644
--- a/src/main/resources/static/css/mquery.css
+++ b/src/main/resources/static/css/mquery.css
@@ -1,14 +1,5 @@
 /* mobile */
 @media (max-width: 991px) {
-    .navbar {
-        height: 6vh;
-    }
-
-    #body {
-        height: 84vh;
-        overflow-y: scroll;
-    }
-
     .calendar {
         margin: 0 10px;
     }
@@ -61,20 +52,16 @@
         max-width: 90%;
     }
 
-    .login-box label {
-        font-size: 1.5em;
-    }
-
     .login-box .form-group {
         font-size: 1.5em;
     }
 
     .login-box input {
-        font-size: 1.5em;
+        font-size: 1em;
     }
 
     .login-box button {
-        font-size: 2em;
+        font-size: 1.5em;
     }
 
     .login-box #remember {
@@ -84,6 +71,10 @@
         margin-top: 1rem;
     }
 
+    .navbar {
+        height: 8vh;
+    }
+
     .navbar-header {
         margin-top: 20px;
         text-align: center;
@@ -193,24 +184,4 @@
         font-size: 2em;
     }
 
-    .pc-footer {
-        display: none;
-    }
-
-    .mobile-footer {
-        display: flex;
-    }
-
-    .mobile-footer i {
-        font-size: 1.5em;
-    }
-
-    .member-vue {
-        font-size: 2em;
-    }
-
-    .member-vue .btn {
-        font-size: 1em;
-    }
-
 }
diff --git a/src/main/resources/templates/layout/footer.html b/src/main/resources/templates/layout/footer.html
index 7b6b7166..adf950bd 100644
--- a/src/main/resources/templates/layout/footer.html
+++ b/src/main/resources/templates/layout/footer.html
@@ -1,34 +1,14 @@
-<div id="footer" style="z-index:1;">
-  <div class="pc-footer">
-    <a class="fs-2" href="https://github.com/ShanePark/dutypark" target="_blank" aria-label="Github">
-      <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-              fill="white"></path>
-      </svg>
-      <span>Shane Park © 2025</span>
-    </a>
-  </div>
-  <div class="mobile-footer row text-align-center fs-1 pt-4">
-    <a href="/" class="link col-3">
-      <i class="bi bi-house-door"></i>
-      <br/>
-      <span>홈</span>
-    </a>
-    <a href="/duty" class="link col-3">
-      <i class="bi bi-calendar2-week"></i>
-      <br/>
-      <span>내 시간표</span>
-    </a>
-    <a href="/member/d-day" class="link col-3">
-      <i class="bi bi-calendar-check"></i>
-      <br/>
-      <span>디데이</span>
-    </a>
-    <a href="/member" class="link col-3">
-      <i class="bi bi-person"></i>
-      <br/>
-      <span>내정보</span>
-    </a>
+<div id="footer">
+  <div class="inner-footer">
+    <div>
+      <a href="https://github.com/ShanePark/dutypark" target="_blank" aria-label="Github">
+        <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
+          <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                fill="white"></path>
+        </svg>
+        <span>Shane Park © 2025</span>
+      </a>
+    </div>
   </div>
 </div>
diff --git a/src/main/resources/templates/member/login.html b/src/main/resources/templates/member/login.html
index 6f8e12eb..3e0d23d0 100644
--- a/src/main/resources/templates/member/login.html
+++ b/src/main/resources/templates/member/login.html
@@ -2,28 +2,30 @@
         integrity="sha384-l+xbElFSnPZ2rOaPrU//2FF5B4LB8FiX5q4fXYTlfcG4PGpMkE1vcL7kNXI6Cci0"
         crossorigin="anonymous"></script>
 
-<div class="login-box shadow rounded p-5">
+<div class="login-box shadow">
   <form @submit.prevent="login">
-    <h1 class="mb-5 pb-3 border-bottom">로그인</h1>
-    <div class="form-group mb-2">
-      <label for="emailInput" class="form-label">이메일</label>
-      <input id="emailInput" type="email" class="form-control" placeholder="이메일 주소" v-model="email">
-      <input type="checkbox" class="form-check-input" id="remember" v-model="remember">
-      <label class="form-check-label" for="remember">아이디 저장</label>
+    <h1 class="mb-5">로그인</h1>
+    <div class="form-group">
+      <label for="emailInput">이메일 주소</label>
+      <input id="emailInput" type="email" class="form-control" placeholder="email" v-model="email">
+      <small class="form-text text-muted"><label for="remember">아이디 저장</label>
+        <input type="checkbox" id="remember" name="remember" v-model="remember">
+      </small>
     </div>
-    <div class="form-group mb-2">
-      <label for="passwordInput" class="form-label">비밀번호</label>
-      <input type="password" class="form-control" id="passwordInput" placeholder="비밀번호"
+    <div class="form-group">
+      <label for="passwordInput">비밀번호</label>
+      <input type="password" class="form-control" id="passwordInput" placeholder="Password"
              maxlength="16" v-model="password">
     </div>
-    <div class="form-buttons mt-3">
-      <button type="submit" class="btn btn-primary w-100 text-align-center" @click="login">로그인
-      </button>
-      <div class="text-center my-3">
-        <span class="text-muted">또는</span>
+    <div class="form-buttons row">
+      <div class="col-6">
+        <button type="button" class="btn" @click="signUp">회원가입</button>
       </div>
-      <div class="col-12 mt-2 kakao-login cursor-pointer" @click="kakaoLogin">
-        <img class="w-100" src="/lib/kakao/kakao_login_large_wide.png" alt="kakao-login">
+      <div class="col-6">
+        <button type="submit" class="btn" @click="login">로그인</button>
+      </div>
+      <div class="col-12 sso-login kakao-login" @click="kakaoLogin">
+        <img src="/lib/kakao/kakao_login_large_wide.png" alt="kakao-login">
       </div>
     </div>
   </form>
@@ -91,6 +93,13 @@ <h1 class="mb-5 pb-3 border-bottom">로그인</h1>
                         });
                     });
                 },
+                signUp() {
+                    Swal.fire({
+                        title: '회원가입',
+                        text: '회원가입 기능은 제공하지 않습니다. 카카오 로그인을 이용해주세요.',
+                        icon: 'info',
+                    });
+                },
                 kakaoLogin() {
                     Kakao.Auth.authorize({
                         redirectUri: window.location.origin + '/api/auth/Oauth2ClientCallback/kakao',
diff --git a/src/main/resources/templates/member/member.html b/src/main/resources/templates/member/member.html
index 4054cad4..1b594849 100644
--- a/src/main/resources/templates/member/member.html
+++ b/src/main/resources/templates/member/member.html
@@ -2,113 +2,108 @@
         integrity="sha384-l+xbElFSnPZ2rOaPrU//2FF5B4LB8FiX5q4fXYTlfcG4PGpMkE1vcL7kNXI6Cci0"
         crossorigin="anonymous"></script>
 
-<div class="mt-4 member-vue" v-cloak>
-  <div class="card shadow-sm">
-    <div class="card-header text-center bg-primary text-white">
-      <h1 class="mb-0">회원 정보</h1>
-    </div>
-    <div class="card-body">
-      <table class="table table-bordered table-responsive">
-        <tbody>
-        <tr>
-          <th class="bg-light"><label for="name" class="col-form-label">이름</label></th>
-          <td>
-            <input type="text" readonly class="form-control-plaintext" id="name" th:value="*{member.name}">
-          </td>
-        </tr>
-        <tr>
-          <th class="bg-light"><label for="department" class="col-form-label">소속</label></th>
-          <td>
-            <input type="text" readonly class="form-control-plaintext" id="department"
-                   th:value="${member.department} ?: '-'">
-          </td>
-        </tr>
-        <tr>
-          <th class="bg-light"><label for="email" class="col-form-label">이메일</label></th>
-          <td>
-            <input type="text" readonly class="form-control-plaintext" id="email" th:value="${member.email} ?: '-'">
-          </td>
-        </tr>
-        <tr>
-          <th class="bg-light">로그인</th>
-          <td>
-            <div class="table-responsive">
-              <table class="table table-bordered text-center">
-                <thead class="table-light">
-                <tr>
-                  <th>#</th>
-                  <th>접속</th>
-                  <th>IP</th>
-                  <th>기기</th>
-                  <th>브라우저</th>
-                  <th>관리</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="(token, index) in tokens">
-                  <td>{{ index+1 }}</td>
-                  <td>{{ token.lastUsed | fromNow }}</td>
-                  <td>{{ token.remoteAddr }}</td>
-                  <td>{{ token.userAgent ? token.userAgent.device : '' }}</td>
-                  <td>{{ token.userAgent ? token.userAgent.browser : '' }}</td>
-                  <td>
-                    <button v-if="!token.isCurrentLogin" class="btn btn-outline-danger btn-sm"
-                            @click="deleteToken(token.id)">
-                      로그아웃
-                    </button>
-                    <button v-else class="btn btn-outline-success btn-sm" disabled>현재 접속</button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </td>
-        </tr>
-        <tr class="sso-logins">
-          <th class="bg-light">계정 연동</th>
-          <td>
-            <div class="d-flex flex-column gap-2">
-              <div class="d-flex justify-content-between align-items-center">
-                <div>
-                  <img class="sso-icon me-2" src="/lib/kakao/kakao.png" alt="kakao-icon">
-                  Kakao
-                </div>
-                <button th:if="${member.kakaoId == null}" class="btn btn-outline-primary btn-sm" @click="ssoKakao">
-                  연동하기
+<div class="member-vue" v-cloak>
+  <table class="table table-bordered member-info">
+    <tr>
+      <th><label for="name" class="col-form-label">이름</label></th>
+      <td>
+        <input type="text" readonly class="form-control-plaintext" id="name" th:value="*{member.name}">
+      </td>
+    </tr>
+    <tr>
+      <th><label for="department" class="col-form-label">소속</label></th>
+      <td>
+        <input type="text" readonly class="form-control-plaintext" id="department"
+               th:value="${member.department} ?: '-'">
+      </td>
+    </tr>
+    <tr>
+      <th>
+        <label for="email" class="col-form-label">이메일</label>
+      </th>
+      <td>
+        <input type="text" readonly class="form-control-plaintext" id="email" th:value="${member.email} ?: '-'">
+      </td>
+    </tr>
+    <tr>
+      <th>로그인 정보</th>
+      <td>
+        <div class="refresh-tokens">
+          <table class="table table-bordered">
+            <colgroup>
+              <col style="width: 60px;">
+              <col style="width: 150px;">
+              <col style="width: 150px;">
+              <col style="width: 200px;">
+              <col style="width: 80px;">
+              <col style="width: 100px;">
+            </colgroup>
+            <tr>
+              <th></th>
+              <th>마지막 접속</th>
+              <th>Ip</th>
+              <th>접속 기기</th>
+              <th>브라우저</th>
+              <th class="text-align-center">관리</th>
+            </tr>
+            <tr v-for="(token, index) in tokens">
+              <td>{{ index+1 }}</td>
+              <td>{{ token.lastUsed | fromNow }}</td>
+              <td>{{ token.remoteAddr}}</td>
+              <td>{{ token.userAgent ? token.userAgent.device : '' }}</td>
+              <td>{{ token.userAgent ? token.userAgent.browser : '' }}</td>
+              <td class="text-align-center">
+                <button v-if="!token.isCurrentLogin" class="btn btn-outline-danger btn-sm"
+                        @click="deleteToken(token.id)">
+                  로그아웃
                 </button>
-                <div th:if="${member.kakaoId != null}">
-                  <span class="opacity-75">연동중</span>
-                  <button class="btn btn-outline-dark btn-sm" @click="removeSsoKakao">
-                    연동해제
-                  </button>
-                </div>
-              </div>
-              <div class="d-flex justify-content-between align-items-center d-none">
-                <div>
-                  <img class="sso-icon me-2" src="/lib/naver/naver.png" alt="naver-icon">
-                  Naver
-                </div>
-                <button class="btn btn-outline-primary btn-sm" @click="ssoNaver">
-                  연동하기
+                <button v-else class="btn btn-outline-success btn-sm" disabled>현재접속</button>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th>계정연동</th>
+      <td>
+        <div class="sso-logins">
+          <div class="sso-service sso-kakao">
+            <div>
+              <img class="sso-icon" src="/lib/kakao/kakao.png" alt="kakao-icon"> Kakao
+            </div>
+            <div>
+              <button th:if="${member.kakaoId == null}" class="btn btn-outline-primary" @click="ssoKakao">
+                연동하기
+              </button>
+              <div th:if="${member.kakaoId != null}">
+                <span class="opacity-75">연동중</span>
+                <button class="btn btn-outline-dark" @click="removeSsoKakao">
+                  연동해제
                 </button>
               </div>
             </div>
-          </td>
-        </tr>
-        <tr>
-          <th class="bg-light">관리</th>
-          <td class="d-flex flex-wrap gap-2">
-            <button th:if="${member.hasPassword}" class="btn btn-outline-warning btn-sm" @click="changePassword">
-              비밀번호 변경
+          </div>
+          <hr/>
+          <div class="sso-service sso-naver">
+            <div>
+              <img class="sso-icon" src="/lib/naver/naver.png" alt="kakao-icon"> Naver
+            </div>
+            <button class="btn btn-outline-primary" @click="ssoNaver">
+              연동하기
             </button>
-            <a class="btn btn-outline-danger btn-sm" href="/logout">로그아웃</a>
-            <button class="btn btn-outline-secondary btn-sm" @click="deleteAccount">회원 탈퇴</button>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th>관리</th>
+      <td>
+        <button th:if="${member.hasPassword}" class="btn btn-warning" @click="changePassword">비밀번호 변경</button>
+        <button class="btn btn-danger" @click="deleteAccount">회원 탈퇴</button>
+      </td>
+    </tr>
+  </table>
 </div>
 
 <script>
@@ -226,14 +221,14 @@ <h1 class="mb-0">회원 정보</h1>
                 }, deleteAccount() {
                     Swal.fire({
                         title: '회원 탈퇴',
-                        text: '회원 탈퇴는 관리자에게 문의해주세요.',
+                        text: '회원 탈퇴는 준비중입니다. 관리자에게 문의해주세요.',
                         icon: 'alert',
                         confirmButtonText: '확인',
                     })
                 }, ssoNaver() {
                     Swal.fire({
                         title: '네이버 연동',
-                        text: '네이버 연동은 아직 준비중입니다.',
+                        text: '네이버 연동은 준비중입니다.',
                         icon: 'info',
                         confirmButtonText: '확인',
                     })
@@ -241,7 +236,7 @@ <h1 class="mb-0">회원 정보</h1>
                     // if the member's login method is only kakao, then if the member removes the kakao login, the member will not be able to log in.
                     Swal.fire({
                         title: '카카오 연동 해제',
-                        text: '카카오 연동 해제를 위해서는 다른 로그인 방법을 추가해주세요.',
+                        text: '카카오 연동 해제는 준비중입니다.',
                         icon: 'info',
                         confirmButtonText: '확인',
                     })