[SP0] 추가 QA - /recruit 문의하기 모바일 레이아웃 수정

src/hooks/useCheckTime.ts

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
 export default function useCheckTime() {
-  const START_DATE = new Date('2024-03-02 15:00:00');
+  const START_DATE = new Date('2024-03-03 00:00:00');
   const [timeDiff, setTimeDiff] = useState<number>(START_DATE.getTime() - Date.now());
 
   useEffect(()=>{
     setTimeDiff(START_DATE.getTime() - Date.now());
   }, []);
 
   return timeDiff<=0 ;
 }

src/lib/api/mock/about.ts

@@ -61,7 +61,7 @@ const getMemberInfo = async (): Promise<GetMembersInfoResponse> => ({
       description: '솝트의 지금, 여러분과 함께',
       imageSrc: '/images/members/1.png',
       gmail: 'president@sopt.org',
-      linkedin: 'https://www.linkedin.com/in/seungwoo-cho-7a5676236/',
+      linkedin: 'seungwoo-cho-7a5676236',
     },
     {
       id: 2,
@@ -72,7 +72,7 @@ const getMemberInfo = async (): Promise<GetMembersInfoResponse> => ({
       imageSrc: '/images/members/2.png',
       gmail: 'manager@sopt.org',
       github: 'seeunplayer',
-      linkedin: 'https://www.linkedin.com/in/tina-park-755ab8230/?locale=ko_KR',
+      linkedin: 'tina-park-755ab8230',
     },
     {
       id: 3,
@@ -83,7 +83,7 @@ const getMemberInfo = async (): Promise<GetMembersInfoResponse> => ({
       imageSrc: '/images/members/3.png',
       gmail: 'makers@sopt.org',
       github: 'yummygyudon',
-      linkedin:'https://www.linkedin.com/in/yummygyudon/',
+      linkedin:'yummygyudon',
     },
     {
       id: 4,

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

@@ -93,7 +93,6 @@ export const Timer = styled.div`
   align-items: center;
 
   /* 아이콘 위치 이동 방지*/
-  width: 128px;
   gap: 10px;
   justify-content: flex-start;
 

src/views/RecruitPage/components/ActivityReview/styles.ts

@@ -108,14 +108,14 @@ export const CardWrapper = styled.div`
   height: 300px;
   padding: 38px 34px;
   @media (max-width: 765.9px) {
-    min-width: 194px;
-    height: 139px;
-    padding: 20px;
+    min-width: 232px;
+    height: 218px;
+    padding: 40px 26px;
   }
   @media (max-width: 1299px) and (min-width: 766px) {
-    min-width: 320px;
-    height: 300px;
-    padding: 38px 34px;
+    min-width: 310px;
+    height: 250px;
+    padding: 40px 28px;
   }
 `;
 
@@ -131,12 +131,13 @@ export const CardTitle = styled.div`
   font-size: 25px;
   line-height: 40px;
   @media (max-width: 765.9px) {
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 16px;
+    line-height: 25px;
+    letter-spacing: -0.32px;
   }
   @media (max-width: 1299px) and (min-width: 766px) {
-    font-size: 25px;
-    line-height: 40px;
+    font-size: 18px;
+    line-height: 29px;
   }
 `;
 
@@ -147,17 +148,18 @@ export const DescWrapper = styled.div`
 `;
 
 export const Desc = styled.div`
-  color: #c8c8c8;
+  color: #848484;
   font-weight: 500;
-  font-size: 25px;
-  line-height: 40px;
+  font-size: 22px;
+  line-height: 32px;
   white-space: pre-wrap;
   @media (max-width: 765.9px) {
-    font-size: 12px;
+    font-size: 14px;
+    line-height: 22px;
   }
   @media (max-width: 1299px) and (min-width: 766px) {
-    font-size: 25px;
-    line-height: 40px;
+    font-size: 16px;
+    line-height: 23px;
     white-space: pre-wrap;
   }
 `;

src/views/RecruitPage/components/Contact/index.tsx

@@ -10,14 +10,14 @@ import { contactInDisplayOrder, contactMap } from './constant';
 
 const Contact = () => {
   return (
-    <div>
-      <Wrapper>
+    <Wrapper>
+      <SectionWrapper>
         <SectionTitleWrapper>
           <SectionTitleTranslate>Inquiry</SectionTitleTranslate>
           <SectionTitle>문의하기</SectionTitle>
         </SectionTitleWrapper>
         <SectionSubTitle>SOPT 지원에 대해 궁금한 것이 더 있나요?</SectionSubTitle>
-      </Wrapper>
+      </SectionWrapper>
       <GridWrapper>
         {contactInDisplayOrder.map((contact) => {
           const contactItem = contactMap[contact];
@@ -48,11 +48,18 @@ const Contact = () => {
           );
         })}
       </GridWrapper>
-    </div>
+    </Wrapper>
   );
 };
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+`;
+
+const SectionWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -76,7 +83,7 @@ const ItemWrapper = styled.div`
   }
   /* 모바일 뷰 */
   @media (max-width: 765.9px) {
-    gap: 36px;
+    gap: 16px;
   }
 `;
 
@@ -100,17 +107,19 @@ const GridWrapper = styled.div`
   grid-template-columns: auto auto;
   justify-content: space-between;
   row-gap: 80px;
+  column-gap: 160px;
   margin-top: 80px;
   /* 태블릿 뷰 */
   @media (max-width: 1299px) and (min-width: 766px) {
-    row-gap: 50px;
-    margin-top: 40px;
+    grid-template-columns: 1fr;
+    row-gap: 60px;
+    margin-top: 48px;
   }
   /* 모바일 뷰 */
   @media (max-width: 765.9px) {
     grid-template-columns: 1fr;
-    row-gap: 20px;
-    margin-top: 20px;
+    row-gap: 40px;
+    margin-top: 30px;
   }
 `;