코딩기록

모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 찾아보니 History.pushState를 많이 사용해서 사용하려 했는데 모달 쿼리를 추가하고 모달 닫기를 누를때 뒤로가기를 생성해서 간단하게 구현을 해보았다.  모달 코드src> hooks> useModal.tsimport { useRouter } from "next/router";import { useEffect, useState } from "react";export function useModal() { const [currentModal, setCurrentModal] = useState(null); const router = useRouter(); useEffect(() => { const { modal } = ro..

캠핑장 카드가 잘 나와서 검색 기능을 시작했다.  dropdown.tsx// 옵션 타입 정의interface IPropsSelect { isMain: boolean; onChangeSearch?: (region: string, subRegion: string | null) => void;}export default function DropDown({ isMain, onChangeSearch }: IPropsSelect) { // 광역시 const [selectedRegion, setSelectedRegion] = useState>(null); // 하위지역 const [subRegions, setSubRegions] = useState([]); // 광역시 선택시 하위지역 리셋 con..

페이지네이션을 만드려고 찾아보다가 react-paginate 라이브러리를 선택해서 만들었다.하지만,, 마음에 안든다..가운데 ...도 거슬리고 페이지가 5개씩만 나오게 하고 싶은데 찾아보니 안된다고 한다. 라이브러리 선택하는 것도 잘 해야한다더니 그 말이 맞음,, 다시 페이지네이션을 만들어보기로 한다.. export default function Pagination({ totalItems, itemCountPerPage, pageCount, onClick, currentPage,}: IPropsPage) { const totalPages = Math.ceil(totalItems / itemCountPerPage); // 총 페이지 개수 const [start, setStart] = useSt..

캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 api를 신청했다.  인증키는 최상단에 .env파일을 만들어서 NEXT_PUBLIC_SERVICE_KEY  인증키를 넣어준다.next.js는 NEXT_PUBLIC  을 붙여줘야 함.리액트는 REACT_APP    나는 캠핑장 정보를 카드 형태의 리스트로 제공하고 싶었다.  interface ICampingList { facltNm: string; lineIntro?: string; addr1: string; firstImageUrl?: string; themaEnvrnCl?: string; tel: string; contentId: number;}interface IApiResponse { response: { body: { it..

나는 드롭다운으로 지역을 선택하는 것을 만들고 싶었다.셀렉트박스를 커스텀할 수 있는 방법을 찾아보다 리액트 셀렉트를 발견 대한민국 행정구역 파일도 찾으면 있을 거라 생각해서 json을 찾았다가 변수로 정의된 코드를 찾았음.export const AREA0 = ['전체', '서울', '인천', '대전', '광주', '대구', '울산', '부산', '경기', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주'];export const AREA1 = ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구'..