Fix: QA 반영 (#72)

src/Router.tsx

@@ -1,5 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import Error from './components/Error';
 import Settings from './components/Settings';
 import Review from './views/Detail/components/Review';
 import DetailPage from './views/Detail/pages/DetailPage';
@@ -20,36 +21,20 @@ const router = createBrowserRouter([
       { path: '/', element: <MainPage /> },
       { path: '/auth/callback', element: <LoginCallBack /> },
       { path: '/sign-up', element: <SignUpPage /> },
+      {
+        path: '/:contentId',
+        element: <DetailPage />,
+        children: [{ path: 'review', element: <Review /> }],
+      },
+      { path: '/:contentId/review/write', element: <WriteReviewPage /> },
+      { path: '/search', element: <SearchPage />, children: [{}] },
+      { path: '/search/:word', element: <SearchResultPage /> },
+      { path: '/mypage', element: <Mypage /> },
+      { path: '/error-report', element: <ErrorReportPage /> },
+      { path: '/map', element: <MapPage /> },
+      { path: '/error', element: <Error /> },
     ],
   },
-  {
-    path: '/:contentId',
-    element: <DetailPage />,
-    children: [{ path: 'review', element: <Review /> }],
-  },
-  { path: '/:contentId/review/write', element: <WriteReviewPage /> },
-  {
-    path: '/search',
-    element: <SearchPage />,
-    children: [{}],
-  },
-  {
-    path: '/search/:word',
-    element: <SearchResultPage />,
-  },
-  {
-    path: '/mypage',
-    element: <Mypage />,
-  },
-  { path: '/error-report', element: <ErrorReportPage /> },
-  {
-    path: '/map',
-    element: <MapPage />,
-  },
-  // {
-  //   path: "*",
-  //   element: <ErrorPage />,
-  // },
 ]);
 
 const Router = () => {

src/apis/supabase/postAddUser.ts

@@ -13,6 +13,7 @@ const postAddUser = async ({
   region,
   travelerType,
 }: AddUserProps) => {
+  console.log(userData);
   const { id, nickname, thumbnail_image_url } = userData;
 
   const { data, error } = await unitripSupabase

src/assets/icon/index.ts

@@ -43,6 +43,7 @@ export { default as CheckEmptyIcon } from './icon-check-empty.svg?react';
 export { default as CheckFilledYellowIcon } from './icon-check-fill-yellow.svg?react';
 export { default as CheckFilledIcon } from './icon-check-filled.svg?react';
 export { default as HeartFillMonoIcon } from './icon-heart-fill-mono.svg?react';
+export { default as ThumbsUpMonoIcon } from './icon-thumb-up-mono.svg?react';
 export { default as MapMonoGrayIcon } from './icon-map-mono-gray.svg?react';
 export { default as BigInfoIcon } from './icon_big_info.svg?react';
 export { default as BlindTypeIcon } from './icon_blind_type.svg?react';

src/components/BottomSheet.tsx

@@ -100,8 +100,8 @@ const backgroundCss = css`
 
   z-index: 999;
 
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
   margin: 0 auto;
 
   background-color: rgb(0 0 0 / 30%);
@@ -112,7 +112,7 @@ const containerCss = (height: string) => css`
   bottom: 0;
   overflow: auto;
 
-  width: 100vw;
+  width: 100dvw;
   height: ${height};
   border-radius: 1.2rem 1.2rem 0 0;
 
@@ -122,11 +122,11 @@ const containerCss = (height: string) => css`
 `;
 
 const buttonCotainerCss = css`
-  position: absolute;
+  position: fixed;
   bottom: 1.2rem;
   left: 0;
 
-  width: 100vw;
+  width: 100dvw;
   padding: 0 2rem;
 `;
 

src/components/Error.tsx

@@ -17,7 +17,7 @@ const Error = () => {
       <button
         css={moveBtn}
         onClick={() => {
-          navigate(-1);
+          navigate(-2);
         }}>
         이전 페이지로
       </button>

src/views/Login/components/Region.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 
+import { ThumbsUpMonoIcon } from '@/assets/icon';
 import BottomButton from '@/components/BottomButton';
 import SelectRegion from '@/components/SelectRegion';
 import { COLORS, FONTS } from '@/styles/constants';
@@ -26,6 +27,10 @@ const Region = ({ setStep }: RegionProps) => {
           선택해주세요
         </p>
         <SelectRegion region={region} setRegion={setRegion} />
+        <div css={explanation}>
+          <ThumbsUpMonoIcon />
+          <p>해당 지역을 중심으로 여행지를 추천해드려요</p>
+        </div>
       </section>
       <BottomButton text="다음" clickedFn={moveNext} disabled={!region.town} />
     </>
@@ -58,3 +63,18 @@ const highlight = css`
 
   box-shadow: inset 0 -1.5rem 0 ${COLORS.brand2};
 `;
+
+const explanation = css`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+
+  width: calc(100% + 4rem);
+  padding: 1.2rem 2rem;
+  margin-left: -2rem;
+
+  background-color: ${COLORS.gray0};
+
+  color: ${COLORS.gray9};
+  ${FONTS.Body3};
+`;

src/views/Login/components/UserType.tsx

@@ -40,14 +40,12 @@ const UserType = ({ userData }: UserTypeProps) => {
               setTravelerType={setTravelerType}
             />
           </div>
-
-          <div css={explanation}>
-            <MapMonoGrayIcon />
-            <p>여행자 유형은 장소 추천과 리뷰 필터링에 반영돼요!</p>
-          </div>
         </div>
       </section>
-
+      <div css={explanation}>
+        <MapMonoGrayIcon />
+        <p>여행자 유형은 장소 추천과 리뷰 필터링에 반영돼요!</p>
+      </div>
       <BottomButton
         text="확인"
         clickedFn={submitSignUp}
@@ -62,6 +60,7 @@ export default UserType;
 const userTypeLayout = css`
   display: flex;
   flex-direction: column;
+  position: relative;
 
   height: 100%;
   padding: 2rem;
@@ -102,14 +101,14 @@ const explanation = css`
   display: flex;
   gap: 0.8rem;
   align-items: center;
+  position: absolute;
+  bottom: 8rem;
 
-  width: calc(100% + 4rem);
+  width: 100%;
   padding: 1.2rem 2rem;
-  margin-left: -2rem;
 
   background-color: ${COLORS.gray0};
 
   color: ${COLORS.gray9};
   ${FONTS.Body3};
-  font-weight: 400;
 `;

src/views/Login/pages/SignUpPage.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { HeaderBackIcon } from '@/assets/icon';
@@ -11,11 +11,16 @@ import UserType from '../components/UserType';
 
 const SignUpPage = () => {
   const [step, setStep] = useState('지역 설정');
-
   const { state } = useLocation();
-
   const navigate = useNavigate();
 
+  useEffect(() => {
+    // state가 없을 경우 에러 페이지로 리다이렉트
+    if (!state) {
+      navigate('/error', { state: { message: '잘못된 접근입니다.' } });
+    }
+  }, [state]);
+
   const moveBack = () => {
     if (step === '지역 설정') {
       navigate(`/`);

src/views/Main/components/Header.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { Link } from 'react-router-dom';
 
 import { SearchMonoIcon, UnitripIcon } from '@/assets/icon';
 import { COLORS } from '@/styles/constants';
@@ -7,9 +8,9 @@ const Header = () => {
   return (
     <header css={header}>
       <UnitripIcon />
-      <button css={searchCss}>
+      <Link to="/search" css={searchCss}>
         <SearchMonoIcon />
-      </button>
+      </Link>
     </header>
   );
 };

src/views/Main/components/TravelCard.tsx

@@ -52,6 +52,9 @@ const background = css`
   top: 0;
   left: 0;
 
+  min-width: 23.2rem;
+  max-width: 23.2rem;
+
   height: 24.8rem;
   padding: 1.6rem;
   border-radius: 1.2rem;
@@ -61,8 +64,6 @@ const background = css`
     rgb(0 0 0 / 0%) 0%,
     rgb(0 0 0 / 34%) 100%
   );
-
-  min-width: 23.2rem;
 `;
 
 const heart = css`

src/views/Main/styles/main.ts

@@ -9,7 +9,9 @@ export const cardContainer = css`
   display: flex;
   gap: 1.2rem;
 
-  width: 100%;
+  width: fit-content;
   margin-top: 1.6rem;
+  margin-right: 2rem;
   margin-left: 2rem;
+  max-width: fit-content !important;
 `;