Merge pull request #77 from APPS-sookmyung/dev

Merge: dev to main

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/CardInfo/CardInfo.jsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 
 export default function CardInfo({
   name,
+  team,
   job,
   company,
   imageUrl,
@@ -30,7 +31,7 @@ export default function CardInfo({
         <S.Info>
           <S.Name isSelected={isSelected}>{name}</S.Name>
           <S.Job isSelected={isSelected}>
-            {job}, {company}
+            {job} / {team}, {company}
           </S.Job>
         </S.Info>
       </S.CardWrapper>

src/components/SearchBar/SearchBar.jsx

@@ -9,7 +9,7 @@ export default function SearchBar({ theme }) {
   const placeholderText =
     theme === 'white'
       ? '명함을 검색해주세요'
-      : '이름, 직책, 이메일, 휴대폰, 유선전화, 부서, 회사 등을 입력하세요';
+      : '이름, 직책, 이메일, 휴대폰, 유선전화, 부서, 회사명 등을 입력하세요';
 
   return (
     <S.SearchBar theme={theme}>

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/constants/cardData.js

@@ -1,7 +1,9 @@
 const sampleData = [
   {
+    id: 1,
     name: '박유진',
-    job: '프로덕트 디자이너',
+    job: '사원',
+    team: '디자인팀',
     company: '숙명여자대학교',
     phone: '010-0000-1111',
     email: '[email protected]',
@@ -12,8 +14,10 @@ const sampleData = [
     memo: '내일 미팅',
   },
   {
+    id: 2,
     name: '한은영',
-    job: '프론트엔드 개발자',
+    job: '사원',
+    team: '개발팀',
     company: '숙명여자대학교',
     phone: '010-1111-2222',
     email: '[email protected]',
@@ -24,8 +28,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 3,
     name: '이영희',
-    job: '백엔드 개발자',
+    job: '사원',
+    team: '개발팀',
     company: 'WELLET Corp.',
     phone: '010-2222-3333',
     email: '[email protected]',
@@ -36,8 +42,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 4,
     name: '김현우',
     job: '프론트엔드 개발자',
+    team: '신규서비스팀',
     company: 'WELLET Corp.',
     phone: '010-3333-4444',
     email: '[email protected]',
@@ -48,8 +56,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 5,
     name: '김디공',
-    job: '대표',
+    job: '사원',
+    team: '',
     company: '다공 부동산',
     phone: '010-4444-5555',
     email: '[email protected]',
@@ -60,8 +70,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 6,
     name: '홍길동',
-    job: '대표 | 공인중개사',
+    job: '대표',
+    team: '',
     company: '동네공인중개사',
     phone: '010-5555-6666',
     email: '[email protected]',
@@ -72,8 +84,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 7,
     name: '김인쇄',
-    job: '공인중개사',
+    job: '대표',
+    team: '',
     company: '인쇄픽부동산',
     phone: '010-6666-7777',
     email: '[email protected]',
@@ -84,8 +98,10 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 8,
     name: '박대기',
-    job: '보도본부 사회팀 / 기자',
+    job: '기자',
+    team: '보도본부 사회팀',
     company: 'KBS',
     phone: '010-7777-8888',
     email: '[email protected]',
@@ -96,9 +112,11 @@ const sampleData = [
     memo: '',
   },
   {
+    id: 9,
     name: '홍길동',
-    job: '팀장 / PD',
-    company: 'KBS VJ 특공대',
+    job: '팀장, PD',
+    team: '시사교양팀, VJ 특공대',
+    company: 'KBS',
     phone: '010-8888-9999',
     email: '[email protected]',
     tel: '81-2-222-0123',