diff --git a/README.md b/README.md
index 3eaeec280..b3bada84f 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,38 @@
-# react-deploy
\ No newline at end of file
+# react-deploy
+FE 카카오 선물하기 6주차 과제: 배포 & 협업
+### 🌱 1단계 - API 명세 협의 & 반영
+작성한 API 문서를 기반으로 팀 내에서 지금까지 만든 API를 검토하고 통일하여 변경 사항을 반영
+- 팀 내에서 일관된 기준을 정하여 API 명세를 결정
+- 때로는 클라이언트의 편의를 위해 API 명세를 결정하는 것이 좋음
+
-
-
+
+
+
+
);
diff --git a/src/api/auth.ts b/src/api/auth.ts
index 42791565a..b945f1d2a 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,7 +1,7 @@
import { fetchInstance } from './instance';
export const register = async (email: string, password: string) => {
- const response = await fetchInstance.post('/api/members/register', {
+ const response = await fetchInstance.post(`/api/members/register`, {
email,
password,
});
@@ -9,7 +9,7 @@ export const register = async (email: string, password: string) => {
};
export const login = async (email: string, password: string) => {
- const response = await fetchInstance.post('/api/members/login', {
+ const response = await fetchInstance.post(`/api/members/login`, {
email,
password,
});
diff --git a/src/api/hooks/auth.mock.ts b/src/api/hooks/auth.mock.ts
index 4853553fe..7094dce07 100644
--- a/src/api/hooks/auth.mock.ts
+++ b/src/api/hooks/auth.mock.ts
@@ -3,21 +3,29 @@ import { rest } from 'msw';
const VALID_EMAIL = 'test@example.com';
const VALID_PASSWORD = 'password1234';
-export const authMockHandler = [
- rest.post('https://api.example.com/api/members/register', async (req, res, ctx) => {
- const { email, password } = await req.json<{ email: string; password: string }>();
+type RegisterResponse = {
+ message: string;
+}
- if (!email || !password) {
- return res(ctx.status(400), ctx.json({ message: 'Invalid input' }));
- }
+type LoginRequest = {
+ email: string;
+ password: string;
+}
- return res(ctx.status(201), ctx.json({ email, token: 'fake-token' }));
+type LoginResponse = {
+ token: string;
+}
+
+export const authMockHandler = [
+ rest.post(`/api/members/register`, async (_, res, ctx) => {
+ alert('회원가입이 완료되었습니다.');
+ return res(ctx.status(201), ctx.json({ message: 'User registered successfully' }));
}),
- rest.post('https://api.example.com/api/members/login', async (req, res, ctx) => {
- const { email, password } = await req.json<{ email: string; password: string }>();
+ rest.post('https://api.example.com/api/members/login', async (req, res, ctx) => {
+ const { email, password } = await req.json();
if (email === VALID_EMAIL && password === VALID_PASSWORD) {
- return res(ctx.status(200), ctx.json({ email, token: 'fake-token' }));
+ return res(ctx.status(200), ctx.json({ token: 'fake-token' }));
}
return res(ctx.status(403), ctx.json({ message: 'Invalid email or password' }));
diff --git a/src/api/hooks/categories.mock.ts b/src/api/hooks/categories.mock.ts
index f8d65843c..5ff47d3f0 100644
--- a/src/api/hooks/categories.mock.ts
+++ b/src/api/hooks/categories.mock.ts
@@ -2,13 +2,21 @@ import { rest } from 'msw';
import { getCategoriesPath } from './useGetCategorys';
+type Category = {
+ id: number;
+ name: string;
+ description: string;
+ color: string;
+ imageUrl: string;
+}
+
export const categoriesMockHandler = [
rest.get(getCategoriesPath(), (_, res, ctx) => {
- return res(ctx.json(CATEGORIES_RESPONSE_DATA));
+ return res(ctx.status(200), ctx.json(CATEGORIES_RESPONSE_DATA));
}),
];
-const CATEGORIES_RESPONSE_DATA = [
+const CATEGORIES_RESPONSE_DATA: Category[] = [
{
id: 2920,
name: '생일',
diff --git a/src/api/hooks/points.mock.ts b/src/api/hooks/points.mock.ts
new file mode 100644
index 000000000..69ba17487
--- /dev/null
+++ b/src/api/hooks/points.mock.ts
@@ -0,0 +1,16 @@
+import { rest } from 'msw';
+
+type PointResponse = {
+ point: number;
+}
+
+export const pointMockHandlers = [
+ rest.get('https://api.example.com/api/member/point', (req, res, ctx) => {
+ const authHeader = req.headers.get('Authorization');
+ if (!authHeader) {
+ return res(ctx.status(401));
+ }
+
+ return res(ctx.status(200), ctx.json({ point: 1000 }));
+ }),
+];
diff --git a/src/api/hooks/products.mock.ts b/src/api/hooks/products.mock.ts
index 6cef11235..1f6a72b47 100644
--- a/src/api/hooks/products.mock.ts
+++ b/src/api/hooks/products.mock.ts
@@ -4,13 +4,47 @@ import { getProductDetailPath } from './useGetProductDetail';
import { getProductOptionsPath } from './useGetProductOptions';
import { getProductsPath } from './useGetProducts';
+type Product = {
+ id: number;
+ name: string;
+ imageUrl: string;
+ price: number;
+ categoryId: string;
+}
+
+type Pageable = {
+ offset: number;
+ pageNumber: number;
+ pageSize: number;
+ unpaged: boolean;
+ paged: boolean;
+ sort: {
+ empty: boolean;
+ unsorted: boolean;
+ sorted: boolean;
+ };
+ last: boolean;
+ totalPages: number;
+ totalElements: number;
+ size: number;
+ number: number;
+ first: boolean;
+ numberOfElements: number;
+ empty: boolean;
+}
+
+type ProductsResponse = {
+ content: Product[];
+ pageable: Pageable;
+}
+
export const productsMockHandler = [
rest.get(
getProductsPath({
categoryId: '2920',
}),
(_, res, ctx) => {
- return res(ctx.json(PRODUCTS_MOCK_DATA));
+ return res(ctx.status(200), ctx.json(PRODUCTS_MOCK_DATA));
},
),
rest.get(
@@ -18,33 +52,32 @@ export const productsMockHandler = [
categoryId: '2930',
}),
(_, res, ctx) => {
- return res(ctx.json(PRODUCTS_MOCK_DATA));
+ return res(ctx.status(200), ctx.json(PRODUCTS_MOCK_DATA));
},
),
rest.get(getProductDetailPath(':productId'), (_, res, ctx) => {
- return res(ctx.json(PRODUCTS_MOCK_DATA.content[0]));
+ return res(ctx.status(200), ctx.json(PRODUCTS_MOCK_DATA.content[0]));
}),
rest.get(getProductOptionsPath(':productId'), (_, res, ctx) => {
return res(
+ ctx.status(200),
ctx.json([
{
id: 1,
name: 'Option A',
quantity: 10,
- productId: 1,
},
{
id: 2,
name: 'Option B',
quantity: 20,
- productId: 1,
},
]),
);
}),
];
-const PRODUCTS_MOCK_DATA = {
+const PRODUCTS_MOCK_DATA: ProductsResponse = {
content: [
{
id: 3245119,
@@ -52,6 +85,7 @@ const PRODUCTS_MOCK_DATA = {
imageUrl:
'https://st.kakaocdn.net/product/gift/product/20240215083306_8e1db057580145829542463a84971ae3.png',
price: 145000,
+ categoryId: '2920',
},
{
id: 2263833,
@@ -59,6 +93,7 @@ const PRODUCTS_MOCK_DATA = {
imageUrl:
'https://st.kakaocdn.net/product/gift/product/20200513102805_4867c1e4a7ae43b5825e9ae14e2830e3.png',
price: 100000,
+ categoryId: '2920',
},
{
id: 6502823,
@@ -66,6 +101,7 @@ const PRODUCTS_MOCK_DATA = {
imageUrl:
'https://st.kakaocdn.net/product/gift/product/20240215112140_11f857e972bc4de6ac1d2f1af47ce182.jpg',
price: 108000,
+ categoryId: '2920',
},
{
id: 1181831,
@@ -73,6 +109,7 @@ const PRODUCTS_MOCK_DATA = {
imageUrl:
'https://st.kakaocdn.net/product/gift/product/20240214150740_ad25267defa64912a7c030a7b57dc090.jpg',
price: 122000,
+ categoryId: '2920',
},
{
id: 1379982,
@@ -80,10 +117,27 @@ const PRODUCTS_MOCK_DATA = {
imageUrl:
'https://st.kakaocdn.net/product/gift/product/20240118135914_a6e1a7442ea04aa49add5e02ed62b4c3.jpg',
price: 133000,
+ categoryId: '2920',
},
],
- number: 0,
- totalElements: 5,
- size: 10,
- last: true,
+ pageable: {
+ offset: 0,
+ pageNumber: 0,
+ pageSize: 10,
+ unpaged: false,
+ paged: true,
+ sort: {
+ empty: false,
+ unsorted: true,
+ sorted: false,
+ },
+ last: true,
+ totalPages: 1,
+ totalElements: 5,
+ size: 10,
+ number: 0,
+ first: true,
+ numberOfElements: 5,
+ empty: false,
+ },
};
diff --git a/src/api/hooks/useGetCategorys.ts b/src/api/hooks/useGetCategorys.ts
index d93e4fc95..acb2b6997 100644
--- a/src/api/hooks/useGetCategorys.ts
+++ b/src/api/hooks/useGetCategorys.ts
@@ -2,11 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import type { CategoryData } from '@/types';
-import { BASE_URL, fetchInstance } from '../instance';
+import { fetchInstance } from '../instance';
export type CategoryResponseData = CategoryData[];
-export const getCategoriesPath = () => `${BASE_URL}/api/categories`;
+export const getCategoriesPath = () => `/api/categories`;
const categoriesQueryKey = [getCategoriesPath()];
export const getCategories = async () => {
diff --git a/src/api/hooks/useGetPoints.ts b/src/api/hooks/useGetPoints.ts
new file mode 100644
index 000000000..c6e128438
--- /dev/null
+++ b/src/api/hooks/useGetPoints.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { fetchInstance } from '../instance';
+
+export const useGetPoints = () => {
+ const [points, setPoints] = useState(() => {
+ const savedPoints = sessionStorage.getItem('points');
+ return savedPoints ? parseInt(savedPoints, 10) : 0;
+ });
+
+ useEffect(() => {
+ if (!sessionStorage.getItem('points')) {
+ const fetchPoints = async () => {
+ try {
+ const response = await fetchInstance.get('/api/member/point');
+ setPoints(response.data.point);
+ sessionStorage.setItem('points', response.data.point);
+ } catch (error) {
+ console.error('Failed to fetch points', error);
+ }
+ };
+ fetchPoints();
+ }
+ }, []);
+
+ return points;
+};
diff --git a/src/api/hooks/useGetProductDetail.ts b/src/api/hooks/useGetProductDetail.ts
index 539de0196..5d0e92df9 100644
--- a/src/api/hooks/useGetProductDetail.ts
+++ b/src/api/hooks/useGetProductDetail.ts
@@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
import type { ProductData } from '@/types';
-import { BASE_URL, fetchInstance } from '../instance';
+import { fetchInstance } from '../instance';
export type ProductDetailRequestParams = {
productId: string;
@@ -12,7 +12,7 @@ type Props = ProductDetailRequestParams;
export type GoodsDetailResponseData = ProductData;
-export const getProductDetailPath = (productId: string) => `${BASE_URL}/api/products/${productId}`;
+export const getProductDetailPath = (productId: string) => `/api/products/${productId}`;
export const getProductDetail = async (params: ProductDetailRequestParams) => {
const response = await fetchInstance.get(
diff --git a/src/api/hooks/useGetProductOptions.ts b/src/api/hooks/useGetProductOptions.ts
index a3bdc538f..dda023a2c 100644
--- a/src/api/hooks/useGetProductOptions.ts
+++ b/src/api/hooks/useGetProductOptions.ts
@@ -2,15 +2,14 @@ import { useSuspenseQuery } from '@tanstack/react-query';
import type { ProductOptionsData } from '@/types';
-import { BASE_URL, fetchInstance } from '../instance';
+import { fetchInstance } from '../instance';
import type { ProductDetailRequestParams } from './useGetProductDetail';
type Props = ProductDetailRequestParams;
export type ProductOptionsResponseData = ProductOptionsData[];
-export const getProductOptionsPath = (productId: string) =>
- `${BASE_URL}/api/products/${productId}/options`;
+export const getProductOptionsPath = (productId: string) => `/api/products/${productId}/options`;
export const getProductOptions = async (params: ProductDetailRequestParams) => {
const response = await fetchInstance.get(
diff --git a/src/api/hooks/useGetProducts.ts b/src/api/hooks/useGetProducts.ts
index 432f90d93..d917d43fe 100644
--- a/src/api/hooks/useGetProducts.ts
+++ b/src/api/hooks/useGetProducts.ts
@@ -6,7 +6,6 @@ import {
import type { ProductData } from '@/types';
-import { BASE_URL } from '../instance';
import { fetchInstance } from './../instance/index';
type RequestParams = {
@@ -26,10 +25,31 @@ type ProductsResponseData = {
type ProductsResponseRawData = {
content: ProductData[];
- number: number;
+ pageable: {
+ offset: number;
+ sort: {
+ empty: boolean;
+ unsorted: boolean;
+ sorted: boolean;
+ };
+ unpaged: boolean;
+ paged: boolean;
+ pageSize: number;
+ pageNumber: number;
+ };
+ last: boolean;
+ totalPages: number;
totalElements: number;
size: number;
- last: boolean;
+ number: number;
+ sort: {
+ empty: boolean;
+ unsorted: boolean;
+ sorted: boolean;
+ };
+ first: boolean;
+ numberOfElements: number;
+ empty: boolean;
};
export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestParams) => {
@@ -40,7 +60,7 @@ export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestPa
if (pageToken) params.append('page', pageToken);
if (maxResults) params.append('size', maxResults.toString());
- return `${BASE_URL}/api/products?${params.toString()}`;
+ return `/api/products?${params.toString()}`;
};
export const getProducts = async (params: RequestParams): Promise => {
diff --git a/src/api/hooks/useGetWishlist.ts b/src/api/hooks/useGetWishlist.ts
new file mode 100644
index 000000000..5256040df
--- /dev/null
+++ b/src/api/hooks/useGetWishlist.ts
@@ -0,0 +1,93 @@
+import {
+ type InfiniteData,
+ useInfiniteQuery,
+ type UseInfiniteQueryResult,
+} from '@tanstack/react-query';
+import axios from 'axios';
+
+import { useApi } from '@/provider/Api';
+import { useAuth } from '@/provider/Auth';
+
+type WishlistItem = {
+ id: number;
+ name: string;
+ price: number;
+ imageUrl: string;
+};
+
+type WishlistResponseData = {
+ content: WishlistItem[];
+ pageable: {
+ sort: {
+ sorted: boolean;
+ empty: boolean;
+ };
+ pageNumber: number;
+ pageSize: number;
+ offset: number;
+ unpaged: boolean;
+ paged: boolean;
+ };
+ totalPages: number;
+ totalElements: number;
+ last: boolean;
+ number: number;
+ size: number;
+ numberOfElements: number;
+ first: boolean;
+ empty: boolean;
+};
+
+type RequestParams = {
+ pageToken?: string;
+ maxResults?: number;
+};
+
+export const getWishlistPath = ({ pageToken, maxResults }: RequestParams, apiUrl: string) => {
+ const params = new URLSearchParams();
+ params.append('sort', 'createdDate,desc');
+ if (pageToken) params.append('page', pageToken);
+ if (maxResults) params.append('size', maxResults.toString());
+
+ return `${apiUrl}api/wishes?${params.toString()}`;
+};
+
+export const getWishlist = async (
+ params: RequestParams,
+ token: string,
+ apiUrl: string,
+): Promise => {
+ const url = getWishlistPath(params, apiUrl);
+
+ const response = await axios.get(url, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${JSON.parse(token).token}`,
+ },
+ });
+
+ return response.data;
+};
+
+export const useGetWishlist = ({
+ maxResults = 10,
+ initPageToken,
+}: {
+ maxResults?: number;
+ initPageToken?: string;
+}): UseInfiniteQueryResult> => {
+ const authInfo = useAuth();
+ const { apiUrl } = useApi();
+
+ return useInfiniteQuery({
+ queryKey: ['wishlist', maxResults, initPageToken],
+ queryFn: async ({ pageParam = initPageToken }) => {
+ if (!authInfo?.token) {
+ throw new Error('Authentication token is missing');
+ }
+ return getWishlist({ pageToken: pageParam, maxResults }, JSON.parse(authInfo.token).token, apiUrl);
+ },
+ initialPageParam: initPageToken,
+ getNextPageParam: (lastPage) => (lastPage.last ? undefined : (lastPage.number + 1).toString()),
+ });
+};
diff --git a/src/api/hooks/wishlist.mock.ts b/src/api/hooks/wishlist.mock.ts
index fa1d155c3..3ac4e7703 100644
--- a/src/api/hooks/wishlist.mock.ts
+++ b/src/api/hooks/wishlist.mock.ts
@@ -1,67 +1,213 @@
import { rest } from 'msw';
+type Product = {
+ id: number;
+ name: string;
+ price: number;
+ imageUrl: string;
+}
+
+type WishlistItem = {
+ id: number;
+ product: Product;
+}
+
+type PageableResponse = {
+ content: T[];
+ totalPages: number;
+ totalElements: number;
+ number: number;
+ size: number;
+ first: boolean;
+ last: boolean;
+}
+
+const WISHLIST_MOCK_DATA: WishlistItem[] = [
+ {
+ id: 1,
+ product: {
+ id: 1,
+ name: 'Product A',
+ price: 100,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 2,
+ product: {
+ id: 2,
+ name: 'Product B',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 3,
+ product: {
+ id: 3,
+ name: 'Product C',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 4,
+ product: {
+ id: 4,
+ name: 'Product D',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 5,
+ product: {
+ id: 5,
+ name: 'Product E',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 6,
+ product: {
+ id: 6,
+ name: 'Product F',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 7,
+ product: {
+ id: 7,
+ name: 'Product G',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 8,
+ product: {
+ id: 8,
+ name: 'Product H',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 9,
+ product: {
+ id: 9,
+ name: 'Product I',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 10,
+ product: {
+ id: 10,
+ name: 'Product J',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+ {
+ id: 11,
+ product: {
+ id: 11,
+ name: 'Product K',
+ price: 150,
+ imageUrl:
+ 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+ },
+ },
+];
+
+const getPagedData = (page: number, size: number) => {
+ const start = page * size;
+ const end = start + size;
+ return WISHLIST_MOCK_DATA.slice(start, end);
+};
+
export const wishlistMockHandler = [
- rest.get('/api/wishes', async (req, res, ctx) => {
- const token = req.headers.get('Authorization');
+ rest.get>('/api/wishes', (req, res, ctx) => {
+ const page = parseInt(req.url.searchParams.get('page') || '0', 10);
+ const size = parseInt(req.url.searchParams.get('size') || '10', 10);
- if (!token) {
- return res(ctx.status(401), ctx.json({ message: 'Invalid or missing token' }));
- }
+ const pagedContent = getPagedData(page, size);
+ const totalElements = WISHLIST_MOCK_DATA.length;
+ const totalPages = Math.ceil(totalElements / size);
- return res(ctx.status(200), ctx.json(WISHLIST_MOCK_DATA));
+ return res(
+ ctx.status(200),
+ ctx.json({
+ content: pagedContent.map(item => ({
+ id: item.id,
+ name: item.product.name,
+ price: item.product.price,
+ imageUrl: item.product.imageUrl,
+ })),
+ totalPages: totalPages,
+ totalElements: totalElements,
+ number: page,
+ size: size,
+ first: page === 0,
+ last: page === totalPages - 1,
+ })
+ );
}),
rest.delete('/api/wishes/:wishId', (req, res, ctx) => {
const { wishId } = req.params;
- const wishIndex = WISHLIST_MOCK_DATA.content.findIndex((item) => item.id === Number(wishId));
- if (wishIndex !== -1) {
- WISHLIST_MOCK_DATA.content.splice(wishIndex, 1);
- return res(ctx.status(204));
+ const index = WISHLIST_MOCK_DATA.findIndex(item => item.id.toString() === wishId);
+
+ if (index === -1) {
+ return res(ctx.status(404), ctx.json({ message: 'Wish not found' }));
}
- return res(ctx.status(404), ctx.json({ message: 'Wish not found' }));
+
+ WISHLIST_MOCK_DATA.splice(index, 1);
+ return res(ctx.status(204));
}),
-];
+ rest.post(`/api/wishes/:productId`, (req, res, ctx) => {
+ const { productId } = req.params;
+ const token = req.headers.get('Authorization');
-const WISHLIST_MOCK_DATA = {
- content: [
- {
- id: 1,
- product: {
- id: 1,
- name: 'Product A',
- price: 100,
- imageUrl:
- 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
- },
- },
- {
- id: 2,
+ if (!token) {
+ return res(ctx.status(401), ctx.json({ message: 'Invalid or missing token' }));
+ }
+
+ const existingWish = WISHLIST_MOCK_DATA.find(
+ (item) => item.product.id === Number(productId),
+ );
+
+ if (existingWish) {
+ return res(ctx.status(400), ctx.json({ message: 'Product already in wishlist' }));
+ }
+
+ const newProduct = {
+ id: WISHLIST_MOCK_DATA.length + 1,
product: {
- id: 2,
- name: 'Product B',
+ id: Number(productId),
+ name: `Product ${String.fromCharCode(65 + WISHLIST_MOCK_DATA.length)}`,
price: 150,
imageUrl:
'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
},
- },
- ],
- pageable: {
- sort: {
- sorted: true,
- unsorted: false,
- empty: false,
- },
- pageNumber: 0,
- pageSize: 10,
- offset: 0,
- unpaged: false,
- paged: true,
- },
- totalPages: 5,
- totalElements: 50,
- last: false,
- number: 0,
- size: 10,
- numberOfElements: 2,
- first: true,
- empty: false,
-};
+ };
+
+ WISHLIST_MOCK_DATA.push(newProduct);
+
+ return res(ctx.status(201), ctx.json(newProduct));
+ }),
+];
diff --git a/src/api/instance/index.ts b/src/api/instance/index.ts
index b83ca1407..c301ec70b 100644
--- a/src/api/instance/index.ts
+++ b/src/api/instance/index.ts
@@ -1,26 +1,24 @@
import { QueryClient } from '@tanstack/react-query';
-import type { AxiosInstance, AxiosRequestConfig } from 'axios';
import axios from 'axios';
-const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
+import { backend } from '@/config/backendConfig';
+
+const initInstance = () => {
+ const apiUrl = localStorage.getItem('apiUrl') || backend.backend3;
+
const instance = axios.create({
+ baseURL: apiUrl,
timeout: 5000,
- ...config,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
- ...config.headers,
},
});
return instance;
};
-export const BASE_URL = 'https://api.example.com';
-// TODO: 추후 서버 API 주소 변경 필요
-export const fetchInstance = initInstance({
- baseURL: 'https://api.example.com',
-});
+export const fetchInstance = initInstance();
export const queryClient = new QueryClient({
defaultOptions: {
diff --git a/src/components/features/Goods/Detail/OptionSection.tsx b/src/components/features/Goods/Detail/OptionSection.tsx
index 74a6b61da..c6bb400aa 100644
--- a/src/components/features/Goods/Detail/OptionSection.tsx
+++ b/src/components/features/Goods/Detail/OptionSection.tsx
@@ -8,6 +8,7 @@ import {
} from '@/api/hooks/useGetProductDetail';
import { useGetProductOptions } from '@/api/hooks/useGetProductOptions';
import { Button } from '@/components/common/Button';
+import { useApi } from '@/provider/Api';
import { useAuth } from '@/provider/Auth';
import { getDynamicPath, RouterPath } from '@/routes/path';
import { orderHistorySessionStorage } from '@/utils/storage';
@@ -19,7 +20,7 @@ type Props = ProductDetailRequestParams;
export const OptionSection = ({ productId }: Props) => {
const { data: detail } = useGetProductDetail({ productId });
const { data: options } = useGetProductOptions({ productId });
-
+ const { apiUrl } = useApi();
const [countAsString, setCountAsString] = useState('1');
const totalPrice = useMemo(() => {
return detail.price * Number(countAsString);
@@ -47,14 +48,22 @@ export const OptionSection = ({ productId }: Props) => {
const handleAddToWishlist = async () => {
try {
- await fetch('/api/wishes', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ productId }),
- });
- alert('관심 등록 완료');
+ const tokenString = sessionStorage.getItem('authToken');
+
+ if (tokenString) {
+ const token = JSON.parse(tokenString).token;
+
+ await fetch(`${apiUrl}api/wishes/${productId}`, {
+ credentials: 'include',
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({ productId }),
+ });
+ alert('관심 등록 완료');
+ }
} catch (error) {
console.error(error);
alert('관심 상품 등록에 실패했습니다.');
diff --git a/src/components/features/Layout/Header.tsx b/src/components/features/Layout/Header.tsx
index eeac55071..9fbb2466e 100644
--- a/src/components/features/Layout/Header.tsx
+++ b/src/components/features/Layout/Header.tsx
@@ -2,17 +2,24 @@ import styled from '@emotion/styled';
import { Link, useNavigate } from 'react-router-dom';
import { Container } from '@/components/common/layouts/Container';
+import { backend } from '@/config/backendConfig';
+import { useApi } from '@/provider/Api';
import { useAuth } from '@/provider/Auth';
import { getDynamicPath, RouterPath } from '@/routes/path';
export const Header = () => {
const navigate = useNavigate();
const authInfo = useAuth();
+ const { apiUrl, setApiUrl } = useApi();
const handleLogin = () => {
navigate(getDynamicPath.login());
};
+ const handleApiChange = (event: React.ChangeEvent) => {
+ setApiUrl(event.target.value);
+ };
+
return (
@@ -23,6 +30,11 @@ export const Header = () => {
/>
+
+ 김민지
+ 박상우
+ 배민수
+
{authInfo ? (
navigate(RouterPath.myAccount)}>내 계정
) : (
@@ -49,7 +61,13 @@ export const Wrapper = styled.header`
const Logo = styled.img`
height: ${HEADER_HEIGHT};
`;
-const RightWrapper = styled.div``;
+const RightWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 20px;
+`;
const LinkButton = styled.p`
align-items: center;
@@ -58,3 +76,17 @@ const LinkButton = styled.p`
text-decoration: none;
cursor: pointer;
`;
+
+const ApiSelector = styled.select`
+ width: 200px;
+ height: 40px;
+ border: 2px solid #444;
+ border-radius: 4px;
+ padding: 5px 10px;
+ font-size: 16px;
+ cursor: pointer;
+
+ &:hover {
+ border-color: #888;
+ }
+`;
diff --git a/src/components/features/Wishlist/index.tsx b/src/components/features/Wishlist/index.tsx
index 9227cc3a3..b5e590abf 100644
--- a/src/components/features/Wishlist/index.tsx
+++ b/src/components/features/Wishlist/index.tsx
@@ -1,52 +1,44 @@
import { Box, Button, Heading, List, ListItem, Text } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
+import { useGetWishlist } from '@/api/hooks/useGetWishlist';
+import { VisibilityLoader } from '@/components/common/VisibilityLoader';
+import { useApi } from '@/provider/Api';
import { useAuth } from '@/provider/Auth';
type WishlistItem = {
id: number;
- product: {
- id: number;
- name: string;
- price: number;
- imageUrl: string;
- };
+ name: string;
+ price: number;
+ imageUrl: string;
};
export const Wishlist = () => {
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetWishlist({
+ maxResults: 10,
+ });
const authInfo = useAuth();
- const [wishlist, setWishList] = useState([]);
+ const { apiUrl } = useApi();
+ const [wishlist, setWishlist] = useState([]);
useEffect(() => {
- const fetchData = async () => {
- if (authInfo?.token) {
- try {
- const response = await fetch('/api/wishes', {
- headers: {
- Authorization: `Bearer ${authInfo.token}`,
- },
- });
- const wishData = await response.json();
- setWishList(wishData.content);
- } catch (error) {
- console.error(error);
- }
- }
- };
-
- fetchData();
- }, [authInfo]);
+ if (data) {
+ const flattenWishlist = data.pages.flatMap((page) => page.content).flat();
+ setWishlist(flattenWishlist);
+ }
+ }, [data]);
const handleDelete = async (wishId: number) => {
if (authInfo?.token) {
- const response = await fetch(`/api/wishes/${wishId}`, {
+ const token = JSON.parse(authInfo.token).token;
+ const response = await fetch(`${apiUrl}api/wishes/${wishId}`, {
method: 'DELETE',
headers: {
- Authorization: `Bearer ${authInfo.token}`,
+ Authorization: `Bearer ${token}`,
},
});
if (response.status === 204) {
- setWishList((prev) => prev.filter((item) => item.id !== wishId));
+ setWishlist((prevWishlist) => prevWishlist.filter((item) => item.id !== wishId));
} else {
alert('삭제 중 오류가 발생했습니다.');
}
@@ -67,12 +59,12 @@ export const Wishlist = () => {
-
- {item.product.name}
+ {item.name}
- {item.product.price}원
+ {item.price}원
handleDelete(item.id)}>삭제
@@ -81,6 +73,15 @@ export const Wishlist = () => {
))}
)}
+ {hasNextPage && (
+ {
+ if (!isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }}
+ />
+ )}
);
diff --git a/src/config/backendConfig.ts b/src/config/backendConfig.ts
new file mode 100644
index 000000000..45700b7e6
--- /dev/null
+++ b/src/config/backendConfig.ts
@@ -0,0 +1,5 @@
+export const backend: { [key: string]: string } = {
+ backend1: 'http://52.78.23.209:8080/',
+ backend2: 'http://3.38.169.232:8080/',
+ backend3: 'http://43.202.41.105:8080/',
+};
diff --git a/src/mocks/browser.ts b/src/mocks/browser.ts
index d3454c161..8d06b1dd1 100644
--- a/src/mocks/browser.ts
+++ b/src/mocks/browser.ts
@@ -2,6 +2,7 @@ import { setupWorker } from 'msw';
import { authMockHandler } from '@/api/hooks/auth.mock';
import { categoriesMockHandler } from '@/api/hooks/categories.mock';
+import { pointMockHandlers } from '@/api/hooks/points.mock';
import { productsMockHandler } from '@/api/hooks/products.mock';
import { wishlistMockHandler } from '@/api/hooks/wishlist.mock';
@@ -10,4 +11,5 @@ export const worker = setupWorker(
...productsMockHandler,
...authMockHandler,
...wishlistMockHandler,
+ ...pointMockHandlers,
);
diff --git a/src/mocks/server.ts b/src/mocks/server.ts
index e4c6ea86a..3d22e3712 100644
--- a/src/mocks/server.ts
+++ b/src/mocks/server.ts
@@ -2,6 +2,7 @@ import { setupServer } from 'msw/node';
import { authMockHandler } from '@/api/hooks/auth.mock';
import { categoriesMockHandler } from '@/api/hooks/categories.mock';
+import { pointMockHandlers } from '@/api/hooks/points.mock';
import { productsMockHandler } from '@/api/hooks/products.mock';
import { wishlistMockHandler } from '@/api/hooks/wishlist.mock';
@@ -10,4 +11,5 @@ export const server = setupServer(
...productsMockHandler,
...authMockHandler,
...wishlistMockHandler,
+ ...pointMockHandlers,
);
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 96970fc23..cc7dbc196 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
+import axios from 'axios';
import { useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -7,6 +8,7 @@ import KAKAO_LOGO from '@/assets/kakao_logo.svg';
import { Button } from '@/components/common/Button';
import { UnderlineTextField } from '@/components/common/Form/Input/UnderlineTextField';
import { Spacing } from '@/components/common/layouts/Spacing';
+import { useApi } from '@/provider/Api';
import { RouterPath } from '@/routes/path';
import { breakpoints } from '@/styles/variants';
import { authSessionStorage } from '@/utils/storage';
@@ -16,6 +18,7 @@ export const LoginPage = () => {
const [password, setPassword] = useState('');
const [queryParams] = useSearchParams();
const navigate = useNavigate();
+ const { apiUrl } = useApi();
const handleConfirm = async () => {
if (!email || !password) {
@@ -24,10 +27,14 @@ export const LoginPage = () => {
}
try {
- const data = await login(email, password);
+ const token = await login(email, password);
- sessionStorage.setItem('authEmail', data.email);
- authSessionStorage.set(data.token);
+ sessionStorage.setItem('authEmail', email);
+ sessionStorage.setItem('authToken', token);
+ authSessionStorage.set(token);
+
+ const points = await fetchPoints(token);
+ sessionStorage.setItem('points', points.toString());
const redirectUrl = queryParams.get('redirect') ?? `${window.location.origin}/`;
window.location.replace(redirectUrl);
@@ -37,6 +44,21 @@ export const LoginPage = () => {
}
};
+ const fetchPoints = async (token: string) => {
+ try {
+ const response = await axios.get(`${apiUrl}api/member/point`, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ 'Content-Type': 'application/json',
+ },
+ });
+ return response.data.point;
+ } catch (error) {
+ console.error('Failed to fetch points', error);
+ return 0;
+ }
+ };
+
return (
- {authInfo?.name}님 안녕하세요! 보유 포인트 : {points}p
{
const [email, setEmail] = useState('');
@@ -22,12 +21,12 @@ export const RegisterPage = () => {
}
try {
- const data = await register(email, password);
+ const response = await register(email, password);
- sessionStorage.setItem('authEmail', data.email);
- authSessionStorage.set(data.token);
-
- alert('회원가입이 완료되었습니다.');
+ if (response.status === 201) {
+ sessionStorage.setItem('authEmail', email);
+ alert('회원가입이 완료되었습니다.');
+ }
const redirectUrl = queryParams.get('redirect') ?? `${window.location.origin}/`;
return window.location.replace(redirectUrl);
diff --git a/src/provider/Api/index.tsx b/src/provider/Api/index.tsx
new file mode 100644
index 000000000..25f2ee50d
--- /dev/null
+++ b/src/provider/Api/index.tsx
@@ -0,0 +1,37 @@
+import { useQueryClient } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { backend } from '@/config/backendConfig';
+
+interface ApiContextType {
+ apiUrl: string;
+ setApiUrl: (url: string) => void;
+}
+
+const defaultState: ApiContextType = {
+ apiUrl: backend.backend3,
+ setApiUrl: () => {},
+};
+
+const ApiContext = createContext(defaultState);
+
+interface ApiProviderProps {
+ children: ReactNode;
+}
+
+export const ApiProvider = ({ children }: ApiProviderProps) => {
+ const [apiUrl, setApiUrl] = useState(
+ () => localStorage.getItem('apiUrl') || backend.backend3,
+ );
+ const queryClient = useQueryClient();
+
+ useEffect(() => {
+ localStorage.setItem('apiUrl', apiUrl);
+ queryClient.invalidateQueries();
+ }, [apiUrl, queryClient]);
+
+ return {children} ;
+};
+
+export const useApi = () => useContext(ApiContext);
diff --git a/src/provider/Auth/index.tsx b/src/provider/Auth/index.tsx
index 77cbb73a9..d96bdf4ee 100644
--- a/src/provider/Auth/index.tsx
+++ b/src/provider/Auth/index.tsx
@@ -4,7 +4,7 @@ import { createContext, useContext, useEffect, useState } from 'react';
import { authSessionStorage } from '@/utils/storage';
type AuthInfo = {
- id: string;
+ email: string;
name: string;
token: string;
};
@@ -12,21 +12,34 @@ type AuthInfo = {
export const AuthContext = createContext(undefined);
export const AuthProvider = ({ children }: { children: ReactNode }) => {
+ const currentAuthEmail = sessionStorage.getItem('authEmail');
const currentAuthToken = authSessionStorage.get();
- const [isReady, setIsReady] = useState(!currentAuthToken);
- const [authInfo, setAuthInfo] = useState(undefined);
+ const [isReady, setIsReady] = useState(false);
+ const [authInfo, setAuthInfo] = useState(() => {
+ if (currentAuthEmail && currentAuthToken) {
+ const name = currentAuthEmail.split('@')[0];
+ return {
+ email: currentAuthEmail,
+ name: name,
+ token: currentAuthToken,
+ };
+ }
+ return undefined;
+ });
useEffect(() => {
- if (currentAuthToken) {
+ if (currentAuthEmail && currentAuthToken && !authInfo) {
+ const name = currentAuthEmail.split('@')[0];
+
setAuthInfo({
- id: currentAuthToken, // TODO: 임시로 로그인 페이지에서 입력한 이름을 ID, token, name으로 사용
- name: currentAuthToken,
+ email: currentAuthEmail,
+ name: name,
token: currentAuthToken,
});
- setIsReady(true);
}
- }, [currentAuthToken]);
+ setIsReady(true);
+ }, [currentAuthEmail, currentAuthToken, authInfo]);
if (!isReady) return <>;
return {children} ;
diff --git a/src/types/index.ts b/src/types/index.ts
index 33c397459..2c994ffed 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -18,7 +18,6 @@ export type ProductOptionsData = {
id: number;
name: string;
quantity: number;
- productId: number;
};
export type GoodsDetailOptionItemData = {