Merge pull request #236 from APPS-sookmyung/dev

[MERGE] dev to main

Author: junheekim61

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/CardDetailPage/CardDetailPage.style.jsx

@@ -204,10 +204,12 @@ export const CardImageContainer = styled.div`
 export const CardImageBox = styled.div`
   overflow: hidden;
   border-radius: 10px;
-
+  width: calc(50% - 10px);
+  aspect-ratio: 9 / 5;
+  max-width: 270px;
   img {
-    width: 100px;
-    height: 100px;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
 `;

src/pages/DetailEditPage/DetailEditPage.style.jsx

@@ -297,10 +297,13 @@ export const CardImageBox = styled.div`
   position: relative;
   overflow: hidden;
   border-radius: 10px;
+  width: calc(50% - 10px);
+  max-width: 270px;
+  aspect-ratio: 9 / 5;
 
   img {
-    width: 100px;
-    height: 100px;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
   }
 `;

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)}