Merge pull request #33 from team-Ollie/10-feature-Home-API

fix: image 수정 및 api 연결

apis/challenge.ts

@@ -25,6 +25,11 @@ interface getChallengeSearchResponse extends ResponseBody2 {
   result: Challenge[];
 }
 
+export interface AttendanceRequestBody {
+  challengeIdx: number;
+  attendanceCode: string;
+}
+
 async function getMyChallengeList(): Promise<GetMyChallengeListResponse> {
   const { data } = await client.get(`/challenges`);
   return data;
@@ -66,10 +71,18 @@ async function postNewChallenge(challengeIdx: number): Promise<ResponseBody> {
   return data;
 }
 
+async function postAttendance(
+  body: AttendanceRequestBody,
+): Promise<ResponseBody> {
+  const { data } = await client.post(`/challenges/attendance`, body);
+  return data;
+}
+
 export {
   getMyChallengeList,
   getChallengeAds,
   getChallengeSearch,
   postNewChallenge,
-  getChallengDetail
+  postAttendance,
+  getChallengDetail,
 };

apis/hooks/challenge.ts

@@ -1,13 +1,14 @@
 import {
+  AttendanceRequestBody,
   getChallengeAds,
   getChallengeSearch,
   getMyChallengeList,
+  postAttendance,
   postNewChallenge,
   getChallengDetail,
 } from "../challenge";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-
 function useGetMyChallengeList() {
   const { data } = useQuery({
     queryKey: ["getMyChallengeList"],
@@ -64,11 +65,21 @@ function usePostNewChallenge(
   return { mutate };
 }
 
+function usePostAttendance() {
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation({
+    mutationKey: ["postAttendance"],
+    mutationFn: (body: AttendanceRequestBody) => postAttendance(body),
+  });
+
+  return { mutate };
+}
+
 export {
   useGetMyChallengeList,
   useGetChallengeAds,
   useGetChallengeSearch,
   usePostNewChallenge,
+  usePostAttendance,
   useGetChallengeDetail,
 };
-

components/HeadFunction.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import FlexBox from "./Flexbox";
-import Image from "next/image";
 import Head from "next/head";
 import LeftArrowIcon from "@/public/svgs/LeftArrow.svg";
 

components/home/certifyModal.tsx

@@ -2,7 +2,7 @@ import { InputError } from "@/pages/mypage/password";
 import FlexBox from "../Flexbox";
 import TextInput from "../Input";
 import { useState } from "react";
-import Image from "next/image";
+import CloseIcon from "@/public/svgs/Close.svg";
 
 interface CertifyModalProps {
   setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -29,7 +29,7 @@ export default function CertifyModal({
       <FlexBox className="justify-between items-start">
         <div className="h3 mb-4">챌린지 인증하기</div>
         <div onClick={() => setIsModalVisible(false)}>
-          <Image src={"/svgs/Close.svg"} width={20} height={20} />
+          <CloseIcon width={20} height={20} />
         </div>
       </FlexBox>
       <FlexBox className="w-full gap-1  mb-3">

components/home/challengeBox.tsx

@@ -8,7 +8,6 @@ import { useAtom } from "jotai";
 import CertifyModal from "./certifyModal";
 import { useState } from "react";
 import ReactModal from "react-modal";
-import Image from "next/image";
 import { useGetMyChallengeList } from "@/apis/hooks/challenge";
 import AdminChallenge from "./adminChallenge";
 

components/home/searchBar.tsx

@@ -1,6 +1,7 @@
 import { NextPage } from "next";
 import FlexBox from "../Flexbox";
-import Image from "next/image";
+import SearchIcon from "@/public/svgs/Search.svg";
+import CloseIcon from "@/public/svgs/Close_Circle.svg";
 import { ChangeEvent } from "react";
 
 interface SearchBarProps {
@@ -19,8 +20,8 @@ export default function SearchBar({ value, setValue }: SearchBarProps) {
 
   return (
     <div className="w-full px-4 pb-4">
-      <FlexBox className="rounded-lg bg-grey-100 py-2 px-4 gap-2">
-        <Image src={"/svgs/Search.svg"} width={24} height={24} />
+      <FlexBox className="rounded-lg bg-gray-100 py-2 px-4 gap-2">
+        <SearchIcon width={24} height={24} />
         <input
           type="text"
           className="w-full outline-none border-none bg-grey-100 h4"
@@ -29,7 +30,7 @@ export default function SearchBar({ value, setValue }: SearchBarProps) {
           placeholder="프로그램 이름을 검색해보세요!"
         />
         <div onClick={onPressResetBtn}>
-          <Image src={"/svgs/Close_Circle.svg"} width={16} height={16} />
+          <CloseIcon width={16} height={16} />
         </div>
       </FlexBox>
     </div>

components/mypage/profile.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import FlexBox from "../Flexbox";
 import { useRouter } from "next/router";
 import RightArrowIcon from "@/public/svgs/RightArrow.svg";

pages/challenge/join.tsx

@@ -5,7 +5,6 @@ import NavBar from "@/components/NavBar";
 import SearchBar from "@/components/home/searchBar";
 import SearchResult from "@/components/home/searchResult";
 import { NextPage } from "next";
-import Image from "next/image";
 import { useState } from "react";
 import { toast, ToastContainer, Zoom } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";

pages/index.tsx

@@ -3,11 +3,9 @@ import { NextPage } from "next";
 import NavBar from "@/components/NavBar";
 import Challenge from "@/components/home/challenge";
 import HomeCarousel from "@/components/home/carousel";
-import { HomeHeader } from "@/components/home/header";
 import HomeChallenge from "@/components/home/challengeBox";
 import FlexBox from "@/components/Flexbox";
 import { ToastContainer, Zoom, toast } from "react-toastify";
-import Image from "next/image";
 import "react-toastify/dist/ReactToastify.css";
 import CheckIcon from "@/public/svgs/Check.svg";
 import { atom, useAtomValue } from "jotai";