fix: 학습하기 메인페이지 마진 추가

GlowTales · Aug 26, 2024 · 429b135 · 429b135
1 parent b7de5ee
commit 429b135
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 (
     <>
-      <S.Margin />
+      <Margin />
       <S.TabBarContainer>
         {tabs.map((tab) => (
           <S.TabWrapper key={tab.id}>

diff --git 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 = () => {
         <Word />
         <UnLearned />
         <Learned />
+        <Margin />
       </MainWrapper>
       <TabBar />
     </>

diff --git 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%;