[ToyProject-Todomate] 투두메이트 클론 프로젝트 18

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

MainNavBar의 Drawer 메뉴를 만들었으니, 이제 Content 부분의 여러 기능들을 해결해봐야겠다.

이번주는 캘린더와..... .....

투두.... Feed 부분을....

 

 

Explore → Feed 순으로 작업하려고 한다.

 

---

 

MUI는 진심으로 미쳤다.

 

 

 

이 부분에 쓸 컴포넌트도 이미 만들어져 있다.

바로 Avatar다.

 

이 Avatar 컴포넌트에서 Letter Avatar 컴포넌트를 사용해본다.

 

캘린더 상단의 저 부분은 내가 팔로우한 사람의 닉네임의 앞글자가 표시되는 곳이다.

 

 

 

 

Avatar 패키지를 import 한다.

 

 

import { Avatar } from '@mui/material';

 

 

컴포넌트는 <Avatar></Avatar> 로 사용하고 안에 레터링으로 넣어줄 글자를 하나 적어주면 된다. (3개 적어도 된다.)

Avatar 컴포넌트는 기본 배경색이 회색이고, 글자색은 흰색이다.

 

 

여기에 Box 처럼 sx props를 이용해서 배경색과 글자색을 디자인해줄 수 있다.

Todomate의 경우 테두리 있는 흰색 원에 검정색 글자를 사용하기 때문에 디자인 props는 하나면 되겠다.

 

 

 

<Avatar sx={{ backgroundColor: '#fff', color: '#111', fontWeight: 'bold', border: '2px solid #222' }}>
	K
</Avatar>

 

나중에 여기 + 버튼을 통해 팔로우를 생성하면 옆에 하나씩 추가될 수 있도록 기능을 구현하면 되겠다...

할 수 있겠지..?