Merge pull request #8 from GDSC-StreetReview/docs/#4

Docs/#4

src/App.tsx

@@ -1,19 +1,19 @@
 import "./App";
 import Router from "./Router";
-import { GlobalStyle } from './Styles/GlobalStyle';
+import { GlobalStyle } from "./Styles/GlobalStyle";
 import KakaoMaps from "./components/Map/KakaoMaps";
 const App = () => {
-
   // 애가찐이야
   // const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
   const isMobile = window.innerWidth <= 480;
   console.log(isMobile);
   return (
-    <div id="App">
-      <KakaoMaps />
-      <GlobalStyle/>
-      <Router />
-    </div>
+    <Router>
+      <div id="App">
+        <KakaoMaps />
+        <GlobalStyle />
+      </div>
+    </Router>
   );
 };
 

src/Router.tsx

@@ -1,17 +1,21 @@
+import { ReactNode } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import MainPage from "./Pages/MainPage/MainPage";
+import MainPage from "./Pages/mainPage/MainPage";
 import RedirectionPage from "./components/Login/redirectionPage";
+import { MypageSwipe } from "./components/Mypage/components/MypageSwipe";
 
-const Router = () => {
+interface RouterProps {
+  children?: ReactNode;
+}
+
+const Router = ({ children }: RouterProps) => {
   return (
     <BrowserRouter>
+      {children}
       <Routes>
         <Route path="" element={<MainPage />} />
         <Route path="/google/auth" element={<RedirectionPage />} />
-
-        <Route path="/mypage" element={<MainPage />}>
-        <Route path="review" element={<MainPage />} />
-      </Route>
+        <Route path="/mypage" element={<MypageSwipe />}/>
       </Routes>
     </BrowserRouter>
   );

src/components/Atom/customModal/deleteModal/DeleteModal.tsx

@@ -0,0 +1,30 @@
+import { useNavigate } from "react-router-dom";
+import { useDeleteReview } from "src/hook/useDeleteReview";
+import CustomModal from "../CustomModal";
+import "./DeleteModal.css";
+
+interface DeleteProp {
+  target: string; // 거리, 리뷰, 댓글
+  targetId: number;
+  onClose: () => void;
+}
+const DeleteModal = ({ onClose, targetId, target }: DeleteProp) => {
+  const navigate = useNavigate();
+  const { handleDeleteReview } = useDeleteReview();
+  const handleDelete = () => {
+    handleDeleteReview(targetId.toString());
+     navigate("/");
+    onClose();
+  };
+  return (
+    <>
+      <CustomModal
+        title={`${target} 삭제`}
+        content={`${target}를 삭제하시겠습니까?`}
+        onClick={handleDelete}
+        onClose={onClose}
+      />
+    </>
+  );
+};
+export default DeleteModal;

src/components/Atom/customModal/reportModal/ReportModal.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router-dom";
+import { useReportReview } from "src/hook/useReportReview";
+import CustomModal from "../CustomModal";
+
+interface ReportProp {
+  target: string; // 거리, 리뷰, 댓글
+  targetId: number;
+  onClose: () => void;
+}
+const ReportModal = ({ onClose, targetId, target }: ReportProp) => {
+  const navigate = useNavigate();
+  const { handleReportReview } = useReportReview();
+  const handleDelete = () => {
+    handleReportReview(targetId.toString());
+    navigate("/");
+    onClose();
+  };
+  return (
+    <>
+      <CustomModal
+        title={`${target} 신고`}
+        content={`${target}를 신고하시겠습니까?`}
+        onClick={handleDelete}
+        onClose={onClose}
+      />
+    </>
+  );
+};
+export default ReportModal;

src/components/Atom/customSelect/CustomSelect.css

@@ -0,0 +1,42 @@
+.custom-select-wrapper {
+  position: relative;
+  height: 3rem;
+  width: 10.3125rem;
+}
+
+.custom-select-header {
+  padding: 0.5rem;
+  cursor: pointer;
+  border: none;
+  border-radius: 1.25rem;
+  background-color: #dff5ff;
+}
+
+.custom-select-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  border: none;
+  background-color: #dff5ff;
+  border-radius: 1.25rem;
+}
+
+.custom-option {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-bottom: 2px solid #fff;
+}
+.custom-option:last-child {
+  border-bottom: none;
+}
+
+.custom-option:hover {
+  background-color: #f0f0f0;
+}
+.custom-option:first-child:hover {
+  border-radius: 1.25rem 1.25rem 0 0;
+}
+.custom-option:last-child:hover {
+  border-radius: 0 0 1.25rem 1.25rem;
+}

src/components/Atom/customSelect/CustomSelect.tsx

@@ -0,0 +1,48 @@
+import { SetStateAction, useState } from "react";
+import { Text } from "../text/Text";
+import "./CustomSelect.css";
+
+interface customSelectProps {
+  options: string[];
+  selectedOption: string;
+  setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
+}
+const CustomSelect = ({
+  options,
+  selectedOption,
+  setSelectedOption,
+}: customSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOptionClick = (option: SetStateAction<string>) => {
+    setSelectedOption(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="custom-select-wrapper">
+      <div className="custom-select-header" onClick={() => setIsOpen(!isOpen)}>
+        <Text color="#000" fontSize="0.9375rem" fontWeight="700">
+          {selectedOption}
+        </Text>
+      </div>
+      {isOpen && (
+        <div className="custom-select-options">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="custom-option"
+              onClick={() => handleOptionClick(option)}
+            >
+              <Text color="#000" fontSize="0.9375rem" fontWeight="700">
+                {option}
+              </Text>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

src/components/Atom/topSideToggle/TopSideToggle.tsx

@@ -28,6 +28,9 @@ const TopSideToggle = () => {
   const handleCloseFetchStreet = () => {
     setOpenStreetModal(false);
   };
+  const handleMypage = () => {
+    navigate("/mypage");
+  };
   type TopSideToggleIconProp = {
     path: string;
     img: string;
@@ -53,7 +56,7 @@ const TopSideToggle = () => {
     const handleOnClick = () => {
       switch (path) {
         case PagePath.Mypage:
-          navigate(`/${path}`);
+          handleMypage();
           break;
         case PagePath.logout:
           logoutClick();
@@ -104,10 +107,7 @@ const TopSideToggle = () => {
         ))}
         {openLogoutModal && <LogoutModal onClose={handlelogoutClose} />}
         {openStreetModal && (
-          <WriteModal
-            writeTypeProp="STREET"
-            onClose={handleCloseFetchStreet}
-          />
+          <WriteModal writeTypeProp="STREET" onClose={handleCloseFetchStreet} />
         )}
       </div>
     </>

src/components/Atom/writeModal/WriteModal.tsx

@@ -1,8 +1,10 @@
 import React, { FC, useState } from "react";
+import { useDispatch } from "react-redux";
 import { IMAGES } from "src/constants/images";
 import { Coordinates, Tag } from "src/constants/interface";
 import { useFetchReview } from "src/hook/useFetchReview";
 import useFetchStreet from "src/hook/useFetchStreet";
+import { swipeStateCloseAction } from "src/store/swipeState/swipeStateAction";
 import { MappingImgItem } from "../mappingImgItem/MappingImgItem";
 import { Text } from "../text/Text";
 import "./WriteModal.css";
@@ -19,6 +21,10 @@ const WriteModal: FC<WriteModalProps> = ({
   onClose,
 }) => {
   const writeType = writeTypeProp === "REVIEW" ? "리뷰" : "거리";
+  const dispatch = useDispatch();
+  const handleClose = () => {
+    dispatch(swipeStateCloseAction());
+  };
   const { writeReview } = useFetchReview();
   const { writeStreet } = useFetchStreet();
   const [uploadTitle, setUpladTitle] = useState<string>("");
@@ -53,6 +59,7 @@ const WriteModal: FC<WriteModalProps> = ({
         console.error("거리 작성 실패:", error);
       }
     }
+    handleClose();
     onClose();
   };
   const handleImageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/components/Board/components/BoardItem.tsx

@@ -1,7 +1,10 @@
+import { useEffect } from "react";
 import { BackgroundImg } from "src/components/Atom/backgroundImg/BackgroundImg";
 import { Text } from "src/components/Atom/text/Text";
 import { IMAGES } from "src/constants/images";
 import { RequestStreetData, ReviewDetail } from "src/constants/interface";
+import useGetUserLikeToReview from "src/hook/useGetUserLikeToReview";
+import { useLikeReview } from "src/hook/useLikeReview";
 import { TruncatedContent } from "src/utils/TruncatedContent";
 import { ReactComponent as IconHeart } from "../../../assets/images/ic_heartWhite.svg";
 import { MAX_CONTENT_LENGTH } from "../constants/Constants";
@@ -27,17 +30,27 @@ const BoardItem = ({
   onClick,
   onClose,
 }: contentItem) => {
+  const { like, getUserLikeToReview } = useGetUserLikeToReview();
   const content = TruncatedContent({
     maxContentLength: MAX_CONTENT_LENGTH,
     content: reviewItem.content,
   });
+  const { handleLikeReview } = useLikeReview();
+  const handleLikeClick = () => {
+    handleLikeReview(reviewItem.reviewId);
+  };
+  // getUserLikeToReview
+  useEffect(() => {
+    getUserLikeToReview(reviewItem.reviewId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     <>
       <BackgroundImg
         img={reviewItem.photoList?.[0] || IMAGES.basicColorImg}
         className="board-item-back-box"
       >
-        <div className="board-item-back-box-front"/>
+        <div className="board-item-back-box-front" />
         <div className="board-item-top">
           <img src={IMAGES.moreLeft} alt="back" onClick={onClose} />
         </div>
@@ -47,7 +60,12 @@ const BoardItem = ({
             <Text fontWeight="400">{content}</Text>
           </div>
           <div className="board-item-menu-box">
-            <IconHeart fill="#DFF5FF" stroke="#DFF5FF" style={IconStyle} />
+            <IconHeart
+              fill={like ? "#DFF5FF" : "#FFF"}
+              stroke="#DFF5FF"
+              style={IconStyle}
+              onClick={handleLikeClick}
+            />
             <img src={IMAGES.addLocation} alt="add" style={IconStyle} />
             <img src={IMAGES.myCommentWhite} alt="comment" style={IconStyle} />
           </div>

src/components/Board/components/BoardItemDetail.css

@@ -37,6 +37,17 @@
   height: 3.125rem;
   border-radius: 50%;
 }
+.board-item-detail-user-info-mid-box-delet {
+  width: 5.3125rem;
+  height: 1.875rem;
+  border-radius: 0.625rem;
+  background: #EA4335;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-top: 0.5rem;
+}
 .board-item-detail-user-info-mid-box-report {
   width: 3.125rem;
   height: 3.125rem;
@@ -66,13 +77,13 @@
   margin-top: 1rem;
 }
 
-.board-item-detail-comment-box{
+.board-item-detail-comment-box {
   margin-top: 2rem;
   padding: 0 1rem;
 }
 
 .comment-input-wrapper {
-  border-top: 1px solid #D9D9D9;
+  border-top: 1px solid #d9d9d9;
   padding: 0 4rem;
 }
 .comment-input-box {