Skip to content

[7팀 정명훈] Chapter 1-1. 프레임워크 없이 SPA 만들기 #52

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

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

[7팀 정명훈] Chapter 1-1. 프레임워크 없이 SPA 만들기 #52

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
498daa1
test
gncnzkf3 Jul 8, 2025
92c5b6b
Merge branch 'main' of https://github.com/hanghae-plus/front_6th_chap…
gncnzkf3 Jul 9, 2025
169496b
컴포넌트 분리
gncnzkf3 Jul 9, 2025
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
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,8 @@
"workerDirectory": [
"public"
]
},
"dependencies": {
"playwright": "^1.53.2"
}
}
4 changes: 4 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

156 changes: 156 additions & 0 deletions src/components/Cart/CartItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
export const CartItem = () => {
return `
<div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
<div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
<!-- 헤더 -->
<div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
</svg>
장바구니
<span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
</h2>
<button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- 컨텐츠 -->
<div class="flex flex-col max-h-[calc(90vh-120px)]">
<!-- 전체 선택 섹션 -->
<div class="p-4 border-b border-gray-200 bg-gray-50">
<label class="flex items-center text-sm text-gray-700">
<input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
전체선택 (2개)
</label>
</div>
<!-- 아이템 목록 -->
<div class="flex-1 overflow-y-auto">
<div class="p-4 space-y-4">
<div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
<!-- 선택 체크박스 -->
<label class="flex items-center mr-3">
<input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
focus:ring-blue-500" data-product-id="85067212996">
</label>
<!-- 상품 이미지 -->
<div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
<img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
</div>
<!-- 상품 정보 -->
<div class="flex-1 min-w-0">
<h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
</h4>
<p class="text-sm text-gray-600 mt-1">
220원
</p>
<!-- 수량 조절 -->
<div class="flex items-center mt-2">
<button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
</svg>
</button>
<input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
<button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
</div>
<!-- 가격 및 삭제 -->
<div class="text-right ml-3">
<p class="text-sm font-medium text-gray-900">
440원
</p>
<button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
삭제
</button>
</div>
</div>
<div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
<!-- 선택 체크박스 -->
<label class="flex items-center mr-3">
<input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
focus:ring-blue-500" data-product-id="86940857379">
</label>
<!-- 상품 이미지 -->
<div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
<img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
</div>
<!-- 상품 정보 -->
<div class="flex-1 min-w-0">
<h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
</h4>
<p class="text-sm text-gray-600 mt-1">
230원
</p>
<!-- 수량 조절 -->
<div class="flex items-center mt-2">
<button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
</svg>
</button>
<input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
<button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
</div>
<!-- 가격 및 삭제 -->
<div class="text-right ml-3">
<p class="text-sm font-medium text-gray-900">
230원
</p>
<button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
삭제
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 하단 액션 -->
<div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
<!-- 선택된 아이템 정보 -->
<!-- 총 금액 -->
<div class="flex justify-between items-center mb-4">
<span class="text-lg font-bold text-gray-900">총 금액</span>
<span class="text-xl font-bold text-blue-600">670원</span>
</div>
<!-- 액션 버튼들 -->
<div class="space-y-2">
<!-- <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md
hover:bg-red-700 transition-colors text-sm">
선택한 상품 삭제 (1개)
</button> -->
<div class="flex gap-2">
<button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md
hover:bg-gray-700 transition-colors text-sm">
전체 비우기
</button>
<button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md
hover:bg-blue-700 transition-colors text-sm">
구매하기
</button>
</div>
</div>
</div>
</div>
</div>
`;
};
39 changes: 39 additions & 0 deletions src/components/Cart/Empty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
export const Empty = () => {
return `
<div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
<div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
<!-- 헤더 -->
<div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
</svg>
장바구니
</h2>

<button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>

<!-- 컨텐츠 -->
<div class="flex flex-col max-h-[calc(90vh-120px)]">
<!-- 빈 장바구니 -->
<div class="flex-1 flex items-center justify-center p-8">
<div class="text-center">
<div class="text-gray-400 mb-4">
<svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
<p class="text-gray-600">원하는 상품을 담아보세요!</p>
</div>
</div>
</div>
</div>
</div>
`;
};
9 changes: 9 additions & 0 deletions src/components/Common/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const Footer = () => {
return `
<footer class="bg-white shadow-sm sticky top-0 z-40">
<div class="max-w-md mx-auto py-8 text-center text-gray-500">
<p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
</div>
</footer>
`;
};
22 changes: 22 additions & 0 deletions src/components/Common/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export const Header = () => {
return `
<header class="bg-white shadow-sm sticky top-0 z-40">
<div class="max-w-md mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<h1 class="text-xl font-bold text-gray-900">
<a href="/" data-link="">쇼핑몰</a>
</h1>
<div class="flex items-center space-x-2">
<!-- 장바구니 아이콘 -->
<button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
</svg>
</button>
</div>
</div>
</div>
</header>
`;
};
Empty file added src/components/Common/Toast.js
View file
Open in desktop
Empty file.
Loading
Loading