diff --git a/.gitignore b/.gitignore index b512c09d..1dcef2d9 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +.env \ No newline at end of file diff --git a/css/_login.css b/css/_login.css deleted file mode 100644 index a7d3a069..00000000 --- a/css/_login.css +++ /dev/null @@ -1,157 +0,0 @@ -main { - width: 100%; - min-height: 100vh; - display: flex; - /* align-items: center; */ - justify-content: center; - padding: 50px 0 100px; -} - -main > .content { - width: 640px; - text-align: center; -} -.big_logo { - display: block; - max-width: 320px; - width: 100%; - margin: auto; - margin-bottom: 60px; -} -.big_logo img { - width: 100%; -} -#forms { -} -#forms label { - display: block; - width: 100%; - position: relative; - text-align: left; - font-size: 18px; - font-weight: 700; - margin-bottom: 10px; -} -#forms .inputbox { - width: 100%; - padding: 16px 24px; - border-radius: 12px; - height: 56px; - background: var(--gray100); - display: flex; - border: 1px solid transparent; - position: relative; -} -#forms .conBox { - position: relative; - margin-bottom: 36px; - /* height: 0; */ - /* transition: 1.5; */ -} - -#forms .inputbox.on { - border: 1px solid var(--primary100); -} -#forms .inputbox input { - border: 0; - width: 100%; - height: 100%; - background: transparent; - font-size: 16px; - outline: none; -} -#forms .inputbox .seePw { - position: relative; - width: 22px; - height:22px; - background:url(../img/look.svg) no-repeat center; -} -#forms .inputbox .seePw.on { - background:url(../img/look2.svg) no-repeat center; -} -#forms .inputbox.err { - border-color: var(--error); -} -#forms .inputbox .errMsg { - position: absolute; - left: 0; - top: 110%; - display: block; - text-align: left; - padding-left: 16px; - font-size: 15px; - font-weight: 600; - color: var(--error); - letter-spacing: -1px; -} -#forms button.btn { - width: 100%; - height: 56px; - background: var(--gray400); - color: var(--gray50); - font-size: 20px; - line-height: 32px; - font-weight: 600; - border: 0; - border-radius: 40px; - margin-bottom: 24px; - transition: 0.5s; -} -#forms button.btn.on { - cursor: pointer; - background-color: var(--primary100); -} - -#forms .simple { - display: flex; - justify-content: space-between; - background: #e6f2ff; - padding: 16px 23px; - height: 74px; - border-radius: 12px; - margin-bottom: 24px; -} -#forms .simple p { - font-size: 16px; - line-height: 26px; - font-weight: 500; - display: flex; - align-items: center; - color: var(--gray800); -} -#forms .simple .icon_box { - display: flex; - justify-content: space-between; - width: 100px; -} -#forms .simple a { - display: block; -} - -#forms .link { - text-align: center; - font-size: 14px; - line-height: 24px; - font-weight: 500; - color: var(--gray800); -} -#forms .link a { - color: var(--primary100); - font-size: 14px; - font-weight: 500; - text-decoration: underline; -} - -@media screen and (max-width: 1199px) { - .big_logo img { - width: 100%; - max-width: 390px; - } -} - -@media screen and (max-width: 743px) { - main > .content { - padding: 0 16px; - max-width: 400px; - } -} diff --git a/css/_modal.css b/css/_modal.css deleted file mode 100644 index 7c16ac6e..00000000 --- a/css/_modal.css +++ /dev/null @@ -1,73 +0,0 @@ -.modalCover { - background-color: rgba(0, 0, 0, 0.6); - width: 100%; - height: 100vh; - position: fixed; - left: 0; - top: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 9999; -} -.modal { - width: 500px; - height: 250px; - background-color: #fff; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - position: relative; - animation: modal 0.5s ease-in; -} -.modal p { - color: var(--error); - font-size: 18px; - font-weight: 600; -} -.modal button { - position: absolute; - background: var(--primary100); - color: #fff; - bottom: 20px; - right: 20px; - width: 120px; - height: 48px; - padding: 12px 23px 12px 23px; - border-radius: 8px; - border: 0; - font-size: 16px; - font-weight: 600; -} -@keyframes modal { - 0% { - transform: rotate(1deg); - } - 10% { - transform: rotate(-1deg); - } - 20% { - transform: rotate(1deg); - } - 30% { - transform: rotate(-1deg); - } - 40% { - transform: rotate(1deg); - } - 50% { - transform: rotate(-1deg); - } - 60% { - transform: rotate(1deg); - } - 70% { - transform: rotate(-1deg); - } -} -@media screen and (max-width: 656px) { - .modal { - width: 327px; - } -} diff --git a/css/_reset.css b/css/_reset.css deleted file mode 100644 index ad54b63f..00000000 --- a/css/_reset.css +++ /dev/null @@ -1,49 +0,0 @@ -@font-face { - font-family: "Pretendard"; - font-weight: 400; - font-display: swap; - src: local("Pretendard Regular"), - url(./font/Pretendard-Regular.woff2) format("woff2"), - url(./font/Pretendard-Regular.woff) format("woff"); -} -/* reset */ -* { - padding: 0; - margin: 0; - line-height: 150%; - box-sizing: border-box; - font-family: "Pretendard"; -} -a { - text-decoration: none; -} -li { - list-style: none; -} -html { - font-size: 10px; -} -p { - word-break: keep-all; -} - -/* color */ -:root { - --primary100: #3692ff; - --primary200: #1967d6; - --primary300: #1251aa; - --error: #f74747; - - /*secondary color*/ - --gray900: #111827; - --gray800: #1f2937; - --gray700: #374151; - --gray600: #4b5563; - --gray500: #6b7280; - --gray400: #9ca3af; - --gray200: #e5e7eb; - --gray100: #f3f4f6; - --gray50: #f9fafb; - - --bb: 1deg; -} diff --git a/css/_style.css b/css/_style.css deleted file mode 100644 index 2cd06e72..00000000 --- a/css/_style.css +++ /dev/null @@ -1,384 +0,0 @@ -/* ---------------- CSS ---------------- */ -body { - margin-top: 7rem; -} - -header { - width: 100%; - height: 70px; - position: fixed; - top: 0; - left: 50%; - transform: translateX(-50%); - border-bottom: 1px solid #dfdfdf; - z-index: 999; - background: #fff; -} -header .gnb { - display: flex; - height: 100%; - width: 100%; - max-width: 1920px; - justify-content: space-between; - padding: 9px 200px; - margin: auto; -} -header .loginBtn { - border: 0; - display: block; - text-align: center; - width: 128px; - height: 48px; - border-radius: 8px; - padding: 12px 24px; - background-color: var(--primary100); - font-size: 20px; - font-weight: 600; - line-height: 120%; - color: var(--gray50); -} -header .logo img { - width: 15.3rem; -} - -.visual { - height: 540px; - width: 100%; -} -.visual .content { - height: 100%; - width: 100%; - background-color: #cfe5ff; - display: flex; - align-items: flex-end; - justify-content: center; -} -.visual .content img { - width: 40vw; -} -.visual .txtBox { - height: 34rem; - margin-right: 10px; -} -.visual .txtBox h2 { - height: 11.2rem; - font-size: 4rem; - line-height: 5.6rem; - font-weight: 700; - color: #374151; - margin-bottom: 3rem; -} -.visual .txtBox a { - width: 100%; - display: block; - max-width: 35.7rem; - max-height: 5.6rem; - font-size: 2.3rem; - line-height: 120%; - font-weight: 600; - color: var(--gray50); - background-color: var(--primary100); - text-align: center; - padding: 1.6rem 0; - border-radius: 4rem; -} - -.section { - display: flex; - align-items: cneter; - justify-content: center; - width: 100%; - height: 72rem; - padding: 13.8rem 34.4rem; -} -.section .content { - width: 100rem; - background-color: #fcfcfc; - display: flex; - align-items: center; - justify-content: center; - padding: 0 1rem; -} -.section .content img { - max-width: 58.8rem; - /* width: 100%; */ -} -.section .content .left { - text-align: right; -} -.section .content .left.txtBox { - margin-right: 6.4rem; -} -.section .content .txtBox { - position: relative; - margin-left: 6.4rem; - width: 100%; -} -.section .content .txtBox .abs { - width: 32rem; -} -.section .content .txtBox h4 { - color: var(--primary100); - font-size: 1.8rem; - font-weight: 700; - line-height: 2.6rem; - margin-bottom: 1.5rem; -} -.section .content .txtBox h2 { - font-size: 4rem; - line-height: 5.6rem; - font-weight: 700; - letter-spacing: 2%; - color: #374151; - margin-bottom: 3.5rem; -} -.section .content .txtBox p { - font-size: 2.4rem; - line-height: 2.8rem; - font-weight: 500; - color: #374151; -} - -.bottomVisual { - margin-top: 13.8rem; -} -.bottomVisual img { - width: 64.9rem; -} -.bottomVisual .txtBox { - margin-right: 6.9rem; -} - -footer { - width: 100%; - height: 16rem; - padding: 3.2rem 20rem; - background: #111827; -} -footer .content { - max-width: 1920px; - margin: auto; - display: flex; - justify-content: space-between; - font-size: 1.6rem; -} -footer .content p { - color: #9ca3af; - line-height: 1.8rem; - font-weight: 400; -} -footer .content .link { - width: 15.9rem; - display: flex; - justify-content: space-between; -} -footer .content .link a { - color: #e5e7eb; -} -footer .content .icon { - width: 11.6rem; - display: flex; - justify-content: space-between; -} -footer .content .icon img { - width: 2rem; -} - -@media screen and (max-width: 1199px) { - header { - } - header .gnb { - max-width: 1199px; - padding: 9px 16px; - margin: auto; - } - header .loginBtn { - } - header .logo img { - width: 100%; - max-width: 153px; - } - - .visual { - margin-top: 70px; - height: 771px; - } - .visual .content { - height: 100%; - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - } - .visual .content img { - width: 100%; - max-width: 740px; - } - .visual .txtBox { - width: 100%; - } - .visual .txtBox br { - display: none; - } - .visual .txtBox h2 { - height: auto; - width: 100%; - font-size: 40px; - font-weight: 700; - margin: auto; - margin-top: 30px; - margin-bottom: 40px; - text-align: center; - } - .visual .txtBox a { - margin: auto; - } - - .section { - display: flex; - align-items: cneter; - justify-content: center; - width: 100%; - height: 72rem; - padding: 24px; - } - .section .content { - flex-wrap: wrap; - width: 100%; - max-width: 588px; - display: flex; - align-items: center; - justify-content: center; - padding: 0 1rem; - } - .section .content img { - width: 100%; - } - .section .content .left { - } - .section .content .left.txtBox { - margin-right: 0; - order: 1; - } - .section .content .txtBox { - margin-left: 0; - width: 100%; - } - .section .content .txtBox .abs { - width: 100%; - } - .section .content .txtBox h4 { - color: var(--primary100); - font-size: 1.8rem; - font-weight: 700; - line-height: 2.6rem; - margin-bottom: 1.5rem; - } - .section .content .txtBox h2 { - font-size: 4rem; - line-height: 5.6rem; - font-weight: 700; - letter-spacing: 2%; - color: #374151; - margin-bottom: 3.5rem; - } - .section .content .txtBox p { - font-size: 2.4rem; - line-height: 2.8rem; - font-weight: 500; - color: #374151; - } - - .bottomVisual { - margin-top: 13.8rem; - } - .bottomVisual img { - width: 64.9rem; - } - .bottomVisual .txtBox { - margin-right: 0; - height: auto; - } - .bottomVisual .txtBox h2 br { - display: block; - } - - footer { - width: 100%; - height: 16rem; - padding: 3.2rem 20rem; - background: #111827; - } - footer .content { - max-width: 1920px; - margin: auto; - display: flex; - justify-content: space-between; - font-size: 1.6rem; - } - footer .content p { - color: #9ca3af; - line-height: 1.8rem; - font-weight: 400; - } - footer .content .link { - width: 15.9rem; - display: flex; - justify-content: space-between; - } - footer .content .link a { - color: #e5e7eb; - } - footer .content .icon { - width: 11.6rem; - display: flex; - justify-content: space-between; - } - footer .content .icon img { - width: 2rem; - } -} - -@media screen and (max-width: 743px) { - br { - display: none; - } - .visual { - height: 540px; - } - .visual .content { - height: auto; - padding: 0 16px; - } - .visual .content h2 br { - display: block; - } - .visual .content .txtBox h2 { - margin-bottom: 20px; - margin-top: 40px; - font-size: 32px; - line-height: 140%; - } - .visual .txtBox { - margin-right: 0; - } - .visual .txtBox a { - max-width: 240px; - width: 100%; - } - .section { - height: auto; - } - .section .content { - flex-wrap: wrap; - } - .section .content .txtBox { - padding: 16px 0; - } - .section .content .left { - order: 3; - } - .sectipn .content img { - width: 100%; - } -} diff --git a/css/font/Pretendard-Regular.woff b/css/font/Pretendard-Regular.woff deleted file mode 100644 index e3b3a358..00000000 Binary files a/css/font/Pretendard-Regular.woff and /dev/null differ diff --git a/css/font/Pretendard-Regular.woff2 b/css/font/Pretendard-Regular.woff2 deleted file mode 100644 index a9f62319..00000000 Binary files a/css/font/Pretendard-Regular.woff2 and /dev/null differ diff --git a/faq.html b/faq.html deleted file mode 100644 index f5732062..00000000 --- a/faq.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - fqa - - - - - \ No newline at end of file diff --git a/img/Img_home_01.png b/img/Img_home_01.png deleted file mode 100644 index 7b652252..00000000 Binary files a/img/Img_home_01.png and /dev/null differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png deleted file mode 100644 index d2ba2ef1..00000000 Binary files a/img/Img_home_02.png and /dev/null differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png deleted file mode 100644 index 2ae1d5f3..00000000 Binary files a/img/Img_home_03.png and /dev/null differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png deleted file mode 100644 index 03701fd7..00000000 Binary files a/img/Img_home_bottom.png and /dev/null differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png deleted file mode 100644 index e0cb6c54..00000000 Binary files a/img/Img_home_top.png and /dev/null differ diff --git a/img/big_logo.png b/img/big_logo.png deleted file mode 100644 index 8248f602..00000000 Binary files a/img/big_logo.png and /dev/null differ diff --git a/img/google_icon.png b/img/google_icon.png deleted file mode 100644 index f75dc761..00000000 Binary files a/img/google_icon.png and /dev/null differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index a3e343c7..00000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index c47e044d..00000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 3f74b730..00000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 874150b0..00000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git a/img/kakao_icon.png b/img/kakao_icon.png deleted file mode 100644 index bd767800..00000000 Binary files a/img/kakao_icon.png and /dev/null differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 9b5b0af2..00000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/look.png b/img/look.png deleted file mode 100644 index 69a949ba..00000000 Binary files a/img/look.png and /dev/null differ diff --git a/img/look.svg b/img/look.svg deleted file mode 100644 index 7d615b19..00000000 --- a/img/look.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/img/look2.svg b/img/look2.svg deleted file mode 100644 index 92fda8aa..00000000 --- a/img/look2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/index.html b/index.html deleted file mode 100644 index dd32c458..00000000 --- a/index.html +++ /dev/null @@ -1,139 +0,0 @@ - - - - - - 판다마켓 - - - - - - - -
-
- - 로그인 -
-
- -
-
-
-

- 일상의 모든 물건을
- 거래해 보세요 -

- 구경하러 가기 -
- 판다이미지 -
-
- -
-
- hotItem -
-
-

Hot item

-

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

-

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

-
-
-
-
-
-
-
-
-

Search

-

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

-

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

-
-
- hotItem -
-
-
-
- hotItem -
-
-

Register

-

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

-

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

-
-
-
-
-
-
-
-

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

-
- -
-
- - - - - - diff --git a/items.html b/items.html deleted file mode 100644 index d95f5e72..00000000 --- a/items.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - items - - - - -
-
-
-

article

-
-
-
-

products

-
-
-
-
-
-
- - - - diff --git a/js/articleService.mjs b/js/articleService.mjs deleted file mode 100644 index 7e081dda..00000000 --- a/js/articleService.mjs +++ /dev/null @@ -1,118 +0,0 @@ -// import axios from "axios"; -import { typeConfirm } from "./lib.mjs"; -import { instanceObject } from "./ProductService.mjs"; -/** instance */ -const instance = axios.create(instanceObject); -instance.interceptors.request.use( - (config) => { - // console.log("request config", config); - return config; - }, - (error) => { - console.error("request error", error); - } -); -instance.interceptors.response.use( - (response) => { - let text = ""; - switch (response.status) { - case 200: - text = "Get 조회"; - break; - case 201: - text = ""; - break; - case 202: - break; - case 204: - text = "Delete 삭제"; - break; - } - console.log(text); - response.statusText = `${text} 성공`; - // console.log("reponse", response); - return response; - }, - (error) => { - console.error("response error", error); - return Promise.reject(error); - } -); - -const { articles } = { - articles: "/articles", -}; - -/** Get */ -export const getBody = { - page: 1, - pageSize: 1, - keyword: "string", -}; -export async function getArticle(body = getBody) { - const typeCheck = typeConfirm(getBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const url = `${articles}?page=${body.page}&pageSize=${body.pageSize}&keyword=${body.keyword}`; - const response = await instance.get(url); - return response.data; - } catch (error) { - if (!!error) console.error("Get Article Error", error); - } -} - -/** Post */ -export const createBody = { - title: "string", - content: "string", - image: "string", -}; -export async function createArticle(body = createBody) { - const typeCheck = typeConfirm(createBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const response = await instance.post(articles, body); - return response.data; - } catch (error) { - if (!!error) console.error("Create Article Error", error); - } -} - -/** Patch */ -export const patchBody = { - id: 0, - ...createBody, -}; -export async function patchArticle(body = patchBody) { - const typeCheck = typeConfirm(createBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const id = body.id; - delete body.id; - const response = await instance.patch(`${articles}/${id}`, body); - return response.data; - } catch (error) { - if (!!error) console.error("Patch Article Error", error); - } -} - -/** Delete */ -export const deleteBody = { - id: 0, -}; -export async function deleteArticle(body = deleteBody) { - const typeCheck = typeConfirm(deleteBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const response = await instance.delete(`${articles}/${body.id}`); - return response.data; - } catch (error) { - if (!!error) - console.error( - "Delete Article Error", - "\n지울려고 하는 id가 없을 수도 있음" - ); - } -} - -// console.log(await deleteArticle({id:123})) diff --git a/js/form.js b/js/form.js deleted file mode 100644 index ecba9f5d..00000000 --- a/js/form.js +++ /dev/null @@ -1,184 +0,0 @@ -const forms = document.querySelector("#forms"); -const data = forms.dataset.label.split("_"); -const valueCheck = data.reduce((a, c, i) => { - if (i !== data.length - 1) a.push(false); - return a; -}, []); - -const bottom = (btn) => { - return ` -
- -
-
-

간편 로그인하기

-
- - google_login - - - kakao_login - -
-
- `; -}; -const seePwImg = (src) => { - return ``; -}; - -const result = data.reduce((a, c, i) => { - if (i === data.length - 1) { - if (window.location.pathname.includes("login")) { - let btn = bottom({ className: "login_btn", text: "로그인" }); - btn += ` -

- 판다마켓이 처음이신가요? - 회원가입 -

- `; - a += btn; - } else { - let btn = bottom({ className: "signup_btn", text: "회원가입" }); - btn += ` -

- 이미 회원이신가요? - 로그인 -

- `; - - a += btn; - } - } else { - let pwIcon = ""; - let part = `${c}을`; - let type = "text"; - let idName = ""; - switch (c) { - case "이메일": - idName = "email"; - break; - case "비밀번호": - idName = "password"; - break; - } - if (c.indexOf("비밀번호") !== -1) { - pwIcon = ` - - `; - type = "password"; - if (c.indexOf("확인") !== -1) { - part = "비밀번호를 다시 한 번"; - idName = "password2"; - } else part = `${c}를`; - } - a += ` -
- -
- - ${pwIcon} -
-
- `; - } - return a; -}, ""); - -forms.innerHTML = result; -const inputBox = document.querySelectorAll(".inputbox"); -const btn = document.querySelector(".btn"); -const pw = document.querySelector('input[id="password"]'); - -// input event -inputBox.forEach((el, i) => { - const input = el.children[0]; - - // Focus - input.addEventListener("focus", (e) => { - const check = [...el.children] - .map((v) => v.classList.value) - .includes("errMsg"); - if (check) el.lastElementChild.remove(); - el.classList.remove("err"); - el.classList.add("on"); - }); - - // Focus Out - input.addEventListener("blur", (e) => { - const check = [...el.children] - .map((v) => v.classList.value) - .includes("errMsg"); - const target = e.target; - const label = target.parentElement.previousSibling.previousSibling; - let email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i; - if (!!!target.value) { - el.classList.add("err"); - errMsgs(target.dataset.err, el, !check); - valueCheck[i] = false; - } else if ( - !email_regex.test(target.value) && - label.getAttribute("for") === "email" - ) { - errMsgs("잘못된 이메일 형식입니다.", el, !!!label.children.length); - valueCheck[i] = false; - } else if ( - target.value.length < 8 && - label.getAttribute("for") === "password" - ) { - errMsgs("비밀번호를 8자이상 입력해주세요.", el, target.value.length <= 8); - valueCheck[i] = false; - } else if ( - label.getAttribute("for") === "password2" && - pw.value !== target.value - ) { - errMsgs( - "비밀번호가 다릅니다.", - el, - target.value !== document.querySelector("#password").value - ); - valueCheck[i] = false; - } else { - valueCheck[i] = true; - } - - el.classList.remove("on"); - }); - - // Input - input.addEventListener("keyup", (e) => { - const errMsgs = document.querySelectorAll(".errMsg"); - if (!!e.currentTarget.value && !!!errMsgs.length) valueCheck[i] = true; - else valueCheck[i] = false; - if (!valueCheck.includes(false) && pw.value.length >= 8) - btn.classList.add("on"); - else btn.classList.remove("on"); - }); -}); - -function errMsgs(text, el, condition) { - el.classList.add("err"); - const errMsg = document.createElement("p"); - errMsg.classList.add("errMsg"); - errMsg.innerHTML = text; - if (condition) el.append(errMsg); -} - -//see pw -const seePw = document.querySelectorAll(".seePw"); -seePw.forEach((el) => { - // img - el.addEventListener("click", (e) => { - e.preventDefault(); - const target = e.target; - const inputTag = target.parentElement.children[0]; - console.log(target, inputTag); - if (inputTag.type === "password") { - inputTag.type = "text"; - target.classList.add("on"); - } else { - inputTag.type = "password"; - target.classList.remove("on"); - } - }); -}); diff --git a/js/lib.mjs b/js/lib.mjs deleted file mode 100644 index f4183e2e..00000000 --- a/js/lib.mjs +++ /dev/null @@ -1,43 +0,0 @@ -/** type error 인 key 값을 하나씩 잡음 */ -export function typeConfirm(target, compare) { - const arr = []; - for (let key in target) { - let value = compare[key]; - let andCondition = false; - if (!!Number(compare[key])) { - value = Number(compare[key]); - andCondition = typeof compare[key] === typeof target[key]; - } - arr.push({ - key, - type: typeof target[key], - result: typeof target[key] === typeof value || andCondition, - }); - } - const find = arr.find((x) => !x.result); - if (find) { - return { - result: false, - errKey: find.key, - errType: find.type, - message: `type Error: Error key "${find.key}" Error Type "${find.type}"`, - }; - } else - return { - result: true, - }; -} - -const elProps = { - el: "div", - className: "", - text: "", - append: null, -}; -export function addEl(props = elProps) { - const newEl = document.createElement(props.el); - if (!!props.className) newEl.classList.add(props.className); - if (!!props.text) newEl.innerHTML = props.text; - if (!!props.append) props.append.appendChild(newEl); - return newEl; -} diff --git a/js/login.js b/js/login.js deleted file mode 100644 index 49710537..00000000 --- a/js/login.js +++ /dev/null @@ -1,99 +0,0 @@ -import { addEl } from "./lib.mjs"; - -const USER_DATA = [ - { email: "codeit1@codeit.com", password: "codeit101!" }, - { email: "codeit2@codeit.com", password: "codeit202!" }, - { email: "codeit3@codeit.com", password: "codeit303!" }, - { email: "codeit4@codeit.com", password: "codeit404!" }, - { email: "codeit5@codeit.com", password: "codeit505!" }, - { email: "codeit6@codeit.com", password: "codeit606!" }, - { email: "test@test.com", password: "test1234!" }, -]; - -const modal = (text, event) => { - const modalCover = addEl({ - el: "div", - className: "modalCover", - append: document.body, - }); - const modal = addEl({ - el: "div", - className: "modal", - append: modalCover, - }); - const modalText = addEl({ - el: "p", - text, - append: modal, - }); - const modalBtn = addEl({ - el: "button", - text: "확인", - append: modal, - }); - modalBtn.addEventListener("click", (e) => { - e.preventDefault(); - if (event) event(); - else modalCover.remove(); - }); -}; - -// login event -const loginBtn = document.querySelector(".btn"); -const formInput = document.querySelectorAll("#forms input"); -loginBtn.addEventListener("click", (e) => { - e.preventDefault(); - const target = e.target; - let { emailPass, pwPass, pw2Pass } = { - emailPass: false, - pwPass: false, - pw2Pass: false, - }; - - const inputs = [...formInput]; - if (target.classList.value.includes("on")) { - switch (inputs.length) { - case 2: - inputs.map((v, i) => { - USER_DATA.forEach((user) => { - switch (v.id) { - case "email": - if (user.email === v.value) emailPass = true; - break; - case "password": - if (user.password === v.value) pwPass = true; - break; - } - }); - }); - const modalLength = document.querySelectorAll(".modal").length; - if (!emailPass || (!pwPass && modalLength === 0)) { - modal("아이디 또는 비밀번호를 확인해주세요."); - } else if (emailPass && pwPass) { - console.log("로그인 성공!~"); - window.location.href = "/items.html"; - } - - break; - case 4: - inputs.map((v, i) => { - switch (v.id) { - case "email": - const filter = USER_DATA.filter( - (user) => user.email === emailPass - ); - if (!!filter.length) modal("중복된 아이디입니다."); - else emailPass = true; - break; - case "password2": - if (v.value === document.querySelector("#password").value) - pw2Pass = true; - break; - } - }); - if (emailPass && pw2Pass) window.location.href = "./login.html"; - else modal("입력하신 정보를 다시 확인해주세요."); - break; - } - } -}); diff --git a/js/main.js b/js/main.js deleted file mode 100644 index f4106e1f..00000000 --- a/js/main.js +++ /dev/null @@ -1,302 +0,0 @@ -import { - getArticle, - createArticle, - patchArticle, - deleteArticle, - getBody, - createBody, - patchBody, - deleteBody, -} from "./articleService.mjs"; -import { - createProducts, - deleteProducts, - getProducts, - patchProducts, - getProductsBody, - createProductsBody, - patchProductsBody, - deleteProductsBody, -} from "./ProductService.mjs"; -import { addEl } from "./lib.mjs"; - -let overlap = false; -const method = ["Get", "Post", "Patch", "Delete"]; -const apiContainer_Box = document.querySelector("#methodBtn").children; -const insertBox = document.querySelector("#insertBox"); - -[...apiContainer_Box].map((el) => { - const btnArea = el.children[1]; - method.forEach((v) => { - const btn = addEl({ - el: "button", - className: el.className, - text: v, - append: btnArea, - }); - btn.addEventListener("click", async (e) => { - e.preventDefault(); - if (overlap) throw alert("중복방지"); - overlap = true; - const target = e.target.textContent; - let type, ob; - - switch (el.className) { - case "articles": - type = "article"; - switch (target) { - case "Get": - ob = getBody; - break; - case "Post": - ob = createBody; - break; - case "Patch": - ob = patchBody; - break; - case "Delete": - ob = deleteBody; - break; - } - break; - case "products": - type = "products"; - switch (target) { - case "Get": - ob = getProductsBody; - break; - case "Post": - ob = createProductsBody; - break; - case "Patch": - ob = patchProductsBody; - break; - case "Delete": - ob = deleteProductsBody; - break; - } - break; - } - - insertBoxElement(ob, v, type); - overlap = false; - console.log(`${type} ${v}`); - }); - }); -}); - -// insertBox 생성 코드 -function insertBoxElement(object, method, part) { - // reset - insertBox.innerHTML = ""; - // add - const title = addEl({ - el: "h2", - text: `INSERT {${method}}`, - append: insertBox, - }); - const arrTypeText = ",로 배열을 구분합니다"; - - if (object) - for (let key in object) { - const box = addEl({ el: "div", className: key, append: insertBox }); - const label = addEl({ - el: "label", - className: key + "__label", - text: key, - append: box, - }); - const input = addEl({ - el: "input", - className: key + "__input", - append: box, - }); - if (typeof object[key] === "number") input.type = "number"; - let placeholder = - typeof object[key] === "object" ? arrTypeText : typeof object[key]; - input.placeholder = placeholder; - input.dataset.key = key; - } - const submitBtn = addEl({ - el: "button", - className: "submit", - text: "송신", - append: insertBox, - }); - - // 송신 버튼 클릭 이벤트 - submitBtn.addEventListener("click", async (e) => { - e.preventDefault(); - const inputs = document.querySelectorAll("#insertBox input"); - const dataOb = [...inputs].reduce((a, c, i) => { - let value = c.value; - if (c.placeholder === arrTypeText) { - a[c.dataset.key] = value.split(","); - } else if (c.placeholder === "number") { - a[c.dataset.key] = Number(value); - } else { - a[c.dataset.key] = value; - } - // console.log(c.placeholder); - return a; - }, {}); - let result; - switch (part) { - case "article": - switch (method) { - case "Get": - result = await getArticle(dataOb); - break; - case "Post": - result = await createArticle(dataOb); - break; - case "Patch": - result = await patchArticle(dataOb); - break; - case "Delete": - result = await deleteArticle(dataOb); - break; - } - break; - case "products": - switch (method) { - case "Get": - result = await getProducts(dataOb); - break; - case "Post": - result = await createProducts(dataOb); - break; - case "Patch": - result = await patchProducts(dataOb); - break; - case "Delete": - result = await deleteProducts(dataOb); - break; - } - break; - } - if (!!!result && method !== "Delete") alert("정확한 값을 입력해주세요"); - console.log("result", result); - if (result !== undefined) resultElement(result, method, part); - else resultElement([], method); - }); -} - -function resultElement(data, method, part) { - const resultBox = document.querySelector("#resultBox"); - resultBox.innerHTML = ""; - const arrData = !Array.isArray(data) ? new Array(data) : data; - console.log(arrData); - if (arrData.length === 0 && !!!part) { - const errorTitle = addEl({ - el: "h2", - className: "resultTitle", - text: `ERROR 결과`, - append: resultBox, - }); - const box = addEl({ - el: "div", - className: "dataBoxRed", - text: `${method} 실패"`, - append: resultBox, - }); - return; - } - const resultTitle = addEl({ - el: "h2", - className: "resultTitle", - text: `${method} 결과 (${!!arrData.length ? arrData.length : 0})`, - append: resultBox, - }); - - if (method === "Delete") { - const box = addEl({ - el: "div", - className: "dataBox", - text: "Delete 성공", - append: resultBox, - }); - return; - } - // if (!Array.isArray(data)) { - // const box = addEl({ el: "div", className: "dataBox", append: resultBox }); - // const id = addEl({ el: "p", text: `id:${data.id}`, append: box }); - // if (part === "article") { - // const title = addEl({ - // el: "p", - // text: `title:${data.title}`, - // append: box, - // }); - // ImgBox(data.image, box); - // const content = addEl({ - // el: "p", - // text: `content:${data.content}`, - // append: box, - // }); - // } else { - // } - // } else - arrData.map((el) => { - const box = addEl({ el: "div", className: "dataBox", append: resultBox }); - const id = addEl({ el: "p", text: `id:${el.id}`, append: box }); - if (part === "article") { - const title = addEl({ - el: "p", - text: `title:${el.title}`, - append: box, - }); - - ImgBox(el.image, box); - const content = addEl({ - el: "p", - text: `content:${el.content}`, - append: box, - }); - } else { - const tagBox = addEl({ - el: "div", - className: "tagBox", - append: box, - }); - el.tags.map((tag) => { - addEl({ - el: "p", - className: "tag", - text: tag, - append: tagBox, - }); - }); - const name = addEl({ - el: "p", - text: `name:${el.name}`, - append: box, - }); - const description = addEl({ - el: "p", - text: `description:${el.description}`, - append: box, - }); - const price = addEl({ - el: "p", - text: `price:${el.price}`, - append: box, - }); - const manufacturer = addEl({ - el: "p", - text: `manufacturer:${el.manufacturer}`, - append: box, - }); - ImgBox(el.images[0], box); - } - }); -} - -function ImgBox(img, append) { - const imgBox = addEl({ el: "div", className: "imgBox", append }); - const image = addEl({ el: "img", append: imgBox }); - image.src = img; - image.addEventListener("error", (e) => { - e.target.src = - "https://media.istockphoto.com/id/1334645334/video/error-with-glitch-effect-on-screen-error-404-page-not-found-motion-graphics.jpg?s=640x640&k=20&c=UOUyKCEVdOZOZ0t21s1vBlU3FmhLyMtJ6gxLwSmWn7M="; - }); -} diff --git a/js/productService.mjs b/js/productService.mjs deleted file mode 100644 index f4ac5680..00000000 --- a/js/productService.mjs +++ /dev/null @@ -1,114 +0,0 @@ -import { typeConfirm } from "./lib.mjs"; -const { products } = { - products: "/products", -}; -/** instance */ -export const instanceObject = { - baseURL: "https://sprint-mission-api.vercel.app", - headers: { - Authorization: "I can't speak korean", - }, -}; - -// async function fetchs() { -// const response = await fetch("https://sprint-mission-api.vercel.app/products/199", { -// method: "DELETE", -// headers: { -// "Content-Type": "application/json", -// }, -// }); -// console.log(response) -// } -// console.log(await fetchs()); -// 토큰 및 그런 코드 많이봄 -const instance = axios.create(instanceObject); -instance.interceptors.request.use( - (config) => { - console.log("request config", config); - return config; - }, - (error) => { - console.error("request error", error); - } -); - -//상태코드를 많이봄 -instance.interceptors.response.use( - (response) => { - response.statusText = "성공"; - console.log("reponse", response); - return response; - }, - (error) => { - console.error("response error", error); - return Promise.reject(error); - } -); - -/** Get */ -export const getProductsBody = { page: 1, pageSize: 1, keyword: "string" }; -export async function getProducts(body = getProductsBody) { - const typeCheck = typeConfirm(getProductsBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const url = `${products}?page=${body.page}&pageSize=${body.pageSize}&keyword=${body.keyword}`; - const response = await instance.get(url); - return response.data; - } catch (error) { - if (!!error) console.error("Get Products Error", error); - } -} - -/** Create */ -export const createProductsBody = { - name: "string", - description: "string", - price: 0, - manufacturer: "string", - tags: ["string"], - images: ["string"], -}; -export async function createProducts(body = createProductsBody) { - const typeCheck = typeConfirm(createProductsBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const response = await instance.post(products, body); - return response.data; - } catch (error) { - if (!!error) console.error("Create Products Error", error); - } -} -console.log(await createProducts(createProductsBody)) - -/** Patch */ -export const patchProductsBody = { - id: 0, - ...createProductsBody, -}; -export async function patchProducts(body = patchProductsBody) { - const typeCheck = typeConfirm(patchProductsBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const id = body.id; - delete body.id; - const response = await instance.patch(`${products}/${id}`, body); - return response.data; - } catch (error) { - if (!!error) console.error("Patch Products Error", error); - } -} - -/** Delete */ -export const deleteProductsBody = { - id: 0, -}; -export async function deleteProducts(body = deleteProductsBody) { - const typeCheck = typeConfirm(deleteProductsBody, body); - try { - if (!typeCheck.result) throw console.error(typeCheck.message); - const response = await instance.delete(`${products}/${body.id}`); - return response.data; - } catch (error) { - if (!!error) console.error("Delete Products Error", error); - } -} diff --git a/login.html b/login.html deleted file mode 100644 index 83443f20..00000000 --- a/login.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - login - - - - - -
-
- -
-
-
- - - - diff --git a/market/public/img/ic_sort.png b/market/public/img/ic_sort.png new file mode 100644 index 00000000..535f9ffb Binary files /dev/null and b/market/public/img/ic_sort.png differ diff --git a/market/src/api/instance.js b/market/src/api/instance.js index 503e36ae..0e1646d2 100644 --- a/market/src/api/instance.js +++ b/market/src/api/instance.js @@ -1,6 +1,7 @@ import axios from "axios"; const instance = await axios.create({ // baseURL: "https://panda-market-api.vercel.app/", - baseURL: "http://localhost:8000/", + // baseURL: "http://localhost:8000/", + baseURL: "https://three-sprint-mission-fe-1.onrender.com", }); export default instance; diff --git a/market/src/css/app.css b/market/src/css/app.css index a7eeb6db..3d701682 100644 --- a/market/src/css/app.css +++ b/market/src/css/app.css @@ -255,6 +255,16 @@ footer .content .icon { footer .content .icon img { width: 20px; } +.sortIcon { + position: relative; +} +.sortIcon img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: none; +} @media screen and (max-width: 1199px) { header { @@ -288,6 +298,15 @@ footer .content .icon img { } @media screen and (max-width: 743px) { + select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } + .sortIcon img { + display: block; + z-index: -1; + } header .gnb { max-width: 743x; } @@ -321,6 +340,12 @@ footer .content .icon img { width: 42px; border-radius: 12px; border: 1px solid #e5e7eb; + background-color: transparent; + color: transparent; + padding: 0; + } + .marketSection .titleLine .marketEtc select option { + color: black; } .marketSection ul li, .marketSection ul li:nth-of-type(5n) { @@ -329,4 +354,17 @@ footer .content .icon img { .marketSection ul li:nth-of-type(2n) { margin-right: 0; } + footer .content { + flex-wrap: wrap; + } + footer .content .link { + width: 50%; + } + footer .content .icon { + width: 116px; + } + footer p { + width: 100%; + order: 3; + } } diff --git a/market/src/pages/home.jsx b/market/src/pages/home.jsx index 13295b71..11507599 100644 --- a/market/src/pages/home.jsx +++ b/market/src/pages/home.jsx @@ -2,9 +2,9 @@ import "../css/home.css"; export default function Home() { return (
-
-
-
+
+
+

일상의 모든 물건을
거래해 보세요 @@ -33,9 +33,9 @@ export default function Home() { p={["어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요"]} img={"./img/Img_home_03.png"} /> -
-
-
+
+
+

믿을 수 있는
판다마켓 중고 거래 @@ -51,10 +51,10 @@ export default function Home() { function HomeSection({ h4, h2, p, img, left }) { left = left ? "left" : ""; return ( -
-
+
+
{!!!left ? {h4} : null} -
+

{h4}

diff --git a/market/src/pages/items.jsx b/market/src/pages/items.jsx index fdcbacdc..306f9c0d 100644 --- a/market/src/pages/items.jsx +++ b/market/src/pages/items.jsx @@ -23,6 +23,7 @@ export default function UsedMarket() { const pageNavi = usePageNavi(1, 5); const searchHandle = useChange(); const searchRef = useRef(null); + const windowSize = useScreenSize(); function GetItems(page, pageSize, orderBy, keyword) { productsGet(page, pageSize, orderBy, keyword) @@ -34,6 +35,52 @@ export default function UsedMarket() { }) .catch((err) => console.error(err)); } + useEffect(() => { + window.addEventListener("load", () => { + switch (true) { + case window.innerWidth < 1200 && window.innerWidth >= 744: + setTimeout(() => { + GetItems(1, 6, arrType, keyword); + setSellItemSize("221px"); + setSellLimit(6); + }, 50); + break; + case window.innerWidth < 744: + setTimeout(() => { + GetItems(1, 4, arrType, keyword); + setSellItemSize("168px"); + setSellLimit(4); + }, 50); + break; + default: + setTimeout(() => { + setSellItemSize("220px"); + }, 50); + break; + } + }); + }, []); + + useEffect(() => { + switch (true) { + case windowSize < 1200 && windowSize >= 744: + sellProduct.setLength(6); + setSellLimit(6); + setSellItemSize("221px"); + break; + case windowSize < 744: + sellProduct.setLength(4); + setSellItemSize("168px"); + setSellLimit(4); + break; + default: + sellProduct.setLength(10); + setSellLimit(10); + setSellItemSize("220px"); + break; + } + }, [windowSize]); + useEffect(() => { GetItems(onTarget, sellLimit, arrType, searchHandle.value); }, [onTarget]); @@ -94,12 +141,15 @@ export default function UsedMarket() { />

상품등록하기 - +
+ + +
- - - - - privacy - - - 개인정보 - - \ No newline at end of file diff --git a/server/routes/product/controller.js b/server/routes/product/controller.js index fa91f330..1e2adf91 100644 --- a/server/routes/product/controller.js +++ b/server/routes/product/controller.js @@ -4,7 +4,7 @@ import service from "./service.js"; const router = express.Router(); router.get("/", service.Items); router.post("/create", service.Create); -router.patch("/edit", service.Patch); -router.delete("/delete", service.Delete); +router.patch("/edit/:id", service.Patch); +router.delete("/delete/:id", service.Delete); export default router; diff --git a/server/routes/product/service.js b/server/routes/product/service.js index 4dc503fb..98d63fb3 100644 --- a/server/routes/product/service.js +++ b/server/routes/product/service.js @@ -9,10 +9,11 @@ const Items = async (req, res) => { orderBy = { createdAt: -1 }; break; case "favorite": - orderBy = {}; + orderBy = { favorite: -1 }; break; default: orderBy = { createdAt: -1 }; + break; } let body = {}; if (!!query.keyword) { @@ -38,6 +39,20 @@ const Items = async (req, res) => { console.error(error); } }; + +const ItemOne = async (req, res) => { + let body = req.body; + try { + const id = await Product.findById(); + const item = await Product.findOne(); + res.status(200).send({ + success: true, + data: item, + }); + } catch (error) { + console.error(error); + } +}; const Create = async (req, res) => { const body = { ...req.body, favorite: 0 }; try { @@ -50,13 +65,32 @@ const Create = async (req, res) => { } }; const Patch = async (req, res) => { + const id = req.params.id; try { + const result = await Product.updateOne( + { + id, + }, + { $set: req.bdoy } + ); + res.status(203).send({ + success: true, + msg: result.length > 0 ? "업데이트 성공" : "업데이트할 문서 없음", + }); } catch (error) { console.error(error); } }; const Delete = async (req, res) => { + const id = req.params.id; try { + const deleteInfo = await Product.deleteOne({ + id, + }); + res.status(204).send({ + success: true, + deleteInfo, + }); } catch (error) { console.error(error); } @@ -64,6 +98,7 @@ const Delete = async (req, res) => { const service = { Create, Items, + ItemOne, Patch, Delete, }; diff --git a/signup.html b/signup.html deleted file mode 100644 index 035bc417..00000000 --- a/signup.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - 회원가입 - - - - - -
-
- -
-
-
- - - -