Merge pull request #300 from codestates-seb/fe-seyeon

[Client] 타입스크립트 리팩터링 - 주문내역 조회(일반/정기), 주문내역 상세조회 외

client/src/App.tsx

@@ -30,6 +30,7 @@ function App() {
 					position="top-center"
 					autoClose={3000}
 					theme="colored"
+					pauseOnFocusLoss={false}
 				/>
 				<ReactQueryDevtools />
 			</QueryClientProvider>

client/src/apis/itemApis.ts

@@ -2,16 +2,17 @@ import {
 	FetchCathgoryItems,
 	FetchSearchItems,
 	InfiniteQueryPromise,
+	Item,
 } from '../types/itemList.type';
 import axiosInstance from '../utils/axiosInstance';
-import { FetchOrderListsProps } from '../types/order.type';
+import { FetchOrderListsProps, OrderListData } from '../types/order.type';
 
 export const fetchCathgoryItems = async ({
 	category,
 	path,
 	query,
 	pageParam,
-}: FetchCathgoryItems): Promise<InfiniteQueryPromise> => {
+}: FetchCathgoryItems): Promise<InfiniteQueryPromise<Item[]>> => {
 	const res = await axiosInstance.get(
 		`/category${path}?categoryName=${category}${query}&page=${pageParam}&size=12`,
 	);
@@ -30,7 +31,7 @@ export const fetchSearchItems = async ({
 	path,
 	query,
 	pageParam,
-}: FetchSearchItems): Promise<InfiniteQueryPromise> => {
+}: FetchSearchItems): Promise<InfiniteQueryPromise<Item[]>> => {
 	const res = await axiosInstance.get(
 		`/search${path}?keyword=${keyword}${query}&page=${pageParam}&size=12`,
 	);
@@ -48,7 +49,7 @@ export const fetchSearchItems = async ({
 export const fetchOrderLists = async ({
 	pageParam,
 	isSub,
-}: FetchOrderListsProps): Promise<InfiniteQueryPromise> => {
+}: FetchOrderListsProps): Promise<InfiniteQueryPromise<OrderListData[]>> => {
 	const res = await axiosInstance.get(
 		`/orders?subscription=${isSub}&page=${pageParam}&size=7`,
 	);

client/src/components/Buttons/WishlistButton.tsx

@@ -1,24 +1,34 @@
 import styled from 'styled-components';
 import { FaHeart } from 'react-icons/fa';
-import { useCallback, useState } from 'react';
-import { toast } from 'react-toastify';
+import { useEffect, useState } from 'react';
 import { usePost } from '../../hooks/useFetch';
 import { WishlistBtnProps } from '../../types/button.type';
 
-function WishlistButton({ isChecked, itemId, setIsChecked }: WishlistBtnProps) {
+function WishlistButton({
+	isChecked,
+	itemId,
+	setIsChecked,
+	setOpenLoginModal,
+}: WishlistBtnProps) {
 	const [request, setRequest] = useState(isChecked ? 0 : 1);
 	const token = localStorage.getItem('accessToken');
 	const { mutate } = usePost(`/wishes/${itemId}?wish=${request}`);
 
-	const handleHeartClick = useCallback(() => {
-		if (!token) {
-			toast.error('로그인이 필요한 서비스입니다.');
+	const handleHeartClick = () => {
+		if (!token && setOpenLoginModal) {
+			setOpenLoginModal(true);
 			return;
 		}
+
 		mutate();
+
 		if (setIsChecked) {
-			setIsChecked(isChecked ? 0 : 1);
+			setIsChecked(!isChecked);
 		}
+	};
+
+	useEffect(() => {
+		setRequest(isChecked ? 0 : 1);
 	}, [isChecked]);
 
 	return (
@@ -33,16 +43,11 @@ function WishlistButton({ isChecked, itemId, setIsChecked }: WishlistBtnProps) {
 
 const WishBox = styled.div`
 	display: inline-flex;
-	z-index: 99;
-	.red-heart {
-		path {
-			color: #ff555f;
-			opacity: 100%;
-			stroke-width: 0;
-		}
-	}
+	z-index: 2;
+
 	& > svg {
 		font-size: 18px;
+
 		path {
 			cursor: pointer;
 			stroke: var(--gray-300);
@@ -51,6 +56,14 @@ const WishBox = styled.div`
 			opacity: 30%;
 		}
 	}
+
+	.red-heart {
+		path {
+			color: #ff555f;
+			opacity: 100%;
+			stroke-width: 0;
+		}
+	}
 `;
 
 export default WishlistButton;

client/src/components/ItemSummary/ItemSummary.tsx

@@ -1,7 +1,6 @@
 import styled, { keyframes } from 'styled-components';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import WishlistButton from '../Buttons/WishlistButton';
 import Tag from '../Etc/Tag';
 import { BlackButton, WhiteButton } from '../Buttons/BlackButton';
@@ -10,8 +9,10 @@ import { PeriodChoiceTab } from '../Tabs/ToggleTabs';
 import { LongTextStar } from '../Stars/TextStar';
 import Price, { SummaryPrice } from '../Etc/Price';
 import CartModal from '../Modals/CartModal';
-import { usePost, useGet } from '../../hooks/useFetch';
+import useGetWishes from '../../hooks/useGetWishes';
+import { usePost } from '../../hooks/useFetch';
 import usePurchase from '../../hooks/usePurchase';
+import LoginModal from '../Modals/LoginModal';
 
 interface ItemSummaryProps {
 	name: string;
@@ -44,25 +45,26 @@ function ItemSummary({
 	const [path, setPath] = useState(''); // 바로결제하기 클릭 시, 이동할 페이지
 	const [showOptions, setShowOptions] = useState(false);
 	const [openCartModal, setOpenCartModal] = useState(false);
+	const [openLoginModal, setOpenLoginModal] = useState(false);
 	const token = localStorage.getItem('accessToken');
 	const [orderList, setOrdertList] = useState({
 		quantity: 1,
 		period: 30,
 		subscription: false,
 	});
 
-	const { data: WishData } = useGet('/wishes/item', `detail/wishs`);
+	const { data: WishData } = useGetWishes<{ data: number[] }>(
+		'/wishes/item',
+		`detail/wishs`,
+	);
+
 	const [isCheckedWish, setIsCheckedWish] = useState(
-		WishData?.data?.data.includes(itemId) ? 1 : 0,
+		!!WishData?.data?.data.includes(itemId),
 	);
 
 	useEffect(() => {
-		if (WishData?.data?.data.includes(itemId)) {
-			setIsCheckedWish(1);
-		} else {
-			setIsCheckedWish(0);
-		}
-	}, []);
+		setIsCheckedWish(!!WishData?.data?.data.includes(itemId));
+	}, [WishData]);
 
 	const { mutate: cartMu } = usePost(`/carts/${itemId}`);
 	const { mutate: purMu } = usePurchase('/orders/single', path);
@@ -113,7 +115,7 @@ function ItemSummary({
 			if (token) {
 				purMu({ ...orderList, itemId });
 			} else {
-				toast.error('로그인이 필요한 서비스입니다.');
+				setOpenLoginModal(true);
 			}
 		}, [orderList]);
 
@@ -123,7 +125,7 @@ function ItemSummary({
 			cartMu({ ...orderList });
 			setOpenCartModal(true);
 		} else {
-			toast.error('로그인이 필요한 서비스입니다.');
+			setOpenLoginModal(true);
 		}
 	}, [orderList]);
 
@@ -136,17 +138,10 @@ function ItemSummary({
 		}
 	}, [orderList]);
 
-	// // 로그인 모달을 띄우는 함수
-	// const handleOpenLoginModal = () => {
-	// 	if (!token) {
-	// 		setOpenLoginModal(true);
-	// 	}
-	// };
-
 	// 로그인 모달 속, 로그인 페이지로 가는 함수
-	// const handleLoginMove = useCallback(() => {
-	// 	navigate('/login');
-	// }, []);
+	const handleLoginMove = useCallback(() => {
+		navigate('/login');
+	}, []);
 
 	return (
 		<Container>
@@ -155,6 +150,7 @@ function ItemSummary({
 					<HeadBox>
 						<p>{brand}</p>
 						<WishlistButton
+							setOpenLoginModal={setOpenLoginModal}
 							setIsChecked={setIsCheckedWish}
 							isChecked={isCheckedWish}
 							itemId={itemId}
@@ -227,6 +223,11 @@ function ItemSummary({
 				contents="장바구니에 상품이 담겼습니다."
 				onClickPbtn={handleCartClick}
 			/>
+			<LoginModal
+				setIsOpen={setOpenLoginModal}
+				modalIsOpen={openLoginModal}
+				onClickPbtn={handleLoginMove}
+			/>
 		</Container>
 	);
 }
@@ -297,15 +298,13 @@ const TagsBox = styled.div`
 const RateBox = styled.div`
 	display: flex;
 	justify-content: space-between;
-	/* align-items: center; */
 	width: 100%;
 	margin-bottom: 10px;
 `;
 
 const ButtonBox = styled.div`
 	display: flex;
 	justify-content: space-between;
-	/* width: 100%; */
 `;
 
 const slide = keyframes`

client/src/components/Lists/MyPageLists/OrderDetailList.js → client/src/components/Lists/MyPageLists/OrderDetailList.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import { LetterButtonColor } from '../../Buttons/LetterButton';
 import Price from '../../Etc/Price';
 import ReviewModal from '../../Modals/ReviewModal';
+import { OrderDetailListProps } from '../../../types/order.type';
 
 function OrderDetailList({
 	inModal,
@@ -16,14 +17,14 @@ function OrderDetailList({
 	nowPrice,
 	beforePrice,
 	discountRate,
-	itemOrderId, // 주문내역 속 개별아이템 주문id!
+	itemOrderId, // 주문내역 속 개별아이템 주문id
 	capacity,
 	quantity,
 	period,
 	subscription,
 	orderStatus,
 	itemId,
-}) {
+}: OrderDetailListProps) {
 	const [modalIsOpen, setIsOpen] = useState(false);
 	const navigate = useNavigate();
 
@@ -51,12 +52,12 @@ function OrderDetailList({
 	};
 
 	return (
-		<Box className={inModal && 'in-modal'}>
+		<Box inModal={inModal}>
 			<ImageContainer onClick={handlePageMove}>
 				<Image src={thumbnail} alt="상품 이미지" />
 			</ImageContainer>
 			<Wrap>
-				<InformationForm className={subscription && 'subscription'}>
+				<InformationForm subscription={subscription}>
 					<Brand>{brand}</Brand>
 					<Name onClick={handlePageMove}>{`${title}${
 						capacity && `, ${capacity}정`
@@ -69,8 +70,8 @@ function OrderDetailList({
 						{quantity && <Quantity>{quantity}개 / </Quantity>}
 						<Price // 가격 * 수량
 							nowPrice={nowPrice}
-							beforePrice={nowPrice === beforePrice ? null : beforePrice}
-							discountRate={nowPrice === beforePrice ? null : discountRate}
+							beforePrice={nowPrice !== beforePrice && beforePrice}
+							discountRate={nowPrice !== beforePrice && discountRate}
 							fontSize="14px"
 							fontWeight="Bold"
 							quantity={quantity}
@@ -82,7 +83,7 @@ function OrderDetailList({
 						<LetterButtonColor
 							onClick={openModal}
 							color="gray"
-							colorcode="500"
+							colorCode="500"
 							fontSize="13px"
 						>
 							리뷰 쓰기
@@ -101,25 +102,23 @@ function OrderDetailList({
 	);
 }
 
-const Box = styled.div`
+const Box = styled.div<{ inModal?: boolean }>`
 	border-bottom: 1px solid rgb(235, 235, 235);
 	background-color: white;
 	width: 450px;
 	height: 180px;
 	display: flex;
 	align-items: center;
-	padding: 19px;
-	&.in-modal {
-		width: 100%;
-	}
+	padding: 18px 10px 18px 18px;
+	width: ${({ inModal }) => (inModal ? '100%' : '450px')};
 `;
 
 const Wrap = styled.div`
 	display: flex;
 	flex-direction: column;
 	margin-left: 20px;
 	width: 100%;
-	position: relative;
+	margin-top: 2px;
 `;
 
 const ImageContainer = styled.div`
@@ -135,11 +134,8 @@ const Image = styled.img`
 	align-items: center;
 `;
 
-const InformationForm = styled.div`
-	margin-bottom: 23px;
-	&.subscription {
-		margin-bottom: 12px;
-	}
+const InformationForm = styled.div<{ subscription: boolean }>`
+	margin-bottom: ${({ subscription }) => (subscription ? '14px' : '23px')};
 `;
 
 const Brand = styled.div`
@@ -164,14 +160,12 @@ const BottomContainer = styled.div`
 const Total = styled.div`
 	display: flex;
 	font-weight: var(--bold);
+	align-items: center;
 `;
 
 const Period = styled.div`
 	color: var(--purple-200);
-	/* position: relative; */
-	margin-bottom: 4px;
-	/* top: -15px; */
-	/* right: 0; */
+	margin-bottom: 5px;
 	font-size: 12px;
 `;
 
@@ -184,9 +178,7 @@ const ReviewContainer = styled.div`
 	align-items: center;
 	cursor: pointer;
 	align-self: end;
-	position: absolute;
-	bottom: -25px;
-	right: -12px;
+	margin-top: 4px;
 	* {
 		color: var(--gray-500);
 	}