feat: report page & api

web/src/app/(stack)/report/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useReportForm } from "@/features/report/lib/hook/useReportForm";
+import { FailureModal } from "@/features/report/ui/FailureModal";
+import { ReportForm } from "@/features/report/ui/ReportForm";
+import { SuccessModal } from "@/features/report/ui/SuccessModal";
+import { CTA, TransitionLayout } from "@/shared/ui";
+
+export default function ReportPage() {
+  const {
+    location,
+    setLocation,
+    name,
+    setName,
+    recommendedMenu,
+    setRecommendedMenu,
+    reason,
+    setReason,
+    seatTypes,
+    setSeatTypes,
+    isSuccessModalOpen,
+    setIsSuccessModalOpen,
+    isFailureModalOpen,
+    setIsFailureModalOpen,
+    handleSubmit,
+  } = useReportForm();
+
+  return (
+    <TransitionLayout>
+      <ReportForm
+        location={location}
+        setLocation={setLocation}
+        name={name}
+        setName={setName}
+        recommendedMenu={recommendedMenu}
+        setRecommendedMenu={setRecommendedMenu}
+        reason={reason}
+        setReason={setReason}
+        seatTypes={seatTypes}
+        setSeatTypes={setSeatTypes}
+      />
+      <div className="fixed bottom-0 left-0 w-full bg-white">
+        <CTA
+          primaryLabel="제보하기"
+          onPrimary={handleSubmit}
+          primaryDisabled={
+            !location || !name || !recommendedMenu || reason.length < 5 || seatTypes.length === 0
+          }
+        />
+      </div>
+
+      <SuccessModal isOpen={isSuccessModalOpen} onClose={() => setIsSuccessModalOpen(false)} />
+      <FailureModal isOpen={isFailureModalOpen} onClose={() => setIsFailureModalOpen(false)} />
+    </TransitionLayout>
+  );
+}

web/src/features/report/api/reportApi.ts

@@ -0,0 +1,8 @@
+import { axiosInstance } from "@/shared/config";
+import type { ReportRequestBody } from "./types";
+
+export const postReport = async (body: ReportRequestBody) => {
+  const response = await axiosInstance.post("/api/v1/report", body);
+
+  return response;
+};

web/src/features/report/api/types.ts

@@ -0,0 +1,12 @@
+import type { SeatTypes } from "@/entities/storeList/api";
+
+export interface ReportRequestBody {
+  location: string;
+  name: string;
+  seatType: SeatTypes[];
+  paymentMethods: string[];
+  menuCategories: string[];
+  recommendedMenu: string;
+  reason: string;
+  memberId: number;
+}

web/src/features/report/api/useReportMutation.ts

@@ -0,0 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
+import type { ApiResponse } from "@/shared/model";
+import { postReport } from "./reportApi";
+
+interface UseReportMutationOptions {
+  onSuccess?: (data: ApiResponse<unknown>) => void;
+  onError?: (error: Error) => void;
+}
+
+export const useReportMutation = ({ onSuccess, onError }: UseReportMutationOptions = {}) => {
+  return useMutation({
+    mutationFn: postReport,
+    onSuccess,
+    onError,
+  });
+};

web/src/features/report/lib/hook/useReportForm.ts

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import type { SeatTypes } from "@/entities/storeList/api";
+import { useUserState } from "@/entities/user";
+import { useReportMutation } from "@/features/report/api/useReportMutation";
+
+export const useReportForm = () => {
+  const { userState } = useUserState();
+
+  const [location, setLocation] = useState("");
+  const [name, setName] = useState("");
+  const [recommendedMenu, setRecommendedMenu] = useState("");
+  const [reason, setReason] = useState("");
+  const [seatTypes, setSeatTypes] = useState<SeatTypes[]>([]);
+  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
+  const [isFailureModalOpen, setIsFailureModalOpen] = useState(false);
+
+  const { mutate: reportMutate } = useReportMutation({
+    onSuccess: () => {
+      setIsSuccessModalOpen(true);
+    },
+    onError: () => {
+      setIsFailureModalOpen(true);
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!userState.memberId) {
+      alert("로그인이 필요합니다.");
+      return;
+    }
+
+    reportMutate({
+      location,
+      name,
+      seatType: seatTypes,
+      paymentMethods: [],
+      menuCategories: [],
+      recommendedMenu,
+      reason,
+      memberId: userState.memberId,
+    });
+  };
+
+  return {
+    location,
+    setLocation,
+    name,
+    setName,
+    recommendedMenu,
+    setRecommendedMenu,
+    reason,
+    setReason,
+    seatTypes,
+    setSeatTypes,
+    isSuccessModalOpen,
+    setIsSuccessModalOpen,
+    isFailureModalOpen,
+    setIsFailureModalOpen,
+    handleSubmit,
+  };
+};

web/src/features/report/ui/FailureModal.tsx

@@ -0,0 +1,36 @@
+import Image from "next/image";
+import Character from "@/shared/lib/assets/png/character/basic.png";
+import { Icon, Modal } from "@/shared/ui";
+
+interface FailureModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function FailureModal({ isOpen, onClose }: FailureModalProps) {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onClose} title={""} description={""}>
+      <div className="flex min-w-[260px] flex-col items-center justify-center gap-6 rounded-lg bg-white p-4">
+        <button type="button" className="mb-[-24px] flex h-5 w-full justify-end" onClick={onClose}>
+          <Icon name="close" size={24} className="cursor-pointer text-gray400" />
+        </button>
+        <Image src={Character} alt="character" width={120} height={120} />
+        <div className="flex flex-col gap-2">
+          <span className="whitespace-pre-line text-center text-gray900 text-subtitle1">
+            식당 제보에 실패했어요
+          </span>
+          <span className="whitespace-pre-line text-center text-gray700 text-body2-regular">
+            다시 시도해 주세요.
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="flex h-[51px] w-full items-center justify-center rounded-[8px] bg-primary400 py-[14px]"
+        >
+          <span className="text-body1-semibold text-gray0">확인</span>
+        </button>
+      </div>
+    </Modal>
+  );
+}

web/src/features/report/ui/ReportForm.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { Dispatch, SetStateAction } from "react";
+import type { SeatTypes } from "@/entities/storeList/api";
+import { FilterSection, Input, InputReview } from "@/shared/ui";
+
+const SEAT_TYPE_MAP: Record<SeatTypes, string> = {
+  CUBICLE: "칸막이",
+  BAR_TABLE: "바 좌석",
+  FOR_ONE: "1인석",
+  FOR_TWO: "2인석",
+  FOR_FOUR: "4인석",
+};
+
+interface ReportFormProps {
+  location: string;
+  setLocation: Dispatch<SetStateAction<string>>;
+  name: string;
+  setName: Dispatch<SetStateAction<string>>;
+  recommendedMenu: string;
+  setRecommendedMenu: Dispatch<SetStateAction<string>>;
+  reason: string;
+  setReason: Dispatch<SetStateAction<string>>;
+  seatTypes: SeatTypes[];
+  setSeatTypes: Dispatch<SetStateAction<SeatTypes[]>>;
+}
+
+export const ReportForm = ({
+  location,
+  setLocation,
+  name,
+  setName,
+  recommendedMenu,
+  setRecommendedMenu,
+  reason,
+  setReason,
+  seatTypes,
+  setSeatTypes,
+}: ReportFormProps) => {
+  const handleSeatTypesChange = (selectedLabels: string[]) => {
+    const newSeatTypes = selectedLabels.map(
+      (label) => Object.entries(SEAT_TYPE_MAP).find(([, v]) => v === label)?.[0] as SeatTypes,
+    );
+    setSeatTypes(newSeatTypes);
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col gap-y-[36px] bg-white p-[20px] pb-[100px]">
+      <div className="flex flex-col gap-y-[8px]">
+        <span className="text-subtitle1">가게 위치</span>
+        <Input
+          label=""
+          placeholder="어느 지역에 있나요? ex) 강남역"
+          value={location}
+          onChange={setLocation}
+        />
+      </div>
+      <div className="flex flex-col gap-y-[8px]">
+        <span className="text-subtitle1">가게 정보</span>
+        <Input label="" placeholder="가게 이름이 무엇인가요?" value={name} onChange={setName} />
+      </div>
+      <div className="flex flex-col gap-y-[8px]">
+        <span className="text-subtitle1">추천 메뉴</span>
+        <Input
+          label=""
+          placeholder="추천 메뉴를 적어주세요."
+          value={recommendedMenu}
+          onChange={setRecommendedMenu}
+        />
+      </div>
+      <div className="flex flex-col gap-y-[8px]">
+        <span className="text-subtitle1">식당 추천 이유</span>
+        <InputReview
+          label=""
+          placeholder="추천 이유를 적어주세요."
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-y-[8px]">
+        <span className="text-subtitle1">좌석 형태</span>
+        <FilterSection
+          label=""
+          isMultiple={true}
+          options={Object.values(SEAT_TYPE_MAP)}
+          selectedItems={seatTypes.map((type) => SEAT_TYPE_MAP[type])}
+          onChange={handleSeatTypesChange}
+        />
+      </div>
+    </div>
+  );
+};

web/src/features/report/ui/SuccessModal.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import Character from "@/shared/lib/assets/png/character/basic.png";
+import { Icon, Modal } from "@/shared/ui";
+
+interface SuccessModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SuccessModal({ isOpen, onClose }: SuccessModalProps) {
+  const router = useRouter();
+
+  const handleConfirm = () => {
+    onClose();
+    router.push("/mypage");
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onClose} title={""} description={""}>
+      <div className="flex min-w-[260px] flex-col items-center justify-center gap-6 rounded-lg bg-white p-4">
+        <button type="button" className="mb-[-24px] flex h-5 w-full justify-end" onClick={onClose}>
+          <Icon name="close" size={24} className="cursor-pointer text-gray400" />
+        </button>
+        <Image src={Character} alt="character" width={120} height={120} />
+        <div className="flex flex-col gap-2">
+          <span className="whitespace-pre-line text-center text-gray900 text-subtitle1">
+            식당을 제보했어요
+          </span>
+          <span className="whitespace-pre-line text-center text-gray700 text-body2-regular">
+            제보해주셔서 감사합니다.
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={handleConfirm}
+          className="flex h-[51px] w-full items-center justify-center rounded-[8px] bg-primary400 py-[14px]"
+        >
+          <span className="text-body1-semibold text-gray0">완료하기</span>
+        </button>
+      </div>
+    </Modal>
+  );
+}

web/src/shared/config/routeConfig.ts

@@ -153,6 +153,13 @@ export const ROUTE_CONFIG: Record<string, RouteConfig> = {
       title: "정보 수정 제안",
     },
   },
+  "/report": {
+    group: "stack",
+    transition: "drill",
+    header: {
+      title: "혼밥 식당 제보",
+    },
+  },
 };
 
 /**