feat: 확인 버튼 화면 맨 아래 위치하도록 수정 (layout 에 relative 속성 추가)

peauty · Nov 26, 2024 · 3bd8b51 · 3bd8b51
1 parent 8b57cdf
commit 3bd8b51
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/global/layout/Layout/Layout.styles.ts b/src/components/global/layout/Layout/Layout.styles.ts
@@ -1,5 +1,5 @@
-import theme from '../../../../style/theme';
-import styled from 'styled-components';
+import theme from "../../../../style/theme";
+import styled from "styled-components";
 
 export const Wrapper = styled.div`
   width: 100%;
@@ -8,6 +8,7 @@ export const Wrapper = styled.div`
   height: 100vh;
   margin: 0 auto;
   overscroll-behavior-y: contain;
+  position: relative;
 `;
 
 export const Main = styled.div`

diff --git a/src/pages/my-page/pet/edit/index.styles.ts b/src/pages/my-page/pet/edit/index.styles.ts
@@ -6,7 +6,6 @@ export const Style = {
     flex-direction: column;
     gap: 20px;
   `,
-
   Wrapper: styled.div`
     display: flex;
     justify-content: space-between;
@@ -15,7 +14,11 @@ export const Style = {
     display: flex;
     align-items: flex-end;
     width: 210px;
-    /* border: 1px solid red; */
     gap: 5px;
   `,
+  ConfirmButtonWrapper: styled.div`
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+  `,
 };
diff --git a/src/pages/my-page/pet/edit/index.tsx b/src/pages/my-page/pet/edit/index.tsx
@@ -83,9 +83,11 @@ export default function Edit() {
             placeholder="미용 시 참고해야 할 내용이 있다면 알려주세요"
             variant="outlined"
           />
-          <CustomButton fullwidth variant="primary">
-            확인
-          </CustomButton>
+          <Style.ConfirmButtonWrapper>
+            <CustomButton fullwidth variant="primary">
+              확인
+            </CustomButton>
+          </Style.ConfirmButtonWrapper>
         </Style.EditPageWrapper>
       </Layout>
     </>