Merge branch 'dev' of https://github.com/APPS-sookmyung/2024-WELLET-client into fix/#232-img-preview

Author: kimhyerims

src/components/CardInfo/CardInfo.jsx

@@ -7,6 +7,7 @@ import * as S from './CardInfo.style';
 export default function CardInfo({
   id,
   name,
+  company,
   position,
   department,
   imageUrl,
@@ -31,18 +32,23 @@ export default function CardInfo({
         <S.Info>
           <S.Name isSelected={isSelected}>{name}</S.Name>
           <S.Role isSelected={isSelected}>
-            {department} {department && position ? `/ ${position}` : position}
+            {`${company || ''}${company && (department || position) ? ' / ' : ''}${department || ''}${department && position ? ' / ' : ''}${position || ''}`}
           </S.Role>
         </S.Info>
       </S.CardWrapper>
       {!isDeleteMode && (
         <S.ArrowIconWrapper>
-          <Icon id='arrow-right' fill='none' width={13} height={13}/>
+          <Icon id='arrow-right' fill='none' width={13} height={13} />
         </S.ArrowIconWrapper>
       )}
       {isDeleteMode && (
         <S.ArrowIconWrapper>
-          <Icon id={isSelected ? 'circle-check' : 'circle'} fill='none' width={16} height={16}/>
+          <Icon
+            id={isSelected ? 'circle-check' : 'circle'}
+            fill='none'
+            width={16}
+            height={16}
+          />
         </S.ArrowIconWrapper>
       )}
     </S.Card>

src/pages/HomePage/HomePage.jsx

@@ -12,7 +12,11 @@ export default function HomePage() {
   const [myCardData, setMyCardData] = useState([]);
   const [cardsData, setCardsData] = useState([]);
   const [myCardId, setMyCardId] = useState(null);
-  useVisibleCardsEffect(setVisibleList, cardsData);
+
+  useVisibleCardsEffect(
+    setVisibleList,
+    cardsData.sort((a, b) => b.id - a.id)
+  );
 
   async function fetchMyCard() {
     try {
@@ -97,6 +101,7 @@ export default function HomePage() {
                 <CardInfo
                   id={data.id}
                   name={data.name}
+                  company={data.company}
                   position={data.position}
                   department={data.department}
                   imageUrl={data.profImgUrl}

src/pages/ViewCardPage/ViewCardPage.jsx

@@ -131,7 +131,7 @@ export default function ViewCardPage() {
     return searchData.filter((data) => data.category === activeBadge?.name);
   };
 
-  const displayData = getDisplayData();
+  const displayData = getDisplayData().sort((a, b) => b.id - a.id);
 
   return (
     <>
@@ -170,9 +170,9 @@ export default function ViewCardPage() {
               id={data.id}
               key={data.id}
               name={data.name}
+              company={data.company}
               position={data.position}
               department={data.department}
-              company={data.company}
               imageUrl={data.profImgUrl}
               isDeleteMode={isDeleteMode}
               isSelected={selectedCards.includes(data.id)}