Merge pull request #2 from jonjour99/develop

기본기능 머지 후 수정

src/components/Footer.js

@@ -1,8 +1,5 @@
-
-const Footer = () => `
+export const Footer = () => `
       <footer class="bg-gray-200 p-4 text-center">
         <p>&copy; 2024 항해플러스. All rights reserved.</p>
       </footer>
 `;
-
-export default Footer;

src/components/Header.js

@@ -1,7 +1,5 @@
-const Header = () => `
+export const Header = () => `
   <header class="bg-blue-600 text-white p-4 sticky top-0">
     <h1 class="text-2xl font-bold">항해플러스</h1>
   </header>
 `;
-
-export default Header;

src/layouts/Layout.js

@@ -1,7 +1,6 @@
 import { Header } from "../components/Header.js";
 import { Navigation } from "../components/Navigation.js";
 import { Footer } from "../components/Footer.js";
-
 export const Layout = (content, currentPath = "/") => `
     <div class="bg-gray-100 min-h-screen flex justify-center">
     <div class="max-w-md w-full">

src/pages/HomePage.js

@@ -1,15 +1,12 @@
 import { Layout } from "../layouts/Layout.js";
-
 export const HomePage = () => {
   const content = `
       <main class="p-4">
         <div class="mb-4 bg-white rounded-lg shadow p-4">
           <textarea class="w-full p-2 border rounded" placeholder="무슨 생각을 하고 계신가요?"></textarea>
           <button class="mt-2 bg-blue-600 text-white px-4 py-2 rounded">게시</button>
         </div>
-
         <div class="space-y-4">
-
           <div class="bg-white rounded-lg shadow p-4">
             <div class="flex items-center mb-2">
               <img src="https://via.placeholder.com/40" alt="프로필" class="rounded-full mr-2">
@@ -25,7 +22,6 @@ export const HomePage = () => {
               <button>공유</button>
             </div>
           </div>
-
           <div class="bg-white rounded-lg shadow p-4">
             <div class="flex items-center mb-2">
               <img src="https://via.placeholder.com/40" alt="프로필" class="rounded-full mr-2">
@@ -41,7 +37,6 @@ export const HomePage = () => {
               <button>공유</button>
             </div>
           </div>
-
           <div class="bg-white rounded-lg shadow p-4">
             <div class="flex items-center mb-2">
               <img src="https://via.placeholder.com/40" alt="프로필" class="rounded-full mr-2">
@@ -57,7 +52,6 @@ export const HomePage = () => {
               <button>공유</button>
             </div>
           </div>
-
           <div class="bg-white rounded-lg shadow p-4">
             <div class="flex items-center mb-2">
               <img src="https://via.placeholder.com/40" alt="프로필" class="rounded-full mr-2">
@@ -73,7 +67,6 @@ export const HomePage = () => {
               <button>공유</button>
             </div>
           </div>
-
           <div class="bg-white rounded-lg shadow p-4">
             <div class="flex items-center mb-2">
               <img src="https://via.placeholder.com/40" alt="프로필" class="rounded-full mr-2">
@@ -92,6 +85,5 @@ export const HomePage = () => {
         </div>
       </main>
 `;
-
   return Layout(content, "/");
 };

src/pages/LoginPage.js

@@ -1,4 +1,4 @@
-const LoginPage = () => `
+export const LoginPage = () => `
   <main class="bg-gray-100 flex items-center justify-center min-h-screen">
     <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
       <h1 class="text-2xl font-bold text-center text-blue-600 mb-8">항해플러스</h1>
@@ -21,5 +21,3 @@ const LoginPage = () => `
     </div>
   </main>
 `;
-
-export default LoginPage;

src/pages/ProfilePage.js

@@ -1,9 +1,7 @@
 import { Layout } from "../layouts/Layout.js";
-
-const ProfilePage = () => {
+export const ProfilePage = () => {
   const user = JSON.parse(localStorage.getItem("user") || "{}");
   const { username = "", email = "", bio = "" } = user;
-
   const content = `
   
       <main class="p-4">
@@ -62,5 +60,3 @@ const ProfilePage = () => {
   `;
   return Layout(content, "/profile");
 };
-
-export default ProfilePage;

src/router.js

@@ -1,16 +1,13 @@
-// src/router.js
 import { HomePage } from "./pages/HomePage.js";
 import { ProfilePage } from "./pages/ProfilePage.js";
 import { LoginPage } from "./pages/LoginPage.js";
 import { NotFoundPage } from "./pages/NotFoundPage.js";
-
 export const routes = {
   "/": HomePage,
   "/profile": ProfilePage,
   "/login": LoginPage,
   "/404": NotFoundPage,
 };
-
 const handlers = {
   login: (event) => {
     event.preventDefault();
@@ -21,7 +18,6 @@ const handlers = {
     );
     navigate("/profile");
   },
-
   profile: (event) => {
     event.preventDefault();
     const user = JSON.parse(localStorage.getItem("user") || "{}");
@@ -35,37 +31,30 @@ const handlers = {
     router();
   },
 };
-
 const navigate = (path) => {
   window.history.pushState({}, "", path);
   router();
 };
-
 export const handleLogout = (e) => {
   e.preventDefault();
   localStorage.removeItem("user");
   navigate("/login");
 };
-
 export const router = () => {
   const path = window.location.pathname;
   const isAuthenticated = !!localStorage.getItem("user");
-
   if (path === "/profile" && !isAuthenticated) {
     navigate("/login");
     return;
   }
-
   const page = routes[path] || routes["/404"];
   document.getElementById("root").innerHTML = page();
-
   // 이벤트 핸들러 연결
   const forms = {
     "login-form": handlers.login,
     "profile-form": handlers.profile,
     logout: handleLogout,
   };
-
   Object.entries(forms).forEach(([id, handler]) => {
     const element = document.getElementById(id);
     if (element) {