#39 <design> : Modal을 반응형으로 css 변경

WeImproveOurSkill · Apr 17, 2024 · ffdd07a · ffdd07a
1 parent a6aca06
commit ffdd07a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/fe/src/app/_component/Modal.css.ts b/fe/src/app/_component/Modal.css.ts
@@ -5,12 +5,14 @@ export const modalContainer = style({
   top:'80%', //모달을 화면 하단에 놓기 위함
   left: '50%',
   width:'80%',
-  height:'150px',
+  height: '15%',
+  minHeight: '130px',
+  maxHeight:'180px', // 반응형을 위한 코드
   padding:'10px',
   backgroundColor: "white",
   borderRadius:'10px',
   border: '1px solid lightGray',
   boxShadow:'0 2px 3px 0 rgba(34,36,38,0.15)',//테두리 그림자 
-  transform:'translate(-50%)' // 모달 가로축 중심으로 놓는 코드
+  transform:'translate(-50%)', // 모달 가로축 중심으로 놓는 코드
 
 });
diff --git a/fe/src/app/_component/StoreDetail.css.ts b/fe/src/app/_component/StoreDetail.css.ts
@@ -1,12 +1,20 @@
 import {globalStyle, style} from "@vanilla-extract/css";
 
 export const displayModal = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
   width: '100%',
   height: '100%',
+  padding: '10px',
+});
+
+export const info = style({
+ paddingBottom: "10px"
 });
 
 export const payInfo = style({
-  padding: '5px',
+  // padding: '5px',
   display: "flex",
   justifyContent: "space-between"
 });