Merge pull request #188 from TEAM-FLASH/Feat/#184

[S4] 홈화면에서 로그인/마이페이지 라우팅 추가

src/components/BookingSearchContainer/BookingSearchContainer.tsx

@@ -1,37 +1,59 @@
+/** @jsxImportSource @emotion/react */
+
 import styled from '@emotion/styled';
 import variables from '@styles/Variables';
 import useModal from '@hooks/useModal';
 import LocalDateSelectionModal from '@pages/Home/components/LocalDateSelectionModal';
 import { useNavigate } from 'react-router-dom';
+import { Hidden } from '@styles/Common';
 
 /** 메인 전체 지역 예약 날짜 선택 등  */
 // button => 모달 오픈용  searchStyle => 검색용
 const BookingSearchContainer = () => {
   const modal = useModal();
   const navigate = useNavigate();
 
+  // user 정보 세션에서 가져오기
+  const user = false;
+
   return (
     <BookingSearchContainerStyle>
-      <Button type="button" onClick={() => modal.open()}>
-        <ButtonTitleStyle>전체지역</ButtonTitleStyle> <img src="/img/icon-select-arrow.svg" alt="전체 지역 탐색" />
-        <SearchStyle
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate('/search');
-          }}
-        >
-          <img src="/img/icon-search.svg" alt="상세 정보 검색" />
-        </SearchStyle>
-      </Button>
-      <ButtonTitleDes>예약 날짜와 시간을 선택해주세요.</ButtonTitleDes>
+      <div>
+        <Button type="button" onClick={() => modal.open()}>
+          <ButtonTitleStyle>전체지역</ButtonTitleStyle> <img src="/img/icon-select-arrow.svg" alt="전체 지역 탐색" />
+        </Button>
+        <ButtonTitleDes>예약 날짜와 시간을 선택해주세요.</ButtonTitleDes>
+      </div>
+
+      <ButtonStyle
+        className="search"
+        onClick={(e) => {
+          e.stopPropagation();
+          navigate('/search');
+        }}
+      >
+        <span css={Hidden}>검색</span>
+        <img src="/img/icon-search.svg" alt="상세 정보 검색" />
+      </ButtonStyle>
+
+      <ButtonStyle
+        className="user"
+        onClick={(e) => {
+          e.stopPropagation();
+          navigate(`/user/${user ? 'mypage' : 'login'}`);
+        }}
+      >
+        <span css={Hidden}>{user ? '마이페이지' : '로그인'}</span>
+        <img src="/img/icon-user-black.svg" alt={user ? '마이페이지' : '로그인'} />
+      </ButtonStyle>
       <LocalDateSelectionModal modalId={1} />
     </BookingSearchContainerStyle>
   );
 };
 
 const BookingSearchContainerStyle = styled.div`
   display: flex;
-  flex-direction: column;
+  align-items: center;
   margin-bottom: 1.8rem;
 `;
 
@@ -43,17 +65,34 @@ const Button = styled.button`
   gap: 0.4rem;
 `;
 
-const SearchStyle = styled.div`
-  margin-left: auto;
+const ButtonStyle = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.8rem;
+  width: 2.4rem;
+  height: 2.4rem;
+
+  &.search {
+    margin-left: auto;
+
+    & > img {
+      width: 1.7rem;
+    }
+  }
+
+  &.user {
+    & > img {
+      width: 1.6rem;
+    }
+  }
 `;
 
 const ButtonTitleStyle = styled.h1`
   font-size: 1.8rem;
   font-weight: 600;
 `;
+
 const ButtonTitleDes = styled.p`
   color: ${variables.colors.gray600};
 `;

src/pages/User/Login.tsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+const Login = () => {
+  return (
+    <>
+      로그인 페이지
+      <Link to="/user/signup">회원가입</Link>
+    </>
+  );
+};
+
+export default Login;

src/pages/User/MyPage.tsx

@@ -0,0 +1,5 @@
+const MyPage = () => {
+  return <>마이페이지</>;
+};
+
+export default MyPage;

src/pages/User/SignUp.tsx

@@ -0,0 +1,5 @@
+const SignUp = () => {
+  return <>회원가입 페이지</>;
+};
+
+export default SignUp;

src/routes.tsx

@@ -1,3 +1,6 @@
+import Login from '@pages/User/Login';
+import MyPage from '@pages/User/MyPage';
+import SignUp from '@pages/User/Signup';
 import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 
@@ -16,6 +19,23 @@ const router = createBrowserRouter([
     path: '/',
     element: <Home />,
   },
+  {
+    path: 'user',
+    children: [
+      {
+        path: 'login',
+        element: <Login />,
+      },
+      {
+        path: 'signup',
+        element: <SignUp />,
+      },
+      {
+        path: 'mypage',
+        element: <MyPage />,
+      },
+    ],
+  },
   {
     path: 'search',
     element: <Search />,