feat: change size by screen size

sopt-makers · Dec 8, 2023 · c5fcad9 · c5fcad9
1 parent e414635
commit c5fcad9
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 8 deletions.
diff --git a/src/views/MainPage/components/OwnOrganization/Card/style.ts b/src/views/MainPage/components/OwnOrganization/Card/style.ts
@@ -4,14 +4,33 @@ import { colors } from '@sopt-makers/colors';
 export const CardWrapper = styled.div<{ background: string }>`
   background: ${({ background }) => background};
   background-position: center;
-  background-size: contain;
+  background-size: cover;
+  background-repeat: no-repeat;
   border-radius: 19px;
   padding: 39px 0;
-  width: 712px;
   height: 380px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+
+  @media (max-width: 1440px) {
+    width: 512px;
+    height: 432px;
+    padding-top: 39px;
+    padding-bottom: 23px;
+  }
+
+  @media (max-width: 768px) {
+    width: max(416px, min(100vw - 200px, 512px));
+    height: calc(max(432px, min(100vw - 200px, 512px)) * 0.84);
+  }
+
+  @media (max-width: 375px) {
+    width: 293px;
+    height: 250px;
+    padding-top: 20px;
+    padding-bottom: 13px;
+  }
 `;
 
 export const FooterKorName = styled.div`
@@ -28,6 +47,21 @@ export const FooterKorName = styled.div`
   font-weight: 600;
   line-height: 28px;
   letter-spacing: -0.904px;
+
+  @media (max-width: 1440px) {
+    width: 128px;
+    padding: 12px 0;
+    font-size: 21px;
+    line-height: 24.425px;
+  }
+
+  @media (max-width: 375px) {
+    border-radius: 6px;
+    width: 74px;
+    padding: 7px 0;
+    font-size: 12px;
+    line-height: 13px;
+  }
 `;
 
 export const FooterEngName = styled.div`
@@ -39,6 +73,16 @@ export const FooterEngName = styled.div`
   line-height: 28.288px; /* 138.027% */
   letter-spacing: -1.025px;
   padding-bottom: 4px;
+
+  @media (max-width: 1440px) {
+    font-size: 19px;
+    line-height: 13.9px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 11px;
+    line-height: 14.9px;
+  }
 `;
 
 export const FooterWrapper = styled.div`
@@ -47,12 +91,26 @@ export const FooterWrapper = styled.div`
   align-items: flex-end;
   padding-left: 30px;
   padding-right: 42px;
+
+  @media (max-width: 1440px) {
+    padding-left: 25px;
+    padding-right: 27px;
+  }
+
+  @media (max-width: 375px) {
+    padding-left: 14px;
+    padding-right: 15px;
+  }
 `;
 
 export const ContentWrapper = styled.div`
   padding: 0 41px;
   flex: 1;
   word-break: keep-all;
+
+  @media (max-width: 375px) {
+    padding: 20px 0;
+  }
 `;
 
 export const TextWrapper = styled.span<{ weight: 'normal' | 'bold' }>`
@@ -61,4 +119,16 @@ export const TextWrapper = styled.span<{ weight: 'normal' | 'bold' }>`
   font-weight: ${({ weight }) => weight};
   line-height: 35px; /* 175% */
   letter-spacing: -0.8px;
+
+  @media (max-width: 1440px) {
+    font-size: 18px;
+    line-height: 31px; /* 172.222% */
+    letter-spacing: -0.72px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 11px;
+    line-height: 18.103px; /* 164.575% */
+    letter-spacing: -0.44px;
+  }
 `;
diff --git a/src/views/MainPage/components/OwnOrganization/index.tsx b/src/views/MainPage/components/OwnOrganization/index.tsx
@@ -1,13 +1,23 @@
 import { OWN_ORGANIZATION_LIST } from '@src/lib/constants/main';
+import Tab from '../Tab';
 import OwnOrganizationCard from './Card';
 import * as S from './style';
 
 export default function OwnOrganization() {
   return (
-    <S.Wrapper>
-      {OWN_ORGANIZATION_LIST.map((organization) => (
-        <OwnOrganizationCard key={organization.nameEng} {...organization} />
-      ))}
-    </S.Wrapper>
+    <S.Background>
+      <Tab
+        tab={'(3) 자체 운영 기구'}
+        title={'SOPT를 운영하는 자체 기구'}
+        description={
+          'SOPT에는 솝트를 자체적으로 운영하는 두 가지의 기구가 존재합니다. 한 기수 이상 활동한\n사람들이 모여, 솝트가 보다 유연하고 열정적인 경험으로 채워질 수 있도록 노력하죠.'
+        }
+      />
+      <S.Wrapper>
+        {OWN_ORGANIZATION_LIST.map((organization) => (
+          <OwnOrganizationCard key={organization.nameEng} {...organization} />
+        ))}
+      </S.Wrapper>
+    </S.Background>
   );
 }
diff --git a/src/views/MainPage/components/OwnOrganization/style.ts b/src/views/MainPage/components/OwnOrganization/style.ts
@@ -1,6 +1,22 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 
 export const Wrapper = styled.div`
   display: flex;
-  justify-content: space-between;
+  gap: 28px;
+  overflow-x: hidden;
+
+  @media (max-width: 1440px) {
+    gap: 24px;
+    overflow-x: scroll;
+  }
+
+  @media (max-width: 375px) {
+    gap: 14px;
+  }
+`;
+
+export const Background = styled.section`
+  background-color: ${colors.white};
+  padding-top: 146px;
 `;