diff --git a/src/components/LectureListPage/LectureListContent.jsx b/src/components/LectureListPage/LectureListContent.jsx index 1852274..3940453 100644 --- a/src/components/LectureListPage/LectureListContent.jsx +++ b/src/components/LectureListPage/LectureListContent.jsx @@ -53,8 +53,12 @@ function LectureListContent({ courses }) { diff --git a/src/components/LectureListPage/ListAllContent.jsx b/src/components/LectureListPage/ListAllContent.jsx index a89a94a..d56e00a 100644 --- a/src/components/LectureListPage/ListAllContent.jsx +++ b/src/components/LectureListPage/ListAllContent.jsx @@ -53,8 +53,12 @@ function LectureListContent() { diff --git a/src/components/MainPage/BannerMain.jsx b/src/components/MainPage/BannerMain.jsx index e0d472e..c5e6a4e 100644 --- a/src/components/MainPage/BannerMain.jsx +++ b/src/components/MainPage/BannerMain.jsx @@ -91,7 +91,7 @@ const Wrapper = styled.div` const BannerBg = styled.div` background-image: url(${mainBannerImg}); - width: 108%; + width: 109%; height: 118%; background-size: cover; background-position: left; diff --git a/src/components/MainPage/FilterContainerMain.jsx b/src/components/MainPage/FilterContainerMain.jsx index 52aa999..b61e277 100644 --- a/src/components/MainPage/FilterContainerMain.jsx +++ b/src/components/MainPage/FilterContainerMain.jsx @@ -12,7 +12,15 @@ import { selectedDisabilityTypeState } from "../../atom"; import { selectedDateState } from "../../atom"; import { selectedPriceState } from "../../atom"; -function FilterContainerMain({ absolute = true, marginTop, marginLeft }) { +function FilterContainerMain({ + absolute = true, + marginTop, + marginLeft, + top, + left, + transform, + noPosition, +}) { const navigate = useNavigate(); const [checked, setChecked] = useState({ @@ -588,7 +596,15 @@ function FilterContainerMain({ absolute = true, marginTop, marginLeft }) { }; return ( - + 원하는 운동 강좌를 검색해보세요 @@ -783,13 +799,20 @@ const Wrapper = styled.div` width: 1000px; height: auto; margin-top: ${(props) => props.marginTop || "320px"}; - margin-left: ${(props) => props.marginLeft || "220px"}; - /* left: 40%; */ - /* transform: translateX(-50%); */ + /* margin-left: ${(props) => props.marginLeft || "220px"}; */ + margin-left: ${(props) => props.marginLeft || "0px"}; background-color: white; z-index: 10000; border-radius: 10px; padding-bottom: 28px; + // 조건부 스타일 적용 + ${(props) => + !props.noPosition && + ` + top: ${props.top || "15%"}; + left: ${props.left || "50%"}; + transform: translate(-50%, -50%); + `} `; const Container = styled.div` diff --git a/src/components/MainPage/HeaderMain.jsx b/src/components/MainPage/HeaderMain.jsx index 3bf9100..32fb0b7 100644 --- a/src/components/MainPage/HeaderMain.jsx +++ b/src/components/MainPage/HeaderMain.jsx @@ -137,12 +137,14 @@ function HeaderMain() { export default HeaderMain; const Wrapper = styled.div` + /* border: 1px solid red; */ height: 98px; font-size: 20px; display: flex; justify-content: center; position: absolute; - width: 1440px; + width: 100%; + min-width: 1440px; font-family: "PretendardRegular"; `;