Feature/#10 방신고하기

src/API/room.tsx

@@ -71,6 +71,12 @@ export const editReview = (reviewId: number, message : string, grade : number) =
 export const deleteReview = (reviewId: number) =>
   baseApi.delete(`/review/${reviewId}`);   
 
+//신고
+export const reportRoom = (roomId: number, type : number, detail : string) =>
+  baseApi.post(`/rooms/${roomId}/report`, {
+    type, detail  
+  });   
+
 //배열리턴
 export const getArr = (start : number, end : number): number[] => {
   let floor = [];

src/components/routes.tsx

@@ -16,6 +16,7 @@ import NewPostContainer from "../pages/community/newPost/newPostContainer";
 import UserEdit from "../pages/user/UserEdit";
 import UserDelete from "../pages/user/UserDelete";
 import LandlordRooms from "../pages/landlord/LandlordRooms";
+import RoomReport from "../pages/room/roomDetail/RoomReport";
 
 const Routes: React.FunctionComponent = () => {
   return (
@@ -24,6 +25,7 @@ const Routes: React.FunctionComponent = () => {
         <Route path={mainHome} exact component={HomeContainer} />
         <Route path={roomUrl.home} exact component={roomListContainer} />
         <Route path={roomUrl.room} exact component={RoomDetail} />
+        <Route path={roomUrl.roomReport} exact component={RoomReport} />
         <Route path={authUrl.signIn} exact component={SignIn} />
         <Route path={authUrl.signUp} exact component={SignUp} />
         <Route path={authUrl.signOut} exact component={SignOut} />

src/components/urls.tsx

@@ -2,11 +2,12 @@
 const home = "/home";
 const roomDetail = (roomId: number) => `/rooms/${roomId}`;
 const room ="/rooms/:roomid";
-
+const roomReport ="/rooms/:roomid/report"
 export const roomUrl = {
   home,
   roomDetail,
   room,
+  roomReport
 };
 
 // admin

src/pages/room/interface.tsx

@@ -66,3 +66,11 @@ export interface IReview{
   grade : number,
   modifiedDate : string
 }
+
+export const reportType = {
+  falseRoom : 0,
+  exaggerate : 1,
+  notEqual : 2,
+  destroy : 3,
+  etc : 4
+}

src/pages/room/roomDetail/RoomDetail.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { Link, RouteComponentProps, withRouter } from "react-router-dom";
 import NavBar from "../../../components/NavBar";
-import "../../../sass/tailwind.output.css";
 import {getRoomDetail} from "../../../API/room";
 import { IRoomDetail } from "../interface";
 
@@ -76,9 +75,9 @@ const get_room = async(room_id : number) => {
       <NavBar></NavBar>
       <div className="min-h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-8 lg:px-20">
         <div className = "mt-20 flex justify-end space-x-2">        
-          <button className="button-mint-white" >
+          <Link className="button-mint-white" to ={"/rooms/"+room_id+"/report"}>
             신고하기
-          </button>
+          </Link>
           <button className="button-light-green-white" >
             문의하기
           </button>

src/pages/room/roomDetail/RoomReport.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { reportRoom } from "../../../API/room";
+import NavBar from "../../../components/NavBar";
+import {reportType} from "../interface"
+
+const RoomReport = ({history} :RouteComponentProps) => {
+  const [report, set_report] = useState({ type : 0, detail : "" });
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const roomId = parseInt(history.location.pathname.split("/")[2]);
+    reportRoom(roomId, report.type, report.detail).then(()=>{
+        alert('접수되었습니다.');
+        history.goBack();
+    }).catch(err=>{
+        alert('접수에 실패하였습니다.');
+        console.log(err);
+    })
+  };
+
+  const handle_select = (event: React.FormEvent<HTMLSelectElement>) => {
+    event.preventDefault();
+    const { value } = event.currentTarget;
+
+    set_report({...report, type : parseInt(value)});
+  };
+
+  const handle_textarea = (event: React.FormEvent<HTMLTextAreaElement>) => {
+    event.preventDefault();
+    const { value } = event.currentTarget;
+    set_report({ ...report, detail : value });
+ }
+
+
+  return (
+    <div>
+      <NavBar></NavBar>
+      <div className="min-h-screen px-4 py-12 flex items-center justify-center sm:px-6 lg:px-8">
+        <div className="max-w-md w-full shadow-lg mg-3">
+          <h1 className="mt-6 text-3xl text-center text-pink-400">신고하기</h1>
+          <form name="form" onSubmit={submit}>
+            <div className="flex-column-container p-10">
+              <h1 className = "mb-2 text-xl">산고사유</h1>
+              <select onClick={handle_select}>
+                <option value = {reportType.falseRoom}>허위 매물</option>
+                <option value = {reportType.exaggerate}>과장 광고</option>
+                <option value = {reportType.notEqual}>불일치한 정보제공</option>
+                <option value = {reportType.destroy}>계약 파기</option>
+                <option value = {reportType.etc}>기타</option>
+              </select>
+
+              <h1 className = "mt-10 text-xl">상세사유</h1>
+              <textarea onChange={handle_textarea} className="form-textarea w-full p-3" placeholder="상세한 사유를 입력해주세요"></textarea>
+              <button
+                className="button-deep-pink-white mid padding-3 margin-top-8" type="submit"
+              >
+                제출하기
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default withRouter(RoomReport);