인사말이 프로젝트를 진행하며 정말 많은 자료들을 검색해보았다. 절반 이상을 아는 상태에서 GPT는 유능한 비서이지만, 절반 이상을 모르는 상태에서 GPT는 바보가 된다. 나의 요구사항이 틀린 방향임에도 자의적으로 해석하여 더 틀린방향의 솔루션을 제시하기에....적어도 내가 프로젝트 때 사용한 기능들에 대해서는 공식문서나 GPT StackOverFlow 등을 넘나들며 버전을 확인하는 등의 고생을 하지 않도록 최대한 상세하게 포스팅해보려고한다. 요약: ZRM에 있어서는 GPT 보다 더 빠른 솔루션을 제공하는 포스팅이 될거임추가로 언제든지 블로그 및 깃헙 등에 댓글로 질문 혹은 더 나은 의견 제시를 해주시면 매우 감사한 마음으로 답변드리도록 하겠습니다. 오가는 답변속에 인연이 자라나 함께 일하는 동료가 될수도..

개요: 'form'을 쉽게 만드는데 유용한 라이브러리 사용 라이브러리 설치 npm install react-hook-form zod와 결합하여 shema에 저장해둔 유효성 검사를 불러와 Form을 만들어 랜더링부에 도입 import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ name: z.string().min(1, { message: 'Required' }), age: z.number().min(10), }); const ..

답안코드: https://github.com/DevCamp-TeamSparta/frontend-material?tab=readme-ov-file 폴더 구성 📦src ┣ 📂components ┃ ┣ 📂ui ┃ ┃ ┣ 📜button.tsx ┃ ┃ ┣ 📜card.tsx ┃ ┃ ┣ 📜dropdown-menu.tsx ┃ ┃ ┣ 📜form.tsx ┃ ┃ ┣ 📜input.tsx ┃ ┃ ┣ 📜label.tsx ┃ ┃ ┣ 📜select.tsx ┃ ┃ ┣ 📜switch.tsx ┃ ┃ ┣ 📜toast.tsx ┃ ┃ ┣ 📜toaster.tsx ┃ ┃ ┗ 📜use-toast.ts ┃ ┣ 📜mode-toggle.tsx ┃ ┗ 📜theme-provider.tsx ┣ 📂lib ┃ ┗ 📜utils.ts ┣ 📂pages ┃ ┣ 📂api..