Frontend

요구사항 아래 레이아웃에서 빨간 박스로 표시한 부분만 스크롤되게 할 것이다! 완성본 코드 src/componants/layout/index.tsx import { Box } from "@mui/material"; import React from "react"; import Sidebar from "./sidebar"; import Header from "./header"; export default function Layout(props: { children: React.ReactNode }) { const { children } = props; return ( {children} ); } overflowY:"auto" 를 주어 빨간 박스 부분의 컴포넌트만 스크롤링 되도록 구현하였다.

요구사항 Crepe 프로젝트를 진행하며 사이드바를 만들 일이 있었다. 만들어볼 사이드바의 UIUX는 아래와 같다! 완성본 완성본은 아래 영상에서 확인할 수 있다. 코드 src/index.tsc import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { ProSidebarProvider } from 'react-pro-sidebar'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( ); src/componant/side..

body { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } ::-webkit-scrollbar { /* 크롬, 사파리, 오페라, 엣지 동작 */ display: none; }