[#28] feat: 제휴가게 API 연결 (#37)

* fix: icon 에러 수정

* feat: 제휴가게리스트 API 연결

* feat: 라우터 연결

* fix: img 오류 수정

* feat: 제휴가게 상세 API 연결

* feat: modal api 연결 및 디자인 수정

* style: checkbox 적용

@types/Contract.d.ts

@@ -0,0 +1,28 @@
+export type ContractListInfo = {
+  category: "FOOD" | "CAFE" | "BEAUTY" | "CULTURE" | "ETC" | "NONE";
+  storeId: number;
+  storeName: string;
+  benefits: Benefit[];
+};
+
+type Benefit = {
+  amount: number;
+  benfitId: number;
+  content: string;
+  type: "FIX" | "RATE" | "MENU";
+};
+
+export type ContractInfo = {
+  benefits: Benefit[];
+  category: "FOOD" | "CAFE" | "BEAUTY" | "CULTURE" | "ETC" | "NONE";
+  endDate: string;
+  latitude: number;
+  longitude: number;
+  manager: string;
+  mapUrl: string;
+  phoneNumber: string;
+  startDate: string;
+  storeId: number;
+  storeName: string;
+  visitInfo: object;
+};

components/Marker/Icon/IconMarker.tsx

@@ -17,7 +17,7 @@ export const typeIcon: TypeIcon = SizeTypeImg25();
 
 const eng = ["FOOD", "CAFE", "CULTURE", "BEAUTY", "ETC"];
 
-const typeEngtoKor = (name: string) => {
+export const typeEngtoKor = (name: string) => {
   const kor = ["음식점", "카페", "문화", "미용", "기타"];
   return kor[eng.indexOf(name)];
 };

components/Marker/Name/NameMarker.tsx

@@ -19,7 +19,6 @@ const NameMarker = ({
   lat,
   lng,
   type = "CULTURE",
-  icon,
   title,
   markerType,
 }: NameMarkerProps) => {

components/organisms/Modal/FinishModal.tsx

@@ -3,8 +3,7 @@ import Modal from "./Modal";
 import styled from "@emotion/styled";
 import Button from "../Button";
 import CloseIcon from "@/assets/svg/Close.svg";
-import Image from "next/image";
-import { SizeTypeImg } from "@/utils/TypeImg";
+import { SizeTypeImg57 } from "@/utils/TypeImg";
 
 interface Props {
   title: string;
@@ -17,13 +16,13 @@ const FinishModal = ({ setIsFinishModal, title, type }: Props) => {
     setIsFinishModal(false);
   };
 
-  const typeStyles = SizeTypeImg(57);
+  const typeStyles = SizeTypeImg57();
 
   return (
     <Modal>
       <Container>
         <ModalCloseBox onClick={handleOnClickStamp}>
-          <Image src={CloseIcon} alt="close icon" width={32} height={32} />
+          <CloseIcon alt="close icon" width={32} height={32} />
         </ModalCloseBox>
         <BigMarkerContainer>
           <MarkerIconBox>{typeStyles[type].value}</MarkerIconBox>

components/organisms/Modal/StampModal.tsx

@@ -5,7 +5,9 @@ import Image from "next/image";
 import CloseIcon from "@/assets/svg/Close.svg";
 import Button from "../Button";
 import { COLORS } from "@/styles/colors";
-
+import { Checkbox } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CircleIcon from "@mui/icons-material/Circle";
 interface Props {
   setIsStampModal: Function;
 }
@@ -39,7 +41,7 @@ const StampModal = ({ setIsStampModal }: Props) => {
     <Modal>
       <Container>
         <ModalCloseBox onClick={handleOnClickStamp}>
-          <Image src={CloseIcon} alt="close icon" width={32} height={32} />
+          <CloseIcon alt="close icon" width={32} height={32} />
         </ModalCloseBox>
         <TitleBox>2배 스탬프 적용</TitleBox>
         <InfoBox>
@@ -66,12 +68,22 @@ const StampModal = ({ setIsStampModal }: Props) => {
           </DayBox>
           <InfoTitleBox>2. 조건 유무</InfoTitleBox>
           <ConditionBox>
-            <CheckIconBox>{/** TODO: svg 적용하기 */}</CheckIconBox>
+            <CheckIconBox>
+              <Checkbox
+                icon={<CircleIcon />}
+                checkedIcon={<CheckCircleIcon />}
+              />
+            </CheckIconBox>
             <CheckTextBox>n명 달성 시 종료</CheckTextBox>
           </ConditionBox>
           <PersonBox></PersonBox>
           <ConditionBox>
-            <CheckIconBox>{/** TODO: svg 적용하기 */}</CheckIconBox>
+            <CheckIconBox>
+              <Checkbox
+                icon={<CircleIcon />}
+                checkedIcon={<CheckCircleIcon />}
+              />
+            </CheckIconBox>
             <CheckTextBox>제한 인원 X</CheckTextBox>
           </ConditionBox>
         </InfoBox>
@@ -150,12 +162,13 @@ const ConditionBox = styled.div`
 const CheckIconBox = styled.div``;
 
 const CheckTextBox = styled.div`
-  margin-left: 8px;
   color: #000;
   font-size: 16px;
   font-weight: 400;
   line-height: 19.264px; /* 120.399% */
   letter-spacing: -1.12px;
+  display: flex;
+  align-items: center;
 `;
 
 const PersonBox = styled.div`

pages/api/ContractAPI.ts

@@ -0,0 +1,34 @@
+import { axiosInstance } from "@/pages/api/axiosInstance";
+import axios from "axios";
+import { FilterProps } from "./StoreAPI";
+
+export const getContractBase = async ({
+  isPicked = false,
+  name = "",
+  category = "NONE",
+  pageNumber = 0,
+}: FilterProps) => {
+  try {
+    const response = await axiosInstance.get(
+      `/contract?isPicked=${isPicked}&name=${name}&category=${category}&pageSize=40&pageNumber=${pageNumber}`
+    );
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};
+
+export const getContractInfo = async (id: number) => {
+  try {
+    const response = await axiosInstance.get(`/contract/details/${id}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error.response?.data);
+    }
+    return null;
+  }
+};