fix: 회원가입 화면 반응형 수정

delicious-algorithme · Nov 19, 2024 · e59d116 · e59d116
1 parent 3c9af91
commit e59d116
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,8 @@
 ### MATAL-Frontend
+
+### 사용된 라이브러리
+
+이 프로젝트는 SweetAlert2 라이브러리를 포함하며, 해당 라이브러리는 MIT License를 따릅니다.
+
+SweetAlert2:
+https://sweetalert2.github.io/
diff --git a/src/components/login/Consent.jsx b/src/components/login/Consent.jsx
@@ -82,6 +82,10 @@ const AuthLayout = styled.div`
     justify-content: center;
     align-items: center;
     flex-direction: column;
+
+    @media (max-width: 768px) {
+        width: 100%;
+    }
 `;
 
 const AuthBox = styled.form`
@@ -117,6 +121,16 @@ const CheckBox = styled.div`
             text-decoration: underline;
         }
     }
+
+    @media (max-width: 768px) {
+        & > div > label {
+            font-size: 13px;
+        }
+        & > a {
+            font-size: 11px;
+            font-weight: 700;
+        }
+    }
 `;
 
 const FormBox = styled.div`
@@ -149,4 +163,12 @@ const TermsBox = styled.div`
             text-decoration: underline;
         }
     }
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        & > a {
+            font-size: 11px;
+            font-weight: 700;
+        }
+    }
 `;
diff --git a/src/pages/StoreDetailPage.jsx b/src/pages/StoreDetailPage.jsx
@@ -85,7 +85,7 @@ const StoreDetailPage = () => {
                         </StyledLeftContainer>
                         <StyledRightContainer>
                             <BookmarkBox>
-                                <Bookmark bookmarkId={bookmarkId} storeId={item.storeId} />
+                                <Bookmark bookmarkId={bookmarkId} storeId={storeId} />
                                 <button>
                                     저장하기<span>(북마크 아이콘을 눌러 저장해주세요.)</span>
                                 </button>
@@ -112,10 +112,6 @@ const DetailPageLayout = styled.div`
     gap: 20px;
     flex-direction: column;
     justify-content: center;
-
-    @media screen and (max-width: 1024px) {
-        width: 100%;
-    }
 `;
 
 const StoreOverviewContainer = styled.div`