Merge pull request #42 from DguFarmSystem/fix/39-tracks-and-union-detail

Fix/39 tracks and union detail
DguFarmSystem · Feb 17, 2025 · 31f9fac · 31f9fac
2 parents 72f5c04 + 1b4b6db
commit 31f9fac
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 22 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
@@ -43,8 +43,9 @@ export const GoToUnion = styled.div<{ $isMobile: boolean }>`
   width: 100%;
   height: 36px;
   cursor: pointer;
+  gap: 3px;
 
-  margin-bottom: ${({ $isMobile }) => ($isMobile ? "0px" : "28px")};
+  margin-bottom: ${({ $isMobile }) => ($isMobile ? "5px" : "28px")};
 `;
 
 export const GoToUnionText = styled.p<{ $isMobile: boolean }>`
@@ -78,23 +79,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,8 +108,31 @@ 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% */
 `; 
+
+export const ButtonContainerMobile = styled.div`
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: end;
+  gap: 4px;
+
+  margin-bottom: 10px;
+`;
+
+export const TrackButtonMobile = styled.button<{ $isSelected: boolean }>`
+  color: ${({ $isSelected }) =>
+    $isSelected
+      ? 'var(--FarmSystem_Green07, #175321)'
+      : 'var(--FarmSystem_Green03, #7AB784)'};
+  text-align: center;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  padding: 0 3px;
+`;
diff --git a/src/pages/Main/Tracks/Tracks.tsx b/src/pages/Main/Tracks/Tracks.tsx
@@ -34,18 +34,33 @@ export default function Tracks() {
             <img src={OrangeArrow} alt="Go to Union" />
           </S.IconDiv>
         </S.GoToUnion>
-        <S.ButtonContainer $isMobile={isMobile}>
-          {TracksData.map((track, index) => (
-            <S.TrackButton
-              key={index}
-              $isSelected={selectedTrack.name === track.name}
-              onClick={() => setSelectedTrack(track)}
-              $isMobile={isMobile}
-            >
-              <S.TrackButtonText $isMobile={isMobile}>{track.name}</S.TrackButtonText>
-            </S.TrackButton>
-          ))}
-        </S.ButtonContainer>
+        {isApp ? (
+          <S.ButtonContainerMobile>
+            {TracksData.map((track, index) => (
+              <S.TrackButtonMobile
+                key={index}
+                $isSelected={selectedTrack.name === track.name}
+                onClick={() => setSelectedTrack(track)}
+              >
+                {track.name}
+              </S.TrackButtonMobile>
+            ))}
+          </S.ButtonContainerMobile>
+        ) : (
+          <S.ButtonContainer $isMobile={isMobile}>
+            {TracksData.map((track, index) => (
+              <S.TrackButton
+                key={index}
+                $isSelected={selectedTrack.name === track.name}
+                onClick={() => setSelectedTrack(track)}
+                $isMobile={isMobile}
+              >
+                <S.TrackButtonText $isMobile={isMobile}>{track.name}</S.TrackButtonText>
+              </S.TrackButton>
+            ))}
+          </S.ButtonContainer>
+        )}
+
         <InfoBox selectedTrack={selectedTrack}/>
       </S.CenterContainer>
     </S.Container>

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
@@ -37,6 +37,7 @@ export const ContentBoxBorder = styled.div<{ $isMobile: boolean }>`
 
 export const Content = styled.div<{ $isMobile: boolean }>`
   width: 100%;
+  min-height: 300px;
   height: 100%;
 
   background-color: var(--FarmSystem_White);
@@ -158,7 +159,7 @@ export const GradientContainer = styled.div<{ $isMobile: boolean, $isTablet: boo
 
 export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
   width: ${(props) => (props.$isMobile ? "280px" : props.$isTablet ? "400px" : "550px")};
-  height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")};
+  height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "400px" : "400px")};
 
   background: linear-gradient(
     270deg,
@@ -171,7 +172,7 @@ export const GradientLeft = styled.div<{ $isMobile: boolean, $isTablet: boolean
 
 export const GradientRight = styled.div<{ $isMobile: boolean, $isTablet: boolean }>`
   width: ${(props) => (props.$isMobile ? "280px" : props.$isTablet ? "400px" : "550px")};
-  height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "470px" : "400px")};
+  height: ${(props) => (props.$isMobile ? "33vh" : props.$isTablet ? "400px" : "400px")};
 
   background: linear-gradient(
     90deg,