Style: 명함보기 페이지 내 아이콘 등 디테일 수정

src/components/CardInfo/CardInfo.jsx

@@ -3,26 +3,29 @@ import PropTypes from 'prop-types';
 import * as S from './CardInfo.style';
 import Icon from '../../components/Icon/Icon';
 import { Link } from 'react-router-dom';
-import ProfileImgDefault from '../../assets/images/profile-img-default.svg';
 
 export default function CardInfo({
   name,
   job,
   company,
-  imageUrl = ProfileImgDefault,
+  imageUrl,
   isDeleteMode = false,
   isSelected = false,
   onClick = () => {},
 }) {
-  return (
+  const cardContent = (
     <S.Card
       onClick={onClick}
       isDeleteMode={isDeleteMode}
       isSelected={isSelected}
     >
       <S.CardWrapper>
         <S.ProfileImgWrapper>
-          <img src={imageUrl || ProfileImgDefault} alt={`${name} 프로필`} />
+          {imageUrl ? (
+            <img src={imageUrl} alt={`${name} 프로필`} />
+          ) : (
+            <Icon id='profile-basic' fill='none' />
+          )}
         </S.ProfileImgWrapper>
         <S.Info>
           <S.Name isSelected={isSelected}>{name}</S.Name>
@@ -32,11 +35,9 @@ export default function CardInfo({
         </S.Info>
       </S.CardWrapper>
       {!isDeleteMode && (
-        <Link to={`/card/${name}`}>
-          <S.ArrowIconWrapper>
-            <Icon id='arrow-right' fill='none' />
-          </S.ArrowIconWrapper>
-        </Link>
+        <S.ArrowIconWrapper>
+          <Icon id='arrow-right' fill='none' />
+        </S.ArrowIconWrapper>
       )}
       {isDeleteMode && (
         <S.ArrowIconWrapper>
@@ -45,6 +46,12 @@ export default function CardInfo({
       )}
     </S.Card>
   );
+
+  return isDeleteMode ? (
+    cardContent
+  ) : (
+    <Link to={`/card/${name}`}>{cardContent}</Link>
+  );
 }
 
 CardInfo.propTypes = {

src/components/CardInfo/CardInfo.style.jsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const Card = styled.a`
+export const Card = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -29,6 +29,12 @@ export const ProfileImgWrapper = styled.div`
     border-radius: 50%;
     object-fit: cover;
   }
+  svg {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
 `;
 
 export const Info = styled.div`

src/components/MyCard/MyCard.style.jsx

@@ -16,6 +16,13 @@ export const ProfileImg = styled.div`
   max-height: 68px;
   border-radius: 50%;
   display: flex;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
 `;
 
 export const ProfileText = styled.div`

src/pages/CardDetailPage/CardDetailPage.jsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import * as S from './CardDetailPage.style';
 import Icon from '../../components/Icon/Icon';
 import { TabBar, BlueBadge } from '../../components';
 import ProfileImgDefault from '../../assets/images/profile-img-default.svg';
-import { Link } from 'react-router-dom';
 import CARDS_SAMPLE_DATA from '../../constants/cardsSampleData';
 
 export default function CardDetailPage() {

src/pages/ViewCardPage/ViewCardPage.jsx

@@ -72,9 +72,7 @@ export default function ViewCardPage() {
           <S.EditBadgeWrapper>
             <S.DeleteCardBadge onClick={handleDeleteClick}>
               <S.BadgeText>명함 삭제</S.BadgeText>
-              <S.TrashIcon>
-                <Icon id='trash' fill='none' />
-              </S.TrashIcon>
+              <Icon id='trash' />
             </S.DeleteCardBadge>
             {isEditCompleteVisible && (
               <S.EditCompletedBadge onClick={handleEditCompleteClick}>

src/pages/ViewCardPage/ViewCardPage.style.jsx

@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 
 export const ViewCardPage = styled.div`
   padding: 0 20px 100px 20px;
+  overflow-y: scroll;
+  scrollbar-width: none;
 `;
 
 // 버튼
@@ -34,6 +36,11 @@ export const DeleteCardBadge = styled.button`
   gap: 8px;
   border-radius: 10px;
   background: var(--Color-4-1, #ffe6f2);
+
+  svg {
+    width: 10px;
+    height: 11px;
+  }
 `;
 
 export const EditCompletedBadge = styled.button`
@@ -56,12 +63,6 @@ export const BadgeText = styled.p`
   letter-spacing: -0.55px;
 `;
 
-export const TrashIcon = styled.div`
-  width: 10px;
-  height: 11px;
-  flex-shrink: 0;
-`;
-
 // 명함
 export const CardContainer = styled.div`
   display: flex;