Feat: 4k 모니터 반응형 구현 및 연간 일정 중앙정렬 맞춤

cau-likelion-org · Jan 21, 2024 · 084eef7 · 084eef7
1 parent f2cfce3
commit 084eef7
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 12 deletions.
diff --git a/src/components/home/activity/ActivitySection.tsx b/src/components/home/activity/ActivitySection.tsx
@@ -72,6 +72,9 @@ const Wrapper = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
+  @media (min-width: 1850px) {
+    margin-top: 20rem;
+  }
 `;
 
 const ThreeCircleWrapper = styled.div`

diff --git a/src/components/home/activity/component/CircleComponent.tsx b/src/components/home/activity/component/CircleComponent.tsx
@@ -24,7 +24,7 @@ const Wrapper = styled.div`
   justify-content: center;
   width: 250px;
   height: 250px;
-  @media (max-width: 1376px) {
+  @media (max-width: 1540px) {
     width: 180px;
     height: 180px;
   }
@@ -84,7 +84,7 @@ const ImageWrapper = styled.div`
   position: relative;
   width: 230px;
   height: 230px;
-  @media (max-width: 1376px) {
+  @media (max-width: 1540px) {
     width: 160px;
     height: 160px;
   }

diff --git a/src/components/home/introduction/IntroduceSection.tsx b/src/components/home/introduction/IntroduceSection.tsx
@@ -10,7 +10,7 @@ import IntroLion from '@image/소개_인사하는 사자.gif';
 import FadeInComponent from '@home/common/FadeInComponent';
 const text =
   '중앙대학교 멋쟁이사자처럼은 중앙대 학생들로 이루어진 IT 창업 동아리입니다. \n테크 기반의 아이디어를 실현하기위해 기획, 디자인, 개발 트랙 간의 끊임없는 소통을 추구하며\n다양한 프로젝트 활동을 통해 기술적 성장을 도모하고 협업 역량을 끌어올립니다.';
-const IntroduceSection = ({ innerRef }: { innerRef: MutableRefObject<null>; }) => {
+const IntroduceSection = ({ innerRef }: { innerRef: MutableRefObject<null> }) => {
   return (
     <FadeInComponent>
       <Wrapper ref={innerRef}>
@@ -35,6 +35,9 @@ const Wrapper = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
+  @media (min-width: 1850px) {
+    margin-top: 20rem;
+  }
 `;
 
 const ImageWrapper = styled.div`

diff --git a/src/components/home/plan/PlanSection.tsx b/src/components/home/plan/PlanSection.tsx
@@ -35,6 +35,9 @@ const Wrapper = styled.div`
   align-items: center;
   width: 100%;
   gap: 40px;
+  @media (min-width: 1850px) {
+    margin-top: 20rem;
+  }
 `;
 const AlignWrapper = styled.div`
   width: 100%;

diff --git a/src/components/home/plan/component/PlanBox.tsx b/src/components/home/plan/component/PlanBox.tsx
@@ -33,21 +33,21 @@ const PlanBox = () => {
   return (
     <BoxContainer>
       <ItemWrapper>
-        <RowWrapper>
+        <DateWrapper>
           {CurriculumData.map((item, i) => (
             <PlanDateItem key={i} date={item.date} />
           ))}
-        </RowWrapper>
+        </DateWrapper>
 
         <RowWrapper>
           <PlanDotItem />
         </RowWrapper>
 
-        <RowWrapper>
+        <TitleWrapper>
           {CurriculumData.map((item, i) => (
             <PlanTitleItem key={i} title={item.title} />
           ))}
-        </RowWrapper>
+        </TitleWrapper>
       </ItemWrapper>
     </BoxContainer>
   );
@@ -83,8 +83,26 @@ const RowWrapper = styled.div`
   display: flex;
   width: 100%;
   justify-content: space-between;
+  position: relative;
+
+  align-items: center;
+`;
 
+const DateWrapper = styled.div`
+  display: flex;
+  width: 106%;
+  margin-left: 0.5rem;
+  justify-content: space-between;
   position: relative;
 
   align-items: center;
 `;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  width: 105%;
+  margin-right: 1.5rem;
+  justify-content: space-between;
+  position: relative;
+  align-items: center;
+`;
diff --git a/src/components/home/plan/component/PlanDateItem.tsx b/src/components/home/plan/component/PlanDateItem.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Primary } from '@utils/constant/color';
 
-const PlanDateItem = ({ date }: { date: string; }) => {
+const PlanDateItem = ({ date }: { date: string }) => {
   return <Date>{date}</Date>;
 };
 
@@ -13,15 +13,15 @@ const Date = styled.div`
   font-style: normal;
   font-weight: 500;
   font-size: 1.5rem;
-  @media(min-width:900px){
+  @media (min-width: 900px) {
     line-height: 32px;
   }
   text-align: center;
   color: ${Primary.default};
   background: #e3e4ff;
   border-radius: 50px;
   padding: 5px 18px;
-  @media(max-width: 900px) {
+  @media (max-width: 900px) {
     padding: 2px 5px;
     border-radius: 15px;
     font-size: 1rem;

diff --git a/src/components/home/project/ProjectSection.tsx b/src/components/home/project/ProjectSection.tsx
@@ -22,7 +22,7 @@ const ProjectSection = () => {
       <Wrapper>
         <TitleWrapper>
           <Title>프로젝트 소개</Title>
-          <Text>멋쟁이 사자처럼에서 탄생한 서비스들을 소개합니다. </Text>
+          <Text>멋쟁이사자처럼에서 탄생한 서비스들을 소개합니다. </Text>
         </TitleWrapper>
         <ProjectSlider />
         <ButtonWrapper>
@@ -39,11 +39,14 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 const TitleWrapper = styled.div`
-  margin-top: 4rem;
+  margin-top: 6rem;
   display: flex;
   margin-bottom: 4rem;
   align-items: center;
   flex-direction: column;
+  @media (min-width: 1850px) {
+    margin-top: 30rem;
+  }
 `;
 const Title = styled.div`
   font-family: 'GmarketSans';

diff --git a/src/components/home/track/TrackSection.tsx b/src/components/home/track/TrackSection.tsx
@@ -76,6 +76,9 @@ const TitleText = styled.div`
   @media (max-width: 900px) {
     font-size: 2.5rem;
   }
+  @media (min-width: 1850px) {
+    margin-top: 30rem;
+  }
 `;
 
 const Text = styled.div`