티스토리챌린지

수정 예정 읽어주셔서 감사합니다:)

🌵 모달이란모달이란 현재 열려있는 페이지에 포함된 창으로, 페이지 위에 일종의 '레이어(층)'을 까는 것을 말합니다.현재 페이지를 '부모', 현재 페이지에서 열린 모달을 '자식'으로 생각할 수 있습니다.- 출처 블로그모달에 대한 더 자세한 내용과 모달과 팝업의 차이는 다음 블로그를 참고해주세요. 이번 글에서는 웹 서비스에서 많이 사용되는 모달 구현에 필요한 코드를 정리해보겠습니다. 🌵 전체 코드아래의 코드는 'Modal.tsx'라는 이름의 컴포넌트 파일로,사진에서 초록색 선으로 둘러싸인 부분과 같이 내용을 제외한 모달의 기본 틀을 제공합니다.import { ComponentPropsWithoutRef } from 'react';import closeIcon from '@icons/close_icon...

개발을 하다 보면 일반적인 세로 방향 스크롤이 아닌 아래의 그림처럼 가로 방향으로 넘어가는 스크롤이 필요한 경우가 있습니다.따라서 이번 글에서 가로 스크롤에 필요한 코드를 정리해보겠습니다. 🐝 전체 코드아래의 코드는 'useHorizontalScroll.ts'라는 이름의 커스텀 훅으로, 원하는 요소에 가로 스크롤을 적용합니다.import { useRef, useEffect, useCallback } from 'react';export const useHorizontalScroll = () => { const listWrapperRef = useRef(null); const handleWheel = useCallback((e: WheelEvent) => { const container = lis..

🍎 설치하기1) 터미널에서 아래의 명령어를 입력하여 'tailwind-scrollbar-hide'라는 이름의 플러그인을 설치합니다.# npm 사용 시npm install tailwind-scrollbar-hide# yarn 사용 시yarn add tailwind-scrollbar-hide 2) 설치한 플러그인의 이름을 'tailwind.config.js' 파일의 플러그인 목록에 추가해줍니다.// tailwind.config.jsmodule.exports = { content: [], theme: { extend: {}, }, plugins: [ require('tailwind-scrollbar-hide') //  🍎 사용하기'scrollbar-hide' 클래스명은 테일윈드가 기본으로..