최근 진행했던 사이드 프로젝트에서 제작했던 바텀시트 제작기입니다.웹 환경에서 작업했으며, 주요 기술로는 React, TypeScript, framer-motion을 사용했습니다.별도의 바텀시트 전용 라이브러리는 사용하지 않았기 때문에 부족한 부분이 많을 수 있습니다.이번 글은 구현 코드 위주의 정보성 글이라기보다는, 직접 부딪히며 만든 컴포넌트 제작 일기에 가깝습니다.참고 부탁드립니다.0. 기획이번에 진행한 사이드 프로젝트의 주제는 레시피 검색 사이트였다.핵심 컨셉은 세분화된 검색 및 필터링을 통한 레시피 추천이었다.마치 가전제품을 검색할때 다양한 카테고리와 조건을 선택하듯,사용자가 원하는 조건을 조합해 레시피를 찾을 수 있도록 하는 게 목표였다.따라서 상세 검색 기능 구현이 매우 중요한 과제였다. 프로..

안녕하세요,오늘 글에서는 React와 Three.js, react-three/fiber 세가지를 이용한 3D 애니메이션을 웹 페이지에 넣는 것과,작성된 코드의 공통부분들을 뽑아 hook과 util 함수들로 공통화하는 작업들을 기록했습니다.즐겁게 봐주세요... 0. 요구사항포트폴리오 페이지 작업 중, 핵심 역량 파트에 눈에 띌만한 요소를 넣고 싶어졌음, 핵심 역량은 내 능력 중 강조하고 싶은 세가지를 적어놓은 파트다.세개가 연속하는 섹션이다보니 통일감이 있어야 하는데,주제와 통일감, 퀄리티 세가지 모두 높은 이미지를 구하는 게 쉽지 않았다. 아이콘? 막상 넣으니 너무 허전해보였다.사진? 적당한 게 없다.일러스트같은 걸 넣으면 딱일 것 같은데... AI 친구들에게 우선 부탁해봄.요즘 이미지 생성으로 가장 애..