-
-
-
+
diff --git a/src/pages/product/components/RecentSearches.js b/src/pages/product/components/RecentSearches.js
index 5afab59..ea11d15 100644
--- a/src/pages/product/components/RecentSearches.js
+++ b/src/pages/product/components/RecentSearches.js
@@ -1,20 +1,29 @@
+import useAuthStore from "@/utils/hooks/store/useAuthStore";
import styled from "@emotion/styled";
+import { UsersIcon } from "@heroicons/react/16/solid";
import { useEffect, useState } from "react";
// 검색 - 최근 검색어 목록 컴포넌트
const RecentSearches = ({ searchTerm, handleSearchSubmit }) => {
+ const { isAuthenticated, accessToken } = useAuthStore();
const [recentSearches, setRecentSearches] = useState([]);
- const handleClearRecentSearches = () => {
- localStorage.removeItem("RecentSearches");
- setRecentSearches([]);
- };
-
useEffect(() => {
- const storedSearches =
- JSON.parse(localStorage.getItem("RecentSearches")) || [];
+ let storedSearches = [];
+
+ if (isAuthenticated && accessToken) {
+ // 로그인 & 토큰 유효 사용자일 때
+ const userTokenSearches =
+ (JSON.parse(localStorage.getItem("RecentSearches")) || [])[0] || {};
+
+ storedSearches = userTokenSearches.keyword || [];
+ } else {
+ // 미로그인 사용자일 때
+ storedSearches = [];
+ }
+
setRecentSearches(storedSearches);
- }, [searchTerm]);
+ }, [searchTerm, isAuthenticated, accessToken]);
return (
<>
@@ -22,12 +31,12 @@ const RecentSearches = ({ searchTerm, handleSearchSubmit }) => {
최근 검색어
원하시는 상품을 찾아보세요.
-
@@ -65,9 +126,7 @@ const ProductList = ({ productList, fetchMoreData, loading, hasMore }) => {
navigate(`/web/product/${product.id}`)}>
- {/* 추후에 상품 디테일 페이지에 연결 ! */}
{product.title}
@@ -89,11 +148,7 @@ const ProductList = ({ productList, fetchMoreData, loading, hasMore }) => {
) : (
-
- {!loading && productList
- ? "상품이 없습니다."
- : "상품을 불러오는 중입니다..."}
-
+ {!productList && "상품이 없습니다."}
)}
);
From 7afe926cf0cb106ff11cbe200d75d426dfc5ee59 Mon Sep 17 00:00:00 2001
From: wowyj26 <152588718+wowyj26@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:07:55 +0900
Subject: [PATCH 05/46] =?UTF-8?q?feat:=20=EB=A1=9C=EC=BB=AC=EC=8A=A4?=
=?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=20=EC=82=AC=EC=9A=A9=20=EB=B6=88?=
=?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20=EC=82=AC=EC=9A=A9=ED=95=A0=20=EC=BA=90?=
=?UTF-8?q?=EC=8B=9C=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=20=EC=B6=94?=
=?UTF-8?q?=EA=B0=80,=20=EA=B3=B5=EC=9A=A9=20=EB=A1=9C=EB=94=A9=20?=
=?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
pnpm-lock.yaml | 13 ++
src/components/Loading.js | 19 +++
src/pages/product/ProductsSearchPage.js | 46 ++----
src/pages/product/components/ProductList.js | 137 ++++++++---------
.../product/components/RecentSearches.js | 17 +--
.../product/components/SaveSearchStorage.js | 143 ++++++++++++++++++
7 files changed, 258 insertions(+), 118 deletions(-)
create mode 100644 src/components/Loading.js
create mode 100644 src/pages/product/components/SaveSearchStorage.js
diff --git a/package.json b/package.json
index 7b5069f..52839d1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
+ "react-spinners": "^0.13.8",
"swiper": "^11.0.5",
"zustand": "^4.4.7"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c991733..1ce184b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
react-router-dom:
specifier: ^6.21.1
version: 6.21.1(react-dom@18.2.0)(react@18.2.0)
+ react-spinners:
+ specifier: ^0.13.8
+ version: 0.13.8(react-dom@18.2.0)(react@18.2.0)
swiper:
specifier: ^11.0.5
version: 11.0.5
@@ -4823,6 +4826,16 @@ packages:
react: 18.2.0
dev: false
+ /react-spinners@0.13.8(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==}
+ peerDependencies:
+ react: ^16.0.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/src/components/Loading.js b/src/components/Loading.js
new file mode 100644
index 0000000..59a78c1
--- /dev/null
+++ b/src/components/Loading.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { BeatLoader } from "react-spinners";
+import styled from "@emotion/styled";
+
+const Loading = () => {
+ return (
+
+
+ );
+};
+export default Loading;
+
+const LoadingWrap = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+`;
diff --git a/src/pages/product/ProductsSearchPage.js b/src/pages/product/ProductsSearchPage.js
index b2df4bd..e539875 100644
--- a/src/pages/product/ProductsSearchPage.js
+++ b/src/pages/product/ProductsSearchPage.js
@@ -1,9 +1,11 @@
import { useEffect, useState } from "react";
-
import { useNavigate } from "react-router-dom";
import RecentSearches from "./components/RecentSearches";
import useAuthStore from "@/utils/hooks/store/useAuthStore";
-import { getUsersMe } from "@/api/marketApi";
+import {
+ saveLocalStorage,
+ saveCacheStorage
+} from "@/pages/product/components/SaveSearchStorage";
const ProductsSearchPage = () => {
const navigate = useNavigate();
@@ -13,42 +15,12 @@ const ProductsSearchPage = () => {
const saveSearchKeyword = (word) => {
// 최근 검색어 저장 로직 추가
- const existingSearches =
- JSON.parse(localStorage.getItem("RecentSearches")) || [];
-
- let updatedSearches;
-
- if (isAuthenticated) {
- // 로그인 한 사용자일 때
- const existingTokenIndex = existingSearches.findIndex(
- (item) => item.token === accessToken
- );
-
- if (existingTokenIndex !== -1) {
- // 해당 토큰이 이미 존재하는 경우(검색 기록 O)
- updatedSearches = existingSearches.map((item, index) =>
- index === existingTokenIndex
- ? {
- token: accessToken,
- keyword: [word, ...item.keyword]
- .filter((keyword, i, self) => self.indexOf(keyword) === i)
- .slice(0, 4)
- }
- : item
- );
- } else {
- // 로그인 & 이전 최근 검색 기록 없는 경우
- updatedSearches = [
- ...existingSearches,
- { token: accessToken, keyword: [word] }
- ];
- }
- } else {
- // 미로그인
- updatedSearches = existingSearches.map((item) => item);
+ // 로컬 스토리지 사용할 수 없을 때 브라우저 캐시 사용
+ try {
+ saveLocalStorage(word, isAuthenticated, accessToken);
+ } catch (error) {
+ saveCacheStorage(word, isAuthenticated, accessToken);
}
-
- localStorage.setItem("RecentSearches", JSON.stringify(updatedSearches));
};
const handleSearchSubmit = (current) => {
diff --git a/src/pages/product/components/ProductList.js b/src/pages/product/components/ProductList.js
index 477807e..70045e7 100644
--- a/src/pages/product/components/ProductList.js
+++ b/src/pages/product/components/ProductList.js
@@ -1,4 +1,6 @@
import { getPublishedPosts } from "@/api/marketApi";
+import Loading from "@/components/Loading";
+import useModalStore from "@/utils/hooks/store/useModalStore";
import styled from "@emotion/styled";
import { useInfiniteQuery } from "@tanstack/react-query";
import { useCallback, useEffect, useRef, useState } from "react";
@@ -7,16 +9,15 @@ import { useNavigate } from "react-router-dom";
// 상품 리스트를 보여주는 공용 컴포넌트
const ProductList = (props) => {
- // Intersection Observer를 사용하여 마지막 상품이 보여질 때를 감지
const { keyword } = props;
const navigate = useNavigate();
const [productList, setProductList] = useState([]);
const [showTopButton, setShowTopButton] = useState(false); // "맨 위로 가기" 버튼의 표시 여부를 제어하는 상태
+ const { openModal, closeModal } = useModalStore();
const observer = useRef();
const getProductList = async ({ currentPage = 1, queryKey }) => {
- const { keyword } = queryKey[1]; // Destructure the parameters from the queryKey
- console.log("kyj currentPage::", currentPage);
+ const { keyword } = queryKey[1];
const resData = await getPublishedPosts({
page: currentPage !== 1 ? currentPage + 1 : currentPage,
limit: 10,
@@ -24,22 +25,18 @@ const ProductList = (props) => {
orderBy: "createdAt",
direction: "asc"
});
- console.log("kyj resData::", resData);
const { page, lastPage, data: responseData } = resData.data;
- // api 호출 값에서 가지고 온 lastPage 결과
-
setProductList((prevList) => [...prevList, ...responseData]);
return page < lastPage ? page + 1 : 1;
};
- const { data, error, fetchNextPage, hasNextPage, isFetching } =
- useInfiniteQuery({
- queryKey: ["productList", { keyword: keyword || "" }],
- queryFn: getProductList,
- getNextPageParam: (curPage) => curPage
- });
+ const { error, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
+ queryKey: ["productList", { keyword: keyword || "" }],
+ queryFn: getProductList,
+ getNextPageParam: (curPage) => curPage
+ });
const observerOption = {
root: null,
@@ -48,6 +45,7 @@ const ProductList = (props) => {
};
const lastProductRef = useCallback(
+ // Intersection Observer를 사용하여 마지막 상품이 보여질 때를 감지
(node) => {
if (observer.current) {
observer.current.disconnect();
@@ -55,6 +53,7 @@ const ProductList = (props) => {
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasNextPage) {
+ // 현재 ref가 활성화 상태 && 다음 페이지가 있는 경우
setShowTopButton(true);
fetchNextPage();
}
@@ -68,41 +67,15 @@ const ProductList = (props) => {
);
const scrollToTop = () => {
+ // top 버튼 누르면 최상단으로 이동
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
- // useEffect(() => {
- // const handleTop = () => {
- // // 스크롤이 제일 상단에 가면 top 버튼 안 보이게 처리
- // const isTop = window.scrollY === 0;
- // setShowTopButton(!isTop);
- // };
-
- // window.addEventListener("scroll", handleTop);
-
- // return () => {
- // window.removeEventListener("scroll", handleTop);
- // };
- // }, []);
-
- useEffect(() => {
- if (error) {
- console.error("데이터 추가 불러오기 실패:", error);
- }
-
- if (isFetching) {
- console.log("로딩 중");
- // return
- {productList && productList.length > 0 ? (
- <>
-
- {productList.map((product, index) => (
- navigate(`/web/product/${product.id}`)}>
-
Date: Thu, 1 Feb 2024 17:00:15 +0900
Subject: [PATCH 07/46] =?UTF-8?q?feat:=20=EC=B5=9C=EC=83=81=EB=8B=A8=20("/?=
=?UTF-8?q?")=EA=B2=BD=EB=A1=9C=EC=97=90=EC=84=9C=20location=20=EA=B0=90?=
=?UTF-8?q?=EC=A7=80=EB=A5=BC=20=EC=9C=84=ED=95=9C=20router=20=EC=9D=B4?=
=?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 31 ++++++++++++++++-----------
src/main.js | 6 +++++-
src/utils/hooks/store/useAuthStore.js | 4 ++++
3 files changed, 27 insertions(+), 14 deletions(-)
diff --git a/src/App.js b/src/App.js
index ba68556..463b2e0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,7 @@
-import { RouterProvider } from "react-router-dom";
-import { routers } from "./router";
import useAuthStore from "./utils/hooks/store/useAuthStore";
import { useEffect } from "react";
import { getUsersMe } from "./api/marketApi";
+import { useLocation } from "react-router-dom";
/**
* App 컴포넌트는 애플리케이션의 루트 컴포넌트입니다.
@@ -11,23 +10,29 @@ import { getUsersMe } from "./api/marketApi";
* @returns JSX.Element - 라우터 설정이 적용된 App 컴포넌트
*/
function App() {
- const { setAccessToken } = useAuthStore();
+ const { setUser, username } = useAuthStore();
+ const location = useLocation();
useEffect(() => {
- const checkUserStatus = async () => {
- try {
- const response = await getUsersMe();
- if (response.accessToken) {
- setAccessToken(response.accessToken);
+ const fetchUser = async () => {
+ if (!username) {
+ // username이 없을 경우에만 API 호출
+ try {
+ const response = await getUsersMe();
+ if (response?.data) {
+ const { id, username, accessToken } = response.data;
+ setUser({ id, username, token: accessToken });
+ }
+ } catch (error) {
+ console.error("Failed to fetch user:", error);
}
- } catch (error) {
- console.error("error:", error);
}
};
- checkUserStatus();
- }, []);
- return
-
+
);
});
diff --git a/src/utils/hooks/store/useAuthStore.js b/src/utils/hooks/store/useAuthStore.js
index 72684ee..ac781f0 100644
--- a/src/utils/hooks/store/useAuthStore.js
+++ b/src/utils/hooks/store/useAuthStore.js
@@ -10,8 +10,12 @@ const useAuthStore = create(
devtools((set) => ({
accessToken: null,
isAuthenticated: false,
+ id: null,
+ username: null,
setAccessToken: (token) =>
set({ accessToken: token, isAuthenticated: !!token }),
+ setUser: ({ id, username, token }) =>
+ set({ id, username, accessToken: token, isAuthenticated: !!token }),
logout: async () => {
try {
// 서버의 로그아웃 엔드포인트에 요청
From 48ec6fbc6c5f06b6971c2bffe8115a4d8664897a Mon Sep 17 00:00:00 2001
From: "Sunghum Paik (Brian)"
Date: Thu, 1 Feb 2024 17:13:13 +0900
Subject: [PATCH 08/46] =?UTF-8?q?feat:=20=EA=B5=AC=EC=A1=B0=20=EC=9E=AC?=
=?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 35 +++++---------------
src/main.js | 6 +---
src/utils/hooks/store/useLocationObserver.js | 32 ++++++++++++++++++
3 files changed, 41 insertions(+), 32 deletions(-)
create mode 100644 src/utils/hooks/store/useLocationObserver.js
diff --git a/src/App.js b/src/App.js
index 463b2e0..246d4ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
-import useAuthStore from "./utils/hooks/store/useAuthStore";
-import { useEffect } from "react";
-import { getUsersMe } from "./api/marketApi";
-import { useLocation } from "react-router-dom";
+import { RouterProvider } from "react-router-dom";
+import { routers } from "./router";
+import { LocationObserver } from "./utils/hooks/store/useLocationObserver";
/**
* App 컴포넌트는 애플리케이션의 루트 컴포넌트입니다.
@@ -10,29 +9,11 @@ import { useLocation } from "react-router-dom";
* @returns JSX.Element - 라우터 설정이 적용된 App 컴포넌트
*/
function App() {
- const { setUser, username } = useAuthStore();
- const location = useLocation();
-
- useEffect(() => {
- const fetchUser = async () => {
- if (!username) {
- // username이 없을 경우에만 API 호출
- try {
- const response = await getUsersMe();
- if (response?.data) {
- const { id, username, accessToken } = response.data;
- setUser({ id, username, token: accessToken });
- }
- } catch (error) {
- console.error("Failed to fetch user:", error);
- }
- }
- };
-
- fetchUser();
- }, [location, username]); // location과 username을 의존성 배열에 추가
-
- return
+
+ );
}
export default App;
diff --git a/src/main.js b/src/main.js
index 3cb0f6b..b608a22 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,8 +5,6 @@ import ReactDOM from "react-dom/client";
import App from "@/App";
// 스타일시트를 임포트합니다.
import "@/styles/index.css";
-import { RouterProvider } from "react-router-dom";
-import { routers } from "./router";
// React Query 클라이언트를 초기화합니다.
// 이 클라이언트는 데이터 페칭 및 캐싱을 관리합니다.
@@ -26,9 +24,7 @@ enableMocking().finally(() => {
// 이를 통해 하위 컴포넌트에서 React Query의 기능을 사용할 수 있습니다.
root.render(
-
-
+
);
});
diff --git a/src/utils/hooks/store/useLocationObserver.js b/src/utils/hooks/store/useLocationObserver.js
new file mode 100644
index 0000000..a82b9b5
--- /dev/null
+++ b/src/utils/hooks/store/useLocationObserver.js
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import useAuthStore from "./useAuthStore";
+import { getUsersMe } from "@/api/marketApi";
+
+export function LocationObserver() {
+ const location = useLocation();
+ const { setUser, username } = useAuthStore();
+
+ useEffect(() => {
+ console.log("경로 변경 감지:", location.pathname);
+ // 여기에 사용자 정보를 불러오는 로직을 포함시킬 수 있습니다.
+ const fetchUser = async () => {
+ if (!username) {
+ try {
+ const response = await getUsersMe();
+ if (response?.data) {
+ const { id, username, accessToken } = response.data;
+ setUser({ id, username, token: accessToken });
+ }
+ } catch (error) {
+ console.error("Failed to fetch user:", error);
+ }
+ }
+ };
+
+ fetchUser();
+ }, [location, username, setUser]);
+
+ // 실제 UI를 렌더링할 필요가 없으므로, null을 반환합니다.
+ return null;
+}
From 574cb6ef70b2266e01527b306331f8c0cdc9078f Mon Sep 17 00:00:00 2001
From: wowyj26 <152588718+wowyj26@users.noreply.github.com>
Date: Fri, 2 Feb 2024 09:17:36 +0900
Subject: [PATCH 09/46] =?UTF-8?q?fix:=20=EC=83=81=ED=92=88=EB=A6=AC?=
=?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A7=88=EC=A7=80=EB=A7=89=20=ED=8E=98?=
=?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EB=AC=B4=ED=95=9C?=
=?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B3=84=EC=86=8D=20=EB=90=98?=
=?UTF-8?q?=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/product/components/ProductList.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/pages/product/components/ProductList.js b/src/pages/product/components/ProductList.js
index f1191cb..7781cbf 100644
--- a/src/pages/product/components/ProductList.js
+++ b/src/pages/product/components/ProductList.js
@@ -40,7 +40,7 @@ const ProductList = (props) => {
getNextPageParam: ({ curPage, lastPage }) => {
// 마지막 페이지인 경우에는 더 이상 호출 불필요 , 마지막 페이지보다 전이면 +1 해준다
// 여기서 return 하는 값은 pageParam으로 전달 됨
- return curPage < lastPage ? curPage + 1 : lastPage;
+ return curPage < lastPage ? curPage + 1 : null;
}
});
@@ -164,13 +164,13 @@ const ProductListWrap = styled.div`
const CardWrap = styled.div`
display: flex;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: flex-start;
margin-bottom: 30px;
`;
const Card = styled.div`
width: 180px;
- margin-bottom: 10px;
+ margin: 7px;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
From c608e3363d8e0c7fff464b7f04cb172f28155ff5 Mon Sep 17 00:00:00 2001
From: "Sunghum Paik (Brian)"
Date: Fri, 2 Feb 2024 10:51:54 +0900
Subject: [PATCH 10/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
=?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.js | 8 +----
src/api/marketApi.js | 24 +++++----------
src/components/WithLayout.js | 2 ++
src/utils/LocationObserver.js | 26 ++++++++++++++++
src/utils/hooks/store/useAuthStore.js | 14 ++++++---
src/utils/hooks/store/useLocationObserver.js | 32 --------------------
6 files changed, 46 insertions(+), 60 deletions(-)
create mode 100644 src/utils/LocationObserver.js
delete mode 100644 src/utils/hooks/store/useLocationObserver.js
diff --git a/src/App.js b/src/App.js
index 246d4ed..0b425bb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,5 @@
import { RouterProvider } from "react-router-dom";
import { routers } from "./router";
-import { LocationObserver } from "./utils/hooks/store/useLocationObserver";
-
/**
* App 컴포넌트는 애플리케이션의 루트 컴포넌트입니다.
* RouterProvider를 사용하여 라우터 설정을 적용합니다.
@@ -9,11 +7,7 @@ import { LocationObserver } from "./utils/hooks/store/useLocationObserver";
* @returns JSX.Element - 라우터 설정이 적용된 App 컴포넌트
*/
function App() {
- return (
-
-
- );
+ return
Date: Fri, 2 Feb 2024 11:11:53 +0900
Subject: [PATCH 11/46] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
=?UTF-8?q?=EC=95=84=EC=9D=B4=EB=94=94=EB=A5=BC=20=ED=8C=8C=EC=95=85?=
=?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/header/components/LogoutMenuList.js | 6 +++---
src/utils/LocationObserver.js | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/header/components/LogoutMenuList.js b/src/components/header/components/LogoutMenuList.js
index a3bdb5c..5ada242 100644
--- a/src/components/header/components/LogoutMenuList.js
+++ b/src/components/header/components/LogoutMenuList.js
@@ -1,7 +1,7 @@
import useAuthStore from "@/utils/hooks/store/useAuthStore";
export const LogoutMenuList = () => {
- const { logout } = useAuthStore();
+ const { logout, userName } = useAuthStore();
return (
Date: Fri, 2 Feb 2024 12:46:15 +0900
Subject: [PATCH 13/46] =?UTF-8?q?feat:=20authRequire=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../header/components/LogoutMenuList.js | 2 +-
src/pages/profile/ProfilePage.js | 3 +++
src/router.js | 22 ++++++++++++++++++-
src/utils/constants/routePaths.js | 4 ++--
4 files changed, 27 insertions(+), 4 deletions(-)
create mode 100644 src/pages/profile/ProfilePage.js
diff --git a/src/components/header/components/LogoutMenuList.js b/src/components/header/components/LogoutMenuList.js
index a9ff80d..45b9acb 100644
--- a/src/components/header/components/LogoutMenuList.js
+++ b/src/components/header/components/LogoutMenuList.js
@@ -21,7 +21,7 @@ export const LogoutMenuList = () => {
- {recentSearches.map((search, index) => (
+ {recentSearches.map((word, index) => (
handleSearchSubmit(search)}>
- {search.length > 6 ? `${search.slice(0, 5)}..` : search}
+ onClick={() => handleSearchSubmit(word)}>
+ {word.length > 6 ? `${word.slice(0, 5)}..` : word}
))}
From 773dd6eb17bc45733b5675b1ba5a5b5176ec8e76 Mon Sep 17 00:00:00 2001
From: wowyj26 <152588718+wowyj26@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:35:23 +0900
Subject: [PATCH 03/46] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=ED=81=B4?=
=?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4?=
=?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/product/components/ProductList.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/pages/product/components/ProductList.js b/src/pages/product/components/ProductList.js
index 6431474..9ddf500 100644
--- a/src/pages/product/components/ProductList.js
+++ b/src/pages/product/components/ProductList.js
@@ -1,10 +1,12 @@
import styled from "@emotion/styled";
import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
// 상품 리스트를 보여주는 공용 컴포넌트
const ProductList = ({ productList, fetchMoreData, loading, hasMore }) => {
// Intersection Observer를 사용하여 마지막 상품이 보여질 때를 감지
+ const navigate = useNavigate();
const observer = useRef();
// "맨 위로 가기" 버튼의 표시 여부를 제어하는 상태
const [showTopButton, setShowTopButton] = useState(false);
@@ -46,6 +48,7 @@ const ProductList = ({ productList, fetchMoreData, loading, hasMore }) => {
};
useEffect(() => {
+ console.log("list::", productList);
window.addEventListener("scroll", handleScroll);
return () => {
@@ -63,8 +66,7 @@ const ProductList = ({ productList, fetchMoreData, loading, hasMore }) => {
key={index}
ref={index === productList.length - 1 ? lastProductRef : null}
className="productCard"
- // onClick={() => handleProductPage(product.id)}
- >
+ onClick={() => navigate(`/web/product/${product.id}`)}>
{/* 추후에 상품 디테일 페이지에 연결 ! */}
@@ -91,14 +14,7 @@ const ProductSearchResultPage = () => {
결과입니다.
-
);
};
diff --git a/src/pages/product/ProductsPage.js b/src/pages/product/ProductsPage.js
index e9b877a..686edda 100644
--- a/src/pages/product/ProductsPage.js
+++ b/src/pages/product/ProductsPage.js
@@ -1,85 +1,15 @@
-import { useEffect } from "react";
import ProductList from "./components/ProductList";
import styled from "@emotion/styled";
-import { useState } from "react";
-import { useRef } from "react";
-import { getPublishedPosts } from "@/api/marketApi";
// 처음 진입하면 보이는 메인 페이지
// api를 호출하여 ProcudtList에 정보를 넘겨서 보여주도록 함
// 스크롤을 통해 더 많은 상품을 동적으로 로드
export default function ProductsPage() {
- const [productList, setProductList] = useState([]);
- const [loading, setLoading] = useState(false);
- const [hasMore, setHasMore] = useState(true);
- const [page, setPage] = useState(1);
- const loaderRef = useRef(null);
-
- const fetchMoreData = async () => {
- if (loading || !hasMore) return;
-
- try {
- setLoading(true);
- const resData = await getPublishedPosts({
- page: page !== 1 ? page + 1 : page,
- limit: 10,
- query: "",
- orderBy: "createdAt",
- direction: "asc"
- });
-
- if (resData.data?.data?.length > 0) {
- setProductList((prevList) => [...prevList, ...resData.data.data]);
- setPage(page + 1);
- } else {
- setHasMore(false);
- }
- } catch (error) {
- console.error("데이터 추가 불러오기 실패:", error);
- } finally {
- setLoading(false);
- }
- };
-
- useEffect(() => {
- const handleScroll = () => {
- if (loaderRef.current) {
- const { scrollTop, clientHeight, scrollHeight } = loaderRef.current;
-
- if (scrollHeight - scrollTop === clientHeight) {
- fetchMoreData();
- }
- }
- };
-
- if (loaderRef.current) {
- // 값이 없는 경우(null) 페이지 이동 시 에러 발생하기 때문에 null이 아닐때만 동작하도록 함
- loaderRef.current.addEventListener("scroll", handleScroll);
- }
-
- return () => {
- if (loaderRef.current) {
- loaderRef.current.removeEventListener("scroll", handleScroll);
- }
- };
- }, [fetchMoreData]);
-
- useEffect(() => {
- fetchMoreData();
- }, []);
-
return (
로딩 중입니다.....
;
+ // 로딩 중인 상태를 표시하는 UI
+ }
+ }, [error, data, isFetching]);
useEffect(() => {
- console.log("list::", productList);
- window.addEventListener("scroll", handleScroll);
+ // 초기 데이터 로딩
+ let searchWord = keyword || "";
+
+ const handleTop = () => {
+ // 스크롤이 제일 상단에 가면 top 버튼 안 보이게 처리
+ const isTop = window.scrollY === 0;
+ setShowTopButton(!isTop);
+ };
+
+ window.addEventListener("scroll", handleTop);
return () => {
- window.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("scroll", handleTop);
};
- }, [productList]);
+ }, [keyword]);
return (
로딩 중입니다.....
;
- // 로딩 중인 상태를 표시하는 UI
- }
- }, [error, data, isFetching]);
-
useEffect(() => {
// 초기 데이터 로딩
- let searchWord = keyword || "";
const handleTop = () => {
// 스크롤이 제일 상단에 가면 top 버튼 안 보이게 처리
@@ -117,40 +90,62 @@ const ProductList = (props) => {
};
}, [keyword]);
+ useEffect(() => {
+ // 추후에 조건 풀 지 확인해보기
+ if (error && !error.response?.status === 401) {
+ console.error("상품 불러오기 실패:", error);
+ const customContent = (
+
+
+ );
+ openModal(customContent);
+ }
+ }, [error]);
+
return (
- 상품을 가져올 수 없습니다.
+다시 시도해 주시기 바랍니다.
+
+
+
+
+
+ {isFetching &&
+ {productList.map((product, index) => (
+ navigate(`/web/product/${product.id}`)}>
+ {product.location}
{product.title}
- ) : (
- <>
- {product.location}
- {product.title}
- {product.price}원
-
- )}
-
- ))}
-
-
- TOP
-
-
- ) : (
- {!productList && "상품이 없습니다."}
- )}
-
+ {product.price}원
+
+ ))}
+
+ {} : scrollToTop}>
+ TOP
+
+
+ ) : (
+
);
};
diff --git a/src/pages/product/components/RecentSearches.js b/src/pages/product/components/RecentSearches.js
index ea11d15..3d410b0 100644
--- a/src/pages/product/components/RecentSearches.js
+++ b/src/pages/product/components/RecentSearches.js
@@ -1,7 +1,8 @@
import useAuthStore from "@/utils/hooks/store/useAuthStore";
import styled from "@emotion/styled";
-import { UsersIcon } from "@heroicons/react/16/solid";
import { useEffect, useState } from "react";
+import { getLocalStorage } from "@/pages/product/components/SaveSearchStorage";
+import { getCacheStorage } from "@/pages/product/components/SaveSearchStorage";
// 검색 - 최근 검색어 목록 컴포넌트
const RecentSearches = ({ searchTerm, handleSearchSubmit }) => {
@@ -11,15 +12,11 @@ const RecentSearches = ({ searchTerm, handleSearchSubmit }) => {
useEffect(() => {
let storedSearches = [];
- if (isAuthenticated && accessToken) {
- // 로그인 & 토큰 유효 사용자일 때
- const userTokenSearches =
- (JSON.parse(localStorage.getItem("RecentSearches")) || [])[0] || {};
-
- storedSearches = userTokenSearches.keyword || [];
- } else {
- // 미로그인 사용자일 때
- storedSearches = [];
+ try {
+ // 로컬 스토리지 사용할 수 없을 때 브라우저 캐시 사용
+ storedSearches = getLocalStorage(isAuthenticated, accessToken);
+ } catch (error) {
+ storedSearches = getCacheStorage(isAuthenticated, accessToken);
}
setRecentSearches(storedSearches);
diff --git a/src/pages/product/components/SaveSearchStorage.js b/src/pages/product/components/SaveSearchStorage.js
new file mode 100644
index 0000000..f5a99c1
--- /dev/null
+++ b/src/pages/product/components/SaveSearchStorage.js
@@ -0,0 +1,143 @@
+// 임시로 사용할 브라우저 캐시 스토리지 선언
+export const cacheStorage = {
+ cache: {},
+ getItem(key) {
+ return this.cache[key] || null;
+ },
+ setItem(key, value) {
+ this.cache[key] = value;
+ },
+ removeItem(key) {
+ delete this.cache[key];
+ },
+ clear() {
+ this.cache = {};
+ }
+};
+
+// 로컬 스토리지에 최근 검색어 저장
+export const saveLocalStorage = (word, isAuthenticated, accessToken) => {
+ let updatedSearches;
+
+ // 로컬 스토리지에서 최근 검색어 가져옴
+ const existingSearches =
+ JSON.parse(localStorage.getItem("RecentSearches")) || [];
+
+ if (isAuthenticated) {
+ // 로그인 되어있는 경우, 저장된 스토리지의 토큰과 로그인한 유저의 토큰 값 비교
+ const existingTokenIndex = existingSearches.findIndex(
+ (item) => item.token === accessToken
+ );
+
+ if (existingTokenIndex !== -1) {
+ // 이미 해당 토큰이 존재하는 경우, 해당 토큰의 검색어 업데이트
+ updatedSearches = existingSearches.map((item, index) =>
+ index === existingTokenIndex
+ ? {
+ token: accessToken,
+ // 새로운 검색어를 추가하고 중복 제거 후 최대 4개까지 유지
+ keyword: [word, ...item.keyword]
+ .filter((keyword, i, self) => self.indexOf(keyword) === i)
+ .slice(0, 4)
+ }
+ : item
+ );
+ } else {
+ // 해당 토큰이 존재하지 않는 경우, 새로운 토큰과 검색어를 추가
+ updatedSearches = [
+ ...existingSearches,
+ { token: accessToken, keyword: [word] }
+ ];
+ }
+ } else {
+ return;
+ }
+
+ localStorage.setItem("RecentSearches", JSON.stringify(updatedSearches));
+};
+
+// 로컬 스토리지에 저장된 최근 검색어 조회
+export const getLocalStorage = (isAuthenticated, accessToken) => {
+ let storedSearches = [];
+
+ if (isAuthenticated && accessToken) {
+ // 로그인 및 유효한 토큰을 가진 사용자인 경우
+
+ // 로컬 스토리지에서 "RecentSearches" 키의 값을 가져와 파싱
+ const userTokenSearches =
+ (JSON.parse(localStorage.getItem("RecentSearches")) || [])[0] || {};
+
+ // 해당 토큰의 최근 검색어를 가져오거나, 값이 없으면 빈 배열 사용
+ storedSearches = userTokenSearches.keyword || [];
+ }
+ // 최종적으로 로그인 상태가 아니거나 토큰이 유효하지 않은 경우 빈 배열 반환
+ return storedSearches;
+};
+
+// 캐시 스토리지에 최근 검색어 저장
+export const saveCacheStorage = (word, isAuthenticated, accessToken) => {
+ let updatedSearches;
+
+ const existingSearches =
+ JSON.parse(cacheStorage.getItem("RecentSearches")) || [];
+
+ if (isAuthenticated) {
+ // 로그인 되어있는 경우, 저장된 스토리지의 토큰과 로그인한 유저의 토큰 값 비교
+ const existingTokenIndex = existingSearches.findIndex(
+ (item) => item.token === accessToken
+ );
+
+ if (existingTokenIndex !== -1) {
+ // 이미 해당 토큰이 존재하는 경우, 해당 토큰의 검색어 업데이트
+ updatedSearches = existingSearches.map((item, index) =>
+ index === existingTokenIndex
+ ? {
+ token: accessToken,
+ // 새로운 검색어를 추가하고 중복 제거 후 최대 4개까지 유지
+ keyword: [word, ...item.keyword]
+ .filter((keyword, i, self) => self.indexOf(keyword) === i)
+ .slice(0, 4)
+ }
+ : item
+ );
+ } else {
+ // 해당 토큰이 존재하지 않는 경우, 새로운 토큰과 검색어를 추가
+ updatedSearches = [
+ ...existingSearches,
+ { token: accessToken, keyword: [word] }
+ ];
+ }
+ } else {
+ return;
+ }
+
+ cacheStorage.setItem("RecentSearches", JSON.stringify(updatedSearches));
+};
+
+// 캐시 스토리지에 저장된 최근 검색어 조회
+export const getCacheStorage = (isAuthenticated, accessToken) => {
+ let storedSearches = [];
+
+ if (isAuthenticated && accessToken) {
+ // 로그인 및 유효한 토큰을 가진 사용자인 경우
+
+ // 캐시 스토리지에서 "RecentSearches" 키의 값을 가져와 파싱
+ const userTokenSearches =
+ (JSON.parse(cacheStorage.getItem("RecentSearches")) || [])[0] || {};
+
+ // 해당 토큰의 최근 검색어를 가져오거나, 값이 없으면 빈 배열 사용
+ storedSearches = userTokenSearches.keyword || [];
+ }
+ // 최종적으로 로그인 상태가 아니거나 토큰이 유효하지 않은 경우 빈 배열 반환
+ return storedSearches;
+};
+
+const SaveSearchStorage = {
+ cacheStorage,
+ saveLocalStorage,
+ getLocalStorage,
+ saveCacheStorage,
+ getCacheStorage
+};
+
+export { SaveSearchStorage };
From 7fefa5ab085a1764533c127e45fd9bcfe0f609c6 Mon Sep 17 00:00:00 2001
From: wowyj26 <152588718+wowyj26@users.noreply.github.com>
Date: Wed, 31 Jan 2024 15:34:23 +0900
Subject: [PATCH 06/46] =?UTF-8?q?fix:=20=EC=83=81=ED=92=88=20=EB=A6=AC?=
=?UTF-8?q?=EC=8A=A4=ED=8A=B8=20useInfiniteQuery=EC=97=90=EC=84=9C=20pageP?=
=?UTF-8?q?aram=20+1=20=EC=95=88=20=EB=90=98=EA=B3=A0=20=EC=9E=88=EB=8A=94?=
=?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/product/components/ProductList.js | 22 +++++++++++++--------
1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/pages/product/components/ProductList.js b/src/pages/product/components/ProductList.js
index 70045e7..f1191cb 100644
--- a/src/pages/product/components/ProductList.js
+++ b/src/pages/product/components/ProductList.js
@@ -7,7 +7,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
// 상품 리스트를 보여주는 공용 컴포넌트
-
const ProductList = (props) => {
const { keyword } = props;
const navigate = useNavigate();
@@ -16,11 +15,11 @@ const ProductList = (props) => {
const { openModal, closeModal } = useModalStore();
const observer = useRef();
- const getProductList = async ({ currentPage = 1, queryKey }) => {
- const { keyword } = queryKey[1];
+ const getProductList = async ({ pageParam = 1 }) => {
+ // pageParam : useInfiniteQuery의 getNextPageParam에서 반환해준 값 (=다음 불러올 페이지)
const resData = await getPublishedPosts({
- page: currentPage !== 1 ? currentPage + 1 : currentPage,
- limit: 10,
+ page: pageParam !== 1 ? pageParam : 1, // 1 페이지가 아니면 nextPage(현재+1 된 값)을 호출
+ limit: 20,
query: keyword ? keyword : "",
orderBy: "createdAt",
direction: "asc"
@@ -29,13 +28,20 @@ const ProductList = (props) => {
const { page, lastPage, data: responseData } = resData.data;
setProductList((prevList) => [...prevList, ...responseData]);
- return page < lastPage ? page + 1 : 1;
+ // return은 아래 useInfiniteQuery에서 getNextPageParam으로 전달
+ // page 뜻을 전달하기 위해 이름 curPage로 전달
+ return { curPage: page, lastPage };
};
const { error, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
- queryKey: ["productList", { keyword: keyword || "" }],
+ queryKey: ["productList"],
queryFn: getProductList,
- getNextPageParam: (curPage) => curPage
+ // 위의 getPublishedPosts 결과값으로 얻은 page (현재 받아온 페이지) , lastpage (총 페이지)
+ getNextPageParam: ({ curPage, lastPage }) => {
+ // 마지막 페이지인 경우에는 더 이상 호출 불필요 , 마지막 페이지보다 전이면 +1 해준다
+ // 여기서 return 하는 값은 pageParam으로 전달 됨
+ return curPage < lastPage ? curPage + 1 : lastPage;
+ }
});
const observerOption = {
From bcbc8116703d5f89fface3c9375270052f95a839 Mon Sep 17 00:00:00 2001
From: "Sunghum Paik (Brian)"
+ {!productList?.length && !isFetching && (
+
+ {`${keyword ? "검색 결과가" : "상품이"} 없습니다.`}
+
+ )}
+
+ )}
+
+
+ 대기중
}>
{
className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
- Profile
- New
+ HI! {userName}
+ Name
diff --git a/src/utils/LocationObserver.js b/src/utils/LocationObserver.js
index 158a4db..9234a02 100644
--- a/src/utils/LocationObserver.js
+++ b/src/utils/LocationObserver.js
@@ -2,7 +2,7 @@ import { useEffect } from "react";
import useAuthStore from "./hooks/store/useAuthStore";
import marketApi from "@/api/marketApi";
-// 최상단에서 Url 라우팅 시 감지 및 변경
+// 최상단에서 감지하는 함수 변경
export function LocationObserver() {
const { setAccessToken, setUser } = useAuthStore();
From 883262ed20164e1a9ecef1dd65b8832c936b0ccc Mon Sep 17 00:00:00 2001
From: "Sunghum Paik (Brian)"
Date: Fri, 2 Feb 2024 11:22:21 +0900
Subject: [PATCH 12/46] =?UTF-8?q?feat:=20=EB=A1=9C=EC=A7=81=20access?=
=?UTF-8?q?=ED=86=A0=ED=81=B0=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B6=84?=
=?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../header/components/LoginMenuList.js | 8 +++---
.../header/components/LogoutMenuList.js | 11 +++++---
src/utils/LocationObserver.js | 25 +++++++++++++------
3 files changed, 28 insertions(+), 16 deletions(-)
diff --git a/src/components/header/components/LoginMenuList.js b/src/components/header/components/LoginMenuList.js
index 08a2c45..2a7e214 100644
--- a/src/components/header/components/LoginMenuList.js
+++ b/src/components/header/components/LoginMenuList.js
@@ -25,11 +25,11 @@ export const LoginMenuList = () => {
diff --git a/src/components/header/components/LogoutMenuList.js b/src/components/header/components/LogoutMenuList.js
index 5ada242..a9ff80d 100644
--- a/src/components/header/components/LogoutMenuList.js
+++ b/src/components/header/components/LogoutMenuList.js
@@ -1,7 +1,10 @@
+import { ROUTES } from "@/utils/constants/routePaths";
import useAuthStore from "@/utils/hooks/store/useAuthStore";
+import { useNavigate } from "react-router-dom";
export const LogoutMenuList = () => {
const { logout, userName } = useAuthStore();
+ const navigate = useNavigate();
return (
-
-
-
- navigate(ROUTES.LOGIN)}>Login+
- navigate(ROUTES.LOGIN)}>
+ Login
-
-
- navigate(ROUTES.JOIN)}>Join+
- navigate(ROUTES.JOIN)}>
+ Join
{
diff --git a/src/utils/LocationObserver.js b/src/utils/LocationObserver.js
index 9234a02..932b00f 100644
--- a/src/utils/LocationObserver.js
+++ b/src/utils/LocationObserver.js
@@ -4,23 +4,32 @@ import marketApi from "@/api/marketApi";
// 최상단에서 감지하는 함수 변경
export function LocationObserver() {
- const { setAccessToken, setUser } = useAuthStore();
+ const { setAccessToken, setUser, accessToken } = useAuthStore();
useEffect(() => {
- // 첫 기동시 한번 refreshToken 체크
- const fetchUser = async () => {
+ // 첫 기동시 한번 refreshToken 체크, 이후 accessToken이 변경되면 체크
+ const fetchRefresh = async () => {
const { data } = await marketApi.post("/auth/refresh-token");
if (data?.accessToken) {
setAccessToken(data.accessToken);
- const userData = await marketApi.get("/users/me", {
- requiresAuth: true
- });
- setUser({ id: userData.data?.id, userName: userData.data?.username });
}
};
- fetchUser();
+ fetchRefresh();
}, []);
+ useEffect(() => {
+ // 첫 기동시 한번 refreshToken 체크, 이후 accessToken이 변경되면 체크
+ const fetchUser = async () => {
+ const userData = await marketApi.get("/users/me", {
+ requiresAuth: true
+ });
+ setUser({ id: userData.data?.id, userName: userData.data?.username });
+ };
+ if (accessToken) {
+ fetchUser();
+ }
+ }, [accessToken]);
+
// 실제 UI를 렌더링할 필요가 없으므로, null을 반환합니다.
return null;
}
From 5f0d4f6e23f3b6bda57c1bfe03536bed79bc5cad Mon Sep 17 00:00:00 2001
From: "Sunghum Paik (Brian)" -
-
- +
- navigate(ROUTES.JOIN)}> HI! {userName} - Name + Profile -
-
- logout()}>Logout+
- logout()}>
+ Logout
+