Feat/product

package.json

@@ -14,6 +14,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@types/node": "^18.11.19",
+    "axios": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

public/mockdata.json

@@ -0,0 +1,162 @@
+[
+	{
+		"id": 1,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66f604e7b0e6900f9ac53a43965300eb9a",
+    "title": "test1",
+		"text": "test1",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 2,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66effd194bae87d73dd00522794070855d",
+    "title": "test2",
+		"text": "test2",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 3,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66b3a18fdf58bc66ec3f4b6084b7d0b570",
+    "title": "test3",
+		"text": "test3",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 4,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e668f324a0b9c48f77dbce3a43bd11ce785",
+    "title": "test4",
+		"text": "test4",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 5,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66effd194bae87d73dd00522794070855d",
+    "title": "test5",
+		"text": "test5",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 6,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e669cbcbe2de7f4969efc79ab353e0c19e8",
+    "title": "test6",
+		"text": "test6",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 7,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e6671b950f0a05bd8dba8b11dbe535ebe4b",
+    "title": "test7",
+		"text": "test7",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 8,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66f604e7b0e6900f9ac53a43965300eb9a",
+    "title": "test8",
+		"text": "test8",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 9,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e669f5287469802eca457586a25a096fd31",
+    "title": "test9",
+		"text": "test9",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 10,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66f604e7b0e6900f9ac53a43965300eb9a",
+    "title": "test10",
+		"text": "test10",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 11,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66f604e7b0e6900f9ac53a43965300eb9a",
+    "title": "test11",
+		"text": "test11",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 12,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e668b566dca82634c93f811198148a26065",
+    "title": "test12",
+		"text": "test12",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 13,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66f604e7b0e6900f9ac53a43965300eb9a",
+    "title": "test13",
+		"text": "test13",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 14,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66b3a18fdf58bc66ec3f4b6084b7d0b570",
+    "title": "test14",
+		"text": "test14",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 15,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66effd194bae87d73dd00522794070855d",
+    "title": "test15",
+		"text": "test15",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 16,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e669cbcbe2de7f4969efc79ab353e0c19e8",
+    "title": "test16",
+		"text": "test16",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 17,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e668f324a0b9c48f77dbce3a43bd11ce785",
+    "title": "test17",
+		"text": "test17",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 18,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e668b566dca82634c93f811198148a26065",
+    "title": "test18",
+		"text": "test18",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 19,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66b3a18fdf58bc66ec3f4b6084b7d0b570",
+    "title": "test19",
+		"text": "test19",
+		"category": "test",
+		"limitDate": 7
+	},
+	{
+		"id": 20,
+    "imageUrl": "https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66c37d537a8f2c6f426591be6b8dc7b36a",
+    "title": "test20",
+		"text": "test20",
+		"category": "test",
+		"limitDate": 7
+	}
+]

src/App.tsx

@@ -1,5 +1,26 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import { getClient } from '@/config/queryClient';
+import { Home, ProductDetail, ProductList } from '@/pages';
+import { Header } from '@/components/Header';
+
+const queryClient = getClient();
+
 function App() {
-	return <div>hello rentive</div>
+	return (
+		<BrowserRouter>
+			<QueryClientProvider client={queryClient}>
+				<Header />
+				<Routes>
+					<Route path="/" element={<Home />} />
+					<Route path="/home/item-list" element={<ProductList />} />
+					<Route path="/home/item-list/*" element={<ProductDetail />} />
+				</Routes>
+				<ReactQueryDevtools />
+			</QueryClientProvider>
+		</BrowserRouter>
+	);
 }
 
-export default App
+export default App;

src/components/Product/ProductCard.tsx

@@ -0,0 +1,54 @@
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { Product } from '@/pages/ProductList';
+
+const StyledList = styled.li`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	& a:visited,
+	a {
+		color: #000;
+	}
+
+	& .product-list__image-bg {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #eaeaea;
+		border-radius: 5px;
+		margin: 1rem 0 0.3rem 0;
+	}
+
+	& .product-list__image {
+	}
+
+	& .product-list__title {
+		font-weight: 600;
+		margin-bottom: 0.5rem;
+	}
+`;
+
+function ProductCard({
+	id,
+	title,
+	imageUrl,
+	limitDate,
+}: Omit<Product, 'category' | 'text' | 'favorite'>) {
+	return (
+		<StyledList>
+			<Link to={`./item-${id}`}>
+				<div className="product-list__image-bg">
+					<img className="product-list__image" src={imageUrl} alt={title} />
+				</div>
+				<p className="product-list__title">{title}</p>
+				<p>{limitDate}일 후 대여 가능</p>
+			</Link>
+		</StyledList>
+	);
+}
+
+export default ProductCard;

src/components/Product/index.ts

@@ -0,0 +1 @@
+export { default as ProductCard } from './ProductCard';

src/config/queryClient.ts

@@ -0,0 +1,22 @@
+import { QueryClient } from 'react-query';
+
+export const getClient = (() => {
+	let client: QueryClient | null = null;
+
+	return () => {
+		if (!client)
+			client = new QueryClient({
+				defaultOptions: {
+					queries: {
+						cacheTime: 1000 * 60 * 60 * 24, // query 인스턴스가 unmount된 후 캐시 데이터를 유지하는 시간
+						staleTime: 1000, // 데이터가 mount된 후, stale 상태로 변경되기까지의 시간
+						refetchOnMount: false, // 쿼리에 새 인스턴스가 마운트될 때
+						refetchOnReconnect: false, // 네트워크가 끊어졌다 다시 연결될 때
+						refetchOnWindowFocus: false, // Window에 다시 Focus 될 때
+					},
+				},
+			});
+
+		return client;
+	};
+})();

src/constants/baseUrl.ts

@@ -0,0 +1 @@
+export const BASE_URL = 'http://39.118.50.38:400';

src/constants/queryKeys.ts

@@ -0,0 +1,3 @@
+export const QueryKeys = {
+	PRODUCT: 'PRODUCT',
+};

src/hook/queries/fetcher.ts

@@ -0,0 +1,38 @@
+import axios from 'axios';
+
+type AnyOBJ = { [key: string]: any };
+
+// const BASE_URL = `39.118.50.38:400`;
+
+export async function fetcher({
+	method,
+	path,
+	params = {},
+	body = {},
+}: {
+	method: 'get' | 'post' | 'put' | 'delete' | 'patch';
+	path: string;
+	params?: AnyOBJ;
+	body?: AnyOBJ;
+}) {
+	try {
+		const url = `${path}`;
+
+		const { data } = await axios({
+			url,
+			method,
+			data: { body },
+			params: { params },
+			withCredentials: true,
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		});
+
+		return data;
+	} catch (err) {
+		console.error(err);
+
+		return null;
+	}
+}

src/pages/ProductList.tsx

@@ -0,0 +1,61 @@
+import { useQuery } from 'react-query';
+import { useSearchParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { QueryKeys } from '../constants/queryKeys';
+import { fetcher } from '../hook/queries/fetcher';
+import { ProductCard } from '@/components/Product';
+
+export type ProductPostType = {
+	title: string;
+	text: string;
+	imageUrl: string;
+	category: string;
+	limitDate: number;
+};
+export type Product = ProductPostType & { id: number; favorite: number };
+
+const ProductListWrapper = styled.ul`
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 10px;
+	place-items: center;
+
+	& li {
+		list-style: none;
+	}
+
+	& img {
+		margin: 0;
+	}
+`;
+
+function ProductList() {
+	const [searchParams] = useSearchParams();
+	const page = Number(searchParams.get('page')) as number;
+
+	if (!page) return null;
+
+	const { data: productData } = useQuery<Product[]>(QueryKeys.PRODUCT, () =>
+		fetcher({
+			method: 'get',
+			path: `http://localhost:5173/mockdata.json`,
+		}),
+	);
+
+	return (
+		<ProductListWrapper>
+			{productData?.map(({ title, imageUrl, limitDate, id }) => (
+				<ProductCard
+					key={id}
+					id={id}
+					imageUrl={imageUrl}
+					title={title}
+					limitDate={limitDate}
+				/>
+			))}
+		</ProductListWrapper>
+	);
+}
+
+export default ProductList;