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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

---

1. 목표 컴포넌트 상세 수정

2. Dialog 적용

3. Recoil을 적용

---

 

 

연휴가 벌써 반이 지나갔다. 나흘밖에 안되는 짧은 연휴지만 오랜만에 길게 쉬어서 좋긴 하다.

프로젝트 코드를 훅훅 작성했어야 하는데 설준비하면서 틈틈이 하는 것도 쉽지 않았다 ㅠㅠㅠㅠ

 

어제까지는 짬짬이 목표Goals 컴포넌트를 전반적으로 수리했다.

 

 

- 저번주까지 한 일

1. 목표 컴포넌트 상세 수정

 

 

목표 Goals 컴포넌트의 '공개 설정' 과 '색상' 부분의 State를 수정할 수 있는 기능을 만들었다.

처음 구현할 때는 구현 자체에 신경쓰느라고 김다정님의 책을 그대로 따라 붙였는데, 이번에 코드를 수정하다 보니 코드 길이도 많이 간결해지고 state넘기고 받고 수정을 어떻게 해야하는 건 지 느낄 수 있었다.

그리고 목표 리스트에서 +를 클릭하면 목표 추가 페이지가, 목표를 클릭하면 목표 수정 페이지가 뜰 수 있도록 Router도 수정했다.

 

<Route exact path="/goals">
<BasicNavBar/>
  <Goals  />
</Route>
<Route exact path="/goalForm">
 <BasicNavBar/> 
 <GoalForm />  
</Route>
<Route exact path="/goalEditForm/:originID">
<BasicNavBar/> 
 <GoalEditForm />  
</Route>

 

그리고 목표 수정 페이지에서는 : 를 사용해서 url의 get 방식으로 파라미터를 넘겨서 해당 id의 state를 가져오고, 수정되도록 했다.

 

 

두 가지 기능을 추가하고 해당 기능들의 state도 수정, 삭제가 되도록 함수를 수정했다.

여기서 엄청 오래 걸렸다. 저번주는 전부 여기에 투자한 거 같다. 좀 더 정신이 있었으면 상세하게 기록했을텐데...

state 정보 중에서 bg_color 도 만들어야 하는데 현재 투두메이트가 업데이트 되는 바람에 bg_color 기능이 사라졌다! 그래서 title_color 만 가지고 있는 것 같아서 나중에 추가하던지 해야겠다.

 

 

 

 

 

 

2. Dialog 적용

 

적용한 기능들은 모두 MUI의 Dialog 컴포넌트를 사용해서 모달처럼 띄워지도록 했다.

Dialog 를 적용하지 조금 더 자연스러운 UI가 되었다.

SCSS로 CSS도 수정했고 색상 선택 시 예시 색상이 보일 수 있도록 했고, radio 버튼으로 구현한 input들이 변할 때 마다 state도 변할 수 있도록 했다.

 

 

 

 

 

3. Recoil을 적용

 

Recoil을 설치하고, atoms라는 폴더에 todoData라는 파일을 만들어서 state 의 상태를 관리하기로 하였다.

state들은 atom으로 각 컴포넌트에 뿌려지고 처음 데이터로 더미 데이터를 만들어서 default에 작성했다.

 

 

import { atom } from "recoil";

export const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});


export const calendarData = atom({
    key: 'calendarData', // unique ID (with respect to other atoms/selectors)
    default:  [ 
      { numTodoDay: 8, numCountTodo: 2, completeYn: 'n' }, 
      { numTodoDay: 13, numCountTodo: 4, completeYn: 'n', }, 
      { numTodoDay: 29, numCountTodo: 6, completeYn: 'y' } ] // default value (aka initial value)
  });


export const goalsData = atom({ 
  key: "goalsData",
  default: [
    {
      "goal_id": 0,
      "next_goal_id": 1,
      "title": "첫 번째 목표",
      "privacy": "PUBLIC",
      "bg_color": "",
      "title_color": "#3CB371"
    },
    {
      "goal_id": 1,
      "next_goal_id": 2,
      "title": "두 번째 목표",
      "privacy": "PRIVATE",
      "bg_color": "",
      "title_color": "#C71585"
    }
  ]
})

export const goalReadOnly = atom({
  key: "goalReadOnly",
  default: "read"
})

 

Recoil을 이용하기 때문에 App.js 로 전부 올려보냈던 함수들도 하위 컴포넌트로 전부 옮겼다. 

목표 컴포넌트에 기능을 추가하면서 App.js 에 있던 추가, 수정, 삭제 함수들을 한 번 수정했었는데 이번에 함수를 하위로 옮기면서 또 수정을 반복해야했다.

 

역시 한방에 하는게 최고다.

 

 

 

지금 하고 있는 것은 Feed 화면에 atom으로 목표를 뿌려주는 화면을 생성하고 있고

내일은 목표를 클릭하면 투두를 작성할 수 있도록 해보자.