프론트엔드/Library 썸네일형 리스트형 [Library] React와 NextUI를 활용한 커스텀 셀렉터 컴포넌트 구현 가이드 (feat. TailwindCSS) 사용 기술 스택: `@nextui-org/react`, `React`, `TailwindCSS` 1. 프로젝트 설정먼저, 이 프로젝트에 필요한 라이브러리를 설치합니다.$ npm install @nextui-org/react 2. 데모 예시 3. 커스텀 셀렉터 컴포넌트 구현이 컴포넌트는 @nextui-org/react에서 제공하는 Select와 SelectItem 컴포넌트를 사용합니다. "use client";import { Select, SelectItem } from "@nextui-org/react";import React, { useState } from "react";const items = { ALL: "모든 타입", LEGACY: "Legacy", V1: "Version 1", V2:.. 더보기 [Library] react-intersection-observer 사용법과 예시 (feat. react95) 사용 기술 스택: `react-intersection-observer`, `React`, CSSModule`1. 프로젝트 설정$ npm install react-intersection-observer --save 2. 데모 예시3. 사용 코드Text, Windows 컴포넌트는 `react-intersection-observer` 라이브러리를 사용하여 스크롤할 때 요소가 화면에 들어오면 애니메이션이나 스타일을 적용할 수 있는 기반을 제공합니다. 1) 화면에 글자 보여주기/* Text.module.css */.text { transition: all 0.3s ease-in-out;}.opacity100 { opacity: 100; transform: translateY(0);}.opacity0 { .. 더보기 이전 1 다음
