feat: 스크롤 시 보이지 않던 문제 해결

src/App.js

@@ -12,23 +12,19 @@ import PlusPage from './pages/PlusPage/PlusPage.tsx';
 
 // 상위 컨테이너 스타일
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
   height: 100vh;
+  width: 100vw;
+  position: relative;
+  display: flex;
 `;
 
 // 콘텐츠를 감싸는 래퍼에 패딩 적용
 const ContentWrapper = styled.div`
-  word-wrap: break-word;
-  word-break: break-all;
-  white-space: normal;
-  min-width: 340px;
-  width: 100%;
-  height: 100%;
-  display: flex;
   justify-content: center;
+  flex: 1;
+  overflow-y: hidden;
+  margin-bottom: 6rem;
+  display: flex;
 `;
 
 function App() {

src/components/BottomNavi/BottomNavi.style.ts

@@ -6,15 +6,15 @@ export const StyledLink = styled(Link)`
 `;
 
 export const BottomNavWrapper = styled.div`
-  width: 100%;
+  width: 100vw;
   position: fixed;
   bottom: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
   background-color: ${({ theme }) => theme.colors.White}; /* 배경 흰색 */
   height: 4rem;
-  padding: 0 1.5rem 2rem 1.5rem;
+  padding: 0 0 2rem 0;
   border-top: 1px solid ${({ theme }) => theme.colors.Grey_03}; /* 상단에 얇은 회색선 추가 */
   box-shadow: none;
   z-index: 1000;

src/components/ScheduleCard/ScheduleCard.style.ts

@@ -2,15 +2,14 @@
 import styled from 'styled-components';
 
 export const WrapperContainer = styled.div`
-    display: grid;
-    gap: 1.5rem; /* '일정' 텍스트와 그리드 사이 간격 */
-    width: 100%; /* 부모 요소에 맞게 너비를 조정 */
-    background-color: ${({ theme }) => theme.colors.White}; /* 배경 색상 추가 */
-    padding: 1.88rem 1.69rem; /* 내부 여백 추가 */
-    border-radius: 1.7rem; /* 모서리를 둥글게 */
-    box-sizing: border-box; /* 패딩을 너비에 포함하여 크기 조정 */
-    height: fit-content;
-    텍스트 필드와 너비 같이 될 수 있도록
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 1.5rem; /* '일정' 텍스트와 그리드 사이 간격 */
+  background-color: ${({ theme }) => theme.colors.White}; /* 배경 색상 추가 */
+  padding: 1.88rem 1.69rem; /* 내부 여백 추가 */
+  border-radius: 1.7rem; /* 모서리를 둥글게 */
+  max-height: calc(100vh - 22rem);
 `;
 
 export const Title = styled.div`
@@ -20,8 +19,9 @@ export const Title = styled.div`
 `;
 
 export const GridContainer = styled.div`
-  display: grid;
-  grid-template-columns: 1fr; /* 한 열로 설정 */
+  display: flex;
+  flex-direction: column;
   gap: 1rem; /* 각 항목 사이의 간격 */
   width: 100%;
+  overflow-y: scroll;
 `;

src/components/TextField/TextField.style.ts

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 export const Form = styled.form`
+  left: 0;
   position: relative;
   display: flex; /* inline-block 대신 flex 사용 */
   width: 100%; /* 부모 요소에 따라 너비가 조정되도록 설정 */
-  max-width: 100%; /* 최대 너비를 제한하여 너무 커지지 않도록 설정 */
   padding: 0 0; /* 좌우에 적절한 패딩 추가 */
 `;
 

src/hooks/useSchedule.ts

@@ -1,9 +1,7 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { api } from '../utils/axios';
 import { Schedule } from '../types/schedule';
 
-// const ScheduleContext = createContext(null);
-
 const useSchedules = () => {
   const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
   const [schedule, setSchedule] = useState<string>('');

src/pages/PlusPage/PlusPage.tsx

@@ -15,11 +15,6 @@ interface UserInfo {
   email: string;
 }
 
-type Props = {
-  name: string;
-  email: string;
-};
-
 const PlusPage = () => {
   const addPageInfoTitles = ['서비스 이용약관', '개인정보 처리방침'];
   const addPageSettingTitles = ['로그아웃', '회원탈퇴'];

src/pages/SchedulePage/SchedulePage.style.ts

@@ -2,18 +2,12 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr; /* TextField와 ScheduleCard를 세로로 나열 */
-  gap: 2.31rem; /* 각 요소 사이의 간격 */
-  padding-top: 4.75rem;
-  padding-bottom: 10rem;
-  width: 100%;
-`;
-
-export const SchedulePageContent = styled.div`
   display: flex;
   flex-direction: column;
+  padding-top: 4.75rem;
+  margin: 1rem 1rem;
+  flex: 1;
+  max-height: 100%;
+  overflow-y: hidden;
   gap: 37px;
-  padding-left: 17px;
-  padding-right: 17px;
 `;

src/pages/SchedulePage/SchedulePage.tsx

@@ -40,17 +40,15 @@ const SchedulePage = () => {
 
   return (
     <S.Container>
-      <S.SchedulePageContent>
-        <TextField
-          postSchedule={postSchedule}
-          schedule={schedule}
-          setSchedule={setSchedule}
-        />
-        <ScheduleCard
-          deleteSchedule={deleteSchedule}
-          scheduleList={scheduleList}
-        />
-      </S.SchedulePageContent>
+      <TextField
+        postSchedule={postSchedule}
+        schedule={schedule}
+        setSchedule={setSchedule}
+      />
+      <ScheduleCard
+        deleteSchedule={deleteSchedule}
+        scheduleList={scheduleList}
+      />
     </S.Container>
   );
 };