e2e테스트심화제외통과

src/pages/ProfilePage.js

@@ -1,4 +1,4 @@
-import { Header } from "../components/Header.js";
+/* import { Header } from "../components/Header.js";
 import { Footer } from "../components/Footer.js";
 
 // 프로필 페이지 컴포넌트
@@ -73,3 +73,82 @@ export const ProfilePage = () => {
     </div>
   `;
 };
+ */
+
+import { Header } from "../components/Header.js";
+import { Footer } from "../components/Footer.js";
+
+// 프로필 페이지 컴포넌트
+export const ProfilePage = () => {
+  const user = JSON.parse(localStorage.getItem("user"));
+  const username = user ? user.username : ""; // username이 없을 경우 빈 문자열
+
+  const email = JSON.parse(localStorage.getItem("email"));
+  const userEmail = email ? email.userEmail : "";
+
+  const text = JSON.parse(localStorage.getItem("text"));
+  const userText = text ? text.userIntroTxt : "";
+
+  return `
+    <div id="root">
+      <div class="bg-gray-100 min-h-screen flex justify-center">
+        <div class="max-w-md w-full">
+          ${Header(window.location.pathname)}
+
+          <main class="p-4">
+            <div class="bg-white p-8 rounded-lg shadow-md">
+              <h2 class="text-2xl font-bold text-center text-blue-600 mb-8">
+                내 프로필
+              </h2>
+              <form onsubmit="handleProfileUpdate(event)">
+                <div class="mb-4">
+                  <label
+                    for="username"
+                    class="block text-gray-700 text-sm font-bold mb-2"
+                  >사용자 이름</label>
+                  <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value="${username}"
+                    class="w-full p-2 border rounded"
+                  />
+                </div>
+                <div class="mb-4">
+                  <label
+                    for="email"
+                    class="block text-gray-700 text-sm font-bold mb-2"
+                  >이메일</label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value="${userEmail}" 
+                    class="w-full p-2 border rounded"
+                  />
+                </div>
+                <div class="mb-6">
+                  <label
+                    for="bio"
+                    class="block text-gray-700 text-sm font-bold mb-2"
+                  >자기소개</label>
+                  <textarea
+                    id="bio"
+                    name="bio"
+                    rows="4"
+                    class="w-full p-2 border rounded intro-text"
+                  >${userText}</textarea>
+                </div>
+                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded font-bold profile-btn">
+                  프로필 업데이트
+                </button>
+              </form>
+            </div>
+          </main>
+
+          ${Footer()}
+        </div>
+      </div>
+    </div>
+  `;
+};

src/router/router.js

@@ -47,17 +47,18 @@ export class Router {
 
   // 이벤트 리스너 추가
   addEventListeners() {
-    // 로그아웃 버튼 이벤트
+    // 로그아웃 기능
     const logoutBtn = document.getElementById("logout-btn");
     if (logoutBtn) {
       logoutBtn.addEventListener("click", () => {
-        localStorage.removeItem("user"); // 로컬스토리지에서 사용자 정보 제거
+        localStorage.removeItem("user"); // 사용자 아이디 제거
+        localStorage.removeItem("email"); // 사용자 이메일 제거
+        localStorage.removeItem("text"); // 사용자 자기소개 제거
         this.navigate("/login"); // 로그인 페이지로 리다이렉트
       });
     }
 
-    // 로그인 폼 제출 이벤트
-    console.log(window.location.pathname);
+    // 로그인 기능
     const loginForm = document.querySelector(".login-btn");
     if (loginForm) {
       loginForm.addEventListener("click", (e) => {
@@ -71,5 +72,29 @@ export class Router {
         }
       });
     }
+
+    //프로필 업데이트
+    const profileUpdate = document.querySelector(".profile-btn");
+    if (profileUpdate) {
+      profileUpdate.addEventListener("click", (e) => {
+        e.preventDefault();
+        const username = document
+          .querySelector('input[type="text"]')
+          .value.trim();
+        const userEmail = document
+          .querySelector('input[type="email"]')
+          .value.trim();
+        const userIntroTxt = document.querySelector(".intro-text").value.trim();
+        if (userEmail && userIntroTxt) {
+          localStorage.setItem("user", JSON.stringify({ username }));
+          localStorage.setItem("email", JSON.stringify({ userEmail }));
+          localStorage.setItem("text", JSON.stringify({ userIntroTxt }));
+
+          alert("프로필이 업데이트되었습니다.");
+        } else {
+          alert("모든 필드를 입력해주세요.");
+        }
+      });
+    }
   }
 }