Feat: 오류 제보 퍼블리싱 (#32)

* feat: complete 컴포넌트 퍼블리싱

* feat: 오류 타입 선택 퍼블리싱

* feat: 오류 제보 상세설명 뷰 퍼블리싱

* feat: 디테일 뷰 연결

* feat: 공백일 때의 조건 추가

* feat: toast message 구현

* chore: asset 추가

* chore: props 수정

* chore: 함수 변경 (reporttype)

* chore: 어셋 수정사항 적용

* chore: pnpm-lock.yaml 변경

* feat: textarea 리사이징 방지

* feat: debounce 초 변경

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.11.4",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
@@ -40,6 +41,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.8",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.39",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^3.3.2",

src/Router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Settings from './components/Settings';
 import DetailPage from './views/Detail/pages/DetailPage';
+import ErrorReportPage from './views/ErrorReport/pages/ErrorReportPage';
 import LoginCallBack from './views/Login/components/LoginCallBack';
 import MainPage from './views/Main/pages/MainPage';
 import Mypage from './views/Mypage/pages/Mypage';
@@ -31,6 +32,7 @@ const router = createBrowserRouter([
     path: '/mypage',
     element: <Mypage />,
   },
+  { path: '/error-report', element: <ErrorReportPage /> },
   // {
   //   path: "*",
   //   element: <ErrorPage />,

src/assets/icon/index.ts

@@ -1,24 +1,18 @@
 /// <reference types="vite-plugin-svgr/client" />
+export { default as ChevronLeftIcon } from './Chevron_Left.svg?react';
+export { default as CheckFillIcon } from './icon-check-fill.svg?react';
 export { default as HeartMonoIcon } from './icon-heart-mono.svg?react';
 export { default as HomeMonoIcon } from './icon-home-mono.svg?react';
 export { default as KakaoTalkIcon } from './icon-kakaotalk.svg?react';
 export { default as MapMonoIcon } from './icon-map-mono.svg?react';
 export { default as PinLocationMonoIcon } from './icon-pin-location-mono.svg?react';
 export { default as SearchMonoIcon } from './icon-search-mono.svg?react';
+export { default as SearchSetIcon } from './icon-search-set.svg?react';
 export { default as ShieldCheckMonoIcon } from './icon-shield-check-mono.svg?react';
 export { default as UserMonoIcon } from './icon-user-mono.svg?react';
 export { default as XMonoIcon } from './icon-x-mono.svg?react';
 export { default as ArrowDownIcon } from './icon_arrow_down.svg?react';
 export { default as ArrowLeftIcon } from './icon_arrow_left.svg?react';
-export { default as CallIcon } from './icon_call_mono.svg?react';
-export { default as ClockIcon } from './icon_clock_mono.svg?react';
-export { default as HeartFilledIcon } from './icon_heart_filled.svg?react';
-export { default as HeartGrayIcon } from './icon_heart_gray.svg?react';
-export { default as LocationPinIcon } from './icon_location_pin.svg?react';
-export { default as MapPinIcon } from './icon_map_pin.svg?react';
-export { default as StarIcon } from './icon_star_filled.svg?react';
-export { default as Star1Icon } from './Star 1.svg?react';
-export { default as UnitripIcon } from './UNITRIP.svg?react';
 export { default as ArrowToggleClosed } from './icon_arrow_toggle_closed.svg?react';
 export { default as ArrowToggleOpen } from './icon_arrow_toggle_open.svg?react';
 export { default as AudioGuideDefaultIcon } from './icon_audio_guide_default.svg?react';
@@ -31,6 +25,8 @@ export { default as BrailleBlocksDefaultIcon } from './icon_braille_blocks_defau
 export { default as BrailleBlocksNoneIcon } from './icon_braille_blocks_none.svg?react';
 export { default as BrailleInfoIDefaultcon } from './icon_braille_information_default.svg?react';
 export { default as BrailleInfoNoneIcon } from './icon_braille_information_none.svg?react';
+export { default as CallIcon } from './icon_call_mono.svg?react';
+export { default as ClockIcon } from './icon_clock_mono.svg?react';
 export { default as DisabledParkingDefaultIcon } from './icon_disabled_parking_default.svg?react';
 export { default as DisabledParkingNoneIcon } from './icon_disabled_parking_none.svg?react';
 export { default as ElevatorDefaultIcon } from './icon_elevator_default.svg?react';
@@ -45,8 +41,12 @@ export { default as GuideForBlindNoneIcon } from './icon_guide_for_blind_none.sv
 export { default as GuideNoneIcon } from './icon_guide_none.svg?react';
 export { default as GuideSystemDefaultIcon } from './icon_guide_system_default.svg?react';
 export { default as GuideSystemNoneIcon } from './icon_guide_system_none.svg?react';
+export { default as HeartFilledIcon } from './icon_heart_filled.svg?react';
+export { default as HeartGrayIcon } from './icon_heart_gray.svg?react';
 export { default as InformationDefaultIcon } from './icon_information_default.svg?react';
 export { default as InformationNoneIcon } from './icon_information_none.svg?react';
+export { default as LocationPinIcon } from './icon_location_pin.svg?react';
+export { default as MapPinIcon } from './icon_map_pin.svg?react';
 export { default as NursingRoomDefaultIcon } from './icon_nursing_room_default.svg?react';
 export { default as NursingRoomNoneIcon } from './icon_nursing_room_none.svg?react';
 export { default as ParkingDefaultIcon } from './icon_parking_default.svg?react';
@@ -61,6 +61,7 @@ export { default as SignLanguageDefaultIcon } from './icon_sign_language_default
 export { default as SignLanguageNoneIcon } from './icon_sign_language_none.svg?react';
 export { default as SlopeDefaultIcon } from './icon_slope_default.svg?react';
 export { default as SlopeNoneIcon } from './icon_slope_none.svg?react';
+export { default as StarIcon } from './icon_star_filled.svg?react';
 export { default as TicketOfficeDefaultIcon } from './icon_ticket_office_default.svg?react';
 export { default as TicketOfficeNoneIcon } from './icon_ticket_office_none.svg?react';
 export { default as ToiletDefaultIcon } from './icon_toilet_default.svg?react';
@@ -69,11 +70,10 @@ export { default as VideoGuideSubtitleDefaultIcon } from './icon_vedio_guide_sub
 export { default as VideoGuideSubtitleNoneIcon } from './icon_video_guide_subtitle_none.svg?react';
 export { default as WheelchairTicketOfficeDefaultIcon } from './icon_wheelchair_ticket_office_default.svg?react';
 export { default as WheelchairTicketOfficeNoneIcon } from './icon_wheelchair_ticket_office_none.svg?react';
-export { default as ChevronLeftIcon } from './Chevron_Left.svg?react';
-export { default as ToggleXIcon } from './toggle-x.svg?react';
 export { default as ResetXIcon } from './reset-x.svg?react';
-export { default as SearchSetIcon } from './icon-search-set.svg?react';
-export { default as CheckFillIcon } from './icon-check-fill.svg?react';
+export { default as Star1Icon } from './Star 1.svg?react';
+export { default as ToggleXIcon } from './toggle-x.svg?react';
+export { default as UnitripIcon } from './UNITRIP.svg?react';
 
 export { default as ArrowRightIcon } from './icon-arrow-right.svg?react';
 export { default as HeaderBackIcon } from './icon_header_back.svg?react';
@@ -87,3 +87,5 @@ export { default as HearingTypeIcon } from './icon_hearing_type.svg?react';
 export { default as InfantTypeIcon } from './icon_infant_type.svg?react';
 export { default as NoneTypeIcon } from './icon_none_type.svg?react';
 export { default as PhysicalTypeIcon } from './icon_physical_type.svg?react';
+
+export { default as CheckFilledYellowIcon } from './icon-check-fill-yellow.svg?react';

src/assets/image/index.ts

@@ -11,6 +11,7 @@ export { default as Sample10Image } from './img10.jpeg';
 export { default as Sample11Image } from './img11.jpeg';
 export { default as Sample12Image } from './img12.jpeg';
 export { default as BackgroundImage } from './img_background.png';
+export { default as ErrorReportCompleteImage } from './img_error_report_complete.png';
 export { default as MapImage } from './img_map.png';
 export { default as ProfileImg } from './img_profile_default.png';
 export { default as RequestImage } from './img_request_outline.png';

src/components/ToastMessage.tsx

@@ -0,0 +1,56 @@
+import { css, keyframes } from '@emotion/react';
+import { useEffect } from 'react';
+
+import { CheckFilledYellowIcon } from '@/assets/icon';
+import { COLORS, FONTS } from '@/styles/constants';
+
+interface ToastMessageProps {
+  children: string;
+  setToast: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ToastMessage = (props: ToastMessageProps) => {
+  const { children, setToast } = props;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setToast(false);
+    }, 3000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [setToast]);
+
+  return (
+    <div css={toastMessageContainer}>
+      <CheckFilledYellowIcon />
+      <span>{children}</span>
+    </div>
+  );
+};
+
+export default ToastMessage;
+
+const fadeout = keyframes`
+  0% {opacity:1};
+  100% {opacity:0};
+`;
+
+const toastMessageContainer = () => css`
+  display: flex;
+  gap: 1.2rem;
+  align-items: center;
+
+  width: 100%;
+  padding: 1.7rem 0 1.7rem 2.4rem;
+  border-radius: 1.6rem;
+
+  background-color: ${COLORS.brand1};
+
+  color: ${COLORS.white};
+  ${FONTS.Body2};
+  font-weight: 400;
+
+  animation: ${fadeout} 1.5s forwards;
+  animation-delay: 1.2s;
+`;

src/views/Detail/components/ErrorReport.tsx

@@ -1,12 +1,20 @@
 import { css } from '@emotion/react';
+import { useNavigate } from 'react-router-dom';
 
 import { RequestImage } from '@/assets/image';
 import { COLORS, FONTS } from '@/styles/constants';
 
 function ErrorReport() {
+  const navigate = useNavigate();
+
   return (
     <div css={errorReportContainer}>
-      <button css={reportButton} type="button">
+      <button
+        css={reportButton}
+        type="button"
+        onClick={() => {
+          navigate('/error-report');
+        }}>
         <div css={textContainer}>
           <span css={text('main')}>
             알고 계신 정보와 다른 정보가 있나요?

src/views/ErrorReport/components/Complete.tsx

@@ -0,0 +1,119 @@
+import { css } from '@emotion/react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { XMonoIcon } from '@/assets/icon';
+import { ErrorReportCompleteImage } from '@/assets/image';
+import ToastMessage from '@/components/ToastMessage';
+import { COLORS, FONTS } from '@/styles/constants';
+
+const Complete = () => {
+  const navigate = useNavigate();
+  const [toast, setToast] = useState(true);
+
+  return (
+    <div css={completeContainer}>
+      <header css={header}>
+        <XMonoIcon onClick={() => navigate(-1)} />
+      </header>
+
+      <div css={mainContainer}>
+        <section css={contentContainer}>
+          <img src={ErrorReportCompleteImage} alt="" css={image} />
+          <div css={text('main')}>
+            <h1>등록 완료!</h1>
+            <h1>소중한 제보 감사해요</h1>
+          </div>
+          <p css={text('sub')}>문의해주신 내용은 확인 후</p>
+          <p css={text('sub')}>반영 여부가 결정돼요</p>
+        </section>
+
+        <div css={bottomContainer}>
+          {toast && (
+            <ToastMessage
+              setToast={() => {
+                setToast;
+              }}>
+              등록이 완료되었습니다.
+            </ToastMessage>
+          )}
+          <button type="button" css={button} onClick={() => navigate(-1)}>
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Complete;
+
+const completeContainer = css`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+
+const header = css`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  width: 100%;
+  height: 4.8rem;
+`;
+
+const mainContainer = css`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  width: 100%;
+  height: calc(100dvh - 4.8rem);
+  padding-bottom: 1.2rem;
+`;
+
+const contentContainer = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  height: 27rem;
+  margin-top: 2.8rem;
+`;
+
+const image = css`
+  width: 11.8rem;
+  height: 11.8rem;
+  margin-bottom: 3.2rem;
+`;
+
+const text = (variant: string) => css`
+  margin-bottom: ${variant === 'main' ? '0.8rem' : 0};
+
+  color: ${variant === 'main' ? COLORS.gray9 : COLORS.gray6};
+  text-align: center;
+
+  ${variant === 'main' ? FONTS.H3 : FONTS.Body5};
+`;
+
+const bottomContainer = css`
+  display: flex;
+  gap: 0.8rem;
+  flex-direction: column;
+
+  width: 100%;
+`;
+
+const button = css`
+  width: 100%;
+  padding: 1.7rem 15.35rem;
+  border-radius: 1.2rem;
+
+  background-color: ${COLORS.brand1};
+
+  color: ${COLORS.white};
+
+  ${FONTS.Body2};
+`;