🎶MusicTodo🎶

배포 주소

-> https://master--todolisthahaday.netlify.app/

📌 유의사항

-> 반응형이 적용되어 있지 않습니다.

📜 프로젝트 소개

-> (👥👤👥👤뭐야...👤👤👥👥👥웅👥성👥👥👤) 지루한 Todolist 는 가라!
봐도봐도 질리지 않는 귀여운 컨셉의 Todolist와 함께 ,음악을 들으며 오늘의 할일을 작성해 보세요!!!
실시간 방송을 보며 오늘의 할일에 집중하여 하나씩 목표를 달성하는 ✨짜릿함✨을 느껴보세요!

시작 가이드

Requirements

For building and running the application you need:

• Npm 8.19.3

Installation

$ git clone git@github.com:KDT1-FE/KDT5-M2.git
$ cd KDT5-M2

Frontend

$ cd KDT5-M2
$ npm install 
$ npm run dev

---

Stacks 🐈

Environment

Config

Development

---

화면 구성 📺

메인 페이지
Todo 등록
Todo 수정, 삭제
음악 플레이리스트
비디오 플레이리스트
현재 온도, 날씨 아이콘 기능

---

✨ 구현 기능✨

• 날씨 openApi를 이용하여 현재 위치에 맞는 날씨 데이터와 온도 데이터를 가져오고, 온도에 따라 날씨 이모티콘이 다르게 출력되도록 구현하였습니다.
• todolist를 등록, 삭제, 수정 기능을 구현하였습니다.
• youtube openApi 를 이용하여 음악 아이콘을 클릭시 모달창이 뜨고, 현재 저장된 playlist 가 호출되게 구현하였습니다.
• youtube openApi 를 이용하여 비디오 아이콘을 클릭시 모달창이 뜨고, 현재 저장된 실시간 viediolist 가 호출되게 구현하였습니다.
• 현재 로컬 시간을 구하여, 현재 시간이 출력되는 기능을 구현하였습니다.

⭐️ 1) 할 일 목록(List)이 출력 기능 / 할 일 항목(Item)추가 기능.

-> input 컴포넌트와 list컴포넌트를 나누었기때문에 둘의 컴포넌트가 import 되어있는 LandingPage에 props로 상태값을 넘겨 줘야 합니다.
따라, input 컴포넌트 에는 기본값 {setItem} 를 넘겨주고 결고 값이 나타나는 result 창에는 {selectItem} 값을 넘겨 주었습니다.
-> input에 할일 데이터를 입력한 onChange 의 함수가 실행되고 등록 button 을 클릭하면 props.setData 를 사용해 정보를 SearchResult 의 컴포넌트에 데이터를 받아오게 됩니다.

▶LandingPage.jsx

const [selectItem, setItem] = useState(false);
 <div className='LandingContainer_left'>
  <InputForm setData={setItem}/>
  <TodoResult getItem={selectItem}/>  
 </div> 

▶Input.jsx

-> 처음 props로 넘어온 setData의 기본 값은 데이터가 등록되기 전 상태이기 때문에 임의의 변수 flag = flase 값을 넣어 주었습니다.
-> 그후 alert창에서 등록에 대한 유무를 물어본후에 , api를 할당해주었던 변수 todoPost를 이용해서 데이터를 넘겨 준후 props.setData(flag) flag 상태를 true 값으로 변경해 주었습니다.

▶TodoResult.jsx

const [dataList, setDatalist] = useState([]);
{dataList.map((item, index) => (


))}

-> TodoResult 페이지가 마운트 되었을때 useEffect 로 serarch의 함수를 실행합니다. search 함수에 getTodo() 로 데이터를 조회한후에, setDatalist 안에 받아온 데이터 값을 넣어 두었습니다.
-> map을 사용해서 dataList 를 배열 list 로 나타내게끔 구현하였습니다.

⭐️ 2) 할 일 항목 수정기능.

-> {editingItemId === item.id ? 의 조건식을 주어, 수정하려고 하는 editingItemId 와 현재 item.id 가 일치하면

-> 리스트창을 input 으로 바꿔주고, 재 등록 할수 있도록 체크 표시 아이콘으로 바꿔주었습니다.

-> 아이디 값이 일치하지 않을시 (수정되기 전의 모습) flase값의 위치에 있는 코드가 실행됩니다.
-> 수정중일때 나타나는

⭐️ 3) 시계 아이콘 hover시 등록된 날짜, 수정된 날짜 보이기.

->

⭐️ 4) Youtube OpenApi, recoil 을 사용하여 음악 플레이리스트, 비디오 플레이리스트 노출 기능

->

⭐️ 5) 날씨 openApi를 사용하여 현재 위치, 현재온도 를 가져오고, 현재위치에 대한 날씨 데이터에 맞는 아이콘 출력.

->

---

🎇 느낀점

->

🎇 아쉬운점

->