2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
제 질문을 받아주세요.. 질문입니다.
지금 투두리스트 라고 적혀있는 하얀색 화면이 푸터영역을 침범하지않고있습니다. (전체화면 입니다.)
근데 웹사이트의 높낮이를 좀 낮게조절하거나 모바일버전에서는 이렇게 보입니다.
엄청 침범하고있는데요, 이게 원인부터 말씀드리자면 Footer 컴포넌트에 있는거같습니다.
layout.js에서 이런식으로 작성해줬습니다.import Footer from '@/components/Footer'; import RecoilRootWrapper from '@/components/RecoilRootWrapper'; import './styles/globals.css';
export const metadata = { title: 'Create Next App', description: 'Generated by create next app', };export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang='en'> <body> <div className='relative max-w-2xl m-auto'> <RecoilRootWrapper> {children} <Footer /> </RecoilRootWrapper> </div> </body> </html> ); }여기서 Footer 컴포넌트를 이런식으로 위치 시켜보고 해봣는데요,
return ( <html lang='en'> <body> <div className='relative max-w-2xl m-auto'> <RecoilRootWrapper> {children} </RecoilRootWrapper> <Footer /> // 이렇게하거나 혹은 </div> <Footer /> // 이렇게도 위치해봤음 </body> </html> );똑같았습니다. 근데 이번에는 Footer를 그냥 todopage에 위치시켜봤습니다 이런식으로요 그리고 상위 div요소에 flex flex-col를주고, 하위 div에 flex-1를 추가시켜줬습니다. 잘되더라구요
return ( <> ...
<div className='h-screen pt-10 p-4 bg-[#fec55c] relative flex flex-col'>
{/* 투두리스트 */} <div className='bg-white shadow-md flex-1 p-4 mt-4 rounded-md overflow-y-auto scrollable-list relative'> ..... <Footer /> </div> </> ); 네 잘되요.,. 근데 Footer를 그러면 일일히 컴포넌트 페이지마다 저런식으로 넣어줘야할까요? ㅠㅠ layout.js에서 어떤식으로 위치를 시켜줘야 좋을지 정말 모르겠습니다.. 혹시몰라서 todoPage.js의 전체 코드입니다. (넘 길어서 안보실거같지만..)return ( <> {isModalState && <Modal>{modalContent}</Modal>}{/* 키워드 생성 모달창 */} {keywordModal && <CreateKeywordModal />}<div className='h-screen pt-10 p-4 bg-[#fec55c] relative flex flex-col'> {/* Menu */} <CgMenuLeftAlt className='ml-auto text-white' size={35} />{/* 캘린더 헤더 */} <CalendarPage />{/* 투두리스트 */} <div className='bg-white shadow-md flex-1 p-4 mt-4 rounded-md overflow-y-auto scrollable-list relative'> <h1 className='text-black font-bold'>TO DO LIST</h1>-
{targetTodoList.length !== 0 && (
<>
{targetTodoList.map((item, index) => (
<li className='border-b-[1px] py-2 flex' key={index}>
{/* 체크박스 */}
<div
className={`rounded w-5 h-5 border-2 mr-2 flex-shrink-0 cursor-pointer`}
style={{
backgroundColor: item.completed ? item.bgColor : '',
borderColor: item.bgColor,
}}
onClick={() => onClickTodoListCheck(index)}
>
{item.completed && (
<svg
className='w-6 h-6 mx-auto my-auto fill-current text-white'
xmlns='http://www.w3.org/2000/svg'
viewBox='3 3 20 20'
fill='currentColor'
>
<path
fillRule='evenodd'
d='M15.707 6.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L9 12.586l5.293-5.293a1 1 0 011.414 0z'
clipRule='evenodd'
/>
</svg>
)}
</div>
<span className={`${ item.completed ? 'line-through text-gray-500 opacity-50' : '' }`} > {item.text} </span> ))} </> )} {/* 키워드 */} {keywordComponent && ( <KeywordComponent setIsForm={setIsForm} setKeyword={setKeyword} setKeywordColor={setKeywordColor} /> )} </div>{isForm && ( <> <TodoForm keyword={keyword} keywordColor={keywordColor} onKeywordComponentSelection={onKeywordComponentSelection} onTrashCanClick={onTrashCanClick} onTodoListSubmit={onTodoListSubmit} />{/* 전체화면 어둡게 변환시키기위한 코드 */} <div className='fixed top-0 left-0 w-full h-full bg-black opacity-50 '></div> </> )}{/* TO DO 혹은 루틴 추가 버튼 */} <PlusBtn onClickForm={onClickForm} isForm={isForm} /> <Footer /> </div> </> );
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.