fix: 태블릿, 앱뷰 등에서 버튼 잘 보이게 수정

DguFarmSystem · Feb 17, 2025 · f0ac495 · f0ac495
1 parent b3ca3a8
commit f0ac495
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/pages/Main/Tracks/InfoBox.styled.ts b/src/pages/Main/Tracks/InfoBox.styled.ts
@@ -202,10 +202,13 @@ export const ProfessorContent = styled.div<{ $isMobile: boolean }>`
   margin-top: ${({ $isMobile }) => ($isMobile ? "0" : "20px")};
 `;
 
-export const ProfileContainer = styled.div<{  $isDesktop: boolean;
-  $isMobile: boolean; $isTablet: boolean;}>`
+export const ProfileContainer = styled.div<{
+  $isDesktop: boolean;
+  $isMobile: boolean;
+  $isTablet: boolean;
+}>`
   width: ${({ $isDesktop }) => ($isDesktop ? "50%" : "100%")};
-  heigt: 300px;
+  height: 300px;
   display: grid;
   grid-template-columns: ${({ $isDesktop, $isTablet, $isMobile }) =>
     $isDesktop ? "120px 1fr" : $isTablet ? "100px 1fr" : $isMobile ? "50px 1fr" : "50px 1fr"};  gap: ${({ $isDesktop }) => ($isDesktop ? "12px" : "8px")};

diff --git a/src/pages/Main/Tracks/Tracks.styled.ts b/src/pages/Main/Tracks/Tracks.styled.ts
@@ -78,23 +78,23 @@ export const ButtonContainer = styled.div <{ $isMobile: boolean }>`
   width: 100%;
   height: 60px;
   gap: ${({ $isMobile }) => ($isMobile ? "7px" : "20px")}; /* 모바일에서는 간격 축소 */
-  margin-bottom: 30px;
+  margin-bottom: ${({ $isMobile }) => ($isMobile ? "10px" : "30px")};
 `;
 
 export const TrackButton = styled.button<{ $isSelected: boolean; $isMobile: boolean }>`
   display: flex;
   width: ${({ $isMobile, $isSelected }) => 
     $isMobile ? ($isSelected ? "200px" : "160px") : ($isSelected ? "260px" : "260px")};
   height: ${({ $isMobile }) => ($isMobile ? "32px" : "75px")};
-  padding: 10px 0;
+  padding:  ${({ $isMobile }) => ($isMobile ? "1px 0" : "10px 0")};
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   background: ${({ $isSelected }) =>
     $isSelected
       ? 'var(--FarmSystem_Green05, #248634)'
       : 'var(--FarmSystem_Green04, #49AA59)'};
-  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  box-shadow: ${({ $isMobile }) => ($isMobile ? "none" : "4px 4px 4px 0px rgba(0, 0, 0, 0.25)")};
 
   transition: transform 0.3s ease, background 0.3s ease;
 
@@ -107,7 +107,7 @@ export const TrackButton = styled.button<{ $isSelected: boolean; $isMobile: bool
 
 export const TrackButtonText = styled.p<{ $isMobile: boolean }>`
   color: var(--FarmSystem_White, #FCFCFC);
-  font-size: ${({ $isMobile }) => ($isMobile ? "9px" : "20px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "10px" : "20px")};
   font-style: normal;
   font-weight: 400;
   line-height: 15px; /* 200% */
@@ -120,7 +120,6 @@ export const ButtonContainerMobile = styled.div`
   justify-content: end;
   gap: 4px;
 
-  margin-top: 10px;
   margin-bottom: 10px;
 `;
 

diff --git a/src/pages/Main/Tracks/Tracks.tsx b/src/pages/Main/Tracks/Tracks.tsx
@@ -34,7 +34,7 @@ export default function Tracks() {
             <img src={OrangeArrow} alt="Go to Union" />
           </S.IconDiv>
         </S.GoToUnion>
-        {isMobile ? (
+        {isApp ? (
           <S.ButtonContainerMobile>
             {TracksData.map((track, index) => (
               <S.TrackButtonMobile