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 만들기 #65

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

[9팀 김동한] Chapter 1-1. 프레임워크 없이 SPA 만들기 #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b0cabdf
feat: 컴포넌트 분리, routes 정의, router 생성, Barrel Pattern 적용
LESANF Dec 15, 2024
3aabd7a
feat: 로그인 구현 및 컴포넌트 모듈화, 라우터 로그인 부분만 수정
LESANF Dec 16, 2024
7f2510b
feat: 로그인 로직 구현 및 저장소 추가, storageKey 상수화, e2e 기본 테스트 통과
LESANF Dec 17, 2024
7b6b727
fix: test:basic, e2e 기본 all pass, 전체적인 리팩토링 필요
Dec 18, 2024
0058f75
fix: 롤백처리후 테스트 통과
LESANF 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
5 changes: 5 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,5 @@
export const Footer = () => {
return `<footer class="bg-gray-200 p-4 text-center">
<p>&copy; 2024 항해플러스. All rights reserved.</p>
</footer>`;
};
25 changes: 25 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,25 @@
export const Header = () => {
const user = localStorage.getItem("user");
const isHashRouter = window.location.pathname.includes("hash.html");
const getHref = (path) => (isHashRouter ? `#${path}` : path);

return `<header class="bg-blue-600 text-white p-4 sticky top-0">
<h1 class="text-2xl font-bold">항해플러스</h1>
</header>
<nav role="navigation" class="bg-white shadow-md p-2 sticky top-14">
<ul class="flex justify-around">
<li><a href="${getHref("/")}" class="text-blue-600 ${window.location.pathname === "/" || window.location.hash === "#/" ? "font-bold" : ""}">홈</a></li>
${
user
? `<li><a href="${getHref("/profile")}" class="text-gray-600">프로필</a></li>`
: `<li><a href="${getHref("/login")}" class="text-gray-600">로그인</a></li>`
}
${
user
? `<li><a id="logout" href="#" class="text-gray-600">로그아웃</a></li>`
: ""
}
</ul>
</nav>
`;
};
2 changes: 2 additions & 0 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./header";
export * from "./footer";
1 change: 1 addition & 0 deletions src/constants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./storageKeys";
5 changes: 5 additions & 0 deletions src/constants/storageKeys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// 계정 정보 저장 키
export const ACCOUNT_STORAGE_KEY = "user";

// 로그인 여부 저장 키
export const LOGGED_IN_STATE_STORAGE_KEY = "loggedIn";
81 changes: 80 additions & 1 deletion src/main.hash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,80 @@
import "./main.js";
import { MainPage, LoginPage, ProfilePage, ErrorPage } from "./pages";

const routes = {
"/": MainPage,
"/login": LoginPage,
"/profile": ProfilePage,
"*": ErrorPage,
};

// 라우트 가드 설정
const guards = {
"/profile": () => {
const user = localStorage.getItem("user");
if (!user) {
navigate("/login", true);
return false;
}
return true;
},
"/login": () => {
const user = localStorage.getItem("user");
if (user) {
navigate("/", true);
return false;
}
return true;
},
};

const getPath = () => window.location.hash.slice(1) || "/";

const renderComponent = (path) => {
// 가드 체크를 먼저 수행
const guard = guards[path];
if (guard && !guard()) {
return;
}

const component = (routes[path] || routes["*"])();
const root = document.getElementById("root");
root.innerHTML = component.template;
component.init?.();
};

const handleRoute = () => {
const path = getPath();
renderComponent(path);
};

export const navigate = (path, replace = false) => {
const hashPath = path === "/" ? "" : path;
if (replace) {
window.location.replace(`#${hashPath}`);
} else {
window.location.hash = hashPath;
}
};

// 라우터 초기화
const initRouter = () => {
window.addEventListener("hashchange", handleRoute);

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () => {
if (!window.location.hash) {
navigate("/", true);
} else {
handleRoute();
}
});
} else {
if (!window.location.hash) {
navigate("/", true);
} else {
handleRoute();
}
}
};

initRouter();
244 changes: 5 additions & 239 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,241 +1,7 @@
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 setUpRouter from "./router.js";

<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 initializeApp = () => {
setUpRouter();
};

<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()}
`;
initializeApp();
Loading
Loading