- 
+ 
diff --git a/src/Components/App/Loading.js b/src/Components/App/Loading.js
index ca6af766d..1174f4580 100644
--- a/src/Components/App/Loading.js
+++ b/src/Components/App/Loading.js
@@ -1,5 +1,5 @@
-import styles from "../../Styles/App/Loading.module.css";
import React from "react";
+import styles from "../../styles/app/loading.module.css";
export const Loading = () => {
return (
diff --git a/src/Components/App/Pagination.js b/src/Components/App/Pagination.js
index a430c1d15..b8d6e1f12 100644
--- a/src/Components/App/Pagination.js
+++ b/src/Components/App/Pagination.js
@@ -1,16 +1,28 @@
-import styles from "../../Styles/App/Pagination.module.css";
-import arrowPrevImg from "../../Assets/images/app/pagination/arrow_left.svg";
-import arrowNextImg from "../../Assets/images/app/pagination/arrow_right.svg";
+import { calculatePagination } from "../../utils/calculatorPagination";
+import styles from "../../styles/app/pagination.module.css";
+import arrowPrevImg from "../../assets/images/app/pagination/arrow_left.svg";
+import arrowNextImg from "../../assets/images/app/pagination/arrow_right.svg";
function PaginationContainer({ page, setPage, pageCount, isDataCount }) {
const itemCountPerPage = Math.ceil(pageCount / isDataCount); // 페이지 당 보여줄 데이터 개수
- const btnPage = 5; // 한 페이지당 pagination 5개 출력
- const currentSet = Math.ceil(page / btnPage);
- const totalPages = Math.ceil(pageCount / isDataCount);
+ const ITEMS_PER_PAGINATION = 5; // 한 페이지당 pagination 5개 출력
+
+ const { totalPages, currentSet, startPage, endPage } = calculatePagination({
+ page,
+ pageCount,
+ isDataCount,
+ ITEMS_PER_PAGINATION,
+ });
+
const noPrev = page === 1;
const noNext = page + itemCountPerPage - 1 >= totalPages;
- const startPage = (currentSet - 1) * btnPage + 1;
- const endPage = Math.min(startPage + btnPage - 1, totalPages);
+
+ function generatePageNumbers(startPage, endPage) {
+ return Array.from(
+ { length: endPage - startPage + 1 },
+ (_, i) => startPage + i
+ );
+ }
return (
판다마켓
-
@@ -22,18 +34,16 @@ function PaginationContainer({ page, setPage, pageCount, isDataCount }) {
- setPage(startPage + i)} + key={pageNumber} + className={`${styles.page} ${page === pageNumber && styles.active}`} + onClick={() => setPage(pageNumber)} > - {startPage + i} + {pageNumber} ))} - {currentSet < Math.ceil(totalPages / btnPage) && ( + {currentSet < Math.ceil(totalPages / ITEMS_PER_PAGINATION) && (
- setPage(endPage + 1)}
diff --git a/src/Components/Login/LoginForm.js b/src/Components/Login/LoginForm.js
index fa6fe7a31..cec1d8301 100644
--- a/src/Components/Login/LoginForm.js
+++ b/src/Components/Login/LoginForm.js
@@ -1,12 +1,12 @@
import { Link } from "react-router-dom";
import { useEffect, useState } from "react";
-import EmailValidation from "../App/EmailValidation";
-import styles from "../../Styles/loginRegistration/loginRegistration.module.css";
-import LogoImg from "../../Assets/images/loginRegistration/login_logo.png";
-import GoogleImg from "../../Assets/images/loginRegistration/google.svg";
-import KaKaoImg from "../../Assets/images/loginRegistration/kakao.svg";
-import InVisibleImg from "../../Assets/images/loginRegistration/btn_invisible.svg";
-import VisibleImg from "../../Assets/images/loginRegistration/btn_visible.svg";
+import styles from "../../styles/loginRegistration/loginRegistration.module.css";
+import logoImg from "../../assets/images/loginRegistration/login_logo.png";
+import googleImg from "../../assets/images/loginRegistration/google.svg";
+import kaKaoImg from "../../assets/images/loginRegistration/kakao.svg";
+import inVisibleImg from "../../assets/images/loginRegistration/btn_invisible.svg";
+import visibleImg from "../../assets/images/loginRegistration/btn_visible.svg";
+import emailValidation from "../../utils/emailValidation";
function LoginForm() {
const [getId, setGetId] = useState("");
@@ -55,10 +55,10 @@ function LoginForm() {
if (isEmail === "") {
emailErrorContext("이메일을 입력해주세요", true);
setEmailErrorChk(true);
- } else if (isEmail !== "" && !EmailValidation(isEmail)) {
+ } else if (isEmail !== "" && !emailValidation(isEmail)) {
emailErrorContext("잘못된 이메일 형식입니다", true);
setEmailErrorChk(true);
- } else if (EmailValidation(isEmail)) {
+ } else if (emailValidation(isEmail)) {
emailErrorContext("", false);
setEmailErrorChk(false);
}
@@ -93,7 +93,7 @@ function LoginForm() {
diff --git a/src/Components/ProductDetail/InquiryRegister.js b/src/Components/ProductDetail/InquiryRegister.js new file mode 100644 index 000000000..60c5a5b3a --- /dev/null +++ b/src/Components/ProductDetail/InquiryRegister.js @@ -0,0 +1,172 @@ +import { format, register } from "timeago.js"; +import { useEffect, useRef, useState } from "react"; +import { Link } from "react-router-dom"; +import koLocale from "timeago.js/lib/lang/ko"; +import styles from "../../styles/productDetail/productDetail.module.css"; +import { SelectBox, SelectButton } from "../../styles/productDetail/SelectBox"; +import optionMenuImg from "../../assets/images/productDetail/option_menu.svg"; +import profileDefaultImg from "../../assets/images/productDetail/default_profile.svg"; +import btnBackImg from "../../assets/images/app/button/btn_back.svg"; +import emptyCommentImg from "../../assets/images/productDetail/empty_comment.svg"; + +register("ko", koLocale); + +function EmptyPlaceholder() { + return ( +-@@ -135,7 +135,7 @@ function LoginForm() { onClick={handlePasswordVisible} >
+
판다마켓
@@ -158,7 +158,7 @@ function LoginForm() {
window.open("https://www.google.com")}> -+
@@ -167,7 +167,7 @@ function LoginForm() { window.open("https://www.kakaocorp.com/page/") } > -+
++ ); +} + +function CommentEditUI({ setEditOpen, setActiveIndex }) { + return ( ++
+ + ++ ); +} + +function InquiryRegister({ commentsData, setComment }) { + const { list, nextCursor } = commentsData; + const [showSelect, setShowSelect] = useState(); + const [showEdit, setShowEdit] = useState(); + const [commentValue, setCommentValue] = useState(); + const [submit, setSubmit] = useState(false); + const outRef = useRef(null); + + const handleProfileError = (e) => { + e.target.src = profileDefaultImg; + }; + + useEffect(() => { + const handleClickOutside = (event) => { + // 해당 이벤트가 영역 밖이라면 셀렉트 비활성화 + if (outRef.current && !outRef.current.contains(event.target)) { + setShowSelect(null); + } + }; + window.addEventListener("mouseup", handleClickOutside, true); + return () => { + window.removeEventListener("mouseup", handleClickOutside, true); + }; + }, []); + + // 로그인 기능 구현 전이므로 코멘트 API POST 구현 보류 (24.12.08) + // const handleGetComment = (e) => { + // if (e.target.value) { + // setSubmit(true); + // setCommentValue(e.target.value); + // } else { + // setSubmit(false); + // } + // }; + + // const onSubmit = (e) => { + // e.preventDefault(); + // setComment(commentValue); + // setCommentValue(""); + // }; + + return ( +++ ); +} + +export default InquiryRegister; diff --git a/src/Components/ProductDetail/ProductDetail.js b/src/Components/ProductDetail/ProductDetail.js new file mode 100644 index 000000000..64347c026 --- /dev/null +++ b/src/Components/ProductDetail/ProductDetail.js @@ -0,0 +1,106 @@ +import styles from "../../styles/productDetail/productDetail.module.css"; +import productDefaultImg from "../../assets/images/app/common/no_img.jpg"; +import profileDefaultImg from "../../assets/images/productDetail/default_profile.svg"; +import favoriteImg from "../../assets/images/productDetail/favorite.svg"; +import optionMenuImg from "../../assets/images/productDetail/option_menu.svg"; +import { useEffect, useRef, useState } from "react"; +import { SelectBox, SelectButton } from "../../styles/productDetail/SelectBox"; + +function ProductDetail({ productData }) { + const formattedPrice = Number(productData.price).toLocaleString(); + const formattedDate = String(productData.createdAt).slice(0, 10); + + const [selectBox, setSelectBox] = useState(false); + const outRef = useRef(null); + + const handleImgError = (e) => { + e.target.src = productDefaultImg; + }; + + const handleOptionClick = () => { + selectBox ? setSelectBox(false) : setSelectBox(true); + }; + + useEffect(() => { + const handleClickOutside = (event) => { + // 해당 이벤트가 영역 밖이라면 케밥 버튼 비활성화 + if (outRef.current && !outRef.current.contains(event.target)) { + setSelectBox(false); + } + }; + + document.addEventListener("click", handleClickOutside, true); + return () => { + document.removeEventListener("click", handleClickOutside, true); + }; + }, [handleOptionClick]); + + return ( ++ + {/* length 속성을 읽을 수 없다는 오류가 발생되어 Optional Chaining 연산자 사용 */} + {list?.length === 0 &&+} + -
+ {list &&
+ list.map((comment, i) => {
+ const { writer } = comment;
+ return (
+
-
+ + {showEdit === i ? ( + <> + ++
+ + ) : ( + <> + {comment.content}
+++ + )} +setShowSelect(i)} + /> + {showSelect === i && ( + <> +
+ + + )} +setShowEdit(i)} + ref={outRef} + > + 수정하기 + +삭제하기 ++++++
++{writer.nickname}
++ {format(comment.updatedAt, "ko")} +
+
+ );
+ })}
+
+ + + ++++ ); +} + +export default ProductDetail; diff --git a/src/Components/ProductList/BestItem.js b/src/Components/ProductList/BestItem.js index 5e809c5d8..a2dccce5b 100644 --- a/src/Components/ProductList/BestItem.js +++ b/src/Components/ProductList/BestItem.js @@ -1,17 +1,15 @@ import { useState } from "react"; -import defaultImg from "../../Assets/images/app/common/no_img.jpg"; -import btnWish from "../../Assets/images/productList/btn_wish.png"; -import styles from "../../Styles/ProductList/ProductList.module.css"; -import RecentFilter from "./RecentFilter"; +import styles from "../../styles/productList/productList.module.css"; +import productDefaultImg from "../../assets/images/app/common/no_img.jpg"; +import btnWishImg from "../../assets/images/productList/btn_wish.png"; function BestItem({ item }) { const [loaded, setLoaded] = useState(false); const handleImgError = (e) => { - e.target.src = defaultImg; + e.target.src = productDefaultImg; }; - const formattedPrice = item.price - .toString() - .replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedPrice = item.price.toLocaleString(); + return ( <>+++++
++++++{productData.name}
+{formattedPrice}원
++++ + )} +수정하기 +삭제하기 +++상품 소개
+{productData.description}
+++상품 태그
+-
+ {productData.tags &&
+ productData.tags.map((tag, i) => {
+ return (
+
- + #{tag} + + ); + })} +
+++++++
++{productData.ownerNickname}
+{formattedDate}
++++
{productData.favoriteCount}
+@@ -27,7 +25,7 @@ function BestItem({ item }) {@@ -35,25 +33,4 @@ function BestItem({ item }) { ); } -function BestItemsList() { - const [productList, setProductList] = useState([]); - return ( - <> -{item.name}
{formattedPrice}
-+
{item.favoriteCount}
- -- - ); -} - -export { BestItemsList }; +export default BestItem; diff --git a/src/Components/ProductList/BestItemsList.js b/src/Components/ProductList/BestItemsList.js new file mode 100644 index 000000000..23716b3ce --- /dev/null +++ b/src/Components/ProductList/BestItemsList.js @@ -0,0 +1,33 @@ +import { useState } from "react"; +import styles from "../../styles/productList/productList.module.css"; +import BestListFilter from "./BestListFilter"; +import BestItem from "./BestItem"; +import { Link } from "react-router-dom"; + +function BestItemsList() { + const [productList, setProductList] = useState([]); + return ( + <> +베스트 상품
--
- {productList.map((item) => {
- return (
-
-
-
-
- );
- })}
-
+ ++ + ); +} + +export { BestItemsList }; diff --git a/src/Components/ProductList/RecentFilter.js b/src/Components/ProductList/BestListFilter.js similarity index 59% rename from src/Components/ProductList/RecentFilter.js rename to src/Components/ProductList/BestListFilter.js index 493c8d45e..b1dd1c523 100644 --- a/src/Components/ProductList/RecentFilter.js +++ b/src/Components/ProductList/BestListFilter.js @@ -1,19 +1,17 @@ import { useState, useEffect } from "react"; import getProductData from "../../Api/api"; -import { useMediaQuery } from "react-responsive"; +import CalculatorMediaQuery from "../../utils/calculatormediaQuery"; + +function BestListFilter({ setProductList }) { + const { isTablet, isMobile } = CalculatorMediaQuery(); + const [isResponsive, setIsResponsive] = useState(window.innerWidth); + const [isItemCount, setIsItemCount] = useState( + isMobile ? 1 : isTablet ? 2 : 4 + ); -function RecentFilter({ setProductList }) { - const isTablet = useMediaQuery({ - query: "(max-width: 1200px)", - }); - const isMobile = useMediaQuery({ - query: "(max-width: 768px)", - }); const [orderBy, setOrderby] = useState("favorite"); - const [search, setSearch] = useState(""); const [page, setPage] = useState(1); - const [isWidth, setIsWidth] = useState(isMobile ? 1 : isTablet ? 2 : 4); - const [isResponsive, setIsResponsive] = useState(window.innerWidth); + const [keyword, setKeyword] = useState(""); const handleLoad = async (options) => { try { @@ -27,7 +25,11 @@ function RecentFilter({ setProductList }) { useEffect(() => { const handleResize = () => { setIsResponsive(window.innerWidth); - isMobile ? setIsWidth(1) : isTablet ? setIsWidth(2) : setIsWidth(4); + isMobile + ? setIsItemCount(1) + : isTablet + ? setIsItemCount(2) + : setIsItemCount(4); }; window.addEventListener("resize", handleResize); return () => { @@ -38,12 +40,12 @@ function RecentFilter({ setProductList }) { useEffect(() => { handleLoad({ - orderBy, - pageSize: isWidth, - search, page, + orderBy, + pageSize: isItemCount, + keyword, }); - }, [orderBy, search, page, isWidth]); + }, [orderBy, keyword, page, isItemCount]); } -export default RecentFilter; +export default BestListFilter; diff --git a/src/Components/ProductList/GeneralItem.js b/src/Components/ProductList/GeneralItem.js index 0d9cd0e2d..5262902bc 100644 --- a/src/Components/ProductList/GeneralItem.js +++ b/src/Components/ProductList/GeneralItem.js @@ -1,16 +1,14 @@ import { useState } from "react"; -import defaultImg from "../../Assets/images/app/common/no_img.jpg"; -import btnWish from "../../Assets/images/productList/btn_wish.png"; -import styles from "../../Styles/ProductList/ProductList.module.css"; -import notFoundImg from "../../Assets/images/productList/not_found.png"; -import ProductSearchForm from "./SearchForm"; +import styles from "../../styles/productList/productList.module.css"; +import productDefaultImg from "../../assets/images/app/common/no_img.jpg"; +import btnWishImg from "../../assets/images/productList/btn_wish.png"; function GeneralItem({ item }) { const [loaded, setLoaded] = useState(false); const handleImgError = (e) => { - e.target.src = defaultImg; + e.target.src = productDefaultImg; }; - const priceNum = item.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const formattedPrice = item.price.toLocaleString(); return ( <>베스트 상품
+-
+ {productList.map((item) => {
+ return (
+
-
+
+
+ +
+ );
+ })}
+
@@ -24,9 +22,9 @@ function GeneralItem({ item }) {@@ -34,43 +32,4 @@ function GeneralItem({ item }) { ); } -function GeneralItemsList({ - page, - setPage, - pageCount, - setPageCount, - setIsDataCount, -}) { - const [productContainer, setProductContainer] = useState([]); - return ( -{item.name}
-{priceNum}원
+{formattedPrice}원
-{item.favoriteCount}
-- ); -} - -export default GeneralItemsList; +export default GeneralItem; diff --git a/src/Components/ProductList/GeneralItemsList.js b/src/Components/ProductList/GeneralItemsList.js new file mode 100644 index 000000000..38f9a848b --- /dev/null +++ b/src/Components/ProductList/GeneralItemsList.js @@ -0,0 +1,52 @@ +import { useState } from "react"; +import styles from "../../styles/productList/productList.module.css"; +import notFoundImg from "../../assets/images/productList/not_found.png"; +import GeneralSearchForm from "./GeneralSearchForm"; +import GeneralItem from "./GeneralItem"; +import { Link } from "react-router-dom"; + +function EmptyPlaceholder() { + return ( +- -
- {productContainer.length !== 0 ? (
- productContainer.map((item) => {
- return (
-
-
-
-
- );
- })
- ) : (
-
-- )} --
검색하신 상품을 찾을 수 없습니다
-++ ); +} + +function GeneralItemsList({ + page, + setPage, + pageCount, + setPageCount, + setIsDataCount, +}) { + const [productContainer, setProductContainer] = useState([]); + return ( +검색하신 상품을 찾을 수 없습니다
+++ ); +} + +export default GeneralItemsList; diff --git a/src/Components/ProductList/SearchForm.js b/src/Components/ProductList/GeneralSearchForm.js similarity index 72% rename from src/Components/ProductList/SearchForm.js rename to src/Components/ProductList/GeneralSearchForm.js index b6b4b69ba..3c5bf8d8c 100644 --- a/src/Components/ProductList/SearchForm.js +++ b/src/Components/ProductList/GeneralSearchForm.js @@ -1,31 +1,33 @@ -import arrowDown from "../../Assets/images/productList/select_down.svg"; -import productSearch from "../../Assets/images/productList/pd_search.png"; -import styles from "../../Styles/ProductList/ProductList.module.css"; -import getProductData from "../../Api/api"; -import { Link } from "react-router-dom"; import { useState, useEffect } from "react"; -import { useMediaQuery } from "react-responsive"; +import { Link } from "react-router-dom"; +import styles from "../../styles/productList/productList.module.css"; +import arrowDownImg from "../../assets/images/productList/select_down.svg"; +import productSearchImg from "../../assets/images/productList/pd_search.png"; +import getProductData from "../../Api/api"; +import CalculatorMediaQuery from "../../utils/calculatormediaQuery"; -function ProductSearchForm({ +function GeneralSearchForm({ setProductContainer, page, setPage, setPageCount, setIsDataCount, }) { - const isTablet = useMediaQuery({ - query: "(max-width: 1200px)", - }); - const isMobile = useMediaQuery({ - query: "(max-width: 768px)", - }); - const [toggle, setToggle] = useState(true); - const [filter, setFilter] = useState("최신순"); - const [orderBy, setOrderBy] = useState("recent"); - const [search, setSearch] = useState(""); - const [isWidth, setIsWidth] = useState(isMobile ? 4 : isTablet ? 6 : 10); + const { isTablet, isMobile } = CalculatorMediaQuery(); const [isResponsive, setIsResponsive] = useState(window.innerWidth); - setIsDataCount(isWidth); + const [isItemCount, setIsItemCount] = useState( + isMobile ? 4 : isTablet ? 6 : 10 + ); + + const [orderBy, setOrderBy] = useState("recent"); + const [keyword, setKeyword] = useState(""); + const [filter, setFilter] = useState("최신순"); + const [toggle, setToggle] = useState(true); + + // 첫 렌더링 시 현재 유저의 디바이스 크기를 계산해 페이지네이션 출력 + useEffect(() => { + setIsDataCount(isItemCount); + }, []); const handleFilterToggle = () => { toggle ? setToggle(false) : setToggle(true); @@ -60,10 +62,14 @@ function ProductSearchForm({ useEffect(() => { const handleResize = () => { setIsResponsive(window.innerWidth); - isMobile ? setIsWidth(4) : isTablet ? setIsWidth(6) : setIsWidth(10); + isMobile + ? setIsItemCount(4) + : isTablet + ? setIsItemCount(6) + : setIsItemCount(10); + setIsDataCount(isItemCount); // 페이지 창 크기 조절 시 pagination 1로 초기화(추후 불필요하단 판단 시 아래 코드만 삭제) setPage(1); - setIsDataCount(isWidth); }; window.addEventListener("resize", handleResize); return () => { @@ -74,16 +80,16 @@ function ProductSearchForm({ useEffect(() => { handleLoad({ - orderBy, - pageSize: isWidth, - search, page, + orderBy, + pageSize: isItemCount, + keyword: keyword, }); - }, [orderBy, search, page, isWidth]); + }, [orderBy, keyword, page, isItemCount]); const handleSearch = (e) => { e.preventDefault(); - setSearch(e.target.value); + setKeyword(e.target.value); setPage(1); }; return ( @@ -94,14 +100,14 @@ function ProductSearchForm({+ -
+ {productContainer.length === 0 &&
-
+
+
+ +
+ );
+ })}
+
} + {productContainer.length > 0 && + productContainer.map((item) => { + return ( + -
+