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";
`;