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

[2팀 이도원] [Chapter 1-1] 프레임워크 없이 SPA 만들기 #24

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

[2팀 이도원] [Chapter 1-1] 프레임워크 없이 SPA 만들기 #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
164a18a
refactor: separate pages & components
2dowon Dec 15, 2024
236f14e
chore: separate pages & components by docs
2dowon Dec 16, 2024
511c023
feat: implement routing
2dowon Dec 16, 2024
fe6b434
feat: implement login & logout using local storage
2dowon Dec 16, 2024
338673f
feat: update profile data
2dowon Dec 16, 2024
fefc2e3
fix: fix by test
2dowon Dec 16, 2024
b9c80df
feat: use useUserStore
2dowon Dec 17, 2024
377d26c
refactor: use formData when submit form
2dowon Dec 17, 2024
2b4074f
chore: get userInfo in local store when inits userStore
2dowon Dec 17, 2024
ecd5748
refactor: separate submitEventHandler
2dowon Dec 17, 2024
f34967d
feat: implement router guard
2dowon Dec 17, 2024
78aea84
chore: fix typo of login input placeholder because of e2e test
2dowon Dec 17, 2024
ecf9f1f
refactor: separate useRouter
2dowon Dec 18, 2024
dd86e42
feat: implement hash router
2dowon Dec 18, 2024
e09c5d7
fix: fix useRouter logic for e2e test
2dowon Dec 19, 2024
91369f5
refactor: separate router for readable
2dowon Dec 19, 2024
d6315cb
chore: small updates
2dowon Dec 19, 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
8 changes: 8 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,8 @@
const Footer = () => {
return `
<footer class="bg-gray-200 p-4 text-center">
<p>&copy; 2024 항해플러스. All rights reserved.</p>
</footer>`;
};

export default Footer;
40 changes: 40 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,40 @@
import { useUserStore } from "../stores/useUserStore";

const Header = () => {
const pathname = window.location.pathname;
const isLogin = useUserStore.isLogin();

const navList = [{ text: "홈", href: "/", id: "home" }];
if (isLogin) {
navList.push({ text: "프로필", href: "/profile", id: "profile" });
navList.push({ text: "로그아웃", href: "#", id: "logout" });
} else {
navList.push({ text: "로그인", href: "/login", id: "login" });
}

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">
${navList
.map(({ text, href, id }) => {
const isSelected = pathname === href;

return `
<li>
<a id="${id}" href="${href}" class="${isSelected ? "font-bold text-blue-600" : "text-gray-600"}">
${text}
</a>
</li>
`;
})
.join("")}
</ul>
</nav>
`;
};

export default Header;
8 changes: 7 additions & 1 deletion src/main.hash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
import "./main.js";
import { useRouter } from "./utils/useRouter";

const { router } = useRouter("hash");

window.addEventListener("load", () => router());
window.addEventListener("popstate", () => router());
window.addEventListener("hashchange", () => router());
243 changes: 4 additions & 239 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,241 +1,6 @@
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>
import { useRouter } from "./utils/useRouter";

<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>
const { router } = useRouter("history");

<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()}
`;
window.addEventListener("load", () => router());
window.addEventListener("popstate", () => router());
27 changes: 27 additions & 0 deletions src/pages/LoginPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const LoginPage = () => {
return `
<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 id="login-form">
<div class="mb-4">
<input id="username" name="username" 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>
`;
};

export default LoginPage;
Loading
Loading