코딩기록

지금 캠핑 상세 화면의 이미지만 먼저 작업중에 있다. 아직 이미지 외의 다른 데이터는 작업 x 이미지를 누르면 전체 사진을 보여주려 한다. 우선 모달창만 구현한 화면. component/Modalinterface IPropsModal { isShowing: boolean; hide: () => void; message: string;}export function Modal({ isShowing, hide, message }: IPropsModal) { return isShowing ? ReactDOM.createPortal( ) => { e.stopPropagation(); }} > ..

아직 준비중인 기능들이 있어 alert창을 띄우는데 커스텀을 하고싶었고,여러 화면에서 사용할 것이기 때문에 컴포넌트화해서 사용하고 싶었다.  방법을 찾아본 결과 이 방법이 제일 간단하고 편리한거 같아서 따라하게 되었다. hooks/useModal.tsimport { useState } from "react";export function useModal() { const [isShowing, setIsShowing] = useState(false); const modalToggle = () => { setIsShowing(!isShowing); }; return { isShowing, modalToggle, };}- useModal 커스텀 훅을 만들어서 모달이 보이는 상태와 모달 ..

캠핑장 카드가 잘 나와서 검색 기능을 시작했다.  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..

document.querySelector('.modal').addEventListener('scroll', function() { document.querySelectorAll('.video_wrap video').forEach(function(video) { const videoHeight = video.clientHeight; //비디오 높이 const videoTop = video.getBoundingClientRect().top - videoHeight; if (videoTop -(videoHeight + videoHeight / 2)) { // 여유사이즈 동영상 높이의 절반 video.play(..

어제 만든 캠핑리스트 캠핑장 입지 구분을 아이콘으로 넣고 싶었다.참고로 활용 메뉴얼 보면 데이터 설명 나와있음.      LocationICon.tsximport styled from "@emotion/styled";interface IPropsType { type: string;}const Icon = styled.i` display: inline-block; width: 3.2rem; height: 3.2rem; background-size: 100%; background-repeat: no-repeat; ${(props) => { switch (props.type) { case "산": return `background-image: url(/image/icon..

캠핑 사이트를 만드려고 공공데이터포털에서 캠핑 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..

interface Option { value: string; label: string;}const customSelect = (isMain: boolean): StylesConfig => ({ control: (base, state) => ({ ...base, width: isMain ? "26rem" : "20rem", borderRadius: "1rem", background: state.isDisabled ? "#f6f6f6" : "rgba(255, 255, 255, 0.3)", boxShadow: "none", borderWidth: ".2rem", borderStyle: "solid", borderColor: state.isDisabled ? "#..

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

기존 스와이퍼 설정const studentGroupSlide = new Swiper('.swiper-container', { slidesPerView: "auto", spaceBetween: 0, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }});  하지만 나는 슬라이드가 여러개고 같은 슬라이드라 설정을 여러번 해주고 싶지 않다..swiper-container 를 querySelectorAll로 선언해서 반복문으로 설정해봤지만 실패!방법을 찾다가 발견했다. 멀티 스와이퍼 설..