diff --git a/package-lock.json b/package-lock.json index e0a8f5038..4aeeb8bef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^5.24.1", "axios": "^1.6.7", + "base-64": "^1.0.0", "framer-motion": "^11.0.6", "glob": "^11.0.0", "react": "^18.2.0", @@ -39,6 +40,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "@types/base-64": "^1.0.2", "@types/jest": "^27.5.2", "@types/node": "^16.18.82", "@types/react": "^18.2.57", @@ -9308,6 +9310,13 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/base-64": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.2.tgz", + "integrity": "sha512-uPgKMmM9fmn7I+Zi6YBqctOye4SlJsHKcisjHIMWpb2YKZRc36GpKyNuQ03JcT+oNXg1m7Uv4wU94EVltn8/cw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", @@ -11693,6 +11702,12 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base-64": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", + "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==", + "license": "MIT" + }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", diff --git a/package.json b/package.json index 8b38f4ba0..4774234a5 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^5.24.1", "axios": "^1.6.7", + "base-64": "^1.0.0", "framer-motion": "^11.0.6", "glob": "^11.0.0", "react": "^18.2.0", @@ -54,6 +55,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "@types/base-64": "^1.0.2", "@types/jest": "^27.5.2", "@types/node": "^16.18.82", "@types/react": "^18.2.57", @@ -87,4 +89,4 @@ "overrides": { "react-refresh": "0.11.0" } -} \ No newline at end of file +} diff --git a/public/token.html b/public/token.html new file mode 100644 index 000000000..c7bdcabc0 --- /dev/null +++ b/public/token.html @@ -0,0 +1,33 @@ + + + + + + OAuth Callback + + + +

OAuth Callback

+

토큰을 기다리고 있습니다...

+ + + \ No newline at end of file diff --git a/src/api/hooks/categories.mock.ts b/src/api/hooks/categories.mock.ts index 7b1ac46f2..c1d5545eb 100644 --- a/src/api/hooks/categories.mock.ts +++ b/src/api/hooks/categories.mock.ts @@ -8,21 +8,48 @@ export const categoriesMockHandler = [ }), ]; -const CATEGORIES_RESPONSE_DATA = [ - { - id: 2920, - name: '생일', - description: '감동을 높여줄 생일 선물 리스트', - color: '#5949a3', - imageUrl: - 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png', +const CATEGORIES_RESPONSE_DATA = { + totalElements: 2, + totalPages: 1, + first: true, + last: true, + size: 10, + content: [ + { + id: 2920, + name: '생일', + description: '감동을 높여줄 생일 선물 리스트', + color: '#5949a3', + imageUrl: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png', + }, + { + id: 2930, + name: '교환권', + description: '놓치면 후회할 교환권 특가', + color: '#9290C3', + imageUrl: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg', + }, + ], + number: 0, + sort: { + empty: true, + sorted: false, + unsorted: true, }, - { - id: 2930, - name: '교환권', - description: '놓치면 후회할 교환권 특가', - color: '#9290C3', - imageUrl: - 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg', + numberOfElements: 2, + pageable: { + pageNumber: 0, + pageSize: 10, + sort: { + empty: true, + sorted: false, + unsorted: true, + }, + offset: 0, + paged: true, + unpaged: false, }, -]; + empty: false, +}; \ No newline at end of file diff --git a/src/api/hooks/useGetCategories.ts b/src/api/hooks/useGetCategories.ts index d93e4fc95..8bb5c4fed 100644 --- a/src/api/hooks/useGetCategories.ts +++ b/src/api/hooks/useGetCategories.ts @@ -2,20 +2,58 @@ import { useQuery } from '@tanstack/react-query'; import type { CategoryData } from '@/types'; -import { BASE_URL, fetchInstance } from '../instance'; +import { getBaseUrl, fetchInstance } from '../instance'; -export type CategoryResponseData = CategoryData[]; +export type CategoryResponseData = { + totalElements: number; + totalPages: number; + first: boolean; + last: boolean; + size: number; + content: CategoryData[]; + number: number; + sort: { + empty: boolean; + sorted: boolean; + unsorted: boolean; + }; + numberOfElements: number; + pageable: { + pageNumber: number; + pageSize: number; + sort: { + empty: boolean; + sorted: boolean; + unsorted: boolean; + }; + offset: number; + paged: boolean; + unpaged: boolean; + }; + empty: boolean; +}; + +export const getCategoriesPath = () => `${getBaseUrl()}/api/categories`; + +export const getCategories = async (): Promise => { + let allCategories: CategoryData[] = []; + let currentPage = 0; + let hasNextPage = true; -export const getCategoriesPath = () => `${BASE_URL}/api/categories`; -const categoriesQueryKey = [getCategoriesPath()]; + while (hasNextPage) { + const response = await fetchInstance.get( + `${getCategoriesPath()}?page=${currentPage}&size=100` + ); + allCategories = [...allCategories, ...response.data.content]; + hasNextPage = !response.data.last; + currentPage++; + } -export const getCategories = async () => { - const response = await fetchInstance.get(getCategoriesPath()); - return response.data; + return allCategories; }; export const useGetCategories = () => useQuery({ - queryKey: categoriesQueryKey, + queryKey: ['categories'], queryFn: getCategories, }); diff --git a/src/api/hooks/useGetProductDetail.ts b/src/api/hooks/useGetProductDetail.ts index 539de0196..72023785c 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 { getBaseUrl, 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) => `${getBaseUrl()}/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..1be861ee0 100644 --- a/src/api/hooks/useGetProductOptions.ts +++ b/src/api/hooks/useGetProductOptions.ts @@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import type { ProductOptionsData } from '@/types'; -import { BASE_URL, fetchInstance } from '../instance'; +import {getBaseUrl, fetchInstance } from '../instance'; import type { ProductDetailRequestParams } from './useGetProductDetail'; type Props = ProductDetailRequestParams; @@ -10,7 +10,7 @@ type Props = ProductDetailRequestParams; export type ProductOptionsResponseData = ProductOptionsData[]; export const getProductOptionsPath = (productId: string) => - `${BASE_URL}/api/products/${productId}/options`; + `${getBaseUrl()}/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..7fef29938 100644 --- a/src/api/hooks/useGetProducts.ts +++ b/src/api/hooks/useGetProducts.ts @@ -6,7 +6,7 @@ import { import type { ProductData } from '@/types'; -import { BASE_URL } from '../instance'; +import { getBaseUrl } from '../instance'; import { fetchInstance } from './../instance/index'; type RequestParams = { @@ -35,12 +35,14 @@ type ProductsResponseRawData = { export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestParams) => { const params = new URLSearchParams(); - params.append('categoryId', categoryId); + if (pageToken) + params.append('page', pageToken); + if (maxResults) + params.append('size', maxResults.toString()); params.append('sort', 'name,asc'); - if (pageToken) params.append('page', pageToken); - if (maxResults) params.append('size', maxResults.toString()); + params.append('categoryId', categoryId); - return `${BASE_URL}/api/products?${params.toString()}`; + return `${getBaseUrl()}/api/products?${params.toString()}`; }; export const getProducts = async (params: RequestParams): Promise => { @@ -58,6 +60,7 @@ export const getProducts = async (params: RequestParams): Promise & { initPageToken?: string }; + export const useGetProducts = ({ categoryId, maxResults = 20, @@ -71,4 +74,4 @@ export const useGetProducts = ({ initialPageParam: initPageToken, getNextPageParam: (lastPage) => lastPage.nextPageToken, }); -}; +}; \ No newline at end of file diff --git a/src/api/instance/index.ts b/src/api/instance/index.ts index b83ca1407..db0118b9f 100644 --- a/src/api/instance/index.ts +++ b/src/api/instance/index.ts @@ -2,6 +2,8 @@ import { QueryClient } from '@tanstack/react-query'; import type { AxiosInstance, AxiosRequestConfig } from 'axios'; import axios from 'axios'; +let BASE_URL = localStorage.getItem('baseURL') || 'https://api.example.com'; + const initInstance = (config: AxiosRequestConfig): AxiosInstance => { const instance = axios.create({ timeout: 5000, @@ -16,10 +18,8 @@ const initInstance = (config: AxiosRequestConfig): AxiosInstance => { return instance; }; -export const BASE_URL = 'https://api.example.com'; -// TODO: 추후 서버 API 주소 변경 필요 -export const fetchInstance = initInstance({ - baseURL: 'https://api.example.com', +export let fetchInstance = initInstance({ + baseURL: BASE_URL, }); export const queryClient = new QueryClient({ @@ -32,3 +32,17 @@ export const queryClient = new QueryClient({ }, }, }); + +export const updateBaseUrl = (newBaseUrl: string) => { + BASE_URL = newBaseUrl; + localStorage.setItem('baseURL', newBaseUrl); + fetchInstance = initInstance({ + baseURL: BASE_URL, + }); + // 선택한 이름마다 잘 받아오는지 확인용, 추후 삭제 예정 + console.log('Updated fetchInstance:', fetchInstance.defaults.baseURL); +}; + +export const getBaseUrl = () => { + return localStorage.getItem('baseURL') || 'https://api.example.com'; +}; \ No newline at end of file diff --git a/src/components/features/Category/CategoryProductsSection/index.tsx b/src/components/features/Category/CategoryProductsSection/index.tsx index d2dae2c3b..4b1df1dbd 100644 --- a/src/components/features/Category/CategoryProductsSection/index.tsx +++ b/src/components/features/Category/CategoryProductsSection/index.tsx @@ -20,10 +20,14 @@ export const CategoryProductsSection = ({ categoryId }: Props) => { categoryId, }); - if (isLoading) return ; - if (isError) return 에러가 발생했습니다.; - if (!data) return <>; - if (data.pages[0].products.length <= 0) return 상품이 없어요.; + if (isLoading) + return ; + if (isError) + return 에러가 발생했습니다.; + if (!data) + return <>; + if (data.pages[0].products.length <= 0) + return 상품이 없어요.; const flattenGoodsList = data.pages.map((page) => page?.products ?? []).flat(); diff --git a/src/components/features/Goods/Detail/OptionItem/CountOptionItem.tsx b/src/components/features/Goods/Detail/OptionItem/CountOptionItem.tsx index 2147d41fc..97de01420 100644 --- a/src/components/features/Goods/Detail/OptionItem/CountOptionItem.tsx +++ b/src/components/features/Goods/Detail/OptionItem/CountOptionItem.tsx @@ -12,7 +12,7 @@ type Props = { export const CountOptionItem = ({ name, - minValues = 1, + minValues = 0, maxValues = 100, value, onChange, diff --git a/src/components/features/Goods/Detail/OptionSection.tsx b/src/components/features/Goods/Detail/OptionSection.tsx index 31f7e9839..2104f43ae 100644 --- a/src/components/features/Goods/Detail/OptionSection.tsx +++ b/src/components/features/Goods/Detail/OptionSection.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { useMemo, useState } from 'react'; +import { useMemo, useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { @@ -13,6 +13,7 @@ import { getDynamicPath, RouterPath } from '@/routes/path'; import { orderHistorySessionStorage } from '@/utils/storage'; import { CountOptionItem } from './OptionItem/CountOptionItem'; +import { getBaseUrl } from '@/api/instance'; type Props = ProductDetailRequestParams; @@ -24,10 +25,32 @@ export const OptionSection = ({ productId }: Props) => { const { data: detail } = useGetProductDetail({ productId }); const { data: options } = useGetProductOptions({ productId }); - const [counts, setCounts] = useState({}); + const [counts, setCounts] = useState(() => { + const initialCounts: CountState = {}; + if (options) { + options.forEach(option => { + initialCounts[option.id] = '0'; + }); + } + return initialCounts; + }); + + useEffect(() => { + if (options) { + setCounts(prevCounts => { + const newCounts = { ...prevCounts }; + options.forEach(option => { + if (!newCounts[option.id]) { + newCounts[option.id] = '0'; + } + }); + return newCounts; + }); + } + }, [options]); + const totalPrice = useMemo(() => { - if (!detail) - return 0; + if (!detail) return 0; const count = Object.values(counts).reduce((acc, countStr) => acc + Number(countStr), 0); return detail.price * count; }, [detail, counts]); @@ -46,21 +69,23 @@ export const OptionSection = ({ productId }: Props) => { } try { - const response = await fetch('/api/wishes', { + const requestBody = { + productId: parseInt(productId, 10), + quantity: null, + }; + + console.log('Sending request to add wish', requestBody); // 잘 받아오는지 확인 - 추후 삭제 예정 + + const response = await fetch(`${getBaseUrl()}/api/wishes`, { method: 'POST', headers: { Authorization: `Bearer ${authInfo.token}`, 'Content-Type': 'application/json', }, - body: JSON.stringify({ - productId: parseInt(productId, 10), - name: detail?.name, - price: detail?.price, - imageUrl: detail?.imageUrl, - }), + body: JSON.stringify(requestBody), }); - if (response.status === 201) { + if (response.ok) { alert('관심 등록 완료'); } else if (response.status === 400) { alert('잘못된 요청입니다.'); @@ -89,10 +114,23 @@ export const OptionSection = ({ productId }: Props) => { const totalCount = Object.values(counts).reduce((acc, countStr) => acc + Number(countStr), 0); - orderHistorySessionStorage.set({ - id: parseInt(productId, 10), - count: totalCount, - }); + if (totalCount === 0) { + alert('옵션을 선택해주세요.'); + return; + } + + const selectedOptions = options + .filter(option => Number(counts[option.id]) > 0) + .map(option => ({ + productId: parseInt(productId, 10), + optionId: option.id, + quantity: Number(counts[option.id]), + message: '', + })); + + console.log('선택된 옵션 및 수량:', selectedOptions); // 콘솔 로그 추가 + + orderHistorySessionStorage.set(selectedOptions); navigate(RouterPath.order); }; @@ -103,7 +141,7 @@ export const OptionSection = ({ productId }: Props) => { setCounts(prev => ({ ...prev, [option.id]: value }))} /> ))} diff --git a/src/components/features/Home/CategorySection/index.tsx b/src/components/features/Home/CategorySection/index.tsx index f0690cfd3..00f67e370 100644 --- a/src/components/features/Home/CategorySection/index.tsx +++ b/src/components/features/Home/CategorySection/index.tsx @@ -8,12 +8,20 @@ import { getDynamicPath } from '@/routes/path'; import { breakpoints } from '@/styles/variants'; import { CategoryItem } from './CategoryItem'; +import { LoadingView } from '@/components/common/View/LoadingView'; export const CategorySection = () => { - const { data, isLoading, isError } = useGetCategories(); + const { data: categories, isLoading, isError } = useGetCategories(); - if (isLoading || isError) return null; - if (!data) return null; + if (isLoading) { + return ; + } + if (isError) { + return 문제가 발생했습니다. 나중에 다시 시도해주세요.; + } + if (!categories || categories.length === 0 ) { + return 카테고리가 없습니다.; + } return ( @@ -24,7 +32,7 @@ export const CategorySection = () => { md: 6, }} > - {data.map((category) => ( + {categories.map((category) => ( @@ -42,3 +50,13 @@ const Wrapper = styled.section` padding: 45px 52px 23px; } `; +const ErrorMessage = styled.div` + padding: 20px; + text-align: center; + color: red; +`; + +const EmptyMessage = styled.div` + padding: 20px; + text-align: center; +`; \ No newline at end of file diff --git a/src/components/features/Layout/Header.tsx b/src/components/features/Layout/Header.tsx index eeac55071..e7b9a6dc7 100644 --- a/src/components/features/Layout/Header.tsx +++ b/src/components/features/Layout/Header.tsx @@ -1,18 +1,37 @@ import styled from '@emotion/styled'; import { Link, useNavigate } from 'react-router-dom'; +import { useState, useEffect, ChangeEvent } from 'react'; import { Container } from '@/components/common/layouts/Container'; import { useAuth } from '@/provider/Auth'; import { getDynamicPath, RouterPath } from '@/routes/path'; +import { updateBaseUrl, queryClient } from '@/api/instance'; export const Header = () => { const navigate = useNavigate(); const authInfo = useAuth(); + const [selectedApi, setSelectedApi] = useState('default'); + + useEffect(() => { + const storedBaseUrl = localStorage.getItem('baseURL'); + if (storedBaseUrl) { + setSelectedApi(storedBaseUrl); + updateBaseUrl(storedBaseUrl); + } + }, []); const handleLogin = () => { navigate(getDynamicPath.login()); }; + const handleApiChange = (event: ChangeEvent) => { + const newApi = event.target.value; + setSelectedApi(newApi); + localStorage.setItem('baseURL', newApi); + updateBaseUrl(newApi); + queryClient.invalidateQueries(); + }; + return ( @@ -23,6 +42,13 @@ export const Header = () => { /> + {authInfo ? ( navigate(RouterPath.myAccount)}>내 계정 ) : ( @@ -49,7 +75,10 @@ export const Wrapper = styled.header` const Logo = styled.img` height: ${HEADER_HEIGHT}; `; -const RightWrapper = styled.div``; +const RightWrapper = styled.div` + display: flex; + align-items: center; +`; const LinkButton = styled.p` align-items: center; @@ -57,4 +86,5 @@ const LinkButton = styled.p` color: #000; text-decoration: none; cursor: pointer; + margin-left: 20px; `; diff --git a/src/components/features/Order/OrderForm/Fields/MessageCardFields.tsx b/src/components/features/Order/OrderForm/Fields/MessageCardFields.tsx index 41497e56d..e91be6112 100644 --- a/src/components/features/Order/OrderForm/Fields/MessageCardFields.tsx +++ b/src/components/features/Order/OrderForm/Fields/MessageCardFields.tsx @@ -1,21 +1,23 @@ import { Textarea } from '@chakra-ui/react'; import styled from '@emotion/styled'; - import { useOrderFormContext } from '@/hooks/useOrderFormContext'; export const MessageCardFields = () => { - const { register } = useOrderFormContext(); + const { register, watch, setValue } = useOrderFormContext(); + const message = watch('message'); return (