Modify: TabBar에 수정사항 적용

src/assets/icons/index.js

@@ -0,0 +1,8 @@
+export { default as nav_home } from './nav_home.svg';
+export { default as nav_home_active } from './nav_home_active.svg';
+export { default as nav_add_card } from './nav_add_card.svg';
+export { default as nav_add_card_active } from './nav_add_card_active.svg';
+export { default as nav_view_card } from './nav_view_card.svg';
+export { default as nav_view_card_active } from './nav_view_card_active.svg';
+export { default as nav_mypage } from './nav_mypage.svg';
+export { default as nav_mypage_active } from './nav_mypage_active.svg';

src/components/TabBar/TabBar.jsx

@@ -1,37 +1,46 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
 import * as S from './TabBar.style';
-import { Link } from 'react-router-dom';
-import Icon from '../../components/Icon/Icon';
+
+import {
+  nav_home,
+  nav_home_active,
+  nav_add_card,
+  nav_add_card_active,
+  nav_view_card,
+  nav_view_card_active,
+  nav_mypage,
+  nav_mypage_active,
+} from '../../assets/icons';
 
 const tabItems = [
   {
     path: '/home',
     label: '홈',
     alt: '홈',
-    icon: <Icon id='nav-home' fill='none' />,
-    activeIcon: <Icon id='nav-home-active' fill='none' />,
+    icon: <img src={nav_home}></img>,
+    activeIcon: <img src={nav_home_active}></img>,
   },
   {
     path: '/card/add',
     label: '명함 추가',
     alt: '명함 추가',
-    icon: <Icon id='nav-add-card' fill='none' />,
-    activeIcon: <Icon id='nav-add-card-active' fill='none' />,
+    icon: <img src={nav_add_card}></img>,
+    activeIcon: <img src={nav_add_card_active}></img>,
   },
   {
     path: '/card',
     label: '명함 보기',
     alt: '명함 보기',
-    icon: <Icon id='nav-view-card' fill='none' />,
-    activeIcon: <Icon id='nav-view-card-active' fill='none' />,
+    icon: <img src={nav_view_card}></img>,
+    activeIcon: <img src={nav_view_card_active}></img>,
   },
   {
     path: '/mypage',
     label: '마이페이지',
     alt: '마이페이지',
-    icon: <Icon id='nav-mypage' fill='none' />,
-    activeIcon: <Icon id='nav-mypage-active' fill='none' />,
+    icon: <img src={nav_mypage}></img>,
+    activeIcon: <img src={nav_mypage_active}></img>,
   },
 ];
 
@@ -44,14 +53,12 @@ export default function TabBar() {
       {tabItems.map(({ path, label, alt, icon, activeIcon }) => {
         const isActive = currentPath === path;
         return (
-          <Link key={path} to={path}>
-            <S.Icon isActive={isActive}>
-              <S.IconImg isActive={isActive}>
-                {isActive ? activeIcon : icon}
-              </S.IconImg>
-              <S.Text isActive={isActive}>{label}</S.Text>
-            </S.Icon>
-          </Link>
+          <S.Icon isactive={toString(isActive)} key={path} to={path}>
+            <S.IconImg isactive={isActive}>
+              {isActive ? activeIcon : icon}
+            </S.IconImg>
+            <S.Text isactive={isActive}>{label}</S.Text>
+          </S.Icon>
         );
       })}
     </S.TabBar>

src/components/TabBar/TabBar.style.jsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 
 export const TabBar = styled.div`
   display: flex;
@@ -18,15 +19,15 @@ export const TabBar = styled.div`
   box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.05);
 `;
 
-export const Icon = styled.div`
-  /* border: 1px solid red; */
+export const Icon = styled(Link)`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 6px;
   padding: 15px;
-  color: ${(props) => (props.isActive ? '#2D29FF' : '#C8C8C8')};
+  color: ${(props) => (props.isactive ? '#2D29FF' : '#C8C8C8')};
 `;
 
 export const IconImg = styled.div`
@@ -46,7 +47,7 @@ export const Text = styled.span`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${(props) => (props.isActive ? '#2D29FF' : '#C8C8C8')};
+  color: ${(props) => (props.isactive ? '#2D29FF' : '#C8C8C8')};
   font-size: 11px;
   line-height: 130%;
   letter-spacing: -0.55px;

src/pages/HomePage/HomePage.jsx

@@ -43,29 +43,29 @@ export default function HomePage() {
       <S.Container>
         <S.CardListTitle>
           <p style={{ color: '#000' }}>둘러보기</p>
-          <p style={{ color: '#555' }}>등록된 명함 찾아보기</p>
+          <p style={{ color: '#555' }}>최근 등록된 명함</p>
         </S.CardListTitle>
         {filterdList.length > 0 && (
-          <>
-            <S.CardContainer>
-              {filterdList.map((data, index) => (
-                <CardInfo
-                  key={index}
-                  name={data.name}
-                  job={data.job}
-                  company={data.company}
-                  imageUrl={data.imageUrl}
-                />
-              ))}
-            </S.CardContainer>
-            <S.BottomMoreBtn>
-              <S.EditBtnWrapper>
-                <S.EditText>더 보기</S.EditText>
-              </S.EditBtnWrapper>
-            </S.BottomMoreBtn>
-          </>
+          <S.CardContainer>
+            {filterdList.map((data, index) => (
+              <CardInfo
+                key={index}
+                name={data.name}
+                job={data.job}
+                company={data.company}
+                imageUrl={data.imageUrl}
+              />
+            ))}
+          </S.CardContainer>
         )}
       </S.Container>
+      <S.BottomMoreBtn>
+        <S.EditBtnWrapper onClick={() => navigate('/card')}>
+          <S.EditBtn>
+            <S.EditText>더 보기</S.EditText>
+          </S.EditBtn>
+        </S.EditBtnWrapper>
+      </S.BottomMoreBtn>
     </S.HomePage>
   );
 }

src/pages/HomePage/HomePage.style.jsx

@@ -37,7 +37,7 @@ export const UpDownBar = styled.div`
 `;
 
 export const Container = styled.div`
-  padding: 20px;
+  padding: 20px 20px 0 20px;
   overflow: hidden;
 `;
 
@@ -60,7 +60,18 @@ export const CardListTitle = styled.div`
   }
 `;
 
-export const EditBtnWrapper = styled.button`
+export const BottomMoreBtn = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  padding: 0 10px;
+`;
+
+export const EditBtnWrapper = styled.div`
+  padding: 10px;
+`;
+
+export const EditBtn = styled.button`
   display: inline-flex;
   padding: 4px 10px;
   align-items: center;
@@ -82,9 +93,3 @@ export const CardContainer = styled.div`
   flex-direction: column;
   gap: 10px;
 `;
-
-export const BottomMoreBtn = styled.div`
-  display: flex;
-  justify-content: end;
-  padding-top: 10px;
-`;