Release v.1.0.4 (#101)

* Style: 소개페이지 직렬카드 반응형 구현

* Style: 소개페이지 직렬카드 모바일버전 padding값 및 폰트사이즈 조정

* Design: 크기 css 수정

---------

Co-authored-by: KimKyuHoi <[email protected]>

src/pages/introduce/components/FieldTable.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useMediaQuery } from 'react-responsive';
 
 import gsap from 'gsap';
 
@@ -18,11 +19,18 @@ const FieldTableBox = styled.div`
   row-gap: 23px;
   column-gap: 29px;
 
-  @media (max-width: 767px) {
+  @media (max-width: 900px) {
     grid-template-columns: 1fr;
     row-gap: 33px;
   }
 
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+    row-gap: 33px;
+    padding: 0 40px;
+    justify-items: center;
+  }
+
   &.animateFieldTable {
     opacity: 0;
     transform: translateY(50px);
@@ -31,11 +39,20 @@ const FieldTableBox = styled.div`
 
 const CoreBox = styled.div`
   position: relative;
-  width: 379px;
-  height: 123px;
+  width: 90%;
+  height: auto;
   padding: 22px 26px 28px 18px;
   border-radius: 15px;
   background-color: var(--color-white);
+
+  /* @media (max-width: 1024px) {
+    width: 100%;
+  } */
+
+  @media (max-width: 500px) {
+    width: 100%;
+    height: auto;
+  }
 `;
 
 const TextLayout = styled.div`
@@ -66,6 +83,10 @@ const HighlightText = styled(Text)<{ highlightColor?: string }>`
 `;
 
 const FieldTable = () => {
+  const isTablet = useMediaQuery({ query: '(max-width: 767px)' });
+  const titleSize = isTablet ? 'md' : 'lg';
+  const expSize = isTablet ? 'sm' : 'md';
+
   useEffect(() => {
     gsap.to('.animateFieldTable', {
       scrollTrigger: {
@@ -88,13 +109,13 @@ const FieldTable = () => {
           <HighlightText
             color='black'
             weight='600'
-            size='xl'
+            size={titleSize}
             highlightColor='#F7B4AE'
           >
             FRONTEND DEVELOPER
           </HighlightText>
           <ExplainLayout>
-            <Text color='black' size='md'>
+            <Text color='black' size={expSize}>
               사용자와 서비스가 직접 상호작용하는 부분을 담당합니다. 웹이나 앱을
               시각화하고, 사용자들이 쉽고 빠르게 사용할 수 있도록 서비스를
               구축하고 개선합니다.
@@ -107,13 +128,13 @@ const FieldTable = () => {
           <HighlightText
             color='black'
             weight='600'
-            size='xl'
+            size={titleSize}
             highlightColor='#9FD8BC'
           >
             BACKEND DEVELOPER
           </HighlightText>
           <ExplainLayout>
-            <Text color='black' size='md'>
+            <Text color='black' size={expSize}>
               웹이나 앱의 보이지 않는 서버를 담당합니다. 사용자가 웹이나 앱과
               상호작용할 때 필요한 서버, 데이터베이스, 애플리케이션 로직을
               개발하고 유지보수합니다.
@@ -126,13 +147,13 @@ const FieldTable = () => {
           <HighlightText
             color='black'
             weight='600'
-            size='xl'
+            size={titleSize}
             highlightColor='#B3CEFB'
           >
             AI ENGINEER
           </HighlightText>
           <ExplainLayout>
-            <Text color='black' size='md'>
+            <Text color='black' size={expSize}>
               인공지능 시스템을 설계하는 엔지니어입니다. 인공지능 기술을
               활용하여 업무를 자동화하거나 인사이트를 도출하는 등 각종 문제를
               해결합니다.
@@ -145,13 +166,13 @@ const FieldTable = () => {
           <HighlightText
             color='black'
             weight='600'
-            size='xl'
+            size={titleSize}
             highlightColor='#FDE49B'
           >
             ANDROID DEVELOPER
           </HighlightText>
           <ExplainLayout>
-            <Text color='black' size='md'>
+            <Text color='black' size={expSize}>
               모바일 애플리케이션 설계, 개발 및 유지보수를 담당합니다.
               안드로이드 플랫폼에서의 소프트웨어 개발에 특화되어 사용자 경험을
               개선하고 기능을 구현합니다.
@@ -164,13 +185,13 @@ const FieldTable = () => {
           <HighlightText
             color='black'
             weight='600'
-            size='xl'
+            size={titleSize}
             highlightColor='#D1B3FD'
           >
             DESIGNER
           </HighlightText>
           <ExplainLayout>
-            <Text color='black' size='xs'>
+            <Text color='black' size={expSize}>
               사용자 조사, 정보 구조 설계, 와이어 프레임 및 프로토타입 제작 등의
               작업을 담당합니다. 디자이너는 사용자의 니즈와 목표를 이해하고,
               해당 제품 또는 서비스가 사용자에게 제공하는 가치를 극대화하기 위해