Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[9팀 배송이] Chapter 1-1. 프레임워크 없이 SPA 만들기 #56

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[9팀 배송이] Chapter 1-1. 프레임워크 없이 SPA 만들기 #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7381320
1차커밋
Bae-Song-Yi Dec 19, 2024
f935578
e2e테스트심화및프로필페이지동작제외테스트성공일부커밋
Bae-Song-Yi Dec 20, 2024
647c62a
e2e테스트심화제외통과
Bae-Song-Yi Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<!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>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>항해플러스</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<script type="module" src="./src/main.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions index_sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!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_sample.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions src/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const Footer = () => {
return `
<footer class="bg-gray-200 p-4 text-center">
<p>&copy; 2024 항해플러스. All rights reserved.</p>
</footer>
`;
};
24 changes: 24 additions & 0 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export const Header = (currentPath) => {
const isLoggedIn = localStorage.getItem("user");

return `
<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">
<li><a href="/" class="${currentPath === "/" ? "text-blue-600" : "text-gray-600"}">홈</a></li>
${
isLoggedIn
? `
<li><a href="/profile" class="${currentPath === "/profile" ? "text-blue-600" : "text-gray-600"}">프로필</a></li>
<li><a href="#" class="text-gray-600" id="logout-btn">로그아웃</a></li>
`
: `
<li><a href="/login" class="${currentPath === "/login" ? "text-blue-600" : "text-gray-600"}">로그인</a></li>
`
}
</ul>
</nav>
`;
};
315 changes: 74 additions & 241 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,241 +1,74 @@
const MainPage = () => `
<div class="bg-gray-100 min-h-screen flex justify-center">
<div class="max-w-md w-full">
<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">
<li><a href="/" class="text-blue-600">홈</a></li>
<li><a href="/profile" class="text-gray-600">프로필</a></li>
<li><a href="#" class="text-gray-600">로그아웃</a></li>
</ul>
</nav>

<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">
<div>
<p class="font-bold">홍길동</p>
<p class="text-sm text-gray-500">5분 전</p>
</div>
</div>
<p>오늘 날씨가 정말 좋네요. 다들 좋은 하루 보내세요!</p>
<div class="mt-2 flex justify-between text-gray-500">
<button>좋아요</button>
<button>댓글</button>
<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">
<div>
<p class="font-bold">김철수</p>
<p class="text-sm text-gray-500">15분 전</p>
</div>
</div>
<p>새로운 프로젝트를 시작했어요. 열심히 코딩 중입니다!</p>
<div class="mt-2 flex justify-between text-gray-500">
<button>좋아요</button>
<button>댓글</button>
<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">
<div>
<p class="font-bold">이영희</p>
<p class="text-sm text-gray-500">30분 전</p>
</div>
</div>
<p>오늘 점심 메뉴 추천 받습니다. 뭐가 좋을까요?</p>
<div class="mt-2 flex justify-between text-gray-500">
<button>좋아요</button>
<button>댓글</button>
<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">
<div>
<p class="font-bold">박민수</p>
<p class="text-sm text-gray-500">1시간 전</p>
</div>
</div>
<p>주말에 등산 가실 분 계신가요? 함께 가요!</p>
<div class="mt-2 flex justify-between text-gray-500">
<button>좋아요</button>
<button>댓글</button>
<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">
<div>
<p class="font-bold">정수연</p>
<p class="text-sm text-gray-500">2시간 전</p>
</div>
</div>
<p>새로 나온 영화 재미있대요. 같이 보러 갈 사람?</p>
<div class="mt-2 flex justify-between text-gray-500">
<button>좋아요</button>
<button>댓글</button>
<button>공유</button>
</div>
</div>
</div>
</main>

<footer class="bg-gray-200 p-4 text-center">
<p>&copy; 2024 항해플러스. All rights reserved.</p>
</footer>
</div>
</div>
`;

const ErrorPage = () => `
<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 text-center" style="max-width: 480px">
<h1 class="text-2xl font-bold text-blue-600 mb-4">항해플러스</h1>
<p class="text-4xl font-bold text-gray-800 mb-4">404</p>
<p class="text-xl text-gray-600 mb-8">페이지를 찾을 수 없습니다</p>
<p class="text-gray-600 mb-8">
요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.
</p>
<a href="/" class="bg-blue-600 text-white px-4 py-2 rounded font-bold">
홈으로 돌아가기
</a>
</div>
</main>
`;

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>
<form>
<div class="mb-4">
<input type="text" placeholder="이메일 또는 전화번호" class="w-full p-2 border rounded">
</div>
<div class="mb-6">
<input type="password" placeholder="비밀번호" class="w-full p-2 border rounded">
</div>
<button type="submit" class="w-full bg-blue-600 text-white p-2 rounded font-bold">로그인</button>
</form>
<div class="mt-4 text-center">
<a href="#" class="text-blue-600 text-sm">비밀번호를 잊으셨나요?</a>
</div>
<hr class="my-6">
<div class="text-center">
<button class="bg-green-500 text-white px-4 py-2 rounded font-bold">새 계정 만들기</button>
</div>
</div>
</main>
`;

const ProfilePage = () => `
<div id="root">
<div class="bg-gray-100 min-h-screen flex justify-center">
<div class="max-w-md w-full">
<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">
<li><a href="/" class="text-gray-600">홈</a></li>
<li><a href="/profile" class="text-blue-600">프로필</a></li>
<li><a href="#" class="text-gray-600">로그아웃</a></li>
</ul>
</nav>

<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>
<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="홍길동"
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="[email protected]"
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"
>
안녕하세요, 항해플러스에서 열심히 공부하고 있는 홍길동입니다.</textarea
>
</div>
<button
type="submit"
class="w-full bg-blue-600 text-white p-2 rounded font-bold"
>
프로필 업데이트
</button>
</form>
</div>
</main>

<footer class="bg-gray-200 p-4 text-center">
<p>&copy; 2024 항해플러스. All rights reserved.</p>
</footer>
</div>
</div>
</div>
`;

document.body.innerHTML = `
${MainPage()}
${ProfilePage()}
${LoginPage()}
${ErrorPage()}
`;
import { Router } from "./router/router";
import { MainPage } from "./pages/MainPage";
import { LoginPage } from "./pages/LoginPage";
import { ProfilePage } from "./pages/ProfilePage";
import { ErrorPage } from "./pages/ErrorPage";

window.addEventListener("DOMContentLoaded", () => {
const rootElement = document.getElementById("root");
if (!rootElement) {
console.error("Root element not found");
return;
}

const checkAuth = () => {
const user = localStorage.getItem("user");
if (!user) {
window.history.pushState({}, "", "/login");
render("/login");
return false;
}
return true;
};

const routes = {
"/": MainPage,
"/login": () => {
if (localStorage.getItem("user")) {
window.history.pushState({}, "", "/");
render("/");
return;
}
return LoginPage();
},
"/profile": () => {
if (checkAuth()) {
return ProfilePage();
}
},
404: ErrorPage,
};

const render = (path) => {
const component = routes[path] || routes[404];
rootElement.innerHTML = component();
};

const handleNavigation = (path) => {
window.history.pushState({}, "", path);
render(path);
};

// 페이지 초기 렌더링
render(window.location.pathname);

// popstate 이벤트 처리 (뒤로가기/앞으로가기)
window.addEventListener("popstate", () => {
render(window.location.pathname);
});

// 모든 링크 클릭 이벤트 처리
document.addEventListener("click", (e) => {
const anchor = e.target.closest("a");
if (anchor && anchor.getAttribute("href")) {
e.preventDefault();
const href = anchor.getAttribute("href");
if (href !== "#") {
handleNavigation(href);
}
}
});

const router = new Router(routes);
router.addEventListeners();
});
Loading
Loading