Merge pull request #91 from next-petree/feat_login

Feat login

src/api/axiosInstance.ts

@@ -20,7 +20,7 @@ instance.interceptors.request.use(
 
 instance.interceptors.response.use(
   response => {
-    console.log("api 요청 응답 :", response);
+    // console.log("api 요청 응답 :", response);
     return response;
   },
   error => {

src/component/DaumFindAddress/DaumFindAddress.tsx

@@ -58,6 +58,7 @@ const DaumFindAddress = () => {
       <Modal
         isOpen={isOpen}
         onRequestClose={closeModal}
+        shouldCloseOnOverlayClick={true}
         ariaHideApp={false}
         className="ReactModal__Content"
         overlayClassName="ReactModal__Overlay"

src/component/Modal/Modal.tsx

@@ -1,18 +1,19 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 
 const useModal = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [modalContent, setModalContent] = useState('');
+  const [modalContent, setModalContent] = useState("");
 
-  const showModal = useCallback((content: any) => {
+  const showModal = useCallback((content: any = "") => {
+    // 기본값 설정
     setIsModalVisible(true);
     setModalContent(content);
-    document.body.style.overflow = 'hidden'; // 모달이 열렸을 때 뒷배경 스크롤 막기
+    document.body.style.overflow = "hidden";
   }, []);
 
   const hideModal = useCallback(() => {
     setIsModalVisible(false);
-    document.body.style.overflow = 'auto'; // 모달이 닫혔을 때 뒷배경 스크롤 허용
+    document.body.style.overflow = "auto";
   }, []);
 
   return { isModalVisible, showModal, hideModal, modalContent };

src/component/MyPage/AdoptList/Component/ListContainer/RequestListContainer.tsx

@@ -1,4 +1,7 @@
 import { useState, useMemo, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { selectSearchResultSlice } from "../../../../../redux/SearchResult/SearchResultSlice";
+import { selectSuccessResultSlice } from "../../../../../redux/SuccessResult/SuccessResultSlice";
 import { styled } from "styled-components";
 import { get } from "../../../../../api/api";
 import { TitleWrap, Title, SubTitle, PageNationWrap } from "./RequestListStyle";
@@ -54,14 +57,23 @@ type ApiResponse = {
 };
 
 const RequestListContainer = () => {
-  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
+  const [currentPage, setCurrentPage] = useState(1);
   const [matchings, setMatchings] = useState<MatchingDataType[]>([]);
   const [totalPages, setTotalPages] = useState(0);
 
+  const { select, inputValue } = useSelector(selectSearchResultSlice);
+  const apiCallCount = useSelector(selectSuccessResultSlice);
+
   const fetchMatchingList = async (page: number) => {
+    let url = `/me/matchings?page=${page - 1}`;
+
+    if (select !== "전체") {
+      const searchType = select === "견종" ? "type" : "name";
+      url += `&searchType=${searchType}&keyword=${inputValue}`;
+    }
+
     try {
-      const response = await get<ApiResponse>("/me/matchings");
-      console.log("API 응답 데이터:", response.data.data.totalPages);
+      const response = await get<ApiResponse>(url);
       setTotalPages(response.data.data.totalPages);
       setMatchings(response.data.data.content);
     } catch (error) {
@@ -71,9 +83,8 @@ const RequestListContainer = () => {
 
   useEffect(() => {
     fetchMatchingList(currentPage);
-  }, [currentPage]);
+  }, [currentPage, select, inputValue, apiCallCount]);
 
-  // 브리더 가데이터!!!!!!!!!!!!!!!!!!
   const BreederheaderData: BreederColumn[] = [
     { accessor: "name", Header: "분양희망자" },
     { accessor: "breed", Header: "강아지(견종명)" },
@@ -82,7 +93,6 @@ const RequestListContainer = () => {
   ];
   const BreederHeaders = useMemo(() => BreederheaderData, []);
 
-  // 입양자 가데이터!!!!!!!!!!!!!!!!!
   const AdopterheaderData: AdopterColumn[] = [
     { accessor: "breeder", Header: "브리더" },
     { accessor: "breed", Header: "강아지(견종명)" },
@@ -94,6 +104,7 @@ const RequestListContainer = () => {
 
   const BreederItems = useMemo(() => {
     return matchings.map(matching => ({
+      id: matching.matchingId,
       name: matching.adopterNickname,
       breed: matching.dogTypeName,
       bday: matching.submitDate,
@@ -143,8 +154,8 @@ const RequestListContainer = () => {
         disabled={currentPage === 1}
         style={{
           margin: "0 5px",
-          padding: "5px 10px",
-          border: "1px solid #ddd",
+          padding: "8px 13px",
+          border: "none",
           borderRadius: "8px",
           backgroundColor: currentPage === 1 ? "#e0e0e0" : "#f0f0f0",
           cursor: currentPage === 1 ? "not-allowed" : "pointer",
@@ -162,11 +173,12 @@ const RequestListContainer = () => {
           disabled={currentPage === i}
           style={{
             margin: "0 5px",
-            padding: "5px 10px",
-            border: "1px solid #ddd",
-            backgroundColor: currentPage === i ? "#e0e0e0" : "#4ec1bf",
-            color: currentPage === i ? "black" : "white",
+            padding: "8px 13px",
+            border: "none",
+            backgroundColor: currentPage === i ? "#4ec1bf" : "#f0f0f0",
+            color: currentPage === i ? "white" : "black",
             borderRadius: "8px",
+            cursor: "pointer",
           }}
         >
           {i}
@@ -181,8 +193,8 @@ const RequestListContainer = () => {
         disabled={currentPage === totalPages}
         style={{
           margin: "0 5px",
-          padding: "5px 10px",
-          border: "1px solid #fff",
+          padding: "8px 13px",
+          border: "none",
           borderRadius: "8px",
           backgroundColor: currentPage === totalPages ? "#e0e0e0" : "#f0f0f0",
           cursor: currentPage === totalPages ? "not-allowed" : "pointer",

src/component/MyPage/AdoptList/Component/ListContainer/SearchComp/SearchComp.tsx

@@ -1,76 +1,69 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
+import { useDispatch } from "react-redux";
+import {
+  setSelect,
+  setInputValue,
+} from "../../../../../../redux/SearchResult/SearchResultSlice";
 import {
   SearchWrap,
   DropDown,
   Input,
-  // Button,
   DisNone,
   DropDownWrap,
   Selected,
 } from "./Style1";
 import arrowDown from "../../../../../../assets/images/arrowDown.png";
 import Button from "../../Button/Button";
 export default function SearchComp() {
+  const dispatch = useDispatch();
   const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState("내역을 검색하세요");
-  const [select, setSelect] = useState("항목을 선택해주세요");
-  const handleInputChange = (event: any) => {
-    const value = event.target.value;
-    if (value !== "내역을 검색하세요") {
-      setInputValue(value);
-    }
+  const [localSelect, setLocalSelect] = useState("전체");
+  const [localInputValue, setLocalInputValue] = useState("");
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setLocalInputValue(event.target.value);
   };
-  const handleInputFocus = (event: any) => {
+
+  const handleInputFocus = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.value === "내역을 검색하세요") {
-      setInputValue("");
+      setLocalInputValue("");
     }
   };
 
+  const selectItem = (item: string) => {
+    setLocalSelect(item);
+    setIsOpen(false);
+  };
+
   const DropOpen = () => {
     if (isOpen === false) {
       setIsOpen(true);
     } else {
       setIsOpen(false);
     }
   };
+
   const getValue = () => {
-    console.log(`선택된 항목: ${select}, 검색어: ${inputValue}`);
+    dispatch(setSelect(localSelect));
+    dispatch(setInputValue(localInputValue));
   };
 
   return (
     <SearchWrap>
       <DropDown>
         <Selected onClick={DropOpen}>
-          <div>{select}</div> {/* 상태 변수 select의 값을 표시 */}
+          <div>{localSelect}</div>
           <img src={arrowDown} />
         </Selected>
         {isOpen ? (
           <DropDownWrap>
-            <div
-              className="sel"
-              onClick={() => {
-                setSelect("전체");
-                setIsOpen(false);
-              }}
-            >
+            <div className="sel" onClick={() => selectItem("전체")}>
               전체
             </div>
-            <div
-              className="sel"
-              onClick={() => {
-                setSelect("견종");
-                setIsOpen(false);
-              }}
-            >
+            <div className="sel" onClick={() => selectItem("견종")}>
               견종
             </div>
-            <div
-              className="sel"
-              onClick={() => {
-                setSelect("강아지 이름");
-                setIsOpen(false);
-              }}
-            >
+            <div className="sel" onClick={() => selectItem("강아지 이름")}>
               강아지 이름
             </div>
           </DropDownWrap>
@@ -80,10 +73,10 @@ export default function SearchComp() {
       </DropDown>
       <Input
         type="text"
-        value={inputValue}
+        value={localInputValue}
         onChange={handleInputChange}
         onFocus={handleInputFocus}
-      ></Input>
+      />
       <Button
         bgcolor={"#4EC1BF"}
         buttonwidth={"100px"}

src/component/MyPage/AdoptList/Component/Modal/Breeder/BreederRowModal.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { get } from "../../../../../../api/api";
 import {
   Td,
   DetailButton,
@@ -13,82 +14,88 @@ import {
   Gender,
   BDay,
   AnswerWrap,
-  AnswerInput,
+  AnswerTextBox,
   Question,
-
-  // AnswerLength,
   CountSpan,
 } from "./Style1";
 import useModal from "../../../../../Modal/Modal";
-import DogImg from "../../../../../../assets/images/temporaryImg.png";
 import CheckModal from "../CheckModal/CheckModal";
 
-const RowModal = ({
-  index,
-  breed,
-  bday,
-  name,
-}: {
-  index: number;
-  breed: string;
-  bday: string;
+type ModalDataType = {
+  imgUrl: string;
   name: string;
-}) => {
+  breedType: string;
+  gender: string;
+  birthDate: string;
+  nurturingEnv: string;
+  parentExp: string;
+};
+
+type ApiResponse = {
+  status: string;
+  data: {
+    body: {
+      data: ModalDataType;
+    };
+  };
+};
+
+const RowModal = ({ matchingId }: { matchingId: number }) => {
+  const [modalData, setModalData] = useState<ModalDataType | null>(null);
   const { isModalVisible, showModal, hideModal } = useModal();
 
-  const [inputValue1, setInputValue1] = useState(
-    "반려견을 좋아하는 예비 분양자입니다. 현재 강아지 2마리를 키우고 있습니다. 특히 포메라니안을 좋아하는 마음에 신청하게되었습니다.",
-  );
-  const [inputValue2, setInputValue2] = useState(
-    "반려견을 마치 아이처럼 아끼고 보살피겠습니다. 마음으로 나은 아이라는 마음으로  아플때도 한결같이 키울게요~!반려견을 마치 아이처럼 아끼고 보살피겠습니다. 마음으로 나은 아이라는 마음으로  아플때도 한결같이 키울게요~!",
-  );
-  const [inputCount1, setInputCount1] = useState(0);
-  const [inputCount2, setInputCount2] = useState(0);
+  const fetchAndShowModal = async () => {
+    try {
+      const response = await get<ApiResponse>(`/me/matchings/${matchingId}`);
+      setModalData(response.data.data.body.data);
+      showModal();
+    } catch (error) {
+      console.error("매칭 상세 조회 중 오류 발생:", error);
+    }
+  };
 
-  const dogName = breed.match(/(.+)(?=\()/g)?.[0] || "";
-  const typeofdog = breed.match(/(?<=\().+?(?=\))/g)?.[0] || "";
-  useEffect(() => {
-    setInputCount1(inputValue1.length);
-    setInputCount2(inputValue2.length);
-  }, [inputValue1, inputValue2]);
   return (
     <Td>
-      <DetailButton onClick={showModal}>상세보기</DetailButton>
+      <DetailButton onClick={fetchAndShowModal}>상세보기</DetailButton>
       {isModalVisible && (
         <ModalWrap onClick={hideModal}>
           <Modal onClick={e => e.stopPropagation()}>
             <Title>분양 신청서</Title>
             <InfoWrap>
-              <Img src={DogImg}></Img>
+              <Img src={modalData?.imgUrl}></Img>
               <DetailInfoWrap>
-                <DogName>{dogName}</DogName>
+                <DogName>{modalData?.name}</DogName>
                 <hr />
-                <BreedDog>견종 : {typeofdog}</BreedDog>
-                <Gender>성별 : 수컷</Gender>
-                <BDay>출생일 : {bday}</BDay>
+                <BreedDog>견종 : {modalData?.breedType}</BreedDog>
+                <Gender>성별 : {modalData?.gender}</Gender>
+                <BDay>출생일 : {modalData?.birthDate}</BDay>
                 <hr />
               </DetailInfoWrap>
             </InfoWrap>
             <AnswerWrap>
               <Question>
                 1. 반려동물을 분양하려는 사유에 대해 작성하세요.
               </Question>
-              <AnswerInput>
-                {inputValue1}
-                <CountSpan>{inputCount1}/2000</CountSpan>
-              </AnswerInput>
+              <AnswerTextBox>
+                {modalData?.nurturingEnv}
+                <CountSpan>{modalData?.nurturingEnv.length}/2000</CountSpan>
+              </AnswerTextBox>
             </AnswerWrap>
             <AnswerWrap>
               <Question>
                 2. 해당 견종을 분양하는 것에 있어 자신의 마음가짐을
                 작성해주세요.
               </Question>
-              <AnswerInput>
-                {inputValue2}
-                <CountSpan>{inputCount2}/2000</CountSpan>
-              </AnswerInput>
+              <AnswerTextBox>
+                {modalData?.parentExp}
+                <CountSpan>{modalData?.parentExp.length}/2000</CountSpan>
+              </AnswerTextBox>
             </AnswerWrap>
-            <CheckModal setHideModal={hideModal} name={name} />
+            <CheckModal
+              setHideModal={hideModal}
+              name={modalData?.name || ""}
+              matchingId={matchingId}
+            />
           </Modal>
         </ModalWrap>
       )}