웹개발 2

[겨울방학-회사] react로 FAQ 리스트 만들기 : Accordion 구현

아코디언 디자인은 shadcn/ui의 Accordion을 사용하여 구현하였습니다single 타입 ( Accordion Type = "single" )한 번에 하나의 아코디언 아이템만 펼쳐진 상태로 유지됩니다새로운 아이템을 펼치면 이전에 펼쳐져 있던 아이템은 자동으로 접힙니다사용자가 한 번에 하나의 정보에만 집중하도록 유도합니다사용 시나리오FAQ 페이지사용자가 궁금한 질문을 클릭하면 답변이 펼쳐지고, 다른 질문을 클릭하면 이전 답변은 접히도록 하여 깔끔한 정보 제공이 가능합니다설정 매뉴여러 설정 옵션 중 현재 활성화된 옵션만 보여주고, 다른 옵션을 선택하면 이전 옵션은 숨깁니다단계별 폼복잡한 폼을 단계별로 나누어 한 번에 하나의 단계만 보여줌으로써 사용자의 집중도를 높이고 폼 작성 과정을 간소화합니다장점정..

Front/React.js 2025.02.19

[겨울방학-회사] React로 자동 전환 슬라이드 쇼 만들기 : Carousel 구현

슬라이드 디자인은 shadcn/ui의 Carousel를 사용하여 구현하였습니다IntersectionObserveruseEffect 훅을 이용한 초기화 및 정리useEffect(() => { // IntersectionObserver 생성 및 감지 로직 return () => { // intersectionObserver 감시 해제 로직 } }, []);useEffect 훅은 Reac 컴포넌트가 렌더링될 때 특정 작업을 수행하도록 하는 훅입니다코드에서 IntersectionObserver를 생성하고 감시를 시작하는 작업을 수행합니다두 번째 인자로 빈 배열 [ ]을 전달하여, useEffect의 컴포넌트가 마운드될 때 단 한 번만 실행됩니다useEffect의 반환값을 return 함수로 전달하..

Front/next.js 2025.02.14