자기계발 캠퍼스

모바일에서 가로로 스크롤되는 메뉴 / 내비게이션 바는 흔히 볼 수 있다. 자주 보이는 컴포넌트이지만 구현은 전혀 어렵지 않다. 기본적인 논리는 이렇다. - div라는 태그가 있는데 안에 내용물이 넘치는 상황 - 내용물이 overflow되면 가로로 스크롤 될 수 있게 설정을 해주면 된다 아래 예제는 tailwind를 사용하여 구성하였다. {navItem.map((item) => { return ( // 내용물 알아서 ); })} 기본적으로 div는 block이기 때문에 width가 전체 가로 길이와 일치한다. 모바일 화면에서 가로길이를 넘어갔을 때 이를 화면 안으로 몰아서 넣으려고 하지 않게 해주기 위해 whitespace 속성을 사용한다. 왼쪽은 일반적인 div 태그 내에서 내용물이 넘칠 때의 상황이다...

import React, { useState } from "react"; import Arrow from "../icon/dropdown-arrow"; type DropdownItem = { name: string; id: string; }; type DropdownProps = { items: DropdownItem[]; }; function DropDown({ items }: DropdownProps) { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [selectedItem, setSelectedItem] = useState("선택"); return ( { setIsDropdownOpen(false); }} > { setIsD..

동아리에서 진행하는 프로젝트 중 드롭다운을 만들어야했는데 드롭다운 하나를 위해서 디자인 라이브러리를 받는 건 프로젝트의 용량으로 보나 여러모로 너무 낭비라고 판단하여 직접 구현하기로 했다. 먼저 구현된 결과물부터 바로 보고 어떻게 구현했는지 분석해보자. const [activeIdx, setActiveIdx] = useState(); {adminMenu.map((menu, index) => { const active = activeIdx === index + 1 ? true : false; return ( ); })} // AdminMenu 컴포넌트 const AdminMenu = ({ menuItem, idx, activeIdx, active, setActiveIdx, subMenu }) => { re..

현재 사용하고 있는 기술 스택은 Next.js이다. Tailwind CSS, Styled Component도 쓰는데 스타일링 관련이니깐 잠깐 제끼자. const [menuImage, setMenuImage] = useState(""); { let reader = new FileReader(); if (event.target.files[0]) { reader.readAsDataURL(event.target.files[0]); } reader.onloadend = () => { const resultImage = reader.result; setMenuImage(resultImage); }; }} /> 먼저 사진을 받아오기 위한 부분이다. https://developer.mozilla.org/ko/docs/..