Merge pull request #114 from LikeLionHGU/#86/ApiFix-최예라

#86/api fix 최예라
LikeLionHGU · Aug 6, 2024 · aad28a8 · aad28a8
2 parents 521b51b + 215032e
commit aad28a8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/src/components/LectureListPage/LectureListContent.jsx b/src/components/LectureListPage/LectureListContent.jsx
@@ -53,8 +53,12 @@ function LectureListContent({ courses }) {
         <Filter>
           <FilterContainerMain
             absolute={false}
+            transform="none"
+            top="0%"
+            left="0%"
             marginTop="0px"
             marginLeft="0px"
+            noPosition
           />
         </Filter>
         <CourseContainer>

diff --git a/src/components/LectureListPage/ListAllContent.jsx b/src/components/LectureListPage/ListAllContent.jsx
@@ -53,8 +53,12 @@ function LectureListContent() {
         <Filter>
           <FilterContainerMain
             absolute={false}
+            transform="none"
+            top="0%"
+            left="0%"
             marginTop="0px"
             marginLeft="0px"
+            noPosition
           />
         </Filter>
         <CourseContainer>

diff --git 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
@@ -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 (
-    <Wrapper absolute={absolute} marginTop={marginTop} marginLeft={marginLeft}>
+    <Wrapper
+      absolute={absolute}
+      marginTop={marginTop}
+      marginLeft={marginLeft}
+      top={top}
+      left={left}
+      transform={transform}
+      noPosition={noPosition}
+    >
       <Container>
         <Text>원하는 운동 강좌를 검색해보세요</Text>
         <CheckboxContainer>
@@ -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
@@ -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";
 `;