나날꽃

날짜별로 오늘의 꽃을 소개하는 웹 사이트입니다.

라이브 데모 링크
피그마

스택

Frontend

• Vue.js
• Vuex
• Sass
• TypeScript
• Axios

Backend

• 농촌진흥청 국립원예특작과학원 제공 API

기능

메인 페이지

• 오늘 날짜의 꽃 정보를 간략히 보여줍니다.
• 자세히 보기를 누르면 상세 정보 페이지로 이동합니다.

상세 정보 페이지

• 날짜별 꽃 정보를 상세히 보여줍니다.
• 화살표를 누르면 각각 이전 날, 다음 날의 꽃 상세 정보 페이지로 이동합니다.
• 랜덤으로 보기 버튼을 누르면 무작위 날짜의 꽃 상세 정보 페이지로 이동합니다.

꽃 검색 페이지

• 검색하기 버튼을 누르면 날짜 (단일), 날짜 (범위), 꽃 이름, 꽃말 4가지의 항목별로 꽃을 검색할 수 있습니다.
• 캡처 프로그램에서 캡처가 되지 않았지만, 월, 일 선택 방식은 드롭박스입니다.
• 날짜 (단일)
• 날짜 (범위)
• 꽃 이름 (한글 또는 영어)
• 꽃말 (한글)

404 페이지

• 유효하지 않은 라우터로 이동하거나, 상세 정보 페이지의 파라미터로 1 ~ 366이 아닌 숫자가 들어왔을 때 404 페이지가 표시됩니다.
• 이전 페이지 또는 메인 페이지로 이동할 수 있습니다.

추후 보완하고 싶은 점

• 학명으로도 검색할 수 있도록 하기
• 다크 모드용 색상 및 로고 변경하기