hanghae-plus · soyoonJ · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true
+}
diff --git a/index.html b/index.html
@@ -1,13 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>항해플러스 SNS</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>항해플러스 SNS</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="icon" href="./public/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/__tests__/advanced.test.js b/src/__tests__/advanced.test.js
@@ -5,7 +5,7 @@ beforeAll(async () => {
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
   await import('../main.js');
-})
+});
 
 afterAll(() => {
   // 각 테스트 전에 root 엘리먼트 초기화
@@ -16,38 +16,37 @@ afterAll(() => {
 const goTo = (path) => {
   window.history.pushState({}, '', path);
   window.dispatchEvent(new Event('popstate'));
-}
-
+};
 
 beforeEach(() => {
   goTo('/');
   document.querySelector('#logout')?.click();
-})
+});
 
 describe('심화과제 테스트', () => {
   let user;
 
   beforeEach(() => {
     user = userEvent.setup();
-  })
+  });
 
   describe('1. 라우트 가드 구현', () => {
     it('비로그인 사용자가 프로필 페이지에 접근시 로그인 페이지로 리다이렉트 한다.', async () => {
-      goTo('/profile')
+      goTo('/profile');
 
       expect(document.body.innerHTML).toContain('로그인');
     });
 
     it('로그인된 사용자가 로그인 페이지에 접근시 메인 페이지로 리다이렉트 한다.', async () => {
-      goTo('/login')
+      goTo('/login');
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser')
+      await user.type(document.getElementById('username'), 'testuser');
 
       loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      goTo('/login')
+      goTo('/login');
       expect(document.querySelector('nav .text-blue-600.font-bold').innerHTML).toContain('홈');
     });
   });
@@ -58,9 +57,9 @@ describe('심화과제 테스트', () => {
 
       const firstTarget = document.querySelector('nav a[href="/login"]');
 
-      firstTarget.addEventListener('click', e => e.stopPropagation());
+      firstTarget.addEventListener('click', (e) => e.stopPropagation());
 
-      await user.click(firstTarget)
+      await user.click(firstTarget);
 
       // 클릭 이벤트 생성 및 트리거
       expect(document.body.querySelector('header')).not.toBeFalsy();
@@ -73,14 +72,18 @@ describe('심화과제 테스트', () => {
 
       const $username = document.querySelector('#username');
 
-      $username.addEventListener('input', () => {
-        throw new Error('의도적인 오류입니다.')
-      }, { once: true });
+      $username.addEventListener(
+        'input',
+        () => {
+          throw new Error('의도적인 오류입니다.');
+        },
+        { once: true },
+      );
 
       await user.type($username, '1');
 
       expect(document.body.innerHTML).toContain('오류 발생!');
       expect(document.body.innerHTML).toContain('의도적인 오류입니다.');
-    })
+    });
   });
 });
diff --git a/src/__tests__/basic.test.js b/src/__tests__/basic.test.js
@@ -5,7 +5,7 @@ beforeAll(async () => {
   window.alert = vi.fn();
   document.body.innerHTML = '<div id="root"></div>';
   await import('../main.js');
-})
+});
 
 afterAll(() => {
   // 각 테스트 전에 root 엘리먼트 초기화
@@ -16,14 +16,14 @@ afterAll(() => {
 const goTo = (path) => {
   window.history.pushState({}, '', path);
   window.dispatchEvent(new Event('popstate'));
-}
+};
 
 describe('기본과제 테스트', () => {
   let user;
 
   beforeEach(() => {
     user = userEvent.setup();
-  })
+  });
 
   describe('1. 라우팅 구현', () => {
     it('"/" 경로로 접근하면 홈 페이지가 렌더링된다', () => {
@@ -38,32 +38,30 @@ describe('기본과제 테스트', () => {
       expect(document.body.innerHTML).toContain('로그인');
     });
 
-
-
     it('로그인이 되지 않은 상태에서 "/profile" 경로로 접근하면, 로그인 페이지로 리다이렉션 된다.', () => {
       // 로그인 상태 시뮬레이션
-      goTo('/profile')
+      goTo('/profile');
 
       expect(document.body.innerHTML).toContain('로그인');
     });
 
     it('존재하지 않는 경로로 접근하면 404 페이지가 렌더링된다', () => {
-      goTo('/nonexistent')
+      goTo('/nonexistent');
       expect(document.body.innerHTML).toContain('404');
     });
   });
 
   describe('2. 사용자 관리 기능', () => {
     it('로그인 폼에서 사용자 이름을 입력하고 제출하면 로그인 되고, 로그아웃 버튼 클릭시 로그아웃 된다.', async () => {
-      goTo('/login')
+      goTo('/login');
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser')
+      await user.type(document.getElementById('username'), 'testuser');
 
       loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      expect(localStorage.getItem('user')).toEqual(`{"name":"testuser","email":"","bio":""}`);
+      expect(localStorage.getItem('user')).toEqual(`{"username":"testuser","email":"","bio":""}`);
 
       const logoutButton = document.getElementById('logout');
       logoutButton.click();
@@ -74,20 +72,20 @@ describe('기본과제 테스트', () => {
 
   describe('3. 프로필 페이지 구현', () => {
     beforeEach(async () => {
-      goTo('/login')
+      goTo('/login');
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser')
+      await user.type(document.getElementById('username'), 'testuser');
 
       loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      goTo('/profile')
+      goTo('/profile');
     });
 
     afterEach(() => {
       document.querySelector('#logout').click();
-    })
+    });
 
     it('로그인한 사용자의 이름과 소개가 표시된다', () => {
       expect(document.getElementById('username').value).toBe('testuser');
@@ -102,18 +100,17 @@ describe('기본과제 테스트', () => {
       bioInput.value = 'Updated bio';
       profileForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-      expect(localStorage.getItem('user')).toEqual(`{"name":"testuser","email":"","bio":"Updated bio","username":"testuser"}`);
+      expect(localStorage.getItem('user')).toEqual(`{"username":"testuser","email":"","bio":"Updated bio"}`);
     });
   });
 
   describe('4. 컴포넌트 기반 구조 설계', () => {
-
     beforeEach(async () => {
-      goTo('/login')
+      goTo('/login');
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser')
+      await user.type(document.getElementById('username'), 'testuser');
 
       loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
@@ -122,25 +119,25 @@ describe('기본과제 테스트', () => {
     });
 
     it('Header, Footer 컴포넌트가 메인 페이지와 프로필 페이지에 존재하고, 로그인페이지와 에러페이지에는 존재하지 않는다.', async () => {
-      goTo('/')
+      goTo('/');
       expect(document.querySelector('header')).not.toBeFalsy();
       expect(document.querySelector('footer')).not.toBeFalsy();
       expect(document.querySelector('nav')).not.toBeFalsy();
 
-      goTo('/profile')
+      goTo('/profile');
       expect(document.querySelector('header')).not.toBeFalsy();
       expect(document.querySelector('footer')).not.toBeFalsy();
       expect(document.querySelector('nav')).not.toBeFalsy();
 
-      goTo('/404')
+      goTo('/404');
       expect(document.querySelector('header')).toBeFalsy();
       expect(document.querySelector('footer')).toBeFalsy();
       expect(document.querySelector('nav')).toBeFalsy();
 
-      goTo('/')
-      await user.click(document.querySelector('#logout'))
+      goTo('/');
+      await user.click(document.querySelector('#logout'));
 
-      goTo('/login')
+      goTo('/login');
       expect(document.querySelector('header')).toBeFalsy();
       expect(document.querySelector('footer')).toBeFalsy();
       expect(document.querySelector('nav')).toBeFalsy();
@@ -153,15 +150,14 @@ describe('기본과제 테스트', () => {
       expect(document.body.innerHTML).toContain('로그인');
 
       // 로그인
-      goTo('/login')
+      goTo('/login');
 
       const loginForm = document.getElementById('login-form');
 
-      await user.type(document.getElementById('username'), 'testuser')
+      await user.type(document.getElementById('username'), 'testuser');
 
       loginForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
 
-
       // 로그인 상태
       expect(document.body.innerHTML).toContain('로그아웃');
     });

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,7 @@
+const Footer = () => {
+  return /* HTML */ `<footer class="bg-gray-200 p-4 text-center">
+    <p>&copy; 2024 항해플러스. All rights reserved.</p>
+  </footer>`;
+};
+
+export default Footer();
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,38 @@
+import { store } from '../store';
+
+const Header = (currentPath) => {
+  const isLoggedIn = store.getState('isLoggedIn');
+
+  const menus = [
+    { name: '홈', path: '/', active: true },
+    { name: '프로필', path: '/profile', active: isLoggedIn },
+    { name: '로그인', path: '/login', active: !isLoggedIn },
+  ];
+
+  const render = () => {
+    return /* HTML */ `<header class="bg-blue-600 text-white p-4 sticky top-0">
+        <h1 class="text-2xl font-bold">항해플러스</h1>
+      </header>
+
+      <nav class="bg-white shadow-md p-2 sticky top-14">
+        <ul class="flex justify-around">
+          ${menus
+            .map((menu) => {
+              if (!menu.active) return '';
+              return /* HTML */ `<li>
+                <a href=${menu.path} class="${currentPath === menu.path ? 'text-blue-600 font-bold' : 'text-gray-600'}"
+                  >${menu.name}</a
+                >
+              </li>`;
+            })
+            .join('')}
+          ${isLoggedIn ? '<li><button id="logout" class="text-gray-600">로그아웃</button></li>' : ''}
+        </ul>
+      </nav>`;
+  };
+
+  let headerHTML = render();
+  return headerHTML;
+};
+
+export default Header;