Merge pull request #34 from DguFarmSystem/fix/33-fix-table-view-so-on

Fix/33_태블릿 뷰와 여러 이상 및 반영사항 수정
DguFarmSystem · Feb 16, 2025 · 3de6794 · 3de6794
2 parents d826980 + 9b06497
commit 3de6794
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 43 deletions.
diff --git a/src/components/Popup/Popup.styled.tsx b/src/components/Popup/Popup.styled.tsx
@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 
+
+//${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")}
+
 export const PopupOverlay = styled.div`
   position: fixed;
   inset: 0;
@@ -10,34 +13,37 @@ export const PopupOverlay = styled.div`
   z-index: 9999;
 `;
 
-export const PopupBox = styled.div`
+export const PopupBox = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   width: 500px;
+  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "260px" : $isTablet ? "420px" : "500px")};
   background-color: #fcfcfc;
   border: 3px solid #28723f;
   border-radius: 15px;
   text-align: center;
-  padding: 40px;
+  padding: ${({ $isMobile }) => ($isMobile ? "30px" : "40px")};
   z-index: 10000;
 `;
 
-export const PopupTitle = styled.p`
-  font-size: 22px;
+export const PopupTitle = styled.p<{ $isMobile: boolean; $isTablet: boolean }>`
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "16px" : $isTablet ? "20px" : "22px")};
   font-weight: 700;
   color: black;
   margin-bottom: 20px;
 `;
 
-export const PopupText = styled.p`
+export const PopupText = styled.p<{ $isMobile: boolean; $isTablet: boolean }>`
   font-size: 18px;
+  font-size: ${({ $isMobile, $isTablet }) => ( $isMobile ? "14px" : $isTablet ? "16px" : "18px")};
   color: black;
-  margin-bottom: 20px;
+  margin-bottom: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")};
 `;
 
-export const PopupCloseButton = styled.button`
+export const PopupCloseButton = styled.button<{ $isMobile: boolean; $isTablet: boolean }>`
   background-color: #28723f;
   color: #fcfcfc;
   font-size: 16px;
   padding: 10px 20px;
+  padding: ${({ $isMobile, $isTablet }) => ($isMobile ? "12px 24px" : $isTablet ? "12px 24px": "10px 20px")};
   border: none;
   border-radius: 10px;
   cursor: pointer;

diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import * as S from './Popup.styled';
+import useMediaQueries from '@/hooks/useMediaQueries';
 
 interface PopupProps {
   isOpen: boolean;
@@ -10,13 +11,14 @@ interface PopupProps {
 
 const Popup: React.FC<PopupProps> = ({ isOpen, onClose, title, content }) => {
   if (!isOpen) return null;
+  const { isMobile,isTablet } = useMediaQueries();
 
   return (
     <S.PopupOverlay onClick={onClose}>
-      <S.PopupBox onClick={(e) => e.stopPropagation()}>
-        <S.PopupTitle>{title}</S.PopupTitle>
-        <S.PopupText>{content}</S.PopupText>
-        <S.PopupCloseButton onClick={onClose}>확인</S.PopupCloseButton>
+      <S.PopupBox onClick={(e) => e.stopPropagation()} $isMobile={isMobile} $isTablet={isTablet}>
+        <S.PopupTitle $isMobile={isMobile} $isTablet={isTablet}>{title}</S.PopupTitle>
+        <S.PopupText $isMobile={isMobile} $isTablet={isTablet}>{content}</S.PopupText>
+        <S.PopupCloseButton onClick={onClose} $isMobile={isMobile} $isTablet={isTablet}>확인</S.PopupCloseButton>
       </S.PopupBox>
     </S.PopupOverlay>
   );

diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const AchievementsContainer = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   width: 100vw; 
-  min-width: 100%; 
+  min-width: 100%;
   padding: ${({ $isMobile }) => ($isMobile ? "40px 0" : "60px 0")};
   text-align: center;
   overflow-x: hidden; 
@@ -17,8 +17,8 @@ export const TitleArea = styled.div<{ $isMobile: boolean}>`
 `;
 
 export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
-  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "400px" : $isTablet ? "510px" : "670px")};
-  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "28px" : $isTablet ? "36px" : "48px")};
+  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "340px" : $isTablet ? "510px" : "670px")};
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "24px" : $isTablet ? "36px" : "48px")};
   color: #191919;
   font-weight: bold;
   margin-bottom: 40px;
@@ -64,7 +64,7 @@ export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean
     content: "";
     position: absolute;
     top: 0;
-    width: ${({ $isMobile, $isTablet }) => ($isMobile ? "160px" : $isTablet ? "250px" : "400px")};
+    width: ${({ $isMobile, $isTablet }) => ($isMobile ? "80px" : $isTablet ? "250px" : "400px")};
     height: 100%;
     z-index: 1;
     pointer-events: none;
@@ -96,8 +96,8 @@ export const StatsContainer = styled.div<{ $isMobile: boolean }>`
 const statColors = ["#62de88", "#5ccc7e", "#50b46f", "#48a164"];
 
 export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet: boolean }>`
-  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "180px" : $isTablet ? "220px" : "270px")};
-  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "180px" : $isTablet ? "220px" : "250px")};
+  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "270px")};
+  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "140px" : $isTablet ? "220px" : "250px")};
   border-radius: 20px;
   background-color: ${({ index }) => statColors[index]}; /* 각 박스마다 다른 색상 적용 */
   display: flex;
@@ -107,14 +107,14 @@ export const StatBox = styled.div<{ index: number; $isMobile: boolean; $isTablet
 `;
 
 export const StatNumber = styled.div<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "36px" : "48px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "32px" : "48px")};
   font-weight: bold;
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   color: #fff;
 `;
 
 export const StatLabel = styled.div<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "20px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")};
   font-weight: 500;
   color: #fff;
 `;
diff --git a/src/pages/Main/BottomInfo/BottomInfo.styles.ts b/src/pages/Main/BottomInfo/BottomInfo.styles.ts
@@ -9,10 +9,13 @@ export const BottomInfoContainer = styled.div<{ $isMobile: boolean; $isTablet: b
 `;
 
 export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
-  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "25px" : $isTablet ? "32px" : "36px")};
+  width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; /*아래 정보 타이틀 사이즈 조절*/
+  font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "22px" : $isTablet ? "32px" : "36px")};
   color: #191919;
   font-weight: bold;
-  margin-bottom: 30px;
+  text-align: center;
+  margin: 0 auto; /*마진을 통한 중앙 정렬*/
+  padding-bottom: 30px; /* 링크 버튼과 거리 두기*/
 `;
 
 export const Highlight = styled.span`
@@ -92,15 +95,15 @@ export const ApplyButton = styled.button<{ $isMobile: boolean }>`
 `;
 
 
-export const NotificationContainer = styled.div`
+export const NotificationContainer = styled.div<{ $isMobile: boolean }>`
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
-  padding-right: 20px;
+  padding-right: ${({ $isMobile }) => ($isMobile ? "12px" : "20px")};
 `;
 
 export const NotificationLink = styled.a<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "18px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "18px")};
   color: #333;
   text-decoration: none;
   font-weight: 500;

diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx
@@ -52,7 +52,7 @@ const BottomInfo = () => {
         <S.ButtonContainer>
           <S.ApplyButton $isMobile={isMobile} onClick={() => setPopupOpen(true)}>지원하기</S.ApplyButton>
         </S.ButtonContainer>
-        <S.NotificationContainer>
+        <S.NotificationContainer $isMobile={isMobile}>
           <S.NotificationLink $isMobile={isMobile} href={googleFormLink} target="_blank" rel="noopener noreferrer">
             4기 모집 오픈 알림 신청 ➝
           </S.NotificationLink>

diff --git a/src/pages/Main/Tracks/Tracks.styled.ts b/src/pages/Main/Tracks/Tracks.styled.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const Container = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
-  width: 100%;
+  width: ${({ $isMobile }) => ($isMobile ? "95%" : "100%")}; /* 모바일에서 여백 증가 */
   max-width: 1200px;
   margin: 0 auto;
   padding: ${({ $isMobile }) => ($isMobile ? "10px" : "20px")};
@@ -85,7 +85,7 @@ export const TrackButton = styled.button<{ $isSelected: boolean; $isMobile: bool
   display: flex;
   width: ${({ $isMobile, $isSelected }) => 
     $isMobile ? ($isSelected ? "200px" : "160px") : ($isSelected ? "260px" : "260px")};
-  height: ${({ $isMobile }) => ($isMobile ? "40px" : "75px")};
+  height: ${({ $isMobile }) => ($isMobile ? "32px" : "75px")};
   padding: 10px 0;
   justify-content: center;
   align-items: center;

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
@@ -130,24 +130,26 @@ export const Li = styled.li<{
   text-align: center;
 `;
 
-export const GradientContainer = styled.div<{ $isMobile: boolean }>`
+export const GradientContainer = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
   position: absolute;
   top: 0;
-  height: 500px;
 
   //높이 문제로 정상적으로 진행 못했던 것 같아서 모바일 뷰로 처리해서 해결 했습니다.
-  height: ${(props) => (props.$isMobile ? "330px" : "500px")};
+  height: ${(props) => (props.$isMobile ? "300px" : props.$isTablet ? "470px": "500px")};
 
   // 배경 Gradient를 모바일에서도 보이게 하려면 이 부분 고쳐주시면 됩니다!
   display: flex;
-  gap: 80px;
+
+  /*gap 차이로 인해 2개의 사각형 보이기 힘듦*/
+  gap: ${(props) => (props.$isMobile ? "60vw" : props.$isTablet ? "300px": "80px")};
   justify-content: center;
   align-items: center;
 `;
 
-export const GradientLeft = styled.div<{ $isMobile: boolean }>`
+export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
   width: ${(props) => (props.$isMobile ? "240px" : "560px")};
-  height: ${(props) => (props.$isMobile ? "200px" : "400px")};
+  height: ${(props) => (props.$isMobile ? "30vh" : props.$isTablet ? "300px" : "400px")};
+  /*일단 최대한 맞추어봤습니다. QA진행때 확인 다시하면 좋을 것 같습니다.*/
 
   background: linear-gradient(
     270deg,
@@ -158,9 +160,9 @@ export const GradientLeft = styled.div<{ $isMobile: boolean }>`
   border-radius: 20px;
 `;
 
-export const GradientRight = styled.div<{ $isMobile: boolean }>`
+export const GradientRight = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
   width: ${(props) => (props.$isMobile ? "240px" : "560px")};
-  height: ${(props) => (props.$isMobile ? "200px" : "400px")};
+  height: ${(props) => (props.$isMobile ? "30vh" : props.$isTablet ? "300px" : "400px")};
   
   background: linear-gradient(
     90deg,

diff --git a/src/pages/Main/Union/ContentBox.tsx b/src/pages/Main/Union/ContentBox.tsx
@@ -2,13 +2,13 @@ import * as S from "./ContentBox.styled";
 import useMediaQueries from "@/hooks/useMediaQueries";
 
 export default function ContentBox() {
-  const { isTiny, isMobile } = useMediaQueries();
+  const { isTiny, isMobile, isTablet } = useMediaQueries();
 
   return (
     <S.Container $isMobile={isMobile}>
-      <S.GradientContainer $isMobile={isMobile}>
-        <S.GradientLeft $isMobile={isMobile} />
-        <S.GradientRight $isMobile={isMobile} />
+      <S.GradientContainer $isMobile={isMobile} $isTablet={isTablet}>
+        <S.GradientLeft $isMobile={isMobile} $isTablet={isTablet}/>
+        <S.GradientRight $isMobile={isMobile} $isTablet={isTablet}/>
       </S.GradientContainer>
       <S.ContentBoxBorder $isMobile={isMobile}>
         <S.Content $isMobile={isMobile}>

diff --git a/src/pages/Main/index.styled.tsx b/src/pages/Main/index.styled.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const MainContainer = styled.div`
+export const MainContainer = styled.div<{ $isMobile: boolean }>`
   position: relative;
   width: 100vw;
   min-height: 100vh;
@@ -11,7 +11,7 @@ export const MainContainer = styled.div`
     content: "";
     position: absolute;
     bottom: 0; 
-    width: 10px; 
+    width: ${(props) => (props.$isMobile ? "6px" : "10px")};
     height: 40%; 
     background: linear-gradient(to bottom, 
       rgba(255, 102, 0, 0) 0%, 

diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
@@ -4,11 +4,13 @@ import Union from "./Union/Union";
 import Achievements from "./Achievements/Achievements";
 import BottomInfo from "./BottomInfo/BottomInfo";
 import FarmSystemNav from "./FarmSyetemNav/FarmSystemNav";
-import * as S from "./index.styled"; 
+import * as S from "./index.styled";
+import useMediaQueries from "@/hooks/useMediaQueries";
 
 export default function Main() {
+  const { isMobile } = useMediaQueries();
   return (
-    <S.MainContainer> {/* 배경 그라데이션 적용 */}
+    <S.MainContainer $isMobile={isMobile} > {/* 배경 그라데이션 적용 */}
       <FarmSystemNav />
       <Intro />
       <Tracks />