Merge pull request #52 from 9ITHON/design/#47

feat/#47 api 기능들

Author: kgs9843

src/api/addPoint.js

@@ -0,0 +1,5 @@
+import { post } from "./index";
+export const addPoint = async () => {
+  const response = await post("/point/add");
+  return response.data;
+};

src/api/fetchCoupon.js

@@ -0,0 +1,6 @@
+import { get } from "./index";
+
+export const fetchCoupon = async (userId) => {
+  const response = await get(`/coupon/all/${userId}`);
+  return response.data.data;
+};

src/api/fetchPoint.js

@@ -0,0 +1,5 @@
+import { get } from "./index";
+export const fetchPoint = async () => {
+  const response = await get("/user/point");
+  return response.data;
+};

src/api/subtractPoint.js

@@ -0,0 +1,6 @@
+import { post } from "./index";
+
+export const subtractPoint = async (point) => {
+  const response = await post("/point/subtract", { subtractPoint: point });
+  return response.data;
+};

src/components/CouponMenuItem.jsx

@@ -14,9 +14,13 @@ const CouponMenuItem = ({
       onClick={isAvailable ? onClick : null}
     >
       <div className="flex flex-row justify-center gap-4">
-        <div className="bg-amber-200 w-15 h-15 rounded-xl flex justify-center items-center">
+        <div className="bg-white w-15 h-15 rounded-xl flex justify-center items-center">
           {imageUrl ? (
-            <img src={imageUrl} alt="쿠폰 이미지" className="w-6 h-6" />
+            <img
+              src={imageUrl}
+              alt="쿠폰 이미지"
+              className="w-full h-full object-cover rounded-xl"
+            />
           ) : (
             <div className="text-xs text-white">No Img</div>
           )}

src/components/GoodsCard.jsx

@@ -1,8 +1,28 @@
 import React from "react";
-
-const GoodsCard = ({ imageSrc, title, description, point }) => {
+import { subtractPoint } from "../api/subtractPoint";
+const GoodsCard = ({
+  imageSrc,
+  title,
+  description,
+  point,
+  myPoint,
+  setPoint,
+}) => {
+  const handleClick = async () => {
+    try {
+      console.log(point);
+      await subtractPoint(point);
+      setPoint(myPoint - point);
+      console.log("포인트 차감 성공!");
+    } catch (error) {
+      console.error("포인트 차감 실패:", error);
+    }
+  };
   return (
-    <div className="flex flex-col items-center justify-between bg-white rounded-xl p-2 w-full max-w-[160px]">
+    <div
+      onClick={handleClick}
+      className="flex flex-col items-center justify-between bg-white rounded-xl p-2 w-full max-w-[160px]"
+    >
       <div className="w-full h-auto rounded-md overflow-hidden flex justify-center items-center">
         <img
           src={imageSrc}

src/components/KakaoMap.jsx

@@ -6,7 +6,7 @@ import CurrentPinSvg from "../assets/icons/CurrentPin.svg";
 
 const KakaoMap = ({ lat = 37.4024068885376, lng = 127.101100614 }) => {
   const [state, setState] = useState({
-    center: { lat: lat - 0.0007, lng },
+    center: { lat: lat - 0.0009, lng },
     isPanto: true,
   });
 
@@ -17,7 +17,7 @@ const KakaoMap = ({ lat = 37.4024068885376, lng = 127.101100614 }) => {
     if (lat && lng) {
       setState((prev) => ({
         ...prev,
-        center: { lat: lat - 0.0007, lng },
+        center: { lat: lat - 0.0009, lng },
       }));
     }
   }, [lat, lng]);
@@ -33,7 +33,7 @@ const KakaoMap = ({ lat = 37.4024068885376, lng = 127.101100614 }) => {
     } else if (lat && lng) {
       setState((prev) => ({
         ...prev,
-        center: { lat: lat - 0.0007, lng },
+        center: { lat: lat - 0.0009, lng },
       }));
     }
   }, [selectedLocation, lat, lng]);
@@ -59,7 +59,7 @@ const KakaoMap = ({ lat = 37.4024068885376, lng = 127.101100614 }) => {
         position={{ lat: lat, lng: lng }}
         image={{
           src: CurrentPinSvg, // public 폴더 기준 경로
-          size: { width: 40, height: 40 },
+          size: { width: 55, height: 55 },
           options: { offset: { x: 20, y: 40 } },
         }}
       />

src/components/Popup/CouponPopup.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
 import Back3DBtnIcon from "../../assets/icons/Back_3D_btn.svg";
 import { useNavStore } from "../../stores/navStore";
+import { useUserStore } from "../../stores/userStore";
 import { getDDay } from "../../utils/getDay";
 import CouponMenuItem from "../CouponMenuItem";
 import CouponClickPopup from "./CouponClickPopup";
+import { fetchCoupon } from "../../api/fetchCoupon";
 const dummyCoupons = [
   {
     id: 1,
@@ -52,10 +54,30 @@ const CouponPopup = ({ onClose }) => {
   // 네비바 주스탠드로 상태 관리
   const hideNav = useNavStore((state) => state.hideNav);
   const showNav = useNavStore((state) => state.showNav);
+  const userId = useUserStore((state) => state.id);
   const [activeTab, setActiveTab] = useState("사용 가능");
   const [selectedCoupon, setSelectedCoupon] = useState(null); // 추가
-
+  const [coupons, setCoupons] = useState("");
   useEffect(() => {
+    (async () => {
+      try {
+        const result = await fetchCoupon(userId);
+        const today = new Date();
+
+        const processedCoupons = result.map((coupon) => {
+          const expiresAt = new Date(coupon.expiresAt);
+          return {
+            ...coupon,
+            isAvailable: expiresAt > today,
+          };
+        });
+
+        console.log(processedCoupons);
+        setCoupons(processedCoupons);
+      } catch (error) {
+        console.error("API 호출 실패:", error);
+      }
+    })();
     hideNav(); // 진입시 네비 숨김
     return showNav; // 언마운트(나갈 때) 복구
   }, []);
@@ -122,7 +144,9 @@ const CouponPopup = ({ onClose }) => {
         {filteredCoupons.map((coupon) => (
           <CouponMenuItem
             key={coupon.id}
-            imageUrl={coupon.imageUrl}
+            imageUrl={
+              "https://cdn.pixabay.com/photo/2017/06/23/16/20/coupon-2435163_640.png"
+            }
             title={coupon.title}
             date={getDDay(coupon.deadline)}
             isAvailable={coupon.isAvailable}

src/components/Popup/DonateDecidePopup.jsx

@@ -1,8 +1,20 @@
 import React from "react";
 import WaringBlockSVG from "../../assets/icons/WarningBlock.svg";
 import XblockSVG from "../../assets/icons/Xblock.svg";
+import { subtractPoint } from "../../api/subtractPoint";
 
-const DonateDecidePopup = ({ onClose }) => {
+const DonateDecidePopup = ({ onClose, point, setPoint }) => {
+  const handleClick = async () => {
+    try {
+      // point 값을 넘겨서 API 호출
+      await subtractPoint(20);
+      setPoint(point - 20);
+      console.log("포인트 차감 성공!");
+      // 필요하다면 사용자 알림이나 UI 업데이트 로직 추가
+    } catch (error) {
+      console.error("포인트 차감 실패:", error);
+    }
+  };
   return (
     <div className="fixed inset-0 bg-black/40 gap-2 flex flex-col justify-center items-center z-50 p-4">
       <div className=" flex w-full justify-end">
@@ -24,7 +36,10 @@ const DonateDecidePopup = ({ onClose }) => {
           >
             취소
           </button>
-          <button className="mainColor text-white rounded-full px-4 py-2  flex-1/2">
+          <button
+            className="mainColor text-white rounded-full px-4 py-2  flex-1/2"
+            onClick={handleClick}
+          >
             기부
           </button>
         </div>

src/components/Popup/DonatePopup.jsx

@@ -5,7 +5,7 @@ import PigPNG from "../../assets/pig.png";
 import DonateLogItem from "../DonateLoItem";
 import DonateDecidePopup from "./DonateDecidePopup";
 import { useNavStore } from "../../stores/navStore";
-const DonatePopup = ({ onClose, point, donateLogs }) => {
+const DonatePopup = ({ onClose, point, donateLogs, setPoint }) => {
   const [donateDecidePopup, setDonateDecidePopup] = useState(false);
   // 네비바 주스탠드로 상태 관리
   const hideNav = useNavStore((state) => state.hideNav);
@@ -54,7 +54,11 @@ const DonatePopup = ({ onClose, point, donateLogs }) => {
       </div>
 
       {donateDecidePopup && (
-        <DonateDecidePopup onClose={() => setDonateDecidePopup(false)} />
+        <DonateDecidePopup
+          onClose={() => setDonateDecidePopup(false)}
+          point={point}
+          setPoint={setPoint}
+        />
       )}
     </div>
   );