design: 적응형 padding 값 수정

src/views/MainPage/components/Activity/index.tsx

@@ -8,10 +8,12 @@ import * as S from './style';
 
 function CardHover(_props: unknown, ref: Ref<HTMLDivElement>) {
   const isMobileSize = useIsMobile('768px');
+  const tab = isMobileSize ? 'Activity' : '';
 
   return (
     <div ref={ref}>
       <Tab
+        tab={tab}
         title={'매 기수 진행되는, 다양한 활동들!'}
         description={
           '솝트에서는 매 기수 내 정기적으로 진행되는 다양한 활동들이 있어요.\n 각 파트원들과 친목 및 실력을 쌓을 수 있는 행사들을 통해, 솝트를 더 즐겁게 보낼 수 있어요.'

src/views/MainPage/components/Comment/index.tsx

@@ -9,8 +9,9 @@ function Comment(_props: unknown, ref: Ref<HTMLDivElement>) {
   const [activeIdx, setActiveIdx] = useState(0);
   const controls = useAnimationControls();
   const isWideScreen = useIsDesktop('1480px');
-  const isMobile = useIsMobile('768px');
   const wrapperRef = useRef(null);
+  const isMobileSize = useIsMobile('768px');
+  const tab = isMobileSize ? 'Review' : '';
 
   const changeActiveIdx = (idx: number) => {
     setActiveIdx(idx);
@@ -27,7 +28,10 @@ function Comment(_props: unknown, ref: Ref<HTMLDivElement>) {
   return (
     <S.Wrapper id="review" ref={ref}>
       <S.TitleWrapper ref={wrapperRef}>
-        {!isWideScreen && !isMobile && <S.TitleShadow style={{ opacity: titleShadowOpacity }} />}
+        {!isWideScreen && !isMobileSize && (
+          <S.TitleShadow style={{ opacity: titleShadowOpacity }} />
+        )}
+        {tab && <S.SectionSubTitle>{tab}</S.SectionSubTitle>}
         <S.SectionTitle>Q. 솝트 어때요?</S.SectionTitle>
         <S.Summary animate={controls} color={SOPT_COMMENT_LIST[activeIdx]?.color}>
           {SOPT_COMMENT_LIST[activeIdx]?.summary}

src/views/MainPage/components/Comment/style.ts

@@ -100,6 +100,24 @@ export const SectionTitle = styled.div`
   }
 `;
 
+export const SectionSubTitle = styled.p`
+  color: #5b88f8;
+  font-family: SUIT;
+  font-style: normal;
+  font-weight: 600;
+  margin-bottom: 10px;
+  font-size: 20px;
+  line-height: 46.311px; /* 257.282% */
+  letter-spacing: -2%;
+  z-index: 1;
+
+  @media (max-width: 376px) {
+    font-size: 11px;
+    line-height: 26.615px; /* 241.956% */
+    letter-spacing: -0.22px;
+  }
+`;
+
 export const Summary = styled(motion.div)<{ color: string }>`
   color: ${({ color }) => color};
 

src/views/MainPage/components/OwnOrganization/index.tsx

@@ -19,7 +19,9 @@ type OwnOrganizationCardProps = {
 };
 
 function OwnOrganization(_props: unknown, ref: Ref<HTMLDivElement>) {
-  const isMobile = useIsMobile('768px');
+  const isMobileSize = useIsMobile('768px');
+  const tab = isMobileSize ? 'Team' : '';
+
   const {
     carouselRef,
     infiniteCarouselList,
@@ -31,19 +33,20 @@ function OwnOrganization(_props: unknown, ref: Ref<HTMLDivElement>) {
   return (
     <S.Wrapper id="team" ref={ref}>
       <Tab
+        tab={tab}
         title={'솝트가 운영하는 자체 기구'}
         description={
           '솝트에는 자체적으로 운영하는 네 가지의 팀이 있습니다.\n솝트의 보다 유연하고 열정적인 경험을 위해 노력하죠.'
         }
       />
-      {!isMobile && (
+      {!isMobileSize && (
         <S.ContentWrapper>
           {OWN_ORGANIZATION_LIST.map((organization) => (
             <OwnOrganizationCard key={organization.nameEng} {...organization} />
           ))}
         </S.ContentWrapper>
       )}
-      {isMobile && (
+      {isMobileSize && (
         <>
           <S.CarouselWrapper>
             <S.LeftArrow>

src/views/MainPage/components/OwnOrganization/style.ts

@@ -2,6 +2,14 @@ import styled from '@emotion/styled';
 
 export const Wrapper = styled.div`
   padding-top: 104px;
+
+  @media (max-width: 768px) {
+    padding-top: 125px;
+  }
+
+  @media (max-width: 376px) {
+    padding-top: 74px;
+  }
 `;
 
 export const ContentWrapper = styled.div`
@@ -49,6 +57,14 @@ export const Slide = styled.div`
   height: 428px;
   padding: 0 6.5vw;
   border-radius: 19px;
+
+  @media (max-width: 768px) {
+    height: 434px;
+  }
+
+  @media (max-width: 376px) {
+    height: 249px;
+  }
 `;
 
 export const Arrow = styled.div`

src/views/MainPage/components/PartConfig/index.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image';
 import { Ref, forwardRef, useRef } from 'react';
 import IcArrowLeft from '@src/assets/icons/ic_arrow_left.svg';
 import IcArrowRight from '@src/assets/icons/ic_arrow_right.svg';
+import { useIsMobile } from '@src/hooks/useDevice';
 import useDrag from '@src/hooks/useDrag';
 import useInfiniteCarousel from '@src/hooks/useInfiniteCarousel';
 import { tabs as carouselList } from '@src/lib/constants/tabs';
@@ -23,10 +24,13 @@ function PartConfig(_props: unknown, ref: Ref<HTMLDivElement>) {
     handleTouchStart,
     handleTouchEnd,
   } = useInfiniteCarousel<TabType>(carouselList, '(-100% - 20px)', partRef);
+  const isMobileSize = useIsMobile('768px');
+  const tab = isMobileSize ? 'Part' : '';
 
   return (
     <S.Wrapper id="part" ref={ref}>
       <Tab
+        tab={tab}
         title={'6개의 파트로 이루어져 있어요.'}
         description={
           '솝트에서는 기획, 디자인, 개발 등 여러 파트원들이 한 프로젝트에 참여하며\n협업하는 경험을 쌓을 수 있어요. 부족해도 괜찮아요, 함께 배우면 되니까요!'

src/views/MainPage/components/PartConfig/style.ts

@@ -3,6 +3,14 @@ import Link from 'next/link';
 
 export const Wrapper = styled.div`
   padding-top: 104px;
+
+  @media (max-width: 768px) {
+    padding-top: 125px;
+  }
+
+  @media (max-width: 376px) {
+    padding-top: 74px;
+  }
 `;
 
 export const ContentWrapper = styled.div`

src/views/MainPage/components/RecentNews/style.ts

@@ -12,11 +12,11 @@ export const RecentNews = styled.section`
   }
 
   @media (max-width: 768px) {
-    padding-top: 253px 0 42px;
+    padding: 253px 0 42px;
   }
 
   @media (max-width: 444px) {
-    padding-top: 157px 0 24px;
+    padding: 157px 0 24px;
   }
 `;
 

src/views/MainPage/components/Tab/index.tsx

@@ -1,13 +1,15 @@
 import * as S from './style';
 
 interface TabProps {
+  tab?: string;
   title: string;
   description: string;
 }
 
-export default function Tab({ title, description }: TabProps) {
+export default function Tab({ tab, title, description }: TabProps) {
   return (
     <S.Wrapper>
+      {tab && <S.Tab>{tab}</S.Tab>}
       <S.Title>{title}</S.Title>
       <S.Description>{description}</S.Description>
     </S.Wrapper>

src/views/MainPage/components/Tab/style.ts

@@ -7,28 +7,31 @@ export const Wrapper = styled.section`
   margin-bottom: 31px;
 
   /* 태블릿 뷰 */
-  @media (max-width: 768px) and (min-width: 429px) {
+  @media (max-width: 768px) {
     margin-bottom: 26px;
   }
   /* 모바일 뷰 */
-  @media (max-width: 428px) {
+  @media (max-width: 376px) {
     margin-bottom: 14px;
   }
 `;
 
 export const Tab = styled.h2`
   color: #5b88f8;
   font-family: SUIT;
-  font-size: 18px;
   font-style: normal;
   font-weight: 600;
+  margin-bottom: 10px;
+  font-size: 20px;
   line-height: 46.311px; /* 257.282% */
-  letter-spacing: -0.36px;
+  letter-spacing: -2%;
+  z-index: 1;
 
-  margin-bottom: 8px;
-
-  @media (max-width: 428px) {
+  @media (max-width: 376px) {
     font-size: 11px;
+    line-height: 26.615px; /* 241.956% */
+    letter-spacing: -0.22px;
+    margin-bottom: 0px;
   }
 `;
 
@@ -44,15 +47,16 @@ export const Title = styled.h1`
   margin-bottom: 16px;
   word-break: keep-all;
 
-  @media (max-width: 768px) and (min-width: 429px) {
+  @media (max-width: 768px) {
     font-size: 36px;
     letter-spacing: -1.08px;
   }
 
-  @media (max-width: 428px) {
+  @media (max-width: 376px) {
     font-size: 21px;
     line-height: 29.103px; /* 138.588% */
     letter-spacing: -0.63px;
+    margin-bottom: 3.5px;
   }
 `;
 
@@ -67,13 +71,13 @@ export const Description = styled.p`
   word-break: keep-all;
   white-space: pre-line;
 
-  @media (max-width: 768px) and (min-width: 429px) {
+  @media (max-width: 768px) {
     font-size: 16px;
     line-height: 26px; /* 162.5% */
     letter-spacing: -0.64px;
   }
 
-  @media (max-width: 428px) {
+  @media (max-width: 376px) {
     font-size: 10px;
     line-height: 14.942px; /* 149.424% */
     letter-spacing: -0.4px;