Merge pull request #268 from BCSDLab/feature/#266

[Map] 마커 수정 및 기능 추가

.yarn/sdks/eslint/bin/eslint.js

@@ -17,4 +17,4 @@ if (existsSync(absPnpApiPath)) {
 }
 
 // Defer to the real eslint/bin/eslint.js your application uses
-module.exports = absRequire(`eslint/bin/eslint.js`);
+module.exports = absRequire(`eslint/bin/eslint.js`);

package.json

@@ -23,7 +23,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.36.1",
-    "react-naver-maps": "^0.1.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",

src/App.tsx

@@ -17,7 +17,6 @@ import SignUp from 'pages/Auth/Signup/SignupPage/index';
 import TermsOfService from 'pages/Auth/Signup/TermsOfServicePage';
 import FollowProfile from 'pages/Follow/components/FollowProfile';
 import FollowPage from 'pages/Follow/index';
-import Home from 'pages/Home';
 import Inquire from 'pages/Inquiry/Inquire';
 import Inquiry from 'pages/Inquiry/Inquiry';
 import MyPage from 'pages/MyPage';
@@ -38,7 +37,6 @@ export default function App(): JSX.Element {
     <Suspense fallback={<div />}>
       <Routes>
         <Route path="/" element={<DefaultLayout />}>
-          <Route path="/" element={<Home />} />
           <Route path="/shop" element={<Search />} />
           <Route path="/post" element={<Search />} />
           <Route path="/shop/:placeId" element={<ShopDetail />} />
@@ -58,10 +56,10 @@ export default function App(): JSX.Element {
             <Route path="/friend-list/:id" element={<FollowProfile />} />
             <Route path="/setting" element={<Setting />} />
             <Route path="/setting/id-change" element={<IdChange />} />
+            <Route path="/profile" element={<MyPage />} />
+            <Route path="/post/:placeId" element={<Post />} />
+            <Route path="/withdrawal" element={<Withdrawal />} />
           </Route>
-          <Route path="/withdrawal" element={<Withdrawal />} />
-          <Route path="/profile" element={<MyPage />} />
-          <Route path="/post/:placeId" element={<Post />} />
           <Route path="*" element={<PageNotFound />} />
         </Route>
         <Route element={<AuthRoute needAuth={false} redirectRoute="/" />}>

src/components/ImageCarousel/ImageCarousel.module.scss

@@ -8,14 +8,14 @@ button {
 
 .shop {
   &__container {
-    width: 100vw;
+    width: calc(100vw - 90px);
     min-width: 1196px;
     position: relative;
     overflow-x: hidden;
   }
 
   &__empty-image {
-    margin-left: max(calc((100vw - 1080px) / 2), 68px);
+    margin-left: max(calc((100vw - 1170px) / 2), 68px);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -28,7 +28,7 @@ button {
   }
 
   &__image-carousel {
-    padding-left: max(calc((100vw - 1080px) / 2), 68px);
+    padding-left: max(calc((100vw - 1170px) / 2), 68px);
     max-width: 100vw;
     width: 100vw;
     display: flex;
@@ -46,6 +46,11 @@ button {
     img {
       width: 360px;
       height: 400px;
+      object-fit: cover;
+
+      @include media.media-breakpoint-down(mobile) {
+        width: 100%;
+      }
     }
   }
 
@@ -59,7 +64,7 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: calc((100vw - 1080px) / 2);
+      width: calc((100vw - 1170px) / 2);
       min-width: 68px;
       height: 400px;
     }
@@ -72,7 +77,7 @@ button {
       position: absolute;
       background: #000;
       opacity: 0.7;
-      width: calc((100vw - 1080px) / 2);
+      width: calc((100vw - 1170px) / 2);
       min-width: 68px;
       height: 400px;
     }
@@ -124,10 +129,6 @@ button {
       object-fit: contain;
       width: 480px;
       height: 300px;
-
-      @include media.media-breakpoint-down(mobile) {
-        width: 573px;
-      }
     }
   }
 

src/components/ImageCarousel/index.tsx

@@ -1,6 +1,6 @@
-import defaultImage from 'assets/svg/common/favicon.svg';
+import defaultImage from 'assets/svg/common/403-image.svg';
 import { ReactComponent as NextIcon } from 'assets/svg/shop/next-arrow.svg';
-import { ReactComponent as NotFoundImageIcon } from 'assets/svg/shop/not-found.svg';
+import { ReactComponent as NotFoundImageIcon } from 'assets/svg/common/not-found.svg';
 import { ReactComponent as PrevIcon } from 'assets/svg/shop/prev-arrow.svg';
 import useCounter from 'utils/hooks/useCounter';
 

src/components/common/SideNavigation/Pin/Pin.module.scss

@@ -75,7 +75,7 @@
   img {
     width: 100%;
     height: 153px;
-    object-fit: fill;
+    object-fit: cover;
   }
 }
 

src/components/common/SideNavigation/Pin/index.tsx

@@ -1,11 +1,11 @@
 import { useNavigate } from 'react-router-dom';
 
 import { FilterShopsListResponse } from 'api/shop/entity';
-import defaultImage from 'assets/svg/common/favicon.svg';
+import defaultImage from 'assets/svg/common/403-image.svg';
 import { ReactComponent as PencilIcon } from 'assets/svg/home/pencil.svg';
 import { ReactComponent as StarIcon } from 'assets/svg/post/star.svg';
 import { ReactComponent as BookMarkIcon } from 'assets/svg/shop/book-mark.svg';
-import { ReactComponent as NotFoundImageIcon } from 'assets/svg/shop/not-found.svg';
+import { ReactComponent as NotFoundImageIcon } from 'assets/svg/common/not-found.svg';
 import useLatestDate from 'components/common/SideNavigation/hooks/useLatestDate';
 import usePin from 'components/common/SideNavigation/hooks/usePin';
 import ReviewList from 'components/common/SideNavigation/Pin/components';
@@ -21,11 +21,6 @@ interface Props {
   filterShops:FilterShopsListResponse;
 }
 
-const newAddress = (address:string) => {
-  const firstCommaIndex = address.indexOf(',');
-  return address.substring(0, firstCommaIndex);
-};
-
 export default function Pin({ filterShops }:Props): JSX.Element {
   const navigate = useNavigate();
   const { selected, setSelected } = useSelected();
@@ -52,7 +47,7 @@ export default function Pin({ filterShops }:Props): JSX.Element {
               </div>
               <div className={styles.detail}>
                 <span className={styles.detail__address}>
-                  {newAddress(shop.simpleFormattedAddress)}
+                  {shop.simpleFormattedAddress}
                 </span>
                 <span className={styles.detail__dist}>| {(shop.dist / 1000).toFixed(1)}Km</span>
               </div>

src/components/common/SideNavigation/SideNavigation.module.scss

@@ -3,26 +3,6 @@
 $side-navigation-width: 90px;
 $side-pannel-width: 480px;
 
-@keyframes slide-out {
-  from {
-    margin-left: -$side-pannel-width;
-  }
-
-  to {
-    margin-left: 0;
-  }
-}
-
-@keyframes slide-in {
-  from {
-    margin-left: 0;
-  }
-
-  to {
-    margin-left: -$side-pannel-width;
-  }
-}
-
 .side-navigation {
   background-color: #ffffff;
   width: $side-navigation-width;
@@ -107,12 +87,13 @@ $side-pannel-width: 480px;
     border-radius: 0 5px 5px 0;
     border: none;
     box-shadow: 2px 3px 4px 0 rgba(0 0 0 / 20%);
-    transform: translate($side-pannel-width, -50%);
-    animation: slide-in 0.3s ease-out normal forwards;
+    transform: translate(0, -50%);
+    transition: 0.3s ease-in;
     cursor: pointer;
 
     &--expand {
-      animation: slide-out 0.3s ease-out forwards;
+      transform: translate($side-pannel-width, -50%);
+      transition: 0.3s ease-out;
     }
 
     &--invisible {
@@ -171,10 +152,12 @@ $side-pannel-width: 480px;
   display: flex;
   flex-direction: column;
   box-shadow: 2px 3px 12px 1px rgb(0 0 0 / 10%);
-  animation: slide-in 0.3s ease-out normal forwards;
+  transform: translateX(-$side-pannel-width);
+  transition: 0.3s ease-in;
 
   &--expand {
-    animation: slide-out 0.3s ease-out forwards;
+    transform: translateX(0);
+    transition: 0.3s ease-out;
   }
 
   &--invisible {

src/components/common/SideNavigation/index.tsx

@@ -12,20 +12,25 @@ import Pin from 'components/common/SideNavigation/Pin/index';
 import SpriteSvg from 'components/common/SpriteSvg';
 import { useAuth, useClearAuth } from 'store/auth';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
-import useLocationActive from 'store/locationActive';
 import { useSelected } from 'store/placeId';
-import useBooleanState from 'utils/hooks/useBooleanState';
 import useFilterShops from 'utils/hooks/useFilterShops';
 import cn from 'utils/ts/classNames';
 
 import styles from './SideNavigation.module.scss';
 
-export default function SideNavigation(): JSX.Element {
+interface SideNavigationProps {
+  visible: boolean;
+  toggle: () => void;
+  setVisible: (state: boolean) => void;
+}
+
+export default function SideNavigation({
+  visible, toggle, setVisible,
+}: SideNavigationProps): JSX.Element {
   const auth = useAuth();
   const clearAuth = useClearAuth();
   const location = useLocation();
   const navigate = useNavigate();
-  const [visible, , , toggle, setVisible] = useBooleanState(false);
 
   const { filterFriendState, setFilterFriend } = useFilterFriend();
   const { filterScrapState, setFilterScrap } = useFilterScrap();
@@ -70,10 +75,6 @@ export default function SideNavigation(): JSX.Element {
     return null;
   };
 
-  const {
-    state: isActive,
-  } = useLocationActive();
-
   const TABS = [
     {
       name: '',
@@ -104,27 +105,14 @@ export default function SideNavigation(): JSX.Element {
     },
   ];
 
-  const clickSearchButton = () => {
-    setVisible(true);
-    navigate('/shop');
-  };
-
-  useEffect(() => {
-    if (isActive) {
-      setVisible(false);
-    }
-  }, [isActive, setVisible]);
-
   return (
     <>
       <nav className={styles['side-navigation']}>
         <ul className={styles['side-navigation__lists']}>
           {TABS.map((tab, index) => (
             <li
               key={tab.name}
-              className={cn({
-                [styles['side-navigation__list']]: true,
-              })}
+              className={styles['side-navigation__list']}
             >
               {tab.name === '검색' ? (
                 <button
@@ -133,7 +121,7 @@ export default function SideNavigation(): JSX.Element {
                     [styles['side-navigation__button']]: true,
                     [styles['side-navigation__button--clicked']]: (visible && location.pathname === '/') || location.pathname === '/shop',
                   })}
-                  onClick={() => clickSearchButton()}
+                  onClick={() => { navigate('/shop'); }}
                   tabIndex={0}
                 >
                   <div>{tab.icon}</div>

src/layout/DefaultLayout/DefaultLayout.module.scss

@@ -10,6 +10,8 @@
   }
 }
 
-.home {
-  display: none;
+.home-container {
+  &--invisible {
+    display: none;
+  }
 }