Merge pull request #1008 from 42organization/GGFE-250-매뉴얼-스타일-수정

[GGFE-250] 매뉴얼 스타일 수정
42organization · Sep 14, 2023 · 1980ffa · 1980ffa
2 parents d1ebabe + 771ed76
commit 1980ffa
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/styles/modal/match/MatchManualModal.module.scss b/styles/modal/match/MatchManualModal.module.scss
@@ -4,10 +4,13 @@
   @include modalContainer('DARKPURPLE');
   width: 80vw;
   max-width: 20rem;
+  justify-content: flex-start;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .title {
-  margin: 2.75rem 0;
+  margin-bottom: 2rem;
   font-family: 'Lexend';
   font-size: 2.25rem;
   color: #f8f8ff;
@@ -16,22 +19,21 @@
 
 .matchRadioBoxWrap {
   box-sizing: border-box;
-  width: 100%;
+  width: 90%;
 }
 
 .ruleList {
   width: 100%;
-  height: 60vh;
-  max-height: 285px;
+  height: 45vh;
   padding: 1rem;
   margin: 0 0.6rem 1.75rem;
   overflow-y: scroll;
   font-size: 1.2rem;
   font-weight: 700;
   color: black;
   list-style: none;
-  background: #ffffff;
-  border-radius: 0px 0px 10px 10px;
+  background: #fdebf8;
+  border-radius: 10px;
 
   > li {
     margin-top: 1.2rem;
@@ -64,9 +66,11 @@
   margin-left: 0.8rem;
   font-size: 0.9rem;
   font-weight: 400;
+  word-break: keep-all;
 
   > li {
     margin: 0.4rem 0;
+    line-height: 150%;
     white-space: pre-wrap;
     list-style: square;
   }

diff --git a/styles/modal/store/StoreManualModal.module.scss b/styles/modal/store/StoreManualModal.module.scss
@@ -4,10 +4,13 @@
   @include modalContainer('DARKPURPLE');
   width: 80vw;
   max-width: 20rem;
+  justify-content: flex-start;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .title {
-  margin: 2.75rem 0;
+  margin-bottom: 2rem;
   font-family: 'Lexend';
   font-size: 2.25rem;
   color: #f8f8ff;
@@ -21,17 +24,16 @@
 
 .ruleList {
   width: 100%;
-  height: 60vh;
-  max-height: 285px;
+  height: 45vh;
   padding: 1rem;
   margin: 0 0.6rem 1.75rem;
   overflow-y: scroll;
   font-size: 1.2rem;
   font-weight: 700;
   color: black;
   list-style: none;
-  background: #ffffff;
-  border-radius: 0px 0px 10px 10px;
+  background: #fdebf8;
+  border-radius: 10px;
 
   > li {
     margin-top: 1.2rem;
@@ -41,8 +43,9 @@
 
 .ruleTitle {
   display: flex;
-  align-items: center;
+  word-break: keep-all;
   vertical-align: middle;
+  align-items: center;
   &.withIcon {
     :first-child {
       min-width: 1.5rem;
@@ -64,16 +67,18 @@
   margin-left: 0.8rem;
   font-size: 0.9rem;
   font-weight: 400;
+  word-break: keep-all;
 
   > li {
     margin: 0.4rem 0;
+    line-height: 130%;
     white-space: pre-wrap;
     list-style: square;
   }
   .ruleContent {
     padding-left: 0.5rem;
     line-height: 170%;
-    list-style-type: '-';
+    list-style-type: '- ';
   }
 }