diff --git a/src/components/common/common.styled.ts b/src/components/common/common.styled.ts index 75be2d0..8a92122 100644 --- a/src/components/common/common.styled.ts +++ b/src/components/common/common.styled.ts @@ -1,5 +1,10 @@ import styled from "styled-components"; +export const Margin = styled.div` + width: 100%; + min-height: 80px; +`; + export const CommonWrapper = styled.div` display: flex; flex-direction: column; @@ -74,7 +79,6 @@ export const MainWrapper = styled.div` align-items: flex-start; gap: 3rem; padding-top: 3rem; - padding-bottom: 140px; `; export const Shelf = styled.img` diff --git a/src/components/common/tabBar/TabBar.styled.ts b/src/components/common/tabBar/TabBar.styled.ts index 33bf3eb..b5a15b9 100644 --- a/src/components/common/tabBar/TabBar.styled.ts +++ b/src/components/common/tabBar/TabBar.styled.ts @@ -1,10 +1,5 @@ import styled from "styled-components"; -export const Margin = styled.div` - width: 100%; - min-height: 120px; -`; - export const TabBarContainer = styled.div` width: 100%; height: 80px; diff --git a/src/components/common/tabBar/TabBar.tsx b/src/components/common/tabBar/TabBar.tsx index e1d5843..caacda1 100644 --- a/src/components/common/tabBar/TabBar.tsx +++ b/src/components/common/tabBar/TabBar.tsx @@ -1,5 +1,6 @@ import { useLocation, useNavigate } from "react-router-dom"; import * as S from "./TabBar.styled"; +import { Margin } from "../common.styled"; const TabBar = () => { const location = useLocation(); @@ -21,7 +22,7 @@ const TabBar = () => { return ( <> - + {tabs.map((tab) => ( diff --git a/src/components/learn/learnMain/Learn.tsx b/src/components/learn/learnMain/Learn.tsx index 50812e6..3831421 100644 --- a/src/components/learn/learnMain/Learn.tsx +++ b/src/components/learn/learnMain/Learn.tsx @@ -1,4 +1,4 @@ -import { MainWrapper } from "@components/common/common.styled"; +import { MainWrapper, Margin } from "@components/common/common.styled"; import TabBar from "@components/common/tabBar/TabBar"; import Word from "./word/Word"; import UnLearned from "./unLearned/UnLearned"; @@ -11,6 +11,7 @@ const Learn = () => { + diff --git a/src/components/tales/createMain/CreateMain.styled.ts b/src/components/tales/createMain/CreateMain.styled.ts index 98c2d9d..19ea2d2 100644 --- a/src/components/tales/createMain/CreateMain.styled.ts +++ b/src/components/tales/createMain/CreateMain.styled.ts @@ -7,7 +7,7 @@ export const Wrapper = styled.div` flex-direction: column; justify-content: space-between; align-items: center; - overflow-x: hidden; + overflow-x: hidden; // 스크롤 생기는거 괜찮은지 물어보기 gap: 2.5rem; #topGraphic { width: 100%;