update: 바텀탭 구성개선 및 레이아웃 수정

JoStar33 · Aug 13, 2024 · f38c476 · f38c476
1 parent 620713f
commit f38c476
Show file tree

Hide file tree

Showing 23 changed files with 694 additions and 71 deletions.
diff --git a/src/api/.gitkeep b/src/api/.gitkeep
diff --git a/src/api/market.ts b/src/api/market.ts
@@ -0,0 +1,9 @@
+import { requests } from '.';
+
+const Market = {
+  Get: {
+    list: () => requests.get('/market'),
+  },
+};
+
+export default Market;
diff --git a/src/components/common/Line.tsx b/src/components/common/Line.tsx
@@ -0,0 +1,27 @@
+import { colors } from '@/styles/Theme';
+import styled from 'styled-components';
+
+interface IProps {
+  isVertical: boolean;
+  width?: string;
+  height?: string;
+  margin?: string;
+  color?: keyof typeof colors;
+}
+
+export default function Line({
+  isVertical,
+  width = isVertical ? '2px' : '100%',
+  height = isVertical ? '100%' : '2px',
+  margin = '0px',
+  color = 'black',
+}: IProps) {
+  return <S.Line isVertical={isVertical} width={width} height={height} style={{ backgroundColor: colors[color], margin }} />;
+}
+
+const S = {
+  Line: styled.div<IProps>`
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+  `,
+};
diff --git a/src/components/layouts/Aside.tsx b/src/components/layouts/Aside.tsx
@@ -1,6 +1,10 @@
 import { Variants, motion } from 'framer-motion';
 import styled from 'styled-components';
 import { IoMdClose } from 'react-icons/io';
+import bottomTab from '@/constants/bottomTab';
+import { useNavigate } from 'react-router-dom';
+import routerPath from '@/constants/routerPath';
+import React from 'react';
 
 const variants: Variants = {
   hidden: {
@@ -20,12 +24,27 @@ interface IProps {
 }
 
 export default function Aside({ setIsOpenAside }: IProps) {
+  const navigate = useNavigate();
+
+  const handleClickMenuItem = () => {
+    setIsOpenAside(false);
+    navigate(routerPath.HOME);
+  };
+
   return (
     <S.Aside variants={variants} initial="hidden" animate="show" exit="hidden">
       <div className="aside-header">
         <IoMdClose onClick={() => setIsOpenAside(false)} size={40} fill="#ffffff" cursor="pointer" />
       </div>
-      Aside
+      <div className="aside-body">
+        {bottomTab
+          .sort((a, b) => (a.priority > b.priority ? 1 : -1))
+          .map((tabElement) => (
+            <div className="aside-body__element" onClick={handleClickMenuItem}>
+              {tabElement.title}
+            </div>
+          ))}
+      </div>
     </S.Aside>
   );
 }
@@ -43,5 +62,20 @@ const S = {
       display: flex;
       justify-content: flex-end;
     }
+    .aside-body {
+      margin-left: 15px;
+      margin-top: 15;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      &__element {
+        width: 100%;
+        user-select: none;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 1.3rem;
+        color: ${(props) => props.theme.colors.white};
+      }
+    }
   `,
 };
diff --git a/src/components/layouts/BottomTab.tsx b/src/components/layouts/BottomTab.tsx
@@ -17,7 +17,10 @@ export default function BottomTab() {
 
 const S = {
   BottomTab: styled.div`
-    ${flexCenter}
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 20px;
     width: 100%;
     height: 80px;
     background-color: ${(props) => props.theme.colors.subMain};

diff --git a/src/components/layouts/index.tsx b/src/components/layouts/index.tsx
@@ -5,13 +5,23 @@ import Header from './Header';
 import BottomTab from './BottomTab';
 import Aside from './Aside';
 import { AnimatePresence } from 'framer-motion';
+import { useLocation } from 'react-router-dom';
 
 interface IProps {
   children: React.ReactNode;
 }
 
 export default function Layout({ children }: IProps) {
   const [isOpenAside, setIsOpenAside] = React.useState(false);
+  const { pathname } = useLocation();
+
+  React.useEffect(
+    function autoCloser() {
+      setIsOpenAside(false);
+    },
+    [pathname],
+  );
+
   return (
     <S.Layout>
       <div className="layout__cover">
@@ -27,7 +37,7 @@ export default function Layout({ children }: IProps) {
 const S = {
   Layout: styled.div`
     width: 100%;
-    height: 100vh;
+    height: 100dvh;
     display: flex;
     justify-content: center;
     .layout {
@@ -37,7 +47,7 @@ const S = {
         transform: scale(1);
         width: 100%;
         max-width: 500px;
-        height: 100vh;
+        height: 100dvh;
       }
     }
   `,

diff --git a/src/components/user/index.tsx b/src/components/user/index.tsx
@@ -2,6 +2,8 @@ import { flexCenter } from '@/styles/Common';
 import { IUserDetailResponse } from '@/types/auth';
 import { FaUser } from 'react-icons/fa';
 import styled from 'styled-components';
+import Button from '@/components/common/Button';
+import Line from '@/components/common/Line';
 
 interface IUser {
   data: IUserDetailResponse;
@@ -27,9 +29,16 @@ export default function User({ data, handleSignOut }: IUser) {
           </p>
         </div>
       </div>
-      <button onClick={handleSignOut} className="sign-out-button" type="submit">
+      <Line margin="25px 0" isVertical={false} />
+      <div className="user__info--wrapper">
+        <p className="user__info--text">
+          <strong>전화번호:</strong> {data.value.phoneNumber}
+        </p>
+      </div>
+      <Line margin="25px 0" isVertical={false} />
+      <Button onClick={handleSignOut} borderRadius="5px" backgroundColor="red" color="white" buttonType="custom" type="submit">
         LOGOUT
-      </button>
+      </Button>
     </S.User>
   );
 }
@@ -53,11 +62,11 @@ const S = {
       &__info {
         display: flex;
         align-items: center;
+        gap: 10px;
         &--wrapper {
           display: flex;
           flex-direction: column;
           gap: 5px;
-          margin-left: 10px;
         }
         &--text {
           strong {

diff --git a/src/constants/bottomTab.tsx b/src/constants/bottomTab.tsx
@@ -3,14 +3,22 @@ import routerPath from './routerPath';
 import React from 'react';
 
 interface IBottomTabElement {
+  priority: number;
   title: string;
   path: string;
   icon: () => React.ReactElement;
 }
 
 const bottomTab: IBottomTabElement[] = [
   {
-    title: 'home',
+    priority: 2,
+    title: 'MARKETS',
+    path: routerPath.HOME,
+    icon: () => <IoHome size={40} />,
+  },
+  {
+    priority: 1,
+    title: 'HOME',
     path: routerPath.HOME,
     icon: () => (
       <div className="home-wrapper">
@@ -20,6 +28,12 @@ const bottomTab: IBottomTabElement[] = [
       </div>
     ),
   },
+  {
+    priority: 3,
+    title: 'CONTENTS',
+    path: routerPath.HOME,
+    icon: () => <IoHome size={40} />,
+  },
 ];
 
 export default bottomTab;
diff --git a/src/containers/market/index.tsx b/src/containers/market/index.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export default function MarketContainer() {
+  return <S.MarketContainer>MarketContainer</S.MarketContainer>;
+}
+
+const S = {
+  MarketContainer: styled.div``,
+};
diff --git a/src/hooks/useGeolocation.ts b/src/hooks/useGeolocation.ts
@@ -30,11 +30,12 @@ export default function useGeolocation() {
   };
 
   React.useEffect(function initializeGeolocation() {
-    if (!('geolocation' in navigator))
+    if (!('geolocation' in navigator)) {
       onError({
         code: 0,
         message: '해당 브라우저는 GPS 기능을 지원하지 않습니다!',
       });
+    }
 
     const watch = navigator.geolocation.watchPosition(onSuccess, onError, watchOptions);
     return () => navigator.geolocation.clearWatch(watch);

diff --git a/src/mocks/.gitkeep b/src/mocks/.gitkeep
diff --git a/src/mocks/coordinate.ts b/src/mocks/coordinate.ts
@@ -3,6 +3,7 @@
 import { ICoordinateDetailInfoResponse, ICoordinateListResponse } from '@/types/coordinate';
 import { delay, http } from 'msw';
 import { commonUrl } from '.';
+import { coordinateList } from './fakeDatabase/resources/coordinate';
 
 //coordinate
 const coordinateUrl = (path?: string) => `${commonUrl(`/coordinate${path ?? ''}`)}`;
@@ -11,66 +12,7 @@ const coordinateHandler = [
   http.get(`${coordinateUrl()}`, async () => {
     await delay(2000);
     const coordinateListResponse: ICoordinateListResponse = {
-      value: [
-        { id: 1, title: 'Puppy Cafe Seoul', coordinate: { lat: 36.2665, lng: 126.93 } }, // 서울
-        { id: 2, title: 'Dog-Friendly Diner', coordinate: { lat: 35.1796, lng: 129.0756 } }, // 부산
-        { id: 3, title: 'Furry Friends Cafe', coordinate: { lat: 35.8714, lng: 128.6014 } }, // 대구
-        { id: 4, title: 'Woof & Brew', coordinate: { lat: 35.5384, lng: 129.3114 } }, // 울산
-        { id: 5, title: 'Paws & Coffee', coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        { id: 6, title: 'Barkery Cafe', coordinate: { lat: 35.1595, lng: 126.8526 } }, // 광주
-        { id: 7, title: 'Canine Cafe Corner', coordinate: { lat: 36.351, lng: 127.385 } }, // 대전
-        { id: 8, title: 'Pooch Plaza Cafe', coordinate: { lat: 37.5665, lng: 126.978 } }, // 서울
-        { id: 9, title: 'Doggy Delights', coordinate: { lat: 36.6358, lng: 127.4913 } }, // 충청북도 청주
-        { id: 10, title: "Pup's Place", coordinate: { lat: 37.2747, lng: 127.0096 } }, // 경기도 수원
-        { id: 11, title: 'Woof Woof Cafe', coordinate: { lat: 35.9916, lng: 129.3858 } }, // 경상북도 포항
-        { id: 12, title: "Puppy's Paradise", coordinate: { lat: 34.8051, lng: 126.3945 } }, // 전라남도 목포
-        { id: 13, title: 'Dog Haven Cafe', coordinate: { lat: 34.9476, lng: 127.4956 } }, // 전라남도 순천
-        { id: 14, title: "Fido's Cafe", coordinate: { lat: 37.4665, lng: 126.778 } }, // 서울
-        { id: 15, title: 'Bark & Bite', coordinate: { lat: 33.5097, lng: 126.5219 } }, // 제주도 제주시
-        { id: 16, title: 'Pawfect Place', coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        { id: 17, title: "Doggo's Delight", coordinate: { lat: 36.351, lng: 127.385 } }, // 대전
-        { id: 18, title: "Paw's Cafe", coordinate: { lat: 35.1796, lng: 129.0756 } }, // 부산
-        { id: 19, title: 'Bark & Brew', coordinate: { lat: 35.1595, lng: 126.8526 } }, // 광주
-        { id: 20, title: 'Furry Cafe', coordinate: { lat: 35.8714, lng: 128.6014 } }, // 대구
-        { id: 21, title: 'Doggy Spot', coordinate: { lat: 36.6358, lng: 127.4913 } }, // 충청북도 청주
-        { id: 22, title: 'Pup Cafe', coordinate: { lat: 37.2747, lng: 127.0496 } }, // 경기도 수원
-        { id: 23, title: 'Canine Cafe', coordinate: { lat: 35.9916, lng: 129.3858 } }, // 경상북도 포항
-        { id: 24, title: 'Pawsome Cafe', coordinate: { lat: 34.8051, lng: 126.3945 } }, // 전라남도 목포
-        { id: 25, title: 'Bark Cafe', coordinate: { lat: 34.9476, lng: 127.4956 } }, // 전라남도 순천
-        { id: 26, title: 'Puppy Love Cafe', coordinate: { lat: 35.5391, lng: 129.3107 } }, // 울산
-        { id: 27, title: "Fido's Place", coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        { id: 28, title: 'Doggy Diner', coordinate: { lat: 37.7665, lng: 126.878 } }, // 서울
-        { id: 29, title: 'Paws & Coffee', coordinate: { lat: 35.1595, lng: 126.8526 } }, // 광주
-        { id: 30, title: 'Bark & Brew', coordinate: { lat: 35.8714, lng: 128.6014 } }, // 대구
-        { id: 31, title: 'Furry Friends Cafe', coordinate: { lat: 36.351, lng: 127.385 } }, // 대전
-        { id: 32, title: 'Woof & Brew', coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        { id: 33, title: 'Paws & Coffee', coordinate: { lat: 36.6358, lng: 127.4913 } }, // 충청북도 청주
-        { id: 34, title: 'Barkery Cafe', coordinate: { lat: 37.2447, lng: 127.0196 } }, // 경기도 수원
-        { id: 35, title: 'Canine Cafe Corner', coordinate: { lat: 35.9916, lng: 129.3858 } }, // 경상북도 포항
-        { id: 36, title: 'Pooch Plaza Cafe', coordinate: { lat: 34.8051, lng: 126.3945 } }, // 전라남도 목포
-        { id: 37, title: 'Doggy Delights', coordinate: { lat: 34.9476, lng: 127.4956 } }, // 전라남도 순천
-        { id: 38, title: "Pup's Place", coordinate: { lat: 35.1796, lng: 129.0756 } }, // 부산
-        { id: 39, title: 'Woof Woof Cafe', coordinate: { lat: 33.5097, lng: 126.5219 } }, // 제주도 제주시
-        { id: 40, title: "Puppy's Paradise", coordinate: { lat: 37.2665, lng: 127.978 } }, // 서울
-        { id: 41, title: 'Dog Haven Cafe', coordinate: { lat: 35.1595, lng: 126.8526 } }, // 광주
-        { id: 42, title: "Fido's Cafe", coordinate: { lat: 35.8714, lng: 128.6014 } }, // 대구
-        { id: 43, title: 'Bark & Bite', coordinate: { lat: 36.351, lng: 127.385 } }, // 대전
-        { id: 44, title: 'Pawfect Place', coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        { id: 45, title: "Doggo's Delight", coordinate: { lat: 36.6358, lng: 127.4913 } }, // 충청북도 청주
-        { id: 46, title: "Paw's Cafe", coordinate: { lat: 35.1796, lng: 129.0756 } }, // 부산
-        { id: 47, title: 'Bark & Brew', coordinate: { lat: 35.5391, lng: 129.3107 } }, // 울산
-        { id: 48, title: 'Furry Cafe', coordinate: { lat: 37.5665, lng: 126.978 } }, // 서울
-        { id: 49, title: 'Doggy Spot', coordinate: { lat: 36.351, lng: 127.385 } }, // 대전
-        { id: 50, title: 'Pup Cafe', coordinate: { lat: 37.4563, lng: 126.7052 } }, // 인천
-        {
-          id: 51,
-          title: '케뷔와',
-          coordinate: {
-            lat: 37.28214,
-            lng: 127.0644,
-          },
-        },
-      ],
+      value: coordinateList,
       code: 200,
       detail: 'success',
       message: '성공',
@@ -88,6 +30,7 @@ const coordinateHandler = [
         id: 51,
         title: '케뷔와',
         address: '경기도 수원시 영통구 광교호수로 139 나루터 선착장 앞',
+        type: 'CAFE',
         image: 'https://tong.visitkorea.or.kr/cms/resource/22/2892722_image2_1.jpg',
         phoneNumber: '070-7722-2777',
       },

diff --git a/src/mocks/fakeDatabase/resources/coordinate/index.ts b/src/mocks/fakeDatabase/resources/coordinate/index.ts
@@ -0,0 +1,57 @@
+import { ICoordinateItem } from '@/types/coordinate';
+
+const coordinateList: ICoordinateItem[] = [
+  { id: 1, title: 'Puppy Cafe Seoul', coordinate: { lat: 36.2665, lng: 126.93 }, type: 'CAFE' },
+  { id: 2, title: 'Dog-Friendly Diner', coordinate: { lat: 35.1796, lng: 129.0756 }, type: 'RESTAURANT' },
+  { id: 3, title: 'Furry Friends Cafe', coordinate: { lat: 35.8714, lng: 128.6014 }, type: 'CAFE' },
+  { id: 4, title: 'Woof & Brew', coordinate: { lat: 35.5384, lng: 129.3114 }, type: 'CAFE' },
+  { id: 5, title: 'Paws & Coffee', coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 6, title: 'Barkery Cafe', coordinate: { lat: 35.1595, lng: 126.8526 }, type: 'CAFE' },
+  { id: 7, title: 'Canine Cafe Corner', coordinate: { lat: 36.351, lng: 127.385 }, type: 'CAFE' },
+  { id: 8, title: 'Pooch Plaza Cafe', coordinate: { lat: 37.5665, lng: 126.978 }, type: 'CAFE' },
+  { id: 9, title: 'Doggy Delights', coordinate: { lat: 36.6358, lng: 127.4913 }, type: 'RESTAURANT' },
+  { id: 10, title: "Pup's Place", coordinate: { lat: 37.2747, lng: 127.0196 }, type: 'CAFE' },
+  { id: 11, title: 'Woof Woof Cafe', coordinate: { lat: 35.9916, lng: 129.3858 }, type: 'CAFE' },
+  { id: 12, title: "Puppy's Paradise", coordinate: { lat: 34.8051, lng: 126.3945 }, type: 'CAFE' },
+  { id: 13, title: 'Dog Haven Cafe', coordinate: { lat: 34.9476, lng: 127.4956 }, type: 'CAFE' },
+  { id: 14, title: "Fido's Cafe", coordinate: { lat: 37.4665, lng: 126.778 }, type: 'CAFE' },
+  { id: 15, title: 'Bark & Bite', coordinate: { lat: 33.5097, lng: 126.5219 }, type: 'RESTAURANT' },
+  { id: 16, title: 'Pawfect Place', coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 17, title: "Doggo's Delight", coordinate: { lat: 36.351, lng: 127.385 }, type: 'RESTAURANT' },
+  { id: 18, title: "Paw's Cafe", coordinate: { lat: 35.1796, lng: 129.0756 }, type: 'CAFE' },
+  { id: 19, title: 'Bark & Brew', coordinate: { lat: 35.1595, lng: 126.8526 }, type: 'CAFE' },
+  { id: 20, title: 'Furry Cafe', coordinate: { lat: 35.8714, lng: 128.6014 }, type: 'CAFE' },
+  { id: 21, title: 'Doggy Spot', coordinate: { lat: 36.6358, lng: 127.4913 }, type: 'RESTAURANT' },
+  { id: 22, title: 'Pup Cafe', coordinate: { lat: 37.2747, lng: 127.0496 }, type: 'CAFE' },
+  { id: 23, title: 'Canine Cafe', coordinate: { lat: 35.9916, lng: 129.3858 }, type: 'CAFE' },
+  { id: 24, title: 'Pawsome Cafe', coordinate: { lat: 34.8051, lng: 126.3945 }, type: 'CAFE' },
+  { id: 25, title: 'Bark Cafe', coordinate: { lat: 34.9476, lng: 127.4956 }, type: 'CAFE' },
+  { id: 26, title: 'Puppy Love Cafe', coordinate: { lat: 35.5391, lng: 129.3107 }, type: 'CAFE' },
+  { id: 27, title: "Fido's Place", coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 28, title: 'Doggy Diner', coordinate: { lat: 37.7665, lng: 126.878 }, type: 'RESTAURANT' },
+  { id: 29, title: 'Paws & Coffee', coordinate: { lat: 35.1595, lng: 126.8526 }, type: 'CAFE' },
+  { id: 30, title: 'Bark & Brew', coordinate: { lat: 35.8714, lng: 128.6014 }, type: 'CAFE' },
+  { id: 31, title: 'Furry Friends Cafe', coordinate: { lat: 36.351, lng: 127.385 }, type: 'CAFE' },
+  { id: 32, title: 'Woof & Brew', coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 33, title: 'Paws & Coffee', coordinate: { lat: 36.6358, lng: 127.4913 }, type: 'CAFE' },
+  { id: 34, title: 'Barkery Cafe', coordinate: { lat: 37.2447, lng: 127.0196 }, type: 'CAFE' },
+  { id: 35, title: 'Canine Cafe Corner', coordinate: { lat: 35.9916, lng: 129.3858 }, type: 'CAFE' },
+  { id: 36, title: 'Pooch Plaza Cafe', coordinate: { lat: 34.8051, lng: 126.3945 }, type: 'CAFE' },
+  { id: 37, title: 'Doggy Delights', coordinate: { lat: 34.9476, lng: 127.4956 }, type: 'RESTAURANT' },
+  { id: 38, title: "Pup's Place", coordinate: { lat: 35.1796, lng: 129.0756 }, type: 'CAFE' },
+  { id: 39, title: 'Woof Woof Cafe', coordinate: { lat: 33.5097, lng: 126.5219 }, type: 'CAFE' },
+  { id: 40, title: "Puppy's Paradise", coordinate: { lat: 37.2665, lng: 127.978 }, type: 'CAFE' },
+  { id: 41, title: 'Dog Haven Cafe', coordinate: { lat: 35.1595, lng: 126.8526 }, type: 'CAFE' },
+  { id: 42, title: "Fido's Cafe", coordinate: { lat: 35.8714, lng: 128.6014 }, type: 'CAFE' },
+  { id: 43, title: 'Bark & Bite', coordinate: { lat: 36.351, lng: 127.385 }, type: 'RESTAURANT' },
+  { id: 44, title: 'Pawfect Place', coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 45, title: "Doggo's Delight", coordinate: { lat: 36.6358, lng: 127.4913 }, type: 'RESTAURANT' },
+  { id: 46, title: "Paw's Cafe", coordinate: { lat: 35.1796, lng: 129.0756 }, type: 'CAFE' },
+  { id: 47, title: 'Bark & Brew', coordinate: { lat: 35.5391, lng: 129.3107 }, type: 'CAFE' },
+  { id: 48, title: 'Furry Cafe', coordinate: { lat: 37.5665, lng: 126.978 }, type: 'CAFE' },
+  { id: 49, title: 'Doggy Spot', coordinate: { lat: 36.351, lng: 127.385 }, type: 'RESTAURANT' },
+  { id: 50, title: 'Pup Cafe', coordinate: { lat: 37.4563, lng: 126.7052 }, type: 'CAFE' },
+  { id: 51, title: '케뷔와', coordinate: { lat: 37.28214, lng: 127.0644 }, type: 'CAFE' },
+];
+
+export { coordinateList };