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 9d5f8ef..0000000 Binary files a/images/logo/panda-market-logo.png and /dev/null differ diff --git a/images/social/google-logo.png b/images/social/google-logo.png new file mode 100644 index 0000000..199f3d6 Binary files /dev/null and b/images/social/google-logo.png differ diff --git a/images/social/kakao-logo.png b/images/social/kakao-logo.png new file mode 100644 index 0000000..bfadc1d Binary files /dev/null and b/images/social/kakao-logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..24ce433 --- /dev/null +++ b/index.html @@ -0,0 +1,166 @@ + + + + + + 판다마켓 + + + + + + + + + + + + +
+ 판다마켓 홈 + 로그인 +
+ + // 메인 컨텐츠 시작 +
+ + + // 인기상품 둘러보기 +
+
+ 인기 상품 +
+

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 { + /*