Project10 [FE] 마요 - 드롭다운 구현 리액트 styled-components로 드롭다운을 구현해보겠다. 구현해야할 것드롭다운 박스(선택된 라벨)를 눌렀을 시, 옵션 리스트들이 아래로 보이도록옵션 리스트는 드롭다운 박스 아래에, 원래 컴포넌트들의 위로 오버랩 되도록 스타일을 정해야함리스트에서 옵션 하나 클릭 시, 드롭박스에 반영되고, 리스트 드롭다운 및 리스트 부분 외의 부분 클릭 시, 리스트가 안보이도록 1. 드롭다운 옵션들을 보여줄지 저장하는 active 상태변수, 현재 선택된 옵션을 저장하는 selected 상태변수 설정import React, { useState } from 'react'import styled from 'styled-components';export const Dropdown = () => { const t.. 2024. 9. 12. [FE] 마요 - 달력 구현해야할 기능 : 달력의 날짜를 선택하면 달력에 모두 표시되고, 검색 버튼을 누르면 밑에 박스가 나타나, 해당 날에 예정되어 있는 홈파티 리스트가 표시하기 # FullCalender 라이브러리 사용!공식문서를 참조하면 된다. React Component - Docs | FullCalendarFullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This package is released under an MIT license, the same license th.. 2024. 9. 5. [FE] 마요 - 개관 보호되어 있는 글 입니다. 2024. 9. 5. [FE] 유노유노후 - 지도 지도 관련해서 구현해야할 게 몇가지 있었다.지역 추천의 첫 화면에서, 해당하는 지역에 마커와 폴리곤으로 표시하기 (A)지역 클릭 시, 해당 지역의 시설에 모두 마커로 표시하기 (B)지도 api는 kakao map api를 사용하기로 했다. (사용법을 친절하고, 무료니까) 먼저, 오른쪽의 지도창 / 지도창을 조작하는 왼쪽의 모달창으로 나누어야했다.SearchMap은 지도창으로, kakao api를 통해 지도 객체를 처음으로 생성한다.생성한 지도 객체는 state로 저장하여, MapModal에 props로 넘겨줄 수 있게 한다.또한, 이전 필터링 화면에서 받아온 추천 지역 리스트를 여기서 받아와 state에 담아서 MapModal에 props로 전달해준다.MapModal에서는 받아온 지도 객체에 대해 .. 2024. 8. 19. 이전 1 2 3 다음
