개발개발39 리액트 훅 폼 (React Hook Form) 트러블 슈팅 1 - 여러 탭에 걸친 폼 데이터 제출하기(watch, setValue 사용하기, getValues) 위 슬라이드는 사용자가 알바 공고를 작성하기 위한 페이지이다.1. 모집 내용 2.모집 조건 3. 근무 조건 총 세가지 탭을 작성해서 전체 폼 데이터를 제출해야 한다. 🤔간단한 게시글이나 댓글 정도는 구현해본 적이 있는데 사용자 입력을 받아서 폼을 제출하는 로직을 처음 구현해보았다.게다가 캡쳐한 이미지를 보면 각각의 필드에서 받는 데이터의 유형도 매우 다양하다는걸 알수있다^^리액트훅폼을 제대로 안써봐서 해당 페이지를 맡으면서 제대로 써볼 기회인것 같아 잘됐다고 생각했다🙄 페이지 구조우선 페이지 구조는 아래와 같이 구성했다. - 좌측에 보이는 TabMenu + 임시저장/제출 버튼- 우측에 보이는 Form section TabMenu 에서 선택한 값에 따라 router.push(/add?tab=quer.. 2025. 1. 3. 데이터 피커 (react-datepicker) 달력 UI 커스텀하기 react-datepicker 라이브러리의 달력 UI 커스텀 과정 기록입니다.선택한 날짜 값과 관련된 로직은 제외하고 UI 컴포넌트 관련된 내용만 먼저 정리해보려고 한다. 대략적인 구조는 이렇게 구성했다. 1) BaseInput - 기존 DatePicker에서 제공하는 기본 input을 숨기고(inline 속성) 해당 컴포넌트를 사용했다. - 클릭하면 달력을 열어준다 (isOpen 상태를 토글)- 선택할 날짜를 보여준다2) DatePicker : react-datepicker 라이브러리에서 제공하는 input + 달력 객체- isOpen 상태값이 true이면 달력 펼침3) DatePickerHeader : 커스텀 달력 헤더 4) 닫힘 버튼- 처음에 커스텀 헤더에 추가해줬는데 이벤트 버블링때문에 제대로 .. 2025. 1. 3. 스토리북 (storybook) 트러블 슈팅 - 2 (React-hook-form) 컴포넌트 내부에 리액트 훅폼 로직이 녹아있어서 스토리북에서 리액트훅폼의 form provider가 필요했다.-> formProvider로 Story를 감싸줘야한다시간을 선택하는 컴포넌트를 작성하면서 useFormContext 를 사용해 폼 데이터를 컴포넌트 내부에서 관리하도록 작성하는 바람에 스토리북에 에러가 났(었나보)다// timePickerInput.tsx"use client";import BaseInput from "../text/BaseInput";import { useDropdownOpen } from "@/hooks/useDropdownOpen";import TimeOption from "./pickerComponents/TimeOption";import { useFormContext } f.. 2025. 1. 3. 스토리북 (storybook) 트러블 슈팅 - 1 (Tailwind, addon-styling, 컴포넌트 고민 ) 스토리북을 사용해 개발하면서 겪은 이슈들과 그 해결책들을 기록해 둔 것을 다시 한번 정리하는 포스팅입니다. 문제 :스토리북에서 테일윈드 스타일 적용할 속성 prop으로 넘겨줬는데 잘 적용이 안됨해결 :1) .storybook/preview.ts 파일에 Tailwind CSS 스타일 임포트 import "../src/app/globals.css"; 2) 라이브러리 추가 npm install -D @storybook/addon-stylingTailwind 를 적용하기 위해 global.css 에는 아래와 같은 지시문에 포함되어 있다. @tailwind base; // 브라우저의 기본 스타일을 초기화하고, Reset 스타일을 포함합니다.@tailwind components; //버튼, 카드 등 재사용 .. 2025. 1. 3. 스토리북 (storybook) 기본 사용 방법 공통 컴포넌트인 input 컴포넌트의 스토리 코드를 보면서 기본 사용 방법을 정리해보려고 한다.스토리 파일 경로src/app/stories/design-system/components/input/text/input.stories.tsx(next.js app router 기준) 스토리 파일은 src/app/stories 폴더 밑에 들어가게된다. 파일명은 000.stories.tsx 폴더 경로는 스토리북에서 보이는 경로와는 무관하며 스토리북에 생성되는 폴더 경로는 meta 객체 안의 title 에 보이는 Design System/Components/TextInput/TextInput 이 경로로 생성 된다. 우리 프로젝트의 스토리북 폴더 구조는 대략 이렇다. meta 객체 스토리북 공홈에서 제공.. 2025. 1. 3. UI 컴포넌트 개발을 위한 스토리북(Storybook) 장단점 코드잇 부트캠프에서 총 4개의 프로젝트를 진행했다.프로젝트 중 여러가지 이슈, 트러블이 있었고 그 과정에서 새롭게 알게된 것들이 분명 매우 많았는데 (없을 수가 없는데) 적어놓지 않으니 다 잊어버리더라..그래서 요 아래의 마지막 프로젝트(워크루트)를 진행할때는 포스팅은 바로바로 못하더라도, 최대한 적어놓고 프로젝트 마친 후에 하나씩 더 깊게 살펴보고 블로그에 정리해보자 싶었다. 5주 간 프로젝트를 진행했지만 트러블 슈팅 문서가 1-2주차, 3주차, 4주차 까지밖에 없네.? 마지막쯤엔.. 기록에 좀 게을러지기도 했고 자잘한 css 수정을 많이 하기도 해서 그런가보다 ^^ https://memoryelim.tistory.com/219 최종 프로젝트를 마치고코드잇 프론트엔드 부트캠프에서 진행한 마지막 프로젝트.. 2025. 1. 3. 이전 1 ··· 3 4 5 6 7 다음
