From 98dbbc9834a035a55cd9c7c009993cbeb077e1db Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 2 Oct 2024 23:24:44 +0900 Subject: [PATCH] feat: support mobile design --- src/components/Dropdown/Dropdown.tsx | 10 +-- src/components/Footer/Footer.tsx | 44 +++++++++--- src/components/Header/Header/Header.tsx | 8 +++ .../OperatorDetails/OperatorDetails.tsx | 68 ++++++++++++------- src/containers/Explore/ExploreContainer.tsx | 21 +++++- 5 files changed, 109 insertions(+), 42 deletions(-) diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 845b5cd..dfe7af1 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -97,7 +97,11 @@ const Dropdown: React.FC = ({ const DropdownContainer = styled.div` position: relative; display: inline-block; - width: 200px; + width: 150px; + + @media (max-width: 768px) { + width: 100%; + } ` const DropdownHeader = styled.div<{ isExpanded: boolean }>` @@ -109,11 +113,9 @@ const DropdownHeader = styled.div<{ isExpanded: boolean }>` line-height: 20px; cursor: pointer; - border: 1px solid white; - border-left: none; - background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')}; color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')}; + outline: 1px solid white; &:hover { background-color: white; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 01dfeeb..fcb2c0c 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -6,8 +6,16 @@ interface FooterProps {} const Footer: React.FC = () => { return ( - Logos Operators - - - Built by{' '} - - IFT - - + ) } @@ -68,9 +70,29 @@ const Container = styled.footer` text-decoration: underline; } - @media (max-width: 991px) { + @media (max-width: 768px) { + flex-direction: column-reverse; max-width: 100%; - margin-top: 40px; + margin-top: 200px; + margin-bottom: 16px; + height: auto; + + .footer-nav { + position: relative; + left: unset; + bottom: unset; + transform: unset; + } + } +` + +const FirstRow = styled.div` + display: flex; + width: 100%; + justify-content: space-between; + + @media (max-width: 768px) { + margin-top: 31px; } ` diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx index 9f8bbde..de3de1b 100644 --- a/src/components/Header/Header/Header.tsx +++ b/src/components/Header/Header/Header.tsx @@ -42,11 +42,19 @@ const Container = styled.header` align-items: center; justify-content: space-between; position: relative; + + @media (max-width: 768px) { + margin-top: 24px; + } ` const Logo = styled.img` object-fit: contain; width: 89px; + + @media (max-width: 768px) { + width: 74px; + } ` const UserActions = styled.div` diff --git a/src/components/Operator/OperatorDetails/OperatorDetails.tsx b/src/components/Operator/OperatorDetails/OperatorDetails.tsx index 2fa72f7..8ce80d1 100644 --- a/src/components/Operator/OperatorDetails/OperatorDetails.tsx +++ b/src/components/Operator/OperatorDetails/OperatorDetails.tsx @@ -105,7 +105,7 @@ const OperatorDetails: React.FC = ({ - + {/* {isIncripted && operatorInfo.map((info, index) => ( @@ -113,7 +113,7 @@ const OperatorDetails: React.FC = ({ {info.value} ))} - + */} ) @@ -125,9 +125,8 @@ const Container = styled.section` gap: 0 16px; width: 100%; - @media (max-width: ${breakpoints.md}px) { + @media (max-width: ${breakpoints.sm}px) { grid-template-columns: repeat(1, 1fr); - margin-top: 40px; } ` @@ -137,12 +136,12 @@ const OperatorImage = styled.div` & > img { width: 100%; height: auto; - min-height: 400px; + aspect-ratio: 1 / 1; } grid-column: 1 / 13; - @media (max-width: ${breakpoints.md}px) { + @media (max-width: ${breakpoints.sm}px) { grid-column: 1 / 2; } ` @@ -150,7 +149,7 @@ const OperatorImage = styled.div` const OperatorInfo = styled.div` grid-column: 15 / 25; - @media (max-width: ${breakpoints.md}px) { + @media (max-width: ${breakpoints.sm}px) { grid-column: 1 / 2; } ` @@ -190,6 +189,14 @@ const OperatorTitle = styled.h1` font-weight: 400; line-height: 40px; margin: 0; + + @media (max-width: ${breakpoints.sm}px) { + margin-top: 48px; + font-size: 20px; + font-weight: 400; + line-height: 28px; + letter-spacing: 0.2px; + } ` // const OperatorSubtitle = styled.div` @@ -238,28 +245,37 @@ const ArchetypeSection = styled.div` padding: 16px 8px; margin-top: 24px; margin-bottom: 24px; -` -const DetailsList = styled.div` - display: flex; - flex-direction: column; - gap: 2px; - margin-top: 24px; -` - -const DetailItem = styled.div` - display: flex; - justify-content: space-between; - background-color: var(--grey-900); - padding: 16px 8px; -` - -const DetailLabel = styled.span` font-size: 14px; + line-height: 20px; + letter-spacing: 0.14px; + + @media (max-width: ${breakpoints.sm}px) { + margin-top: 16px; + margin-bottom: 16px; + } ` -const DetailValue = styled.span` - font-size: 14px; -` +// const DetailsList = styled.div` +// display: flex; +// flex-direction: column; +// gap: 2px; +// margin-top: 24px; +// ` + +// const DetailItem = styled.div` +// display: flex; +// justify-content: space-between; +// background-color: var(--grey-900); +// padding: 16px 8px; +// ` + +// const DetailLabel = styled.span` +// font-size: 14px; +// ` + +// const DetailValue = styled.span` +// font-size: 14px; +// ` export default OperatorDetails diff --git a/src/containers/Explore/ExploreContainer.tsx b/src/containers/Explore/ExploreContainer.tsx index 19ce2a4..7888f8c 100644 --- a/src/containers/Explore/ExploreContainer.tsx +++ b/src/containers/Explore/ExploreContainer.tsx @@ -126,6 +126,16 @@ const Container = styled.main` font-size: 40px; line-height: 48px; margin-top: 70px; + letter-spacing: 0.4px; + } + + @media (max-width: 768px) { + .section-title { + margin-top: 60px; + font-size: 32px; + line-height: 40px; + letter-spacing: 0.32px; + } } ` @@ -135,10 +145,19 @@ const DropdownContainer = styled.div` align-items: center; max-width: 911px; + flex-wrap: wrap; margin: 70px auto 0 auto; - & > div:first-of-type { + @media (max-width: 768px) { + display: grid; + width: 100%; + border-left: 1px solid white; + border-right: 1px solid white; + + margin: 60px auto 0 auto; + + grid-template-columns: repeat(2, 1fr); } `