modify(#251):랭크부분 수정

modern-agile-team · Mar 22, 2024 · 3909825 · 3909825
1 parent 650309c
commit 3909825
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/components/molecules/mentor-elements/styled.tsx b/src/components/molecules/mentor-elements/styled.tsx
@@ -25,7 +25,7 @@ export const MentorCardContentBox = styled.div`
   width: 40%;
   padding: 12px 0px 0px 0px;
   color: #000;
-  @media only all and (max-width: 500px) and (max-height: 800px) {
+  @media only all and (max-width: 500px) and (max-height: 600px) {
     overflow: hidden;
   }
   //전체 멘토 카드 중, name
@@ -90,15 +90,15 @@ export const RankBox = styled.div`
   }
   //랭크 이름
   > :nth-child(2) {
-    @media only all and (max-width: 500px), (max-height: 800px) {
+    @media only all and (max-width: 600px), (max-height: 600px) {
       display: none;
     }
     font-size: 0.63em;
     font-weight: 500; //Medium
   }
   //랭크 점수
   > :nth-child(3) {
-    @media only all and (max-width: 500px), (max-height: 800px) {
+    @media only all and (max-width: 600px), (max-height: 600px) {
       display: none;
     }
     font-size: 0.5em; //Regular
@@ -117,7 +117,7 @@ export const NameBox = styled.div`
   margin-left: 30px;
   //card 이름 부분
   & > :nth-child(1) {
-    @media only all and (max-width: 500px), (max-height: 800px) {
+    @media only all and (max-width: 600px), (max-height: 600px) {
       font-size: 0.5em;
     }
     font-size: 0.85em; //20px
@@ -136,7 +136,7 @@ export const NameBox = styled.div`
   }
   //card shortIntro 부분
   & > :nth-child(3) {
-    @media only all and (max-width: 500px), (max-height: 800px) {
+    @media only all and (max-width: 600px), (max-height: 600px) {
       font-size: 0.3em;
     }
     flex-wrap: wrap;
@@ -155,7 +155,6 @@ export const CountContainer = styled.div`
 export const CountBox = styled.div`
   display: flex;
   margin-right: 30px;
-  width: 100%;
   //카운트 박스 중 아이콘
   & > :nth-child(1) {
     margin-right: 6px;
@@ -181,27 +180,28 @@ export const PopularMentorCardContainer = styled.div`
   align-items: center;
   flex-direction: column;
   cursor: pointer;
-  transition: all 250ms ease;
+  transition: all 0.3s ease;
   &:hover {
     border: 5px solid #ff792bbf;
     margin: -3px;
   }
   //이미지 크기 1700이하 반응형
   & > :nth-child(1) {
-    width: 82.86%; //232
-    height: 47.809%; //232 */
-    margin: 4.29%; //24
+    width: 12vw; //232
+    height: 20vh; //232 */
+    margin: 1.3vw 0px; //24
+    @media only all and (max-width: 700px) {
+      width: 20vw;
+    }
     background-color: #999;
     border-radius: 10px;
   }
 `;
 
 export const BadgeBox = styled.div`
-  width: 30.3%;
   margin: 14px;
   & > img {
     border-radius: 15px;
-    height: 166px;
-    width: 100%;
+    height: 13vh;
   }
 `;
diff --git a/src/components/organisms/mentor/RankMentor.tsx b/src/components/organisms/mentor/RankMentor.tsx
@@ -52,7 +52,7 @@ const MentorRanking = ({ filterCategoryId }: Partial<FilterPropsType>) => {
       ) : (
         <>{load && <div>명예의 멘토가 존재하지 않습니다.</div>}</>
       )}
-      <>{!load && <SkeletonUI width={'18.519%'} height="38vh" count={5} />}</>
+      <>{!load && <SkeletonUI width={'18%'} height="38vh" count={5} />}</>
     </S.MentorCardContainer>
   );
 };

diff --git a/src/components/organisms/mentor/styled.ts b/src/components/organisms/mentor/styled.ts
@@ -43,12 +43,12 @@ export const MentorCardContainer = styled.div`
 `;
 
 export const MentorCardWrapper = styled.div`
-  width: 18%;
+  width: 14.5vw;
   @media only all and (max-width: 1200px) {
-    width: 30%;
+    width: 24.7vw;
   }
   @media only all and (max-width: 500px) {
-    width: 45%;
+    width: 37.9vw;
   }
 `;