fix: 메인페이지 필터, 강좌 리스트 페이지 필터 스타일 변경, 중앙 정렬

LikeLionHGU · Aug 6, 2024 · 2d76a03 · 2d76a03
1 parent 49cf71d
commit 2d76a03
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
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/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({
@@ -579,7 +587,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>
@@ -774,13 +790,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`