style. 스타일 오류 수정

Read-bird · Jan 10, 2024 · 472a760 · 472a760
1 parent 607eb61
commit 472a760
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 49 deletions.
diff --git a/src/components/templates/HomeTemplate/Plan/Plan.tsx b/src/components/templates/HomeTemplate/Plan/Plan.tsx
@@ -169,6 +169,7 @@ const FlexBox = styled.div<{ $justifyContent?: string }>`
     font-size: 16px;
     font-weight: 700;
     color: #000000;
+    line-height: 18px;
     text-align: left;
 
     display: -webkit-box;

diff --git a/src/components/templates/HomeTemplate/Styled.tsx b/src/components/templates/HomeTemplate/Styled.tsx
@@ -1,3 +1,4 @@
+import { HeadHeight } from '@utils/constants';
 import styled from 'styled-components';
 
 export const Wrap = styled.div`
@@ -12,7 +13,7 @@ export const Wrap = styled.div`
 export const Head = styled.section`
   position: relative;
   width: 100%;
-  flex: 0 0 85px;
+  flex: 0 0 ${`${HeadHeight}px`};
 
   display: flex;
   flex-direction: column;

diff --git a/src/components/templates/HomeTemplate/Week/WeekTemplate.tsx b/src/components/templates/HomeTemplate/Week/WeekTemplate.tsx
@@ -10,6 +10,7 @@ import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
 import { usePlanValidation } from '@hooks/planValidation';
 import { colors } from '@style/global-style';
 import { Alert } from '@utils/Alert';
+import { FootHeight, HeadHeight } from '@utils/constants';
 import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
@@ -70,10 +71,8 @@ export const WeekTemplate = memo(() => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 307;
-    return scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return scrollHeight - (HeadHeight + FootHeight + bodyHeight);
   }, []);
 
   // 등록하기 모달 띄우기
@@ -139,6 +138,7 @@ export const WeekTemplate = memo(() => {
       <ListWrap style={{ height: `${listHeight}px` }}>
         {!!planData?.length ? (
           <FixedSizeList
+            className="scroll"
             width="100%"
             height={listHeight}
             itemSize={120}

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, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
@@ -18,16 +18,6 @@ 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 = 85;
-    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[]>({
@@ -62,7 +52,7 @@ export const MyEncyclopediaTemplate = () => {
   return (
     <Wrap>
       <Spacing height={30} />
-      <StyledUl className="hidden-scroll" style={listHeight}>
+      <StyledUl className="hidden-scroll">
         {collections?.map((collection, index) => (
           <li key={index} onClick={handleClick(collection)}>
             {collection.characterId === null ? (

diff --git a/src/components/templates/MyPageTemplate/MyLibraryTemplate/Book.tsx b/src/components/templates/MyPageTemplate/MyLibraryTemplate/Book.tsx
@@ -111,6 +111,7 @@ const BookTitle = styled.h2`
   font-size: 14px;
   font-weight: 700;
   color: black;
+  line-height: 16px;
 
   display: -webkit-box;
   overflow: hidden;

diff --git a/src/components/templates/MyPageTemplate/MyLibraryTemplate/MyLibraryTemplate.tsx b/src/components/templates/MyPageTemplate/MyLibraryTemplate/MyLibraryTemplate.tsx
@@ -3,6 +3,7 @@ import { TSearchBooksResult } from '@api/types';
 import { Spacing } from '@components/common/Spacing';
 import { Book } from '@components/templates/MyPageTemplate/MyLibraryTemplate/Book';
 import { Alert } from '@utils/Alert';
+import { FootHeight, HeadHeight } from '@utils/constants';
 import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -32,10 +33,8 @@ export const MyLibraryTemplate = () => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 30;
-    return scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return scrollHeight - (HeadHeight + FootHeight + bodyHeight);
   }, []);
 
   const getPlanList = async (page: number) => {
@@ -76,6 +75,7 @@ export const MyLibraryTemplate = () => {
       <Spacing height={30} />
       {!!bookList.length ? (
         <FixedSizeList
+          className="scroll"
           height={listHeight}
           itemSize={142}
           width="100%"

diff --git a/src/components/templates/MyPageTemplate/MyMainTemplate/MyMenu.tsx b/src/components/templates/MyPageTemplate/MyMainTemplate/MyMenu.tsx
@@ -1,6 +1,6 @@
 import { IconArrRightGray } from '@/assets';
 import { setAccessToken } from '@/store/reducers';
-import { Alert, convertError } from '@/utils';
+import { Alert, FootHeight, HeadHeight, convertError } from '@/utils';
 import { axiosFetch } from '@api/axios';
 import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
 import { AxiosError } from 'axios';
@@ -35,10 +35,8 @@ export const MyMenu = () => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 95;
-    const height = scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    const height = scrollHeight - (HeadHeight + FootHeight + bodyHeight);
     return { height: `${height}px` };
   }, []);
 

diff --git a/src/components/templates/MyPageTemplate/MyRestoreTemplate/MyRestoreTemplate.tsx b/src/components/templates/MyPageTemplate/MyRestoreTemplate/MyRestoreTemplate.tsx
@@ -5,6 +5,7 @@ import { RestoreBook } from '@components/templates/MyPageTemplate/MyRestoreTempl
 import { PlanModalTemplate } from '@components/templates/PlanModalTemplate';
 import { usePlanValidation } from '@hooks/planValidation';
 import { Alert } from '@utils/Alert';
+import { FootHeight, HeadHeight } from '@utils/constants';
 import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
@@ -50,10 +51,8 @@ export const MyRestoreTemplate = () => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 30;
-    return scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return scrollHeight - (HeadHeight + FootHeight + bodyHeight);
   }, []);
 
   // 플랜 복구 시
@@ -95,6 +94,7 @@ export const MyRestoreTemplate = () => {
       <Spacing height={30} />
       {!!restoreList.length ? (
         <FixedSizeList
+          className="scroll"
           height={listHeight}
           itemSize={105}
           width="100%"

diff --git a/src/components/templates/MyPageTemplate/MyRestoreTemplate/RestoreBook.tsx b/src/components/templates/MyPageTemplate/MyRestoreTemplate/RestoreBook.tsx
@@ -103,6 +103,7 @@ const FlexBox = styled.div<{ $justifyContent?: string }>`
     font-size: 16px;
     font-weight: 700;
     color: #000000;
+    line-height: 18px;
 
     display: -webkit-box;
     overflow: hidden;

diff --git a/src/components/templates/SearchTemplate/Book/Book.tsx b/src/components/templates/SearchTemplate/Book/Book.tsx
@@ -124,6 +124,7 @@ const BookTitle = styled.h2`
   font-size: 14px;
   font-weight: 700;
   color: black;
+  line-height: 16px;
 
   display: -webkit-box;
   overflow: hidden;

diff --git a/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx b/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx
@@ -4,6 +4,7 @@ import { Spacing } from '@components/common/Spacing';
 import { DisplayAds } from '@components/connections';
 import { Book } from '@components/templates/SearchTemplate/Book';
 import { Alert } from '@utils/Alert';
+import { FootHeight, HeadHeight } from '@utils/constants';
 import { convertError } from '@utils/errors';
 import { AxiosError } from 'axios';
 import { useEffect, useMemo, useState } from 'react';
@@ -15,10 +16,8 @@ export const SearchMain = () => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 20 + 66 + 18 + 23 + 18;
-    return scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return scrollHeight - (HeadHeight + FootHeight + bodyHeight);
   }, []);
 
   const itemData = useMemo(
@@ -67,6 +66,7 @@ export const SearchMain = () => {
       <Spacing height={18} />
       {!!topBookList.length ? (
         <FixedSizeList
+          className="hidden-scroll"
           itemSize={142}
           width="100%"
           height={listHeight}

diff --git a/src/components/templates/SearchTemplate/SearchResult/SearchResult.tsx b/src/components/templates/SearchTemplate/SearchResult/SearchResult.tsx
@@ -6,6 +6,7 @@ import { TBookData } from '@components/templates/SearchTemplate/Book/Book';
 import { TFormValue } from '@components/templates/SearchTemplate/SearchTemplate';
 import { useGetSearchList } from '@components/templates/SearchTemplate/hooks';
 import { Alert } from '@utils/Alert';
+import { FootHeight, HeadHeight } from '@utils/constants';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
@@ -59,10 +60,8 @@ export const SearchResult = memo(() => {
   const listHeight = useMemo(() => {
     const doc = document.querySelector('#root') as HTMLElement;
     const scrollHeight = doc.scrollHeight;
-    const headerHeight = 85;
-    const footerHeight = 70;
     const bodyHeight = 20 + 30 + 20;
-    return scrollHeight - (headerHeight + footerHeight + bodyHeight);
+    return scrollHeight - (HeadHeight + FootHeight + bodyHeight);
   }, []);
 
   const getNextPage = useCallback(async () => {
@@ -103,6 +102,7 @@ export const SearchResult = memo(() => {
       </CheckList>
       {!!bookList.length ? (
         <FixedSizeList
+          className="scroll"
           ref={listRef}
           height={listHeight}
           itemSize={142}

diff --git a/src/components/templates/SearchTemplate/Styled.tsx b/src/components/templates/SearchTemplate/Styled.tsx
@@ -1,3 +1,4 @@
+import { HeadHeight } from '@utils/constants';
 import styled from 'styled-components';
 
 export const Wrap = styled.form`
@@ -13,7 +14,7 @@ export const Wrap = styled.form`
 export const Head = styled.section`
   position: relative;
   width: 100%;
-  flex: 0 0 85px;
+  flex: 0 0 ${`${HeadHeight}px`};
   padding: 0 13px;
 
   display: flex;

diff --git a/src/styles/calendar.css b/src/styles/calendar.css
@@ -22,8 +22,8 @@
 
 /* 달력 요일 개별 */
 .react-calendar__month-view__weekdays__weekday {
-  flex: 1 !important;
-  min-width: 30px;
+  flex: 1 0 14% !important;
+  width: 100%;
   min-height: 30px;
 
   display: flex;
@@ -50,3 +50,7 @@ abbr {
 .react-calendar__month-view__days__day div {
   flex: 0 0 30px !important;
 }
+
+button.react-calendar__tile {
+  flex: 1 0 13% !important;
+}
diff --git a/src/styles/global-style.ts b/src/styles/global-style.ts
@@ -22,10 +22,21 @@ export const GlobalStyle = createGlobalStyle`
     height: 100%;
     background: white;
     overflow-y: auto;
+    box-sizing: border-box;
+
+     // iOS 11.0 버전
+     padding-top: constant(safe-area-inset-top);
+    padding-right: constant(safe-area-inset-right);
     padding-bottom: constant(safe-area-inset-bottom);
+    padding-left: constant(safe-area-inset-left);
+    // iOS 11.2 이상
+    padding-top: env(safe-area-inset-top);
+    padding-right: env(safe-area-inset-right);
     padding-bottom: env(safe-area-inset-bottom);
-    box-sizing: border-box;
+    padding-left: env(safe-area-inset-left);
 
+    scrollbar-width: none;
+    
     &::-webkit-scrollbar {
       display: none;
     }
@@ -35,21 +46,51 @@ export const GlobalStyle = createGlobalStyle`
     height: 100% !important;
   }
 
-  *::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-    background-color: transparent; 
-  }
-    
-  *::-webkit-scrollbar-thumb {
-    width: 5px;
-    height: 5px; 
-    background-color: #00000080; 
-    border-radius: 2px;
+  .scroll {
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+      background-color: transparent; 
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      width: 5px;
+      height: 5px; 
+      background-color: #00000080; 
+      border-radius: 2px;
+    }
+
+    *::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+      background-color: transparent; 
+    }
+      
+    *::-webkit-scrollbar-thumb {
+      width: 5px;
+      height: 5px; 
+      background-color: #00000080; 
+      border-radius: 2px;
+    }
+
+    * {
+      scrollbar-width: thin;
+    }
   }
 
-  .hidden-scroll::-webkit-scrollbar, .hidden-scroll  *::-webkit-scrollbar {
-    display: none;
+
+  .hidden-scroll {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    *::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .active {