Emotion으로 다크모드 적용해보았다. theme 색상적용먼저 styles 폴더 하위에 theme 전용 파일인 Theme.ts를 만들고 라이트 / 다크 모드에 대한 색상 값을 지정해줬다.// styles/Theme.tsimport { Theme } from "@emotion/react";interface VariantType { [key: string]: string;}export const colors: VariantType = { white: "#fff",};export const lightTheme: Theme = { mode: { text: "#202020", background: "#F5F7FC", backgroundMain: colors.white, borderCo..

포스트 글이 길거나 블로그, 프로젝트 갯 수가 많아지면 스크롤이 발생해 상단 이동 버튼을 배치하는게 좋을 것 같아 추가해보았다. 상단 이동 버튼window.scrollTo(xpos, ypos, behavior:'auto'}) ****를 사용하면 원하는 위치로 이동 시킬 수 있다.behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)auto는 기본 값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다.smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다.⇒ 부드럽게 상단 위치하기 위해서 클릭 시 window.scrollTo({ top: 0, behavior: "smooth" }); 실행되게 했다.import { useEffect, use..

일반적으로 모달 닫기 버튼 외에 모달 영역 밖을 클릭 시 닫을 수 있어야 된다.  모달 열고 닫기 기본형useState를 활용해 클릭하는 버튼을 이전 값에 반대되는 값이 들어오게 해서 true면 모달 창이 보이고 false면 닫히게 만들었다.export default function Modal() { const [modal, setModal] = useState(false); return ( setModal((prev) => !prev)}> 버튼 {modal && ( 모달 )} );}  모달 영역 외 클릭시 모달 닫기 useRef를 사용하여 modalBtnRef와 modalRef를 생성하여 modalBtnRef**(모달..