doridori-samsam/hodu-open-market

💚호두 오픈마켓

📌 2022.09 - 2022.10
📌 호두마켓 배포 URL : https://hodumarket.netlify.app/

📄개요

호두마켓은 누구나 자유롭게 상품을 게시하여 판매하고 구매할 수 있는 오픈마켓 서비스입니다.

회원은 판매자/구매자 유형으로 나뉘며 판매자는 상품 정보를 게시,수정,삭제 할 수 있습니다.

구매자는 원하는 상품을 원하는 수량만큼 장바구니에 담거나 바로 구매를 할 수 있습니다.

⚙기술 및 개발환경

[기술]

📌 BackEnd : 제공된 API 사용
📌 Daum Postcode Service API 사용
📌 Version :

react : "18.2.0"
react-router-dom : "6.3.0"
axios: "0.27.2",
react-daum-postcode: "3.1.1"
react-intersection-observer: "9.4.0"
react-query: "3.39.2"
tailwindcss: "3.1.8"
vite: "3.0.7"

[개발환경]

🎨구현 기능

• 🔐 계정

  • 로그인/로그아웃
  • 구매자 / 판매자 회원가입
  • 유효성 검증
  • 토큰 검증

• 🏠 홈

  • 상품 검색
  • 상품 목록
  • 무한 스크롤

• 🎁 상품

  • 상품 상세 페이지
  • 상품 수량 선택
  • 장바구니 상품 담기
  • 상품 주문 및 결제
  • 상품 재고 유효 검사

• 🛒 장바구니

  • 장바구니에 담긴 상품 목록 확인
  • 상품 수량 수정 및 상품 삭제
  • 상품 개별 / 전체 선택
  • 선택된 상품의 총 할인 / 배송비 / 상품가격 확인
  • 선택된 상품 혹은 개별 주문

• 👨‍🌾 판매자 센터

  • 상품 등록 및 삭제
  • 등록된 상품 수정

• ETC

  • 모바일 유저를 위한 반응형 디자인 구현
  • api 데이터 로딩 중 로딩 스피너 화면 구현

✨코드 포인트

✔ react-query useQueries로 promise all 구현

hodu-open-market/src/pages/myCart/MyCart.jsx

Lines 26 to 63 in b53b800

	const { data, status } = useQuery(["cart-list", token], getCartList, {
	cacheTime: 1000000,
	onSuccess: (data) => {
	setIsAllChecked(true);
	let checkObj = data.reduce((newObj, idx) => {
	newObj["check" + data.indexOf(idx)] = true;
	return newObj;
	}, {});
	setCheckList(checkObj);
	},
	});
	const listDetails = useQueries(
	!!data
	? data.map((item) => {
	return {
	queryKey: ["info", item.product_id],
	queryFn: () => getDetails(item.product_id),
	cacheTime: 1000000,
	};
	})
	: []
	);
	/**장바구니 목록 가져오기 */
	async function getCartList() {
	const res = await axios.get(url + "cart/", {
	headers: { Authorization: `JWT ${token}` },
	});
	return res.data.results;
	}
	/**장바구니 리스트에서 뽑은 product_id로 상품 상세정보 가져오기 */
	async function getDetails(id) {
	const res = await axios.get(url + "products/" + id + "/");
	return res.data;
	}
	const loadingFinishAll = listDetails.every((item) => item.isSuccess);

구매자가 장바구니에 담은 상품목록을 불러온 후,
상품 이름, 상품 가격, 배송비, 판매자 이름, 이미지 정보를 받아오기 위해 장바구니 상품목록의 상품 id로 다시 한번 상품 정보를 가져왔습니다.
이 때 아래와 같이 promise all을 사용할 수 있습니다.

  async function getCartList() {
    try {
      const res = await axios.get(url + "cart/", {
        headers: { Authorization: `JWT ${token}` }
      });
      const items = res.data.results.map((item, idx) =>
        axios.get(url + "products/" + item.product_id + "/")
      );
      const itemsArr = await Promise.all(items);
    } catch (err) {
      console.errir(err);
    }
  }

이처럼 Promise.all을 구현하기 위해 react-query의 useQueries 훅을 동적으로 사용하였습니다.

---

✔ prefetch로 cached된 data 사용으로 성능 향상

hodu-open-market/src/pages/home/Products.jsx

Lines 27 to 57 in 3d59cf8

	async function getProduct(pageParam) {
	const res = await axios.get(url + "products/?page=" + pageParam);
	const result = res.data;
	setDataLength(Math.ceil(result.count / 15));
	return {
	result: result.results,
	nextPage: pageParam + 1,
	isLast: !res.data.next,
	};
	}
	useEffect(() => {
	if (inView && hasNextPage) {
	fetchNextPage();
	}
	}, [inView, hasNextPage]);
	/**모든 상품 목록 prefetch */
	useEffect(() => {
	for (let i = 1; i < dataLength + 1; i++) {
	queryClient.prefetchQuery(["allItems", `Arr${i}`], () => getAllItems(i), {
	staleTime: Infinity,
	cacheTime: 86000000,
	});
	}
	}, [dataLength]);
	async function getAllItems(i) {
	const res = await axios.get(url + "products/?page=" + i);
	return res.data.results;
	}

홈페이지에서 first page 상품 api 데이터에서 상품의 총 개수를 한번에 불러와지는 상품목록 개수(15)로 나누고 올림해줍니다. 이를 dataLength에 할당합니다. 그리고 dataLength 만큼 for 반복문으로 queryClient.prefetchQuery훅을 사용합니다. prefetch된 모든 상품의 데이터는 cached되어 상품 검색시에 사용됩니다.

---

✔ 장바구니에 상품 추가 시 cache된 data사용 하여 성능향상

hodu-open-market/src/pages/productDetail/ProductOverview.jsx

Lines 23 to 49 in 9786c51

	const cartData = queryClient.getQueryData(["cart-list", token]);
	const addToCart = useMutation(clickAddToCart, {
	onSuccess: (res) => {
	setIsAddCartModalOpen(true);
	setIsItemExist(
	data.some((item) => item.cart_item_id === res.data.cart_item_id)
	);
	queryClient.invalidateQueries("cart-list", "info");
	},
	onError: (error) => {
	console.error(error);
	},
	});
	/**장바구니 페이지를 방문한 적이 있으면 data fetch X */
	const { data, status } = useQuery(["cart-list", token], getCartList, {
	enabled: !cartData,
	});
	async function getCartList() {
	if (userType === "BUYER") {
	const res = await axios.get(url + "cart/", {
	headers: { Authorization: `JWT ${token}` },
	});
	return res.data.results;
	}
	}

구매자가 장바구니에 상품 추가 시, 장바구니에 해당 상품이 기존에 존재하는지 검증하기 위해 사용자 장바구니 데이터를 불러옵니다. 이 때, 사용자가 장바구니 페이지를 이미 방문한 적이 있으면 data를 fetch 하지 않고, useQueryClient훅을 사용하여 getQueryData로 장바구니 페이지에서 cache된 데이터를 불러옵니다.

---

✔ 무한 스크롤 구현

hodu-open-market/src/pages/home/Products.jsx

Lines 15 to 42 in a06f65b

	const [ref, inView] = useInView();
	const { data, status, fetchNextPage, hasNextPage, isFetchingNextPage } =
	useInfiniteQuery("products", ({ pageParam = 1 }) => getProduct(pageParam), {
	getNextPageParam: (lastPage, allPages) => {
	if (!lastPage.isLast) {
	return lastPage.nextPage;
	} else {
	return undefined;
	}
	},
	});
	async function getProduct(pageParam) {
	const res = await axios.get(url + "products/?page=" + pageParam);
	const result = res.data;
	setDataLength(Math.ceil(result.count / 15));
	return {
	result: result.results,
	nextPage: pageParam + 1,
	isLast: !res.data.next,
	};
	}
	useEffect(() => {
	if (inView && hasNextPage) {
	fetchNextPage();
	}
	}, [inView, hasNextPage]);

react-query의 useInfiniteQuery와 react-intersection-observer api를 사용하여 무한 스크롤 기능을 구현하였습니다.
useInView의 'ref'는 각 페이지 마다 마지막 상품(15번째)에 지정하였습니다.

---

✔ 다음 우편번호 API 서비스로 우편번호 검색 기능 구현

hodu-open-market/src/components/Modal/PostCodeModal.jsx

Lines 1 to 41 in af4603f

	import ModalPortal from "./ModalPortal";
	import DaumPostCode from "react-daum-postcode";
	function PostCodeModal({ open, close, onComplete }) {
	const themeObj = {
	bgColor: "#F9F9F9", //바탕 배경색
	pageBgColor: "#FFFFFF", //페이지 배경색
	postcodeTextColor: "#21BF48", //우편번호 글자색
	emphTextColor: "#EB5757", //강조 글자색
	outlineColor: "#21BF48", //테두리
	};
	const postCodeStyle = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: "450px",
	height: "470px",
	};
	return (
	<>
	{open ? (
	<>
	<ModalPortal close={close}>
	<aside className="flex w-[200px] h-[300px] borer-[1px] border-pink-500">
	<DaumPostCode
	onComplete={onComplete}
	theme={themeObj}
	style={postCodeStyle}
	/>
	</aside>
	</ModalPortal>
	</>
	) : null}
	</>
	);
	}
	export default PostCodeModal;

hodu-open-market/src/pages/payment/Payment.jsx

Lines 81 to 91 in af4603f

	/**우편번호 조회 버튼 클릭 시 모달 창 띄우기 */
	function openPostCodeModal() {
	setIsModalOpen(true);
	}
	/**우편번호 검색 후 선택 완료*/
	function setPostCode(data) {
	setZipCode(data.zonecode);
	setMainAddress(data.address);
	setIsModalOpen(false);
	}

다음카카오에서 제공하는 우편번호 조회 API 서비스를 이용하여 우편 번호 검색 기능을 구현하였습니다.
구매자가 상품 주문 시, 배송 주소 입력에서 우편번호찾기를 클릭하면 우편번호 검색 모달창이 나타납니다.
사이트의 기본 컬러팔레트와 어울리도록 주소 검색창 색상을 수정하였습니다.

💣이슈

- tailwind로 동적으로 background Image url설정시 보이지 않는 이슈.

hodu-open-market/src/pages/home/ProductList.jsx

Lines 4 to 46 in 2ddbb1c

	function ProductList({ listdata, lastItemRef }) {
	const navigate = useNavigate();
	return (
	<section className={`${styles.flexCenter} ${styles.sectionLayout}`}>
	<ul className="w-full grid lg:grid-cols-[repeat(3,350px)] md:grid-cols-[repeat(3,300px)] sl:grid-cols-[repeat(3,220px)] sm:grid-cols-[repeat(2, 220px)] ss:grid-cols-[repeat(2,200px)] grid-cols-[repeat(2,150px)] gap-y-[50px] justify-between">
	{listdata.map((list, idx) => {
	return (
	<li key={list.product_id}>
	<div
	onClick={() =>
	navigate(`/products/${list.product_id}`, {
	state: { product: list },
	})
	}
	className={`lg:w-[350px] lg:h-[350px] md:w-[300px] md:h-[300px] sl:w-[220px] sl:h-[220px] ss:w-[200px] ss:h-[200px] w-[150px] h-[150px] rounded-[10px] border-[1px] bg-center bg-cover cursor-pointer`}
	style={{ backgroundImage: `url(${list.image})` }}
	></div>
	<p className="md:text-[16px] sm:text-[14px] text-[11px] text-subText font-spoqa">
	{list.store_name}
	</p>
	<p
	className={`w-full md:text-[18px] sm:text-[16px] text-[13px] text-mainText font-spoqa ${styles.textEllipsis}`}
	>
	{list.product_name}
	</p>
	<span
	ref={idx === listdata.length - 1 ? lastItemRef : null}
	className="inline-block md:text-[24px] sm:text-[22px] text-[14px] text-mainText font-spoqaBold"
	>
	{list.price.toLocaleString()}
	</span>
	<span className="inline sm:text-[16px] text-[13px] text-mainText font-spoqa">
	{" "}
	원
	</span>
	</li>
	);
	})}
	</ul>
	</section>
	);
	}

API로 불러온 데이터를 사용하여 동적으로 background Image의 url을 설정할 때, tailwind로 설정 시 이미지가 렌더링 되지 않는 이슈가 있었습니다.
tailwind의 오류가 있는 것으로 보여, 인라인 속성으로 background Image url을 설정해 주었습니다.

📂폴더트리

📦 src
 ┣📂 assets
 ┣📂 components
 ┃ ┣📂 buttons
 ┃ ┣📂 footer
 ┃ ┣📂 modal
 ┃ ┣📂 navBar
 ┃ ┣ NotFound.jsx
 ┃ ┣ NowLoading.jsx
 ┃ ┗ SmNowLoading.jsx
 ┣📂 context
 ┣📂 pages
 ┃ ┣📂 auth
 ┃ ┣📂 home
 ┃ ┣📂 myCart
 ┃ ┣📂 payment
 ┃ ┣📂 productDetail
 ┃ ┣📂 productSearch
 ┃ ┣📂 sellerCenter
 ┃ ┗📂 sellerProductsUpload
 ┣📜 App.jsx
 ┣📜 main.jsx
 ┣📜 index.css
 ┗📜 style.js