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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

 

와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 

그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다.

 

 

그동안 한 일은

 

 

 

1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제

   수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다.

   그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데

   이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다.

   드래그 라이브러리를 사용해서 대충 만들어보기는 했는데 진전이 많이 안되었다.

   내일 하기와 날짜바꾸기를 클릭한 경우 datepicker를 써서 날짜를 선택하고, 확인을 누르면 state가 바뀌도록 하였다.

 

 

 

 

 

2. 간편 입력 구현

    간편 입력이라는 UI명이 와닿지 않는 것 같아 내 식으로 바꿨다. 

    기한이 있는 할 일 설정이라는 UI명으로 바꾸고 목표를 뿌려준 다음 목표를 클릭하면 아래 양식이 생성되고

    생성된 양식에 반복할 일정과 요일을 설정한 다음 확인을 클릭하면 state에 올라갈 수 있도록 만들었다.

    캘린더가 각각 시작 날짜와 종료 날짜에 값을 전달해야 해서 두 개를 만들었는데

    하나의 캘린더 모달을 이용해서 각 input 값에 전달하는 방법을 쓸 수 있다면 좋았을 거 같다.

    나중에 이 부분을 리팩토링 하는 것을 목표로 하고 있다.

 

 

 

 

 

 

 

3. CSS 뜯어고치기

 

 

    초반에 CSS를 덕지덕지 발라놔서 sx={{}} 속성으로 많이 붙여놨다. 이 부분을 다 떼서 SCSS로 CSS를 구현했고

    변수랑 믹스인도 활용을 했다.

    같은 디자인이 여러군데 들어가는데도 불구하고 믹스인을 쓰니 오히려 더 보수가 불편한 느낌이 있었는데

    통신 연결까지 끝나면 CSS를 최종 수정해보려고 한다.

 

 

 

4. 기존의 목표 따로 투두 따로 API Result 통합

 

 

기존에 아래와 같이 goal 데이터와 todo 데이터를 따로 썼었는데

 

//목표 데이터

export const goalsData = atom({ // 로딩 시 모든 목표 뿌리기
  key: "goalsData",
  default: [
    {
      "goal_id": 0,
      "next_goal_id": 1,
      "title": "첫 번째 목표",
      "privacy": "PUB",
      "box_color": "",
      "title_color": "#3CB371"
    },
    {
      "goal_id": 1,
      "next_goal_id": 2,
      "title": "두 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#234d22"
    },
    {
      "goal_id": 2,
      "next_goal_id": 3,
      "title": "세 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#C71585"
    },
    {
      "goal_id": 3,
      "next_goal_id": 4,
      "title": "네 번째 목표",
      "privacy": "PRI",
      "box_color": "",
      "title_color": "#21bdbd"
    }
  ]
})

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

export const createRepeatDay = atom({
  key: "createRepeatDay",
  default: {
  "sun": "N", //y 면 일요일 반복, n 이면 반복 x
  "mon": "N",
  "tue": "N",
  "wed": "N",
  "thu": "N",
  "fri": "N",
  "sat": "N",
}
});

 

 

//투두 데이터

export const todoData = atom({ // 로딩 시 오늘 값 받아오기 // 캘린더에서 날짜 클릭하면 해당 날짜로 값 받아오기 // 더미 데이터는 2022-02-05
  key: "todoData",
  default: [
    {
    "todo_id": 0,
    "goal_id": 0, //묶여있는 goal id
    "next_todo_id": 1, //다음 todo id (순서지정용)
    "title": "첫 번째 목표의 할 일 0",
    "date": "2022-02-05",
    "end_repeat_date": "2022-02-05", //반복 종료 일자. 반복 없으면 date 와 값이 같거나 없음
    "repeat_days": {
        "sun": "N", //y 면 일요일 반복, n 이면 반복 x
        "mon": "N",
        "tue": "N",
        "wed": "N",
        "thu": "N",
        "fri": "N",
        "sat": "N",
    },
    "check_yn" : "N" //달성여부
  },
  {
    "todo_id": 1,
    "goal_id": 0, //묶여있는 goal id
    "next_todo_id": 2, //다음 todo id (순서지정용)
    "title": "첫 번째 목표의 할 일 1",
    "date": "2022-02-05",
    "end_repeat_date": "2022-02-05", //반복 종료 일자. 반복 없으면 date 와 값이 같거나 없음
    "repeat_days": {
        "sun": "N", //y 면 일요일 반복, n 이면 반복 x
        "mon": "N",
        "tue": "N",
        "wed": "N",
        "thu": "N",
        "fri": "N",
        "sat": "N",
    },
    "check_yn" : "N" //달성여부
  },
  {
    "todo_id": 0,
    "goal_id": 1, //묶여있는 goal id
    "next_todo_id": 1, //다음 todo id (순서지정용)
    "title": "두 번째 목표의 할 일 1",
    "date": "2022-02-05",
    "end_repeat_date": "2022-02-05", //반복 종료 일자. 반복 없으면 date 와 값이 같거나 없음
    "repeat_days": {
        "sun": "N", //y 면 일요일 반복, n 이면 반복 x
        "mon": "N",
        "tue": "N",
        "wed": "N",
        "thu": "N",
        "fri": "N",
        "sat": "N",
    },
    "check_yn" : "N" //달성여부
  }
]
})

 

 

 

이것을 하나로 묶으면서 배열 안에 객체, 객체 안에 배열 이런 구조가 되어서 화면 변화 렌더링 로직을 전면 교체했다.

기존 목표 / 투두 를 목표+투두로 바꾼 것.

 

 

 

// todo api
export const objTodosDataResult = atom({
  key: 'objTodosDataResult',
  default: [
  {
  goalTitle : "첫 번째 목표",
  goalId: 1,
  goalOrderNo : 1,
  goalTitleColor : "#ff0000",
  todos : [
       {goalId: 1,
        todoId: 1,
        orderNo: 1,
        title: "첫 번째 목표의 첫 번째 할 일",
        date: "2022-02-13",
        endRepeatDate: "2022-02-13",
        repeatDays: {
          THU: "N",
          WEN: "N",
          TUE: "N",
          SAT: "N",
          FRI: "N",
          MON: "N",
          SUN: "N"
        },
        checkYn: "N"
        },
        {goalId: 1,
          todoId: 2,
          orderNo: 2,
          title: "첫 번째 목표의 두 번째 할 일",
          date: "2022-02-13",
          endRepeatDate: "2022-02-14",
          repeatDays: {
            THU: "N",
            WEN: "N",
            TUE: "N",
            SAT: "N",
            FRI: "N",
            MON: "N",
            SUN: "N"
          },
          checkYn: "N"
      },
      {goalId: 1,
        todoId: 3,
        orderNo: 3,
        title: "첫 번째 목표의 세 번째 할 일",
        date: "2022-02-13",
        endRepeatDate: "2022-02-17",
        repeatDays: {
          THU: "N",
          WEN: "Y",
          TUE: "N",
          SAT: "N",
          FRI: "Y",
          MON: "N",
          SUN: "N"
        },
        checkYn: "N"
      },
  ]},
  {
    goalTitle : "두 번째 목표",
    goalId: 2,
    goalOrderNo : 2,
    goalTitleColor : "#ff873d",
    todos : [
         {goalId: 2,
          todoId: 1,
          orderNo: 1,
          title: "두 번째 목표의 첫 번째 할 일",
          date: "2022-02-13",
          endRepeatDate: "2022-02-13",
          repeatDays: {
            THU: "N",
            WEN: "N",
            TUE: "N",
            SAT: "N",
            FRI: "N",
            MON: "N",
            SUN: "N"
          },
          checkYn: "N"
          },
          {goalId: 2,
            todoId: 2,
            orderNo: 2,
            title: "두 번째 목표의 두 번째 할 일",
            date: "2022-02-11",
            endRepeatDate: "2022-02-15",
            repeatDays: {
              THU: "N",
              WEN: "N",
              TUE: "N",
              SAT: "N",
              FRI: "N",
              MON: "N",
              SUN: "N"
            },
            checkYn: "N"
        },
    ]},
    {
      goalTitle : "세 번째 목표",
      goalId: 3,
      goalOrderNo : 3,
      goalTitleColor : "#0119cb",
      todos : [
           {goalId: 3,
            todoId: 1,
            orderNo: 1,
            title: "세 번째 목표의 첫 번째 할 일",
            date: "2022-02-16",
            endRepeatDate: "2022-02-16",
            repeatDays: {
              THU: "N",
              WEN: "N",
              TUE: "N",
              SAT: "N",
              FRI: "N",
              MON: "N",
              SUN: "N"
            },
            checkYn: "N"
            },
            {goalId: 3,
              todoId: 2,
              orderNo: 2,
              title: "세 번째 목표의 두 번째 할 일",
              date: "2022-02-13",
              endRepeatDate: "2022-02-19",
              repeatDays: {
                THU: "N",
                WEN: "N",
                TUE: "N",
                SAT: "N",
                FRI: "N",
                MON: "N",
                SUN: "N"
              },
              checkYn: "N"
          },
      ]},
      {
        goalTitle : "네 번째 목표",
        goalId: 4,
        goalOrderNo : 4,
        goalTitleColor : "#77ab59",
        todos : [
             {goalId: 4,
              todoId: 1,
              orderNo: 1,
              title: "네 번째 목표의 첫 번째 할 일",
              date: "2022-02-16",
              endRepeatDate: "2022-02-16",
              repeatDays: {
                THU: "N",
                WEN: "N",
                TUE: "N",
                SAT: "N",
                FRI: "N",
                MON: "N",
                SUN: "N"
              },
              checkYn: "N"
              },
        ]},
]
})

 

 

5. 현재 날짜의 모든 할 일 수정

 

   Feed에서 하단의 ... 버튼 클릭하면 오늘의 할 일들을 한 번에 다루는 메뉴가 있는데 원래 이름은 날짜별 할 일 수정이었다. 이것도 간편 입력처럼 이름을 바꾸었다. 날짜별 할 일 수정으로.

   그리고 기존 모달처럼 아이콘을 넣은 UI로 바꾸었다. 화면 재사용을 위해 ...

 

원본

 

변경

 

 

 

6. Calendar 눌렀을 때 날짜 얻어올 수 있도록 date 정보 개선

 

 

각 캘린더 모달에서 각각 관리되던 date를 Recoil에서 관리할 수 있도록 date 데이터 부분을 별도로 만들었다.

 

const today = new Date();
const tomorrow = new Date(today);
const nextDay = new Date(tomorrow.setDate(today.getDate()+1))


//오늘 날짜, 내일 날짜
export const objDatesData = atom({
  key: 'objDatesData',
  default : {
    "dtToday" : today.toJSON().substring(0, 10),
    "dtTomorrow" : nextDay.toJSON().substring(0, 10),
    "dtFeedCalendarDate" : today,
    "selectedNewDate" : new Date(),
    "selectedNewEndDate" : new Date(),
  }

})

 

 

 

 

7. 불필요한 recoil state 삭제

 

 

족제비님과 대화 중에 불필요하게 recoil state가 난무하고 있다는 사실을 알았고 

파일 단위로 나눠지는 컴포넌트 최소 2개 이상에서 하나의 데이터를 공용으로 사용하게 되면 atom으로 관리하기로 했다.

날짜 정보는 main에서 클릭하는 캘린더 컴포넌트가 주로 사용하고 나머지는 날짜 변경 시 나타나는 캘린더 컴포넌트로 state 수정을 해줘야 하기 때문에 recoil로 관리한다.

todo나 goal은 말할 것도 없고...

나머지 자잘한 readonly 속성이나 true false만 관리하는 부분(모달창 on/off 같은)을 개별 컴포넌트로 다시 옮겨 넣었다.

 

 

 

이번주 할 일은

fetch 이용해서 데이터 통신 모듈을 쭉 만들어놓고 각 실행 함수에 import 시키고

메뉴 완성해서 라우트도 정리하는 것인데

할 수 있겠지 우하하