Modify: 삭제모드 일때 명함 상세보기 페이지로 이동하는 오류 수정

APPS-sookmyung · Aug 19, 2024 · e33bf72 · e33bf72
1 parent 656879b
commit e33bf72
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 32 deletions.
diff --git a/src/components/CardInfo/CardInfo.jsx b/src/components/CardInfo/CardInfo.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as S from './CardInfo.style';
 import Icon from '../../components/Icon/Icon';
@@ -12,38 +13,42 @@ export default function CardInfo({
   isSelected = false,
   onClick = () => {},
 }) {
-  return (
-    <Link to={`/card/${name}`}>
-      <S.Card
-        onClick={onClick}
-        isDeleteMode={isDeleteMode}
-        isSelected={isSelected}
-      >
-        <S.CardWrapper>
-          {imageUrl ? (
-            <img src={imageUrl} alt={`${name} 프로필`} />
-          ) : (
-            <Icon id='profile-basic' fill='none' />
-          )}
-          <S.Info>
-            <S.Name isSelected={isSelected}>{name}</S.Name>
-            <S.Job isSelected={isSelected}>
-              {job}, {company}
-            </S.Job>
-          </S.Info>
-        </S.CardWrapper>
-        {!isDeleteMode && (
-          <S.ArrowIconWrapper>
-            <Icon id='arrow-right' fill='none' />
-          </S.ArrowIconWrapper>
+  const cardContent = (
+    <S.Card
+      onClick={onClick}
+      isDeleteMode={isDeleteMode}
+      isSelected={isSelected}
+    >
+      <S.CardWrapper>
+        {imageUrl ? (
+          <img src={imageUrl} alt={`${name} 프로필`} />
+        ) : (
+          <Icon id='profile-basic' fill='none' />
         )}
-        {isDeleteMode && (
-          <S.ArrowIconWrapper>
-            <Icon id={isSelected ? 'circle-check' : 'circle'} fill='none' />
-          </S.ArrowIconWrapper>
-        )}
-      </S.Card>
-    </Link>
+        <S.Info>
+          <S.Name isSelected={isSelected}>{name}</S.Name>
+          <S.Job isSelected={isSelected}>
+            {job}, {company}
+          </S.Job>
+        </S.Info>
+      </S.CardWrapper>
+      {!isDeleteMode && (
+        <S.ArrowIconWrapper>
+          <Icon id='arrow-right' fill='none' />
+        </S.ArrowIconWrapper>
+      )}
+      {isDeleteMode && (
+        <S.ArrowIconWrapper>
+          <Icon id={isSelected ? 'circle-check' : 'circle'} fill='none' />
+        </S.ArrowIconWrapper>
+      )}
+    </S.Card>
+  );
+
+  return isDeleteMode ? (
+    cardContent
+  ) : (
+    <Link to={`/card/${name}`}>{cardContent}</Link>
   );
 }
 

diff --git a/src/pages/CardDetailPage/CardDetailPage.jsx b/src/pages/CardDetailPage/CardDetailPage.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import * as S from './CardDetailPage.style';
 import Icon from '../../components/Icon/Icon';