From c5b5e474956f3b78abdbc20c093dcf30d91fc088 Mon Sep 17 00:00:00 2001 From: crayonpeenut Date: Tue, 30 Dec 2025 02:08:00 +0900 Subject: [PATCH] week 3 --- 11-sprint-mission-fe | 1 - faq.html | 32 ++++++ html/faq.html | 23 ---- html/index.html | 152 -------------------------- html/login.html | 20 ---- html/privacy.html | 18 --- images/icons/eye-invisible.svg | 10 ++ images/icons/eye-visible.svg | 3 + images/logo/logo.svg | 15 +++ images/logo/panda-market-logo.png | Bin 2800 -> 0 bytes images/social/google-logo.png | Bin 0 -> 2266 bytes images/social/kakao-logo.png | Bin 0 -> 1580 bytes index.html | 166 ++++++++++++++++++++++++++++ html/items.html => items.html | 9 +- login.html | 142 ++++++++++++++++++++++++ main.js | 46 ++++++++ privacy.html | 32 ++++++ services/Articleservice.js | 87 +++++++++++++++ services/ProductService.js | 94 ++++++++++++++++ signup.html | 125 +++++++++++++++++++++ styles/auth.css | 93 ++++++++++++++++ styles/global.css | 176 ++++++++++++++++++++++++++++++ styles/home.css | 4 +- styles/reset.css | 43 -------- styles/styles.css | 98 ----------------- 25 files changed, 1028 insertions(+), 361 deletions(-) delete mode 160000 11-sprint-mission-fe create mode 100644 faq.html delete mode 100644 html/faq.html delete mode 100644 html/index.html delete mode 100644 html/login.html delete mode 100644 html/privacy.html create mode 100644 images/icons/eye-invisible.svg create mode 100644 images/icons/eye-visible.svg create mode 100644 images/logo/logo.svg delete mode 100644 images/logo/panda-market-logo.png create mode 100644 images/social/google-logo.png create mode 100644 images/social/kakao-logo.png create mode 100644 index.html rename html/items.html => items.html (50%) create mode 100644 login.html create mode 100644 main.js create mode 100644 privacy.html create mode 100644 services/Articleservice.js create mode 100644 services/ProductService.js create mode 100644 signup.html create mode 100644 styles/auth.css create mode 100644 styles/global.css delete mode 100644 styles/reset.css delete mode 100644 styles/styles.css diff --git a/11-sprint-mission-fe b/11-sprint-mission-fe deleted file mode 160000 index ea93148..0000000 --- a/11-sprint-mission-fe +++ /dev/null @@ -1 +0,0 @@ -Subproject commit ea93148783f1a7df366a0e9c32b1444c98766e30 diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..42c3674 --- /dev/null +++ b/faq.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - FAQ + + + + + + +

임시 FAQ 페이지

+ + diff --git a/html/faq.html b/html/faq.html deleted file mode 100644 index 2ddb84d..0000000 --- a/html/faq.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - 판다마켓 FAQ - - - - - - -

임시 FAQ 페이지

- - - - diff --git a/html/index.html b/html/index.html deleted file mode 100644 index 447da8a..0000000 --- a/html/index.html +++ /dev/null @@ -1,152 +0,0 @@ - - - - - - 판다마켓 - - - - - - - - -
- - 홈버튼 - - - 로그인 - -
- - -
- - - -
-
- 인기상품 - -
-

Hot item

-

인기 상품을
- 확인해 보세요 -

-

- 가장 HOT한 중고거래 물품을
- 판다마켓에서 확인해 보세요 -

-
-
- - -
-
-

Search

-

구매를 원하는
- 상품을 검색하세요 -

-

- 구매하고 싶은 물품은 검색해서
- 쉽게 찾아보세요 -

-
- - 검색 기능 -
- - -
- 판매 상품 등록 - -
-

Register

-

판매를 원하는
- 상품을 등록하세요 -

-

- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요 -

-
-
-
- - -
- - - - diff --git a/html/login.html b/html/login.html deleted file mode 100644 index 679990d..0000000 --- a/html/login.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - 판다마켓 로그인 - - - - - - -

임시 로그인 페이지

- - diff --git a/html/privacy.html b/html/privacy.html deleted file mode 100644 index 42b0f21..0000000 --- a/html/privacy.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - 판다마켓 이용약관 - - - - - - -

임시 이용약관 페이지

- - \ No newline at end of file diff --git a/images/icons/eye-invisible.svg b/images/icons/eye-invisible.svg new file mode 100644 index 0000000..92252b0 --- /dev/null +++ b/images/icons/eye-invisible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/eye-visible.svg b/images/icons/eye-visible.svg new file mode 100644 index 0000000..35a7530 --- /dev/null +++ b/images/icons/eye-visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/logo.svg b/images/logo/logo.svg new file mode 100644 index 0000000..d497acb --- /dev/null +++ b/images/logo/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png deleted file mode 100644 index 9d5f8ef388210aabbe7aed272727c8cd2f0ce64a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2800 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 eC?0qF`1L + + + + + 판다마켓 + + + + + + + + + + + + +
+ 판다마켓 홈 + 로그인 +
+ + // 메인 컨텐츠 시작 +
+ + + // 인기상품 둘러보기 +
+
+ 인기 상품 +
+

Hot item

+

인기 상품을
확인해 보세요

+

+ 가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요 +

+
+
+ + // 검색하기 +
+
+

Search

+

구매를 원하는
상품을 검색하세요

+

+ 구매하고 싶은 물품은 검색해서 +
쉽게 찾아보세요 +

+
+ 검색 기능 +
+ + // 판매 상품 등록 +
+ 판매 상품 등록 +
+

Register

+

판매를 원하는
상품을 등록하세요

+

+ 어떤 물건이든 판매하고 싶은 상품을 +
쉽게 등록하세요 +

+
+
+
+ + // 하단 홍보 배너 + +
+ + // 푸터 시작 + + + diff --git a/html/items.html b/items.html similarity index 50% rename from html/items.html rename to items.html index ffe0aa8..a6aa55e 100644 --- a/html/items.html +++ b/items.html @@ -3,18 +3,19 @@ - 판다마켓 상품 리스트 - + + 판다마켓 - 상품 리스트 + - + -

임시 상품 목록 페이지

+

임시 상품 리스트 페이지

diff --git a/login.html b/login.html new file mode 100644 index 0000000..ba69cf9 --- /dev/null +++ b/login.html @@ -0,0 +1,142 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + +
+
+ 판다마켓 홈 +
+ + + + + +
+
+ + +
+
+ +
+ + + + + +
+
+ + +
+ + + +
+ 판다마켓이 처음이신가요? 회원가입 +
+
+ + diff --git a/main.js b/main.js new file mode 100644 index 0000000..75dfef5 --- /dev/null +++ b/main.js @@ -0,0 +1,46 @@ +import { + getArticleList, + getArticle, + createArticle, + patchArticle, + deleteArticle, +} from './services/ArticleService.js'; + +import { + getProductList, + getProduct, + createProduct, + patchProduct, + deleteProduct, +} from './services/ProductService.js'; + + +getArticleList(1, 5, '').then((data) => console.log('Article List:', data)); + +getArticle(1).then((data) => console.log('Article Detail:', data)); + +createArticle({ + title: '테스트 게시글', + content: '게시글 내용입니다.', + image: 'https://via.placeholder.com/150', +}).then((data) => console.log('Created Article:', data)); + + +(async () => { + const products = await getProductList(1, 5, ''); + console.log('Product List:', products); + + const product = await getProduct(1); + console.log('Product Detail:', product); + + const newProduct = await createProduct({ + name: '테스트 상품', + description: '상품 설명', + price: 10000, + tags: ['test'], + images: ['https://via.placeholder.com/150'], + }); + console.log('Created Product:', newProduct); +})(); + +// terminal에서 ID 조회 부분과 상품 조회 부분에서 404 에러 나는 것 확인됨. 다음 미션에서 알려주지 않을까 싶습니당.. \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 0000000..d37e54e --- /dev/null +++ b/privacy.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - 이용약관 + + + + + + +

임시 이용약관 페이지

+ + diff --git a/services/Articleservice.js b/services/Articleservice.js new file mode 100644 index 0000000..97e8a67 --- /dev/null +++ b/services/Articleservice.js @@ -0,0 +1,87 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +export function getArticleList(page = 1, pageSize = 10, keyword = '') { + const url = `${BASE_URL}/articles?page=${page}&pageSize=${pageSize}&keyword=${keyword}`; + + return fetch(url) + .then((response) => { + if (!response.ok) { + console.error('게시글 목록 조회 실패:', response.status); + throw new Error('Failed to fetch article list'); + } + return response.json(); + }) + .catch((error) => { + console.error('getArticleList 에러:', error); + }); +} + +export function getArticle(articleId) { + return fetch(`${BASE_URL}/articles/${articleId}`) + .then((response) => { + if (!response.ok) { + console.error('ID 조회 실패:', response.status); + throw new Error('Failed to fetch article'); + } + return response.json(); + }) + .catch((error) => { + console.error('getArticle 에러:', error); + }); +} + +export function createArticle({ title, content, image }) { + return fetch(`${BASE_URL}/articles`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ title, content, image }), + }) + .then((response) => { + if (!response.ok) { + console.error('게시글 생성 실패:', response.status); + throw new Error('Failed to create article'); + } + return response.json(); + }) + .catch((error) => { + console.error('createArticle 에러:', error); + }); +} + +export function patchArticle(articleId, data) { + return fetch(`${BASE_URL}/articles/${articleId}`, { + method: 'PATCH', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }) + .then((response) => { + if (!response.ok) { + console.error('게시글 수정 실패:', response.status); + throw new Error('Failed to patch article'); + } + return response.json(); + }) + .catch((error) => { + console.error('patchArticle 에러:', error); + }); +} + +export function deleteArticle(articleId) { + return fetch(`${BASE_URL}/articles/${articleId}`, { + method: 'DELETE', + }) + .then((response) => { + if (!response.ok) { + console.error('게시글 삭제 실패:', response.status); + throw new Error('Failed to delete article'); + } + console.log('게시글 삭제 성공'); + }) + .catch((error) => { + console.error('deleteArticle 에러:', error); + }); +} diff --git a/services/ProductService.js b/services/ProductService.js new file mode 100644 index 0000000..5826795 --- /dev/null +++ b/services/ProductService.js @@ -0,0 +1,94 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +export async function getProductList(page = 1, pageSize = 10, keyword = '') { + try { + const response = await fetch( + `${BASE_URL}/products?page=${page}&pageSize=${pageSize}&keyword=${keyword}` + ); + + if (!response.ok) { + console.error('상품 목록 조회 실패:', response.status); + throw new Error('Failed to fetch product list'); + } + + return await response.json(); + } catch (error) { + console.error('getProductList 에러:', error); + } +} + +export async function getProduct(productId) { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`); + + if (!response.ok) { + console.error('상품 조회 실패:', response.status); + throw new Error('Failed to fetch product'); + } + + return await response.json(); + } catch (error) { + console.error('getProduct 에러:', error); + } +} + +export async function createProduct({ + name, + description, + price, + tags, + images, +}) { + try { + const response = await fetch(`${BASE_URL}/products`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ name, description, price, tags, images }), + }); + + if (!response.ok) { + console.error('상품 생성 실패:', response.status); + throw new Error('Failed to create product'); + } + + return await response.json(); + } catch (error) { + console.error('createProduct 에러:', error); + } +} + +export async function patchProduct(productId, data) { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`, { + method: 'PATCH', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data), + }); + + if (!response.ok) { + console.error('상품 수정 실패:', response.status); + throw new Error('Failed to patch product'); + } + + return await response.json(); + } catch (error) { + console.error('patchProduct 에러:', error); + } +} + +export async function deleteProduct(productId) { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`, { + method: 'DELETE', + }); + + if (!response.ok) { + console.error('상품 삭제 실패:', response.status); + throw new Error('Failed to delete product'); + } + + console.log('상품 삭제 성공'); + } catch (error) { + console.error('deleteProduct 에러:', error); + } +} diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..8ba9082 --- /dev/null +++ b/signup.html @@ -0,0 +1,125 @@ + + + + + + 판다마켓 - 회원가입 + + + + + + + +
+
+ 판다마켓 홈 +
+ +
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+ +
+ + +
+
+ + +
+ + + +
+ 이미 회원이신가요? 로그인 +
+
+ + diff --git a/styles/auth.css b/styles/auth.css new file mode 100644 index 0000000..bbf9846 --- /dev/null +++ b/styles/auth.css @@ -0,0 +1,93 @@ +/* + Authentication 관련 스타일링 + - 로그인과 회원가입 페이지에 공통된 요소가 많기 때문에 authentication(본인인증)이라는 컨셉으로 묶어 하나의 스타일시트에서 관리해 주었어요. +*/ + +.auth-container { + max-width: 640px; + margin: 0 auto; +} + +.logo-home-button-wrapper { + display: block; + text-align: center; + margin-top: 60px; + margin-bottom: 40px; +} + +.input-item { + margin-bottom: 24px; +} + +.input-item label { + /*