style. 스타일 오류 수정

Read-bird · Dec 31, 2023 · eada175 · eada175
1 parent 1d4a444
commit eada175
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/components/templates/MyPageTemplate/MyEncyclopediaTemplate/MyEncyclopediaTemplate.tsx b/src/components/templates/MyPageTemplate/MyEncyclopediaTemplate/MyEncyclopediaTemplate.tsx
@@ -9,7 +9,7 @@ import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
 import { Alert } from '@utils/Alert';
 import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
@@ -18,6 +18,16 @@ export const MyEncyclopediaTemplate = () => {
   const dispatch = useDispatch();
   const [isOpen, setIsOpen] = useState(false);
 
+  const listHeight = useMemo(() => {
+    const doc = document.querySelector('#root') as HTMLElement;
+    const scrollHeight = doc.scrollHeight;
+    const headerHeight = 95;
+    const footerHeight = 70;
+    const bodyHeight = 30;
+    const height = scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return { height: `${height}px` };
+  }, []);
+
   const getEncyList = async () => {
     try {
       const res = await axiosFetch<any, TResponseCollection[]>({
@@ -52,7 +62,7 @@ export const MyEncyclopediaTemplate = () => {
   return (
     <Wrap>
       <Spacing height={30} />
-      <StyledUl className="hidden-scroll">
+      <StyledUl className="hidden-scroll" style={listHeight}>
         {collections?.map((collection, index) => (
           <li key={index} onClick={handleClick(collection)}>
             {collection.characterId === null ? (
@@ -75,16 +85,13 @@ export const MyEncyclopediaTemplate = () => {
 };
 
 const Wrap = styled.div`
-  display: flex;
-  flex-direction: column;
   width: 100%;
-  height: 100%;
   padding: 0 13px;
 `;
 
 const StyledUl = styled.ul`
   width: 100%;
-  flex: 1;
+  height: 100%;
 
   display: flex;
   justify-content: center;

diff --git a/src/styles/global-style.ts b/src/styles/global-style.ts
@@ -9,10 +9,6 @@ export const GlobalStyle = createGlobalStyle`
     background: #f5f5f5;
     overflow: hidden;
   }
-
-  :root {
-    --vh: 100%;
-  }
   
   #root {
     position: relative;
@@ -32,6 +28,13 @@ export const GlobalStyle = createGlobalStyle`
     }
   }
 
+  body.swal2-height-auto {
+    height: 100vh !important;
+    height: var(--vh) !important;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
   *::-webkit-scrollbar {
     width: 5px;
     height: 5px;

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -144,3 +144,7 @@ div#root {
   width: 100%;
   height: 100%;
 }
+
+:root {
+  --vh: 100%;
+}