230210 포트폴리오 프로젝트(19)

캘린더 적용

리액트 앱에 달력(react-calendar) 적용하기

기본 설정

import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";

function ReactCalender() {
  const [value, onChange] = React.useState([
    new Date(),
    new Date(new Date().setDate(new Date().getDate() + 1)),
  ]);

  React.useEffect(() => {
    console.log(value);
  }, [value]);

  return (
    <div>
      <Calendar
        onChange={onChange}
        formatDay={(locale, date) =>
          date.toLocaleString("en", { day: "numeric" })
        } //요일 숫자로
        next2Label={null} //다음 연도
        prev2Label={null} //이전 연도
        minDetail="decade" //선택할수있는 최소 항목
        showNeighboringMonth={false} //  이전, 이후 달의 날짜는 보이지 않도록 설정
        selectRange={true} //범위지정
        value={value}
      />
    </div>
  );
}

캘린더 커스텀

React-Calendar: Build and customize a simple calendar 참고하여 css overriding

타임라인 테이블 구조 설계

table - timeline

• seq
• trip-seq(외래키)
• startday (시작날짜)
• endday (종료날짜)
• writer (작성자)
• day (날짜별 장소 리스트 JSON)

타임라인 작성폼 구현중

• 기본으로 1박2일 일정
• 캘린더 아이콘 누르면 캘린더 나타남
• 여행 시작날짜 - 종료날짜 클릭하여 기간 선택(해당 범위 표시)
• 선택된 기간만큼 dayN개의 리스트 목록 생성
• 장소추가버튼 누르면 데이터 추가(검색한 데이터를 선택하여 추가하는 방식으로 바꿀예정)
• 추가된 장소에서 삭제 버튼 누르면 해당 장소 데이터 삭제
  
  일단 css는 없음...데이터만 확인함!

내일은 장소추가 누르면 나오는 검색 모달창 만들기
모달창에서 장소 검색(카카오맵 API 사용)
장소 검색 결과 리스트로 보여주기
장소 선택하고 확인 누르면 해당 day에 장소 데이터 추가/보여주기

타임라인 데이터 불러와서 타임라인 리스트 목록에 보여주기
타임라인 뷰 폼 작성
내가 쓴 타임라인만 수정버튼