[SP3] 자치기구 반응형, 활동후기 글자 부활, 솝트어때요와 최신소식 사이 간격 늘리기 (#341)

sopt-makers · Dec 23, 2023 · c124614 · c124614
1 parent 78ba27b
commit c124614
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 5 deletions.
diff --git a/src/views/MainPage/components/Comment/Card/Desktop/index.tsx b/src/views/MainPage/components/Comment/Card/Desktop/index.tsx
@@ -24,7 +24,13 @@ export default function CommentCard({
   const desktop = useMediaQuery({
     query: '(max-width: 1480px)',
   });
-  const margin = desktop ? '-324px 0px -300px 0px' : '-100px 0px -648px 0px';
+  const longScreen = useMediaQuery({ query: '(min-height: 1100px' });
+
+  const margin = desktop
+    ? longScreen
+      ? '-324px 0px -648px 0px'
+      : '-324px 0px -324px 0px'
+    : '-100px 0px -648px 0px';
 
   const wrapperRef = useRef(null);
 

diff --git a/src/views/MainPage/components/Comment/index.tsx b/src/views/MainPage/components/Comment/index.tsx
@@ -28,6 +28,7 @@ export default function CommentSection() {
     <S.Wrapper>
       <S.TitleWrapper ref={wrapperRef}>
         {!isWideScreen && !isMobile && <S.TitleShadow style={{ opacity: titleShadowOpacity }} />}
+        <S.SectionSubTitle>활동 후기</S.SectionSubTitle>
         <S.SectionTitle>Q. 솝트 어때요?</S.SectionTitle>
         <S.Summary animate={controls} color={SOPT_COMMENT_LIST[activeIdx]?.color}>
           {SOPT_COMMENT_LIST[activeIdx]?.summary}

diff --git a/src/views/MainPage/components/Comment/style.ts b/src/views/MainPage/components/Comment/style.ts
@@ -15,7 +15,7 @@ export const Wrapper = styled.div`
 export const TitleShadow = styled(motion.div)`
   position: absolute;
   width: 100%;
-  height: calc(100% + 80px);
+  height: calc(100% + 120px);
   top: 0;
   left: 0;
   background: linear-gradient(#0d111f 72%, transparent);
@@ -90,6 +90,30 @@ export const SectionTitle = styled.div`
   }
 `;
 
+export const SectionSubTitle = styled.p`
+  color: #5b88f8;
+  font-family: SUIT;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 46.311px; /* 257.282% */
+  letter-spacing: -0.36px;
+  margin-bottom: 8px;
+  position: relative;
+  z-index: 1;
+
+  @media (max-width: 768px) and (min-width: 429px) {
+    font-size: 18px;
+    line-height: 46.311px; /* 257.282% */
+    letter-spacing: -0.36px;
+  }
+  @media (max-width: 428px) {
+    font-size: 11px;
+    line-height: 26.615px; /* 241.956% */
+    letter-spacing: -0.22px;
+  }
+`;
+
 export const Summary = styled(motion.div)<{ color: string }>`
   color: ${({ color }) => color};
 

diff --git a/src/views/MainPage/components/OwnOrganization/Card/style.ts b/src/views/MainPage/components/OwnOrganization/Card/style.ts
@@ -21,8 +21,8 @@ export const CardWrapper = styled.div<{ background: string }>`
   }
 
   @media (max-width: 768px) {
-    width: max(416px, min(100vw - 200px, 512px));
-    height: calc(max(432px, min(100vw - 200px, 512px)) * 0.84);
+    width: max(392px, min(100vw - 200px, 512px));
+    height: calc(max(416px, min(100vw - 200px, 512px)) * 0.84);
   }
 
   @media (max-width: 428px) {
@@ -55,6 +55,17 @@ export const FooterKorName = styled.div`
     line-height: 24.425px;
   }
 
+  @media (max-width: 512px) {
+    border-radius: 12px;
+    width: 96px;
+    padding: 10px 0;
+    font-size: 18px;
+    line-height: 24.425px;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: -0.904px;
+  }
+
   @media (max-width: 428px) {
     border-radius: 6px;
     width: 74px;
@@ -85,6 +96,10 @@ export const FooterEngName = styled.div`
     line-height: 13.9px;
   }
 
+  @media (max-width: 512px) {
+    font-size: 17px;
+  }
+
   @media (max-width: 428px) {
     font-size: 11px;
     line-height: 14.9px;
@@ -132,6 +147,11 @@ export const TextWrapper = styled.span<{ weight: 'normal' | 'bold' }>`
     letter-spacing: -0.72px;
   }
 
+  @media (max-width: 512px) {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
   @media (max-width: 428px) {
     font-size: 11px;
     line-height: 18.103px; /* 164.575% */

diff --git a/src/views/MainPage/components/OwnOrganization/style.ts b/src/views/MainPage/components/OwnOrganization/style.ts
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { colors } from '@sopt-makers/colors';
 
 export const Wrapper = styled.div`
   display: flex;
@@ -10,6 +9,9 @@ export const Wrapper = styled.div`
     gap: 24px;
     overflow-x: scroll;
   }
+  @media (max-width: 512px) {
+    gap: 16px;
+  }
 
   @media (max-width: 428px) {
     gap: 14px;