Merge pull request #101 from Moaguide-develop/feat/productpage

Feat/productpage
jiohjung98 · Oct 23, 2024 · 86dcaaa · 86dcaaa
2 parents f97dc74 + 7ff4b68
commit 86dcaaa
Show file tree

Hide file tree

Showing 28 changed files with 160 additions and 49 deletions.
diff --git a/public/images/product/detail/subwaybusan1.svg b/public/images/product/detail/subwaybusan1.svg
diff --git a/public/images/product/detail/subwaybusan2.svg b/public/images/product/detail/subwaybusan2.svg
diff --git a/public/images/product/detail/subwaybusan3.svg b/public/images/product/detail/subwaybusan3.svg
diff --git a/public/images/product/detail/subwaybusan4.svg b/public/images/product/detail/subwaybusan4.svg
diff --git a/src/app/mypage/bookmark/page.tsx b/src/app/mypage/bookmark/page.tsx
@@ -51,7 +51,7 @@ const BookmarkPage = async ({
           totalPages={productBookmarkData?.totalPages}
         />
       ) : (
-        <div>Error loading bookmarks</div>
+        <div>현재 북마크 하신 상품이 없습니다</div>
       )}
     </div>
   );

diff --git a/src/app/product/detail/art/[id]/page.tsx b/src/app/product/detail/art/[id]/page.tsx
@@ -40,11 +40,14 @@ const ArtDetailpage = (props: { params: { id: string } }) => {
       setLocalData((prevData) =>
         prevData ? { ...prevData, bookmark: !prevData.bookmark } : prevData
       );
-
       if (!bookmark) {
         addmutation.mutate({ productId, bookmark });
+        alert('북마크 추가가 완료되었습니다');
+        window.location.reload();
       } else if (bookmark) {
         deletemutation.mutate({ productId });
+        alert('북마크 삭제가 완료되었습니다');
+        window.location.reload();
       }
     } else {
       alert('로그인이 필요한 서비스입니다.');

diff --git a/src/app/product/detail/building/[id]/page.tsx b/src/app/product/detail/building/[id]/page.tsx
@@ -42,8 +42,12 @@ const BuildingDetailpage = (props: any) => {
 
       if (!bookmark) {
         addmutation.mutate({ productId, bookmark });
+        alert('북마크 추가가 완료되었습니다');
+        window.location.reload();
       } else if (bookmark) {
         deletemutation.mutate({ productId });
+        alert('북마크 삭제가 완료되었습니다');
+        window.location.reload();
       }
     } else {
       alert('로그인이 필요한 서비스입니다.');

diff --git a/src/app/product/detail/content/[id]/page.tsx b/src/app/product/detail/content/[id]/page.tsx
@@ -42,8 +42,12 @@ const ContentDetailpage = (props: { params: { id: string } }) => {
 
       if (!bookmark) {
         addmutation.mutate({ productId, bookmark });
+        alert('북마크 추가가 완료되었습니다');
+        window.location.reload();
       } else if (bookmark) {
         deletemutation.mutate({ productId });
+        alert('북마크 삭제가 완료되었습니다');
+        window.location.reload();
       }
     } else {
       alert('로그인이 필요한 서비스입니다.');

diff --git a/src/app/product/detail/cow/[id]/page.tsx b/src/app/product/detail/cow/[id]/page.tsx
@@ -42,8 +42,12 @@ const CowDetailpage = (props: { params: { id: string } }) => {
 
       if (!bookmark) {
         addmutation.mutate({ productId, bookmark });
+        alert('북마크 추가가 완료되었습니다');
+        window.location.reload();
       } else if (bookmark) {
         deletemutation.mutate({ productId });
+        alert('북마크 삭제가 완료되었습니다');
+        window.location.reload();
       }
     } else {
       alert('로그인이 필요한 서비스입니다.');

diff --git a/src/app/product/detail/music/[id]/page.tsx b/src/app/product/detail/music/[id]/page.tsx
@@ -42,8 +42,12 @@ const MusicDetailpage = (props: any) => {
 
       if (!bookmark) {
         addmutation.mutate({ productId, bookmark });
+        alert('북마크 추가가 완료되었습니다');
+        window.location.reload();
       } else if (bookmark) {
         deletemutation.mutate({ productId });
+        alert('북마크 삭제가 완료되었습니다');
+        window.location.reload();
       }
     } else {
       alert('로그인이 필요한 서비스입니다.');

diff --git a/src/components/mypage/MypageMenu.tsx b/src/components/mypage/MypageMenu.tsx
@@ -3,13 +3,16 @@ import EventGuide from './EventGuide';
 import { useRouter } from 'next/navigation';
 
 const MypageMenu = () => {
-
   const router = useRouter();
 
   return (
     <div className="mt-5 flex flex-col">
       {/* 공지사항 */}
-      <div className="flex items-center justify-between px-5 py-6">
+      <div
+        className="flex items-center justify-between px-5 py-6"
+        onClick={() => {
+          router.push('mypage/notice');
+        }}>
         <div className="flex items-center gap-[14px]">
           <div>
             <img src="/images/mypage/notice.svg" alt="공지사항" />
@@ -57,7 +60,7 @@ const MypageMenu = () => {
           />
         </div>
       </div> */}
-      <EventGuide/>
+      <EventGuide />
     </div>
   );
 };

diff --git a/src/components/product/contentlist/ProductBookmarkContentList.tsx b/src/components/product/contentlist/ProductBookmarkContentList.tsx
@@ -36,7 +36,16 @@ const ProductBookmarkContentList = ({
       <Container>
         <div>
           {content?.map((item) => (
-            <div key={item.product_Id} className=" lg:flex  ">
+            <div
+              key={item.product_Id}
+              className=" lg:flex  "
+              onClick={() => {
+                if (item.sale) {
+                  alert('현재는 매각이 완료 된 상품입니다');
+                  // console.log(item.sale)
+                  window.location.reload();
+                }
+              }}>
               <Link href={`/product/detail/${item.category}/${item.product_Id}`}>
                 <div className="flex items-center  h-[110px] ">
                   <div className="mr-[10px] desk:ml-[10px] ">

diff --git a/src/components/product/contentlist/ProductDealContentList.tsx b/src/components/product/contentlist/ProductDealContentList.tsx
@@ -58,7 +58,16 @@ const ProductDealContentList = ({
       <Container>
         <div>
           {content?.map((item) => (
-            <div key={item.product_Id} className=" lg:flex  ">
+            <div
+              key={item.product_Id}
+              className=" lg:flex  "
+              onClick={() => {
+                if (item.sale) {
+                  alert('현재는 매각이 완료 된 상품입니다');
+                  // console.log(item.sale)
+                  window.location.reload();
+                }
+              }}>
               <Link href={`product/detail/${item.category}/${item.product_Id}`}>
                 <div className="flex items-center  h-[110px] ">
                   <div className="mr-[10px] desk:ml-[10px] flex-shrink-0">

diff --git a/src/components/product/contentlist/ProductEndRecruitmentContentList.tsx b/src/components/product/contentlist/ProductEndRecruitmentContentList.tsx
@@ -71,7 +71,16 @@ const ProductEndRecruitmentContentList = ({
       <Container>
         <div>
           {content?.map((item) => (
-            <div key={item.productId} className=" lg:flex  ">
+            <div
+              key={item.productId}
+              className=" lg:flex"
+              onClick={() => {
+                if (item.sale) {
+                  alert('현재는 매각이 완료 된 상품입니다');
+                  // console.log(item.sale)
+                  window.location.reload();
+                }
+              }}>
               <Link href={`product/detail/${item.category}/${item.productId}`}>
                 <div className="flex items-center  h-[110px] ">
                   <div className="flex   desk:ml-[10px] mr-[16px] flex-shrink-0 ">

diff --git a/src/components/product/contentlist/ProductRecruitmentContentList.tsx b/src/components/product/contentlist/ProductRecruitmentContentList.tsx
@@ -86,7 +86,16 @@ const ProductRecruitmentContentList = ({
       <Container>
         <div>
           {content?.map((item) => (
-            <div key={item.productId} className=" lg:flex  ">
+            <div
+              key={item.productId}
+              className=" lg:flex  "
+              onClick={() => {
+                if (item.sale) {
+                  alert('현재는 매각이 완료 된 상품입니다');
+                  // console.log(item.sale)
+                  window.location.reload();
+                }
+              }}>
               <Link href={`product/detail/${item.category}/${item.productId}`}>
                 <div className="flex items-center  h-[110px] ">
                   <div className="flex  mr-[16px]  desk:ml-[10px] flex-shrink-0 ">

diff --git a/src/components/product/detail/building/BuildingProfit.tsx b/src/components/product/detail/building/BuildingProfit.tsx
@@ -78,7 +78,7 @@ const BuildingProfit = ({ url }: { url: string }) => {
             </div>
           </div>
           <div className="flex flex-col  mb-[7px]">
-            <div className=" flex  w-[400px]">
+            <div className=" flex  ">
               <div className="text-gray-400  w-[150px]">임차인 소개</div>
               <div className=" flex-1">{data?.lease[0]?.tenantIntroduction}</div>
             </div>

diff --git a/src/components/product/detail/building/Map.tsx b/src/components/product/detail/building/Map.tsx
@@ -128,7 +128,10 @@ const KakaoMap = () => {
         <div className=" ml-[15px] text-base  ">{data?.location}</div>
       </div>
 
-      <div ref={mapRef} style={{ width: '400px', height: '300px' }} />
+      <div
+        ref={mapRef}
+        className=" desk:w-[340px] desk:h-[280px]  desk2:w-[400px] desk2:h-[350px]"
+      />
     </div>
   );
 };

diff --git a/src/components/product/detail/building/PublicTransport.tsx b/src/components/product/detail/building/PublicTransport.tsx
@@ -47,7 +47,11 @@ const stationImageMap: { [key: string]: string } = {
   분당선: '/images/product/detail/subwaybundang.svg',
   경의중앙선: '/images/product/detail/subwaygyeonghye.svg',
   신분당선: '/images/product/detail/subwaysinbundang.svg',
-  수인분당선: '/images/product/detail/subwaysuinbundang.svg'
+  수인분당선: '/images/product/detail/subwaysuinbundang.svg',
+  부산1호선: '/images/product/detail/subwaybusan1.svg',
+  부산2호선: '/images/product/detail/subwaybusan2.svg',
+  부산3호선: '/images/product/detail/subwaybusan3.svg',
+  부산4호선: '/images/product/detail/subwaybusan4.svg'
 };
 
 const PublicTransport = () => {
@@ -122,7 +126,7 @@ const PublicTransport = () => {
                       <div className="flex">
                         {subway.route.map((route, index) => (
                           <Image
-                            src={stationImageMap[route]}
+                            src={`https://d2qf2amuam62ps.cloudfront.net/img/${route}.svg`}
                             alt={`이미지`}
                             width={20}
                             height={20}
@@ -145,15 +149,16 @@ const PublicTransport = () => {
 
         <div className="bg-gray-50 rounded-xl desk:w-full desk2:w-[calc(50%-10px)] p-[20px] desk:mt-5 desk2:mt-0">
           <div className="text-base font-bold">0.5km이내 주변 버스</div>
-          <div className="flex justify-between mt-2">{/* <div>정류장이름</div> */}</div>
-          <div className="flex flex-col">
-            <div className=" grid grid-cols-2 gap-3" onClick={() => setIsModal(!Ismodal)}>
+          <div className=" ">
+            <div
+              className="grid grid-cols-4  gap-3 "
+              onClick={() => setIsModal(!Ismodal)}>
               {data?.nearBus.map((item, index) => {
                 return (
-                  <div
-                    key={index}
-                    className=" bg-gray-300  rounded-md flex justify-center items-center p-2">
-                    {item.node}
+                  <div key={index} className="flex ">
+                    <div className=" w-full bg-gray-200 text-xs rounded-md flex justify-center items-center p-2 ">
+                      {item.node}
+                    </div>
                   </div>
                 );
               })}

diff --git a/src/components/product/detail/building/chart/PopulationInformationChart.tsx b/src/components/product/detail/building/chart/PopulationInformationChart.tsx
@@ -11,7 +11,7 @@ const PopulationInformationChart = () => {
 
   const fetchData = async () => {
     const response = await axios.get(
-      `https://api.moaguide.com/detail/building/population/${lastSegment}?year=2023&month=12`
+      `https://api.moaguide.com/detail/building/population/${lastSegment}`
     );
     return response.data;
   };

diff --git a/src/components/product/detail/content/MovieChart.tsx b/src/components/product/detail/content/MovieChart.tsx
@@ -28,13 +28,22 @@ ChartJS.register(
   ChartDataLabels
 );
 
+const filteringLabel = {
+  screen: '스크린 수',
+  showtime: '상영 횟수',
+  audience: '관객 수',
+  revenue: '수익',
+  rank: '순위'
+} as const;
+type FilteringDataKey = keyof typeof filteringLabel;
+
 const MovieChart = () => {
   const pathname = usePathname();
   const lastSegment = pathname.split('/').pop();
-  const [filteringData, setFilteringData] = useState('screen');
+  const [filteringData, setFilteringData] = useState<FilteringDataKey>('screen');
 
   const handleFiltering = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilteringData(e.target.id);
+    setFilteringData(e.target.id as FilteringDataKey);
   };
 
   const fetchData = async () => {
@@ -73,7 +82,7 @@ const MovieChart = () => {
     labels: dataSets.labels,
     datasets: [
       {
-        label: '주가',
+        label: filteringLabel[filteringData],
         data: dataSets.data,
         borderColor: '#8a4af3',
         backgroundColor: '#8a4af3',
@@ -139,51 +148,51 @@ const MovieChart = () => {
         <input
           type="radio"
           id="screen"
-          className=" mr-[5px]"
+          className=" mr-[5px] cursor-pointer"
           checked={filteringData == 'screen'}
           onChange={handleFiltering}
         />
-        <label htmlFor="screen" className="mr-[10px]">
+        <label htmlFor="screen" className="mr-[10px] cursor-pointer">
           날짜별 스크린 수
         </label>
         <input
           type="radio"
           id="showtime"
-          className=" mr-[5px]"
+          className=" mr-[5px] cursor-pointer"
           checked={filteringData == 'showtime'}
           onChange={handleFiltering}
         />
-        <label htmlFor="showtime" className="mr-[10px]">
+        <label htmlFor="showtime" className="mr-[10px] cursor-pointer">
           날짜별 상영횟수
         </label>
         <input
           type="radio"
           id="audience"
-          className=" mr-[5px]"
+          className=" mr-[5px] cursor-pointer"
           checked={filteringData == 'audience'}
           onChange={handleFiltering}
         />
-        <label htmlFor="audience" className="mr-[10px]">
+        <label htmlFor="audience" className="mr-[10px] cursor-pointer">
           날짜별 관객수
         </label>
         <input
           type="radio"
           id="revenue"
-          className=" mr-[5px]"
+          className=" mr-[5px] cursor-pointer"
           checked={filteringData == 'revenue'}
           onChange={handleFiltering}
         />
-        <label htmlFor="revenue" className="mr-[10px]">
+        <label htmlFor="revenue" className="mr-[10px] cursor-pointer">
           날짜별 매출액
         </label>
         <input
           type="radio"
           id="rank"
-          className=" mr-[5px]"
+          className=" mr-[5px] cursor-pointer"
           checked={filteringData == 'rank'}
           onChange={handleFiltering}
         />
-        <label htmlFor="rank" className="mr-[10px]">
+        <label htmlFor="rank" className="mr-[10px] cursor-pointer">
           날짜별 순위
         </label>
       </section>
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ const BookmarkPage = async ({ @@
               totalPages={productBookmarkData?.totalPages}
             />
           ) : (
-            <div>Error loading bookmarks</div>
+            <div>현재 북마크 하신 상품이 없습니다</div>
           )}
         </div>
       );
@@ Expand Down @@