From 2a9a06b570d11513fd3af0e55ab5dae49b4e3b72 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Mon, 17 Feb 2025 15:41:12 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20union=20=EC=84=B9=EC=85=98=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20=EB=B8=94=EB=9F=AC=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=EC=97=90=EC=84=9C=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Union/ContentBox.styled.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts index 93abb81..ea5bdf9 100644 --- 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, From b3ca3a8053878dfc81ab263f5975e3183dbce1bb Mon Sep 17 00:00:00 2001 From: Yunseok Date: Mon, 17 Feb 2025 15:55:18 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=ED=8A=B8=EB=9E=99=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=20=EC=A0=84=ED=99=98=20=EB=B2=84=ED=8A=BC=20=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=A7=88=EB=8C=80=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Tracks/Tracks.styled.ts | 24 ++++++++++++++++ src/pages/Main/Tracks/Tracks.tsx | 39 ++++++++++++++++++-------- 2 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/pages/Main/Tracks/Tracks.styled.ts b/src/pages/Main/Tracks/Tracks.styled.ts index b089e65..2bc0dbb 100644 --- a/src/pages/Main/Tracks/Tracks.styled.ts +++ b/src/pages/Main/Tracks/Tracks.styled.ts @@ -112,3 +112,27 @@ export const TrackButtonText = styled.p<{ $isMobile: boolean }>` 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-top: 10px; + 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; +`; \ No newline at end of file diff --git a/src/pages/Main/Tracks/Tracks.tsx b/src/pages/Main/Tracks/Tracks.tsx index aed6cf0..f6953a9 100644 --- a/src/pages/Main/Tracks/Tracks.tsx +++ b/src/pages/Main/Tracks/Tracks.tsx @@ -34,18 +34,33 @@ export default function Tracks() { Go to Union - - {TracksData.map((track, index) => ( - setSelectedTrack(track)} - $isMobile={isMobile} - > - {track.name} - - ))} - + {isMobile ? ( + + {TracksData.map((track, index) => ( + setSelectedTrack(track)} + > + {track.name} + + ))} + + ) : ( + + {TracksData.map((track, index) => ( + setSelectedTrack(track)} + $isMobile={isMobile} + > + {track.name} + + ))} + + )} + From f0ac495b816f97de97de3dbf1751e388ce292f02 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Mon, 17 Feb 2025 16:03:11 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=ED=83=9C=EB=B8=94=EB=A6=BF,=20?= =?UTF-8?q?=EC=95=B1=EB=B7=B0=20=EB=93=B1=EC=97=90=EC=84=9C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=9E=98=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Tracks/InfoBox.styled.ts | 9 ++++++--- src/pages/Main/Tracks/Tracks.styled.ts | 9 ++++----- src/pages/Main/Tracks/Tracks.tsx | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/Main/Tracks/InfoBox.styled.ts b/src/pages/Main/Tracks/InfoBox.styled.ts index 94a2b7b..b2c9ec4 100644 --- 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 index 2bc0dbb..e3243a3 100644 --- a/src/pages/Main/Tracks/Tracks.styled.ts +++ b/src/pages/Main/Tracks/Tracks.styled.ts @@ -78,7 +78,7 @@ 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 }>` @@ -86,7 +86,7 @@ export const TrackButton = styled.button<{ $isSelected: boolean; $isMobile: bool 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; @@ -94,7 +94,7 @@ export const TrackButton = styled.button<{ $isSelected: boolean; $isMobile: bool $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 index f6953a9..d0cc685 100644 --- a/src/pages/Main/Tracks/Tracks.tsx +++ b/src/pages/Main/Tracks/Tracks.tsx @@ -34,7 +34,7 @@ export default function Tracks() { Go to Union - {isMobile ? ( + {isApp ? ( {TracksData.map((track, index) => ( Date: Mon, 17 Feb 2025 16:18:38 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20union=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EC=A1=B0=EA=B8=88=20=EB=8B=A4=EB=93=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Tracks/Tracks.styled.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/Main/Tracks/Tracks.styled.ts b/src/pages/Main/Tracks/Tracks.styled.ts index e3243a3..af4cb14 100644 --- 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 }>`