diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..1cc333b Binary files /dev/null and b/.DS_Store differ diff --git a/ArticleService.mjs b/ArticleService.mjs new file mode 100644 index 0000000..9acd395 --- /dev/null +++ b/ArticleService.mjs @@ -0,0 +1,108 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +export const 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) { + throw new Error(`목록 조회 실패! Status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + console.log('ArticleList:', data); + return data; + }) + .catch((error) => { + console.error(error); + throw error; + }); +}; + +export const getArticle = (articleId) => { + return fetch(`${BASE_URL}/articles/${articleId}`) + .then((response) => { + if (!response.ok) { + throw new Error(`ID 조회 실패! Status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + console.log(`the Article:`, data); + return data; + }) + .catch((error) => { + console.error(error); + throw error; + }); +}; + +export const createArticle = ({ title, content, image } = {}) => { + return fetch(`${BASE_URL}/articles`, { + method: 'POST', + body: JSON.stringify({ title, content, image }), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((response) => { + if (!response.ok) { + throw new Error(`생성 실패! Status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + console.log(`posted Article:`, data); + return data; + }) + .catch((error) => { + console.error(error); + throw error; + }); +}; + +export const patchArticle = (articleId, { title, content, image } = {}) => { + return fetch(`${BASE_URL}/articles/${articleId}`, { + method: 'PATCH', + body: JSON.stringify({ title, content, image }), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((response) => { + if (!response.ok) { + throw new Error(`수정 실패! Status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + console.log(`patched Article:`, data); + return data; + }) + .catch((error) => { + console.error(error); + throw error; + }); +}; + +export const deleteArticle = (articleId) => { + return fetch(`${BASE_URL}/articles/${articleId}`, { + method: 'DELETE', + }) + .then((response) => { + if (!response.ok) { + throw new Error(`삭제 실패! Status: ${response.status}`); + } + console.log(`deleted Article ID: ${articleId}`); + return true; + }) + .catch((error) => { + console.error(error); + throw error; + }); +}; diff --git a/ProductService.mjs b/ProductService.mjs new file mode 100644 index 0000000..21a80eb --- /dev/null +++ b/ProductService.mjs @@ -0,0 +1,114 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +export const getProductList = async ({ + page = 1, + pageSize = 10, + keyword = '', +} = {}) => { + try { + const url = `${BASE_URL}/products?page=${page}&pageSize=${pageSize}&keyword=${keyword}`; + + const response = await fetch(url); + + if (!response.ok) { + throw new Error(`목록 조회 실패! Status: ${response.status}`); + } + + const data = await response.json(); + + console.log('ProductList:', data); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; + +export const getProduct = async (productId) => { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`); + + if (!response.ok) { + throw new Error(`ID 조회 실패! Status: ${response.status}`); + } + + const data = await response.json(); + + console.log(`the Product:`, data); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; + +export const createProduct = async ({ + name, + description, + price, + tags, + images, +} = {}) => { + try { + const response = await fetch(`${BASE_URL}/products`, { + method: 'POST', + body: JSON.stringify({ name, description, price, tags, images }), + headers: { 'Content-Type': 'application/json' }, + }); + + if (!response.ok) { + throw new Error(`생성 실패! Status: ${response.status}`); + } + + const data = await response.json(); + + console.log(`posted Product:`, data); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; + +export const patchProduct = async ( + productId, + { name, description, price, tags, images } = {} +) => { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`, { + method: 'PATCH', + body: JSON.stringify({ name, description, price, tags, images }), + headers: { 'Content-Type': 'application/json' }, + }); + + if (!response.ok) { + throw new Error(`수정 실패! Status: ${response.status}`); + } + + const data = await response.json(); + + console.log(`patched Product:`, data); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; + +export const deleteProduct = async (productId) => { + try { + const response = await fetch(`${BASE_URL}/products/${productId}`, { + method: 'DELETE', + }); + + if (!response.ok) { + throw new Error(`삭제 실패! Status: ${response.status}`); + } + + console.log(`deleted Product ID: ${productId}`); + return true; + } catch (error) { + console.error(error); + throw error; + } +}; diff --git a/README.md b/README.md index 99b72d9..cde2cb1 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,52 @@ -# 🐼 판다마켓 프로젝트 +# 📝 [판다마켓 웹페이지(스프린트 미션)] -> _이 저장소는 판다마켓 프로젝트의 프론트엔드 코드를 관리하는 곳입니다. 프로젝트를 클론하여 개발 환경을 설정하고, 각 브랜치에서 해당 스프린트 미션을 수행해 주세요!_ 🛠️ +![배너 이미지](/images/Group%2019.svg) +
+**한 줄 소개**: 거래사이트 "판다마켓"의 웹페이지를 만듭니다. -## 소개 +
-안녕하세요! 판다마켓 프로젝트에 오신 것을 환영합니다! 🥳 -판다마켓은 따뜻한 중고거래를 위한 커뮤니티 플랫폼이에요. 여러분은 이곳에서 상품을 등록하고, 다른 사용자들과 소통하며, 자유롭게 이야기를 나눌 수 있어요. 매주 스프린트 미션을 통해 기능을 하나씩 만들어 가며 성장해 나가는 여정을 함께해요. 🚀 + +## 🔗 배포 링크 (v2.2.1) +👉 [웹사이트 보러가기](https://sprint-project-min.netlify.app/) -![PandaMarket](https://github.com/user-attachments/assets/3784b99f-73c9-4349-a9a9-92b2a7563574) -_위 이미지는 판다마켓의 대표 이미지입니다._ 📸 +
-## 스프린트 미션이란? 🤔 +## 💡 프로젝트 소개 (Description) +**어떤 웹사이트인가요?** +이 프로젝트는 웹 개발 학습을 위해 제작되었습니다. 스프린트 과제를 수행하며 코딩실력을 향상시키는데 도움이 될 것입니다. ```VS code, Git, Figma``` 등 다양한 도구와 ```netfliy``` 등의 사이트를 통해 코드작성, 디자인, 공유 및 배포의 과정을 익힐 것입니다. 초반에는 ```html/ css/ javascript``` 등의 개발에 필요한 기본 스택을 익히며 나중에는 ```react/ express``` 등을 배우고 활용할 것입니다. -스프린트 미션은 **하나의 개인 프로젝트를 길게 진행하면서, 그 과정에서 주기적으로 피드백을 받을 수 있는 시스템**이에요. 각 스프린트마다 배운 이론을 적용해 보고, **멘토님께 코드 리뷰를 받아가며 실력을 쑥쑥 키워갈 수 있는 중요한 개인 과제**랍니다. 💪 +**개발 기간** +* 2025.12.01 ~ 게속 -## 주요 기능 ✨ +
-1. **상품 등록**: 내가 가진 물건을 올리고, 사진과 설명을 추가해 직접 판매할 수 있어요! -2. **문의 댓글**: 상품에 대한 궁금한 점이나 의견을 자유롭게 남길 수 있답니다. 📝 -3. **자유게시판**: 다양한 주제로 친구들과 이야기를 나누고, 정보를 공유할 수 있는 공간이에요! 🗣️ +## 🛠 기술 스택 (Tech Stack) -## 프로젝트 브랜치 구조 🏗️ +| 분류 | 기술 | +| :-- | :-- | +| **Frontend** | ![React](https://img.shields.io/badge/React-20232A?style=flat&logo=react&logoColor=61DAFB) ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black) ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)| +| **Backend** | ![node.js](https://img.shields.io/badge/Node.js-339933?style=flat&logo=node.js&logoColor=white) ![express](https://img.shields.io/badge/Express.js-000000?style=flat&logo=express&logoColor=white)| +| **Styling** |![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)| +| **Tools** | ![Git](https://img.shields.io/badge/Git-F05032?style=flat&logo=git&logoColor=white) ![VS Code](https://img.shields.io/badge/VS_Code-007ACC?style=flat&logo=visual-studio-code&logoColor=white)| -프로젝트는 단계별로 나뉘어 있고, 각 스프린트 미션에 맞는 브랜치가 있어요. 각 브랜치를 통해 체계적으로 개발하며 학습할 수 있어요. 🎯 +
-### 브랜치 설명 +## ✨ 주요 기능 (Key Features) +* ✅ **기능 1**: 각 페이지 작성 및 디자인 +* ✅ **기능 2**: 링크를 통한 페이지 연결 +* ✅ **기능 3**: github를 활용한 공유 -1. **basic (part1): 스프린트 미션 1 ~ 4 FE 요구사항** +
- - 기본적인 웹 애플리케이션 기능 구현을 위한 초기 브랜치입니다. HTML, CSS, JavaScript 등을 사용해 기본을 다집니다. - - **스프린트 미션 1부터 4까지**의 프론트엔드 내용을 포함하고 있어요. +## 📸 스크린샷 (Screenshots) +| 메인 화면 | 기능 화면 | +| :--: | :--: | +| ![Main](/images/screenshots/스크린샷%202025-12-05%20오후%201.16.00.png) | ![Feature](/images/screenshots/스크린샷%202025-12-05%20오후%201.15.37.png) | +
-2. **react (part2): 스프린트 미션 5 ~ 7 FE 요구사항** +## 💻 실행 방법 (Installation) +이 프로젝트를 로컬 컴퓨터에서 실행하려면 터미널에 아래 명령어를 입력하세요. - - React 라이브러리를 사용해 프론트엔드 기능을 구현하는 브랜치입니다. 컴포넌트 기반 아키텍처와 상태 관리를 배웁니다. - - **스프린트 미션 5부터 7까지, 그 이후**의 프론트엔드 내용을 포함하고 있어요. - - 만약 스프린트 미션 9부터 프론트엔드 코드를 Next가 아닌 React로 구현하고 싶다면 react 브랜치를 사용해요. - -3. **next (part3,4): 스프린트 미션 8 FE 요구사항~** - - - Next.js를 사용해 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 고급 기능을 구현합니다. - - **스프린트 미션 8부터** 시작하는 프론트엔드 내용을 포함하고 있어요. - - 만약 스프린트 미션 9부터 프론트엔드 코드를 React가 아닌 Next로 구현하고 싶다면 next 브랜치를 사용해요. - -> _스프린트 미션 내 백엔드 요구사항은 [백엔드 레포지토리](https://github.com/codeit-sprint-fullstack/11-sprint-mission-be)의 브랜치에서 관리해주세요_ - ---- - -본 프로젝트는 [코드잇](https://www.codeit.kr)의 소유이며, 교육 목적으로만 사용됩니다. © 2025 Codeit. All rights reserved. +```bash +git clone https://github.com/alstjddl0513-sys/11-sprint-mission-fe.git diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..d9ec8b8 --- /dev/null +++ b/css/login.css @@ -0,0 +1,127 @@ +* { + box-sizing: border-box; +} + +:root { + --primary-100: #3692ff; + --cool-gray-100: #f3f4f6; + --secondry-800: #1f2937; +} + +html { + font-size: 62.5%; +} + +body { + font-family: 'pretendard', sans-serif; + font-style: normal; + white-space: nowrap; + display: flex; + width: 100%; + padding: 23.1rem 64rem 28.4rem; + justify-content: center; + align-items: center; +} + +body#signup_page { + padding: 0.6rem 64rem 17.8rem; +} + +main { + display: flex; + width: 64rem; + flex-direction: column; + align-items: center; + flex-shrink: 0; +} + +a #logo { + width: 39.6rem; + height: 13.2rem; + margin-bottom: 4rem; +} + +.forms, +form { + display: flex; + flex-direction: column; + gap: 2.4rem; + width: 100%; +} + +.inputs input { + width: 100%; + margin-top: 1.6rem; + padding: 1.6rem 2.4rem; + border: 0rem; + border-radius: 1.2rem; + background-color: var(--cool-gray-100); +} + +.inputs label { + color: var(--secondry-800); + font-size: 1.8rem; + font-weight: 700; + line-height: 2.6rem; +} + +input:focus { + border: 0.1rem solid var(--primary-100); +} + +.login-button { + display: flex; + justify-content: center; + align-items: center; + height: 5.6rem; + padding: 1.6rem 12.4rem; + border-radius: 4rem; + background-color: #9ca3af; + color: var(--cool-gray-100); + font-size: 2rem; + font-weight: 600; + line-height: 3.2rem; + cursor: pointer; +} + +.login-button:hover { + background-color: var(--primary-100); +} + +h1 { + color: var(--secondry-800); + font-size: 1.6rem; + font-weight: 500; + line-height: 2.6rem; +} + +.easy-login { + width: 100%; + padding: 1.6rem 2.3rem; + margin: 2.4rem 0; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 0.8rem; + background-color: #e6f2ff; +} + +.icons { + display: flex; + gap: 1.6rem; +} + +.signup { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + color: var(--secondry-800); + font-size: 1.4rem; + font-weight: 500; + line-height: 2.4rem; +} + +.signup a { + color: var(--primary-100); +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..45a05ec --- /dev/null +++ b/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..82c2307 --- /dev/null +++ b/css/style.css @@ -0,0 +1,217 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: "pretendard", sans-serif; + font-style: normal; + width: 100%; + white-space: nowrap; +} + +main { + background-color: #fcfcfc; + width: 100%; +} + +a { + text-decoration: none; + cursor: pointer; +} + +header { + padding: 0.9rem 20rem; + width: 100%; + height: 7rem; + border-bottom: 0.1rem solid #dfdfdf; + background-color: #ffffff; + position: sticky; + top: 0; +} + +.container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.button { + display: inline-flex; + justify-content: center; + align-items: center; + background-color: #3692ff; + font-weight: 600; + gap: 1rem; +} + +#login-button { + width: 12.8rem; + height: 4.8rem; + padding: 1.2rem 2.3rem; + border-radius: 0.8rem; + color: #f3f4f6; + font-size: 1.6rem; + line-height: 2.6rem; +} + +#look-button { + width: 100%; + height: 5.6rem; + padding: 1.6rem 12.4rem; + border-radius: 4rem; + color: #f9fafb; + font-size: 2rem; + line-height: 3.2rem; +} + +h1 { + color: #374151; + font-size: 4rem; + font-weight: 700; + line-height: 140%; +} + +h1.sum { + letter-spacing: 0.08rem; +} + +.feature { + display: flex; + justify-content: center; + align-items: center; + padding: 13.8rem 34.4rem; + background-color: #ffffff; +} + +.content { + width: 98.8rem; + display: flex; + gap: 6.4rem; + justify-content: center; + align-items: center; +} + +.section-img { + width: 58.8rem; + height: 44.4rem; + flex-shrink: 0; +} + +.description { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.2rem; +} + +.tag { + color: #3692ff; + font-size: 1.8rem; + font-weight: 700; + line-height: 2.6rem; +} + +p { + margin-top: 1.2rem; + color: #374151; + font-size: 2.4rem; + font-weight: 500; + line-height: 3.2rem; +} + +footer { + width: 100%; + height: 16rem; + padding: 3.2rem 20rem; + background-color: #111827; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.foot { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 1.6rem; + font-weight: 400; + text-align: center; +} + +.foot a { + color: #e5e7eb; +} + +.codeit-foot { + color: #9ca3af; +} + +.footermenu { + display: flex; + align-items: flex-start; + gap: 3rem; +} + +.social-site { + display: flex; + align-items: center; + width: 11.6rem; + gap: 1.2rem; +} + +.imgs { + width: 74.6rem; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-shrink: 0; +} + +#img2.imgs { + height: 39.7rem; + background-image: url(/images/Img_home_bottom.svg); +} + +#img1.imgs { + height: 34rem; + background-image: url(/images/Img_home_top.svg); +} + +.cont { + display: flex; + justify-content: center; + align-items: center; +} + +#bottom .cont { + gap: 6.9rem; +} + +#top .cont { + gap: 0.7rem; +} + +.banner { + display: flex; + flex-direction: column; + gap: 3.2rem; + padding-bottom: 6rem; +} + +#bottom.banners { + margin-top: 13.8rem; +} + +.banners { + display: flex; + justify-content: center; + align-items: flex-end; + height: 54rem; + background-color: #cfe5ff; +} \ No newline at end of file diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..7f45731 --- /dev/null +++ b/faq.html @@ -0,0 +1,19 @@ + + + + + 판다마켓-FAQ + + + + + + + 판다마켓-FAQ + + diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..f4c674f Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/Group 19.svg b/images/Group 19.svg new file mode 100644 index 0000000..31c250d --- /dev/null +++ b/images/Group 19.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/Img_home_01.svg b/images/Img_home_01.svg new file mode 100644 index 0000000..eb3c5ea --- /dev/null +++ b/images/Img_home_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_home_02.svg b/images/Img_home_02.svg new file mode 100644 index 0000000..eed41b9 --- /dev/null +++ b/images/Img_home_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_home_03.svg b/images/Img_home_03.svg new file mode 100644 index 0000000..faa6979 --- /dev/null +++ b/images/Img_home_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_home_bottom.svg b/images/Img_home_bottom.svg new file mode 100644 index 0000000..e44de5d --- /dev/null +++ b/images/Img_home_bottom.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_home_top.svg b/images/Img_home_top.svg new file mode 100644 index 0000000..1cb74f2 --- /dev/null +++ b/images/Img_home_top.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..9fecc69 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/icon/btn_visibility_off_24px.svg b/images/icon/btn_visibility_off_24px.svg new file mode 100644 index 0000000..d3076d6 --- /dev/null +++ b/images/icon/btn_visibility_off_24px.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/facebook.svg b/images/icon/facebook.svg new file mode 100644 index 0000000..e95500b --- /dev/null +++ b/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/google.svg b/images/icon/google.svg new file mode 100644 index 0000000..72a799c --- /dev/null +++ b/images/icon/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icon/ic_instagram.svg b/images/icon/ic_instagram.svg new file mode 100644 index 0000000..c83306f --- /dev/null +++ b/images/icon/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/ic_twitter.svg b/images/icon/ic_twitter.svg new file mode 100644 index 0000000..14a6069 --- /dev/null +++ b/images/icon/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/kakaotalk.svg b/images/icon/kakaotalk.svg new file mode 100644 index 0000000..e546fa5 --- /dev/null +++ b/images/icon/kakaotalk.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/icon/youtube.svg b/images/icon/youtube.svg new file mode 100644 index 0000000..3fea6e2 --- /dev/null +++ b/images/icon/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git "a/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.15.37.png" "b/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.15.37.png" new file mode 100644 index 0000000..6ad26bb Binary files /dev/null and "b/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.15.37.png" differ diff --git "a/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.16.00.png" "b/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.16.00.png" new file mode 100644 index 0000000..17198fa Binary files /dev/null and "b/images/screenshots/\354\212\244\355\201\254\353\246\260\354\203\267 2025-12-05 \354\230\244\355\233\204 1.16.00.png" differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..acbc04f --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + 판다마켓 + + + + + + + + + + +
+
+ + 판다마켓 홈으로 + + 로그인 +
+
+ +
+
+
+ +
+
+
+ +
+
+ 인기 상품 +
+

Hot item

+

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

+

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

+
+
+
+ +
+
+
+

Search

+

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

+

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

+
+ 검색 +
+
+ +
+
+ 등록 +
+

register

+

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

+

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

+
+
+
+ +
+
+

+ 믿을 수 있는 +
+ 판다마켓 중고거래 +

+
+
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 0000000..b4b0eac --- /dev/null +++ b/items.html @@ -0,0 +1,19 @@ + + + + + 판다마켓-ITEMS + + + + + + + 판다마켓-ITEMS + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..c2d4a41 --- /dev/null +++ b/login.html @@ -0,0 +1,72 @@ + + + + + 판다마켓-LOGIN + + + + + + + +
+ + + + +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+

간편 로그인하기

+
+ + 구글 + + + 카카오톡 + +
+
+ +
+ 판다마켓이 처음이신가요? + 회원가입 +
+
+ + diff --git a/main.js b/main.js new file mode 100644 index 0000000..199100c --- /dev/null +++ b/main.js @@ -0,0 +1,91 @@ +import { + getArticleList, + getArticle, + createArticle, + patchArticle, + deleteArticle, +} from './ArticleService.mjs'; + +import { + getProductList, + getProduct, + createProduct, + patchProduct, + deleteProduct, +} from './ProductService.mjs'; + +//**함수 테스트** -> 터미널에 node.js 입력 + +//article 테스트 함수 +const testArticle = async () => { + try { + console.log('--- 1. 목록 조회 테스트 ---'); + await getArticleList({ + page: 1, + pageSize: 5, + keyword: '', + }); + + console.log('--- 2. 글 생성 테스트 ---'); + const newArticle = await createArticle({ + title: '테스트용 글 제목 /김민성', + content: '테스트용 글의 내용입니다. /김민성', + }); + const testId = newArticle.id; //새로 생성한 글의 id + + console.log('--- 3. 상세 조회 테스트 ---'); + await getArticle(testId); + + console.log('--- 4. 상품 수정 테스트 ---'); + await patchArticle(testId, { + title: '수정된 글 제목 /김민성', + content: '수정된 글의 내용입니다. /김민성', + }); + + console.log('--- 5. 글 삭제 테스트 ---'); + await deleteArticle(testId); + console.log('테스트 완료!'); + } catch (error) { + console.error('테스트 중 오류 발생:', error.message); + } +}; + +// 실행! +testArticle(); + +// product 테스트 함수 +const testProduct = async () => { + try { + console.log('--- 1. 목록 조회 테스트 ---'); + await getProductList({ page: 1, pageSize: 5, keyword: '' }); + + console.log('--- 2. 상품 생성 테스트 ---'); + const newProduct = await createProduct({ + name: '테스트용 상품 이름 /김민성', + description: '테스트용 상품 설명입니다. /김민성', + price: 12345, + tags: [], + images: [], + }); + const testId = newProduct.id; //새로 생성한 상품의 id + + console.log('--- 3. 상세 조회 테스트 ---'); + await getProduct(testId); + + console.log('--- 4. 상품 수정 테스트 ---'); + await patchProduct(testId, { + name: '수정된 상품 이름 /김민성', + description: '수정한 상품 설명입니다. /김민성', + price: 54321, + }); + + console.log('--- 5. 상품 삭제 테스트 ---'); + await deleteProduct(testId); + console.log('테스트 완료!'); + } catch (error) { + console.error('테스트 중 오류 발생:', error.message); + } +}; + +// 실행! +testProduct(); diff --git a/privacy.html b/privacy.html new file mode 100644 index 0000000..56425db --- /dev/null +++ b/privacy.html @@ -0,0 +1,19 @@ + + + + + 판다마켓-PRIVACY + + + + + + + 판다마켓-PRIVACY + + diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..f8c3138 --- /dev/null +++ b/signup.html @@ -0,0 +1,93 @@ + + + + + 판다마켓-SIGNUP + + + + + + + +
+ + + + +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+

간편 로그인하기

+
+ + 구글 + + + 카카오톡 + +
+
+ +
+ 이미 회원이신가요? + 로그인 +
+
+ +