🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘의 할 일은 Explore의 달력부분을 만드는 일이다. 달력의 경우 NHN TOAST에서 제공하는 Calendar UI 라이브러리를 사용하기로 하였다. 그래서 TOAST의 공식문서에서 적용방법을 따라해본다. 1. 설치 npm 이나 bower, CDN을 통해 라이브러리를 이용할 수 있다. 리액트 프로젝트이기 때문에 간편한 CDN 보다는 npm을 통해 패키지를 설치하자. npm install --save @toast-ui/react-calendar 2. Calendar 패키지와 CSS를 import 해온다. ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 MainNavBar의 Drawer 메뉴를 만들었으니, 이제 Content 부분의 여러 기능들을 해결해봐야겠다. 이번주는 캘린더와..... ..... 투두.... Feed 부분을.... Explore → Feed 순으로 작업하려고 한다. MUI는 진심으로 미쳤다. 이 부분에 쓸 컴포넌트도 이미 만들어져 있다. 바로 Avatar다. 이 Avatar 컴포넌트에서 Letter Avatar 컴포넌트를 사용해본다. 캘린더 상단의 저 부분은 내가 팔로우한 사람의 닉네임의 앞글자가 표시되는 곳이다. Avatar 패키지를 i..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 내가 하고 싶은 것은 MainNavBar 컴포넌트 안에 버튼을 클릭하면 DrawerMenu가 실행되는 것이다. 따라서 Main > MainNavBar > DrawerMenu가 되어야 하기 때문에 태그의 위치를 그렇게 바꿔준다. Main.js import React from 'react'; import Box from '@mui/material/Box'; import MainNavBar from './MainNavBar'; import Content from './Content'; export default f..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 문제가 있던 부분은 CSS flex와 min-width 적용하고 캘린더를 Explore 컴포넌트 안에 넣어서 해결했다. //Content.js import React from 'react'; import Calendar from './Calendar'; import Explore from './Explore'; import Feed from './Feed'; import Box from '@mui/material/Box'; export default function Content() { return ( ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 레이아웃 배치까지는 해야겠지... 싶다. sx props를 사용하기 위해서 (스타일을 적용하려고) 를 로 바꿔준다. import Box from '@mui/material/Box'; 상단에는 Box 패키지를 적용해줘야 한다. 우선 Main은 import React from 'react'; import Content from './Content'; import Box from '@mui/material/Box'; export default function Main() { return ( {/* main ..

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 퇴근 - 회의하고 - 메인페이지에서 사용할 커다란 컴포넌트 덩어리들 만들기 를 해본다. 1. 메인페이지로 사용할 Main.js 파일을 만든다. 이제는 export default를 뒤에 붙이지 않고 함수명 앞에 붙여서 한 덩어리로 보이게끔 하는 법을 배웠다. import React from 'react'; export default function Main () { return ( ); } 2. App.js에서 라우터 설정을 해준다. 3. MainNavBar 옮기기 path="/"에 있던 MainNavB..