Dev Diary

* 여기서 구현한 RegisterAlarmDialog는 후에 SimpleAlarmDialog 라는 더 큰 범위의 공통 컴포넌트로 교체되었다. 진행중인 프로젝트에서 Dialog(모달창)를 사용할 일이 많았다. 그래서 useDialog()라는 hook을 만들어 여러 곳에서 재사용 할 수 있도록 하려고 했다. 그래서 아래와 같은 코드를 구현했는데...import { useState, useCallback } from "react";const useDialog = () => { const [isDialogOpen, setIsDialogOpen] = useState(false); const open = useCallback(() => setIsDialogOpen(true), []); const close =..

사이드 프로젝트에서 회원가입을 만들며 서버에 회원가입 요청 시 에러가 발생하면 Dialog(모달창)를 통해 알려주기 위해 이전에 만들어둔 디자인 시스템 중 Dialog를 사용해서 RegisterAlarmDialog 라는 컴포넌트를 추가했다. 1. 기존 RegisterAlarmDialog 컴포넌트import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,} from "@/components/_shared/ui";import { useDialogContext } from "@/providers";import React from "react";interfa..

진행중인 프로젝트와 Github Action을 연결해두었는데, main 브랜치에 push 후 Action이 돌아가며 Storybook을 배포하는 과정에서 계속 failed가 발생했다. failed 오류의 원인을 읽어보니 다음과 같았다. 자꾸 ./profileIcon을 찾지 못하고 있었다. 하지만, 프로젝트를 아무리 쳐다보아도 profileIcon은 존재했다. 30분간 이유를 찾다가 문득 이 Github Action은 내 로컬을 기반으로 하는게 아니라 원격 Github 레포지토리를 기반으로 한다는 것을 깨달았다. 진짜 Github를 확인해보니 profileIcon 대신 대문자로 작성된 ProfileIcon이란 파일이 있었다. (멍청멍청...) 이전에 icon이름은 Camel Case 컨벤션을 적용했는데 ..

위 이미지처럼 달력을 구현해야했는데, 오른쪽 상단에 x 아이콘(누르면 달력이 닫힌다)을 넣으려고 Stack과 Positioned 위젯을 사용했다.아래처럼 작성했는데, 아무리 x 아이콘을 눌러보아도 "닫기"가 터미널에 출력이 되지 않았다. Stack( children: [ Positioned( top: 24, right: 20, child: GestureDetector( onTap: () { print("닫기"); Navigator.pop(context); }, child: SvgPi..

table calendar 패키지를 이용해서 bottom sheet에 캘린더를 넣은 뒤 기간 필터링 ui에서 직접설정 옵션을 선택하면 달력이 아래서 위로 올라오는 화면을 구현하려고 TableCalendar 관련 코드를 모두 작성하고 실행해보았더니 "flutter locale data has not been initialized"라는 오류가 발생했다.intl 패키지를 통해 main.dart에서 로컬 설정을 초기화해주었더니 에러가 사라졌다.void main() async { await initializeDateFormatting(); // 이 부분을 추가 // 다른 코드들 ... runApp(const ProviderScope(child: MyApp()));}

이걸로 몇시간 삽질했다. 역시 공식 문서 최고 ㅠchild: TextFormField( suffixIcon: FindAddressButton( onPressed: () { print('주소찾기 클릭'); }, ), suffixIconConstraints: const BoxConstraints( maxWidth: 66, minHeight: 30, ),),suffixIcon 아래에 suffixIconConstraints 옵션 추가

api 요청에 react-query v4를 사용하고 있는데 useQuery를 이용한 api 요청이 계속 실행되는것을 방지하기 위해 refetch 함수를 사용하여 특정 상황에만 쿼리가 요청될 수 있도록 구현하는 도중, useEffect 안에 비동기 요청 함수를 넣어 전역상태에 값을 세팅해줘야 하는 상황이 생겼다. 그래서 매번 사용했던대로 useEffect 안에서 api 요청 함수를 수행하고 응답에 특정 프로젝트에 참가하고 있는 프리랜서들과 클라이언트(발주처)의 uid, name, role이 담긴 배열이 있었는데 클라이언트(발주처)인 경우에는 clientInfo 라는 전역상태에, 프리랜서인경우에는 freelancersInfo 전역상태에 각각 저장해주었다. 그런데 프리랜서의 경우 1명일수도 있지만 2명 이상일..

문제점next-auth를 이용해 로그인을 구현하는데 아이디 혹은 비밀번호를 잘못 입력하는 경우 자꾸 내가 원하는 에러 핸들링 형태가 아닌 next-auth만의 Error 페이지가 출력되었다.내가 원하는 에러 핸들링"아이디 혹은 비밀번호가 일치하지 않습니다!" 라는 경고창을 띄우고 내가 만든 커스텀 /login 페이지에 머무르는것현재 에러 핸들링 형태아래와 같은 next-auth의 /api/auth/error 페이지가 출력됨.해결법 const onClickLoginRequest = async () => { const res = await signIn('credentials', { name: name, password: password, redirect: false, ..