fix: merge

g-magazine-hackaton · Dec 5, 2023 · 557d8b4 · 557d8b4
2 parents a0e968d + 719ee71
commit 557d8b4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 12 deletions.
diff --git a/src/components/navbar/BottomNavigation.tsx b/src/components/navbar/BottomNavigation.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { ROOT_PATH } from '@/temp/global-variables';
 
 const bottomNavigationStyle = css`
@@ -23,29 +23,33 @@ const bottomNavigationStyle = css`
       display: block;
       width: 48px;
       height: 48px;
-      background: url(//mockupdev.gmarket.co.kr/build/mobile/image/sprite/gnb/sp-gnb.png?v=1700614126178)
+      background: url(//script.gmarket.co.kr/build/mobile/image/sprite/gnb/sp-gnb.png?v=1701154578432)
         no-repeat;
       background-size: 290px 256px;
     }
 
     .link__home {
-      background-position: -108px 0px;
+      background-position: -108px -50px;
 
-      &--active {
-        background-position: -108px -50px;
+      &.active {
+        background-position: 0px -108px;
       }
     }
 
     .link__search {
-      background-position: -208px -150px;
+      background-position: -108px 0px;
     }
 
     .link__myg {
-      background-position: -158px -50px;
+      background-position: 0px -158px;
+
+      &.active {
+        background-position: -50px -158px;
+      }
     }
 
     .link__rvh {
-      background-position: 0px -158px;
+      background-position: -100px -158px;
     }
   }
 `;
@@ -56,16 +60,16 @@ const BottomNavigation = () => {
       <div className="box__bottom-navigation-inner">
         <ul className="list">
           <li className="list-item">
-            <Link to={`${ROOT_PATH}/`} className="link link__home" />
+            <NavLink to={`${ROOT_PATH}/`} className="link link__home" />
           </li>
           <li className="list-item">
-            <Link to="#none" className="link link__search" />
+            <NavLink to="#none" className="link link__search" />
           </li>
           <li className="list-item">
-            <Link to="my-page" className="link link__myg" />
+            <NavLink to="my-page" className="link link__myg" />
           </li>
           <li className="list-item">
-            <Link to="#none" className="link link__rvh" />
+            <NavLink to="#none" className="link link__rvh" />
           </li>
         </ul>
       </div>

diff --git a/src/components/ui/image/index.tsx b/src/components/ui/image/index.tsx
@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import { IMAGE_URL } from '@/apis/urls';
+
+const imageWrapStyle = css``;
+
+const Image = ({ src, alt = '', isLazy = false }) => {
+  return (
+    <div css={imageWrapStyle} className="image">
+      <img
+        src={IMAGE_URL + src}
+        alt={alt}
+        {...(isLazy && {
+          loading: 'lazy',
+          decoding: 'async',
+        })}
+        onError={(e) => {
+          (e.target as HTMLImageElement).src =
+            'https://pics.gmarket.co.kr/pc/single/kr/snowwhite/common/no_image_itemcard_300x300.png';
+        }}
+      />
+    </div>
+  );
+};
+
+export default Image;