Skip to content

Commit 3581d0b

Browse files
eun-hakeun-hak
authored
Merge pull request #173 from Moaguide-develop/refactoring
Refactoring
2 parents c29d85b + 0c9fbad commit 3581d0b

23 files changed

+1199
-1179
lines changed

‎cypress/e2e/home.cy.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export {};
22

33
describe('홈페이지 테스트', () => {
4-
it('홈페이지 접속', () => {
4+
beforeEach(() => {
55
cy.visit('/');
66
});
77
});

‎src/app/product/detail/art/[id]/page.tsx

Lines changed: 10 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -3,174 +3,28 @@ import Container from '@/components/common/Container';
33
import NavBar from '@/components/product/detail/NavBar';
44
import News from '@/components/product/detail/News';
55
import Report from '@/components/product/detail/Report';
6-
import Image from 'next/image';
7-
import { useEffect, useState } from 'react';
6+
import { useState } from 'react';
87
import { getArtProductDetail } from '@/factory/Product/ProductDetail/ArtProductDetail';
9-
import { CATEGORY } from '@/static/category';
108
import ArtProfit from '@/components/product/detail/art/ArtProfit';
119
import ArtProductDetail from '@/components/product/detail/art/ArtProductDetail';
12-
import Link from 'next/link';
13-
import { useAddBookMark, useDeleteBookMark } from '@/factory/BookMark';
14-
import { useAuthStore } from '@/store/userAuth.store';
1510
import '../../../../plugin';
11+
import { BookmarkUpdate } from '@/components/product/detail/BookmarkUpdate';
12+
import { ArtTopDetail } from '@/components/product/detail/art/ArtTopDetail';
1613
const ArtDetailpage = (props: { params: { id: string } }) => {
1714
const [sort, setSort] = useState('profit');
1815
const url = props.params.id;
19-
20-
const { data, isLoading, isError } = getArtProductDetail(props.params.id);
21-
16+
const { data } = getArtProductDetail(props.params.id) || { data: null };
2217
const [localData, setLocalData] = useState(data);
18+
const { handleBookmarkClick } = BookmarkUpdate({ data, localData, setLocalData });
2319

24-
useEffect(() => {
25-
if (!localData) {
26-
setLocalData(data);
27-
}
28-
}, [data, localData]);
29-
30-
const addmutation = useAddBookMark();
31-
const deletemutation = useDeleteBookMark();
32-
33-
const { isLoggedIn } = useAuthStore();
34-
const handleBookmarkClick = (
35-
productId: string | undefined,
36-
bookmark: boolean | undefined
37-
) => {
38-
// 낙관적 업데이트를 위해 로컬 상태를 먼저 변경합니다.
39-
if (isLoggedIn) {
40-
setLocalData((prevData) =>
41-
prevData ? { ...prevData, bookmark: !prevData.bookmark } : prevData
42-
);
43-
if (!bookmark) {
44-
addmutation.mutate({ productId, bookmark });
45-
alert('북마크 추가가 완료되었습니다.');
46-
window.location.reload();
47-
} else if (bookmark) {
48-
deletemutation.mutate({ productId });
49-
alert('북마크 삭제가 완료되었습니다.');
50-
window.location.reload();
51-
}
52-
} else {
53-
alert('로그인이 필요한 서비스입니다.');
54-
window.location.href = '/sign';
55-
}
56-
};
5720
return (
5821
<div className="overflow-x-hidden desk:mx-3">
5922
<Container>
60-
<div className="flex justify-between md:flex-row desk:flex-col ">
61-
<div className="flex desk2:justify-start desk:justify-center desk:mb-[40px] ">
62-
<Image
63-
src={`https://d2qf2amuam62ps.cloudfront.net/img/${data?.productId}.jpg`}
64-
width={181}
65-
height={181}
66-
alt="Profile Image"
67-
className="object-cover w-[181px] h-[181px] rounded-[8px] "
68-
/>
69-
70-
<div className="desk:hidden desk2:flex flex-col ml-[28px] ">
71-
<div className="flex">
72-
<div className="bg-gray-200 text-gray-400 rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
73-
{CATEGORY[data?.category as string]}
74-
</div>
75-
<div className="text-gray-400 ml-[3px]">{data?.platform}</div>
76-
</div>
77-
78-
<div className="w-80 text-black text-2xl font-bold mb-[60px] ">
79-
{data?.name}
80-
</div>
81-
82-
<div className="desk2:flex desk:hidden">
83-
<Link href={data?.link || '#'}>
84-
<div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
85-
<div>해당 플랫폼으로 이동</div>
86-
<Image
87-
src="/images/detail/CaretRight.svg"
88-
width={16}
89-
height={16}
90-
alt="Right Arrow"
91-
/>
92-
</div>
93-
</Link>
94-
95-
<div
96-
className={` desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 ${localData?.bookmark ? `border-purple-500` : `border-gray-200`} rounded-xl cursor-pointer `}
97-
onClick={() => {
98-
handleBookmarkClick(localData?.productId, localData?.bookmark);
99-
}}>
100-
<div
101-
className={` ${localData?.bookmark ? `text-purple-500 font-bold ` : `text-black `}mr-1`}>
102-
관심 종목
103-
</div>
104-
<Image
105-
src={`${localData?.bookmark ? '/images/product/BookmarkSimple.svg' : '/images/product/BookmarkWhite.svg'}`}
106-
width={16}
107-
height={16}
108-
alt="BookMark"
109-
/>
110-
</div>
111-
</div>
112-
</div>
113-
</div>
114-
115-
<div className="desk2:hidden desk:flex flex-col">
116-
<div className="flex flex-col desk2:ml-[28px] desk:ml-[5px] ">
117-
<div className="flex">
118-
<div className="bg-gray-200 text-gray-400 rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
119-
{CATEGORY[data?.category as string]}
120-
</div>
121-
<div className="text-gray-400 ml-[3px]">{data?.platform}</div>
122-
</div>
123-
124-
<div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
125-
{data?.name}
126-
</div>
127-
</div>
128-
</div>
129-
130-
<div className="flex flex-col desk2:justify-start desk2:items-start desk:justify-center desk:items-center ">
131-
<div className="flex w-full desk:max-w-[360px] md:w-[300px] justify-between ">
132-
<div className="text-gray-400">모집금액</div>
133-
<div className="flex flex-row ">
134-
<div>{data?.recruitmentPrice.toLocaleString()}원</div>
135-
{/* <div className="text-red-500 "> ({data?.priceRate}%)</div> */}
136-
</div>
137-
</div>
138-
139-
<div className="flex mt-[10px] w-full desk:max-w-[360px] md:w-[300px] justify-between ">
140-
<div className="text-gray-400">모집률</div>
141-
<div>{data?.recruitmentRate.toLocaleString()}%</div>
142-
</div>
143-
144-
<div className="flex mt-[10px] w-full desk:max-w-[360px] md:w-[300px] justify-between ">
145-
<div className="text-gray-400">시가총액</div>
146-
<div>{data?.totalPrice.toLocaleString()}원</div>
147-
</div>
148-
149-
<div className="flex mt-[10px] w-full desk:max-w-[360px] md:w-[300px] justify-between ">
150-
<div className="text-gray-400">모집기간</div>
151-
<div className="">~{data?.recruitmentDate}까지</div>
152-
</div>
153-
154-
<div className="flex mt-[10px] w-full desk:max-w-[360px] md:w-[300px] justify-between ">
155-
<div className="text-gray-400">최소투자금</div>
156-
<div>{data?.minInvestment.toLocaleString()}원</div>
157-
</div>
158-
</div>
159-
160-
<div className="desk2:hidden desk:flex justify-center mt-[20px] ">
161-
<Link href={data?.link || '#'}>
162-
<div className=" desk:w-[300px] desk2:w-[380px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
163-
<div>해당 플랫폼으로 이동</div>
164-
<Image
165-
src="/images/detail/CaretRight.svg"
166-
width={16}
167-
height={16}
168-
alt="Right Arrow"
169-
/>
170-
</div>
171-
</Link>
172-
</div>
173-
</div>
23+
<ArtTopDetail
24+
data={data}
25+
localData={localData}
26+
handleBookmarkClick={handleBookmarkClick}
27+
/>
17428
</Container>
17529
<NavBar sort={sort} setSort={setSort} />
17630

0 commit comments

Comments
 (0)