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

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

 

어제 만들어둔 수정 함수를 이어서 개발하려고 하는데 복잡한 기능을 구현하려고 하니 많이 막막해졌다.

하나씩 정리해서 풀어나가보자

 

 

목표 수정 기능을 위해 구현해야 할 것

 

- 현재 표시된 목표를 클릭하면 해당 state의 title과 key가 GoalForm에 전달될 것

- GoalForm의 textfield에 state의 title이 적힐 것

- title을 수정하고 다시 등록버튼을 누르면 같은 key의 state가 업데이트 될 것

 

 

그리고 기존에 작성한 목표 컴포넌트를 보면 InputBase로 적혀있는데 이게 그냥 list 같은 태그가 아니라서

readOnly가 필요했던 것이었다.

 

기존에 만들었던 수정 함수와 readOnly state를 삭제하고 다시 새로 만들어 보자.

그리고 ListItem 안에 InputBase를 Label로 바꿔서 체크박스가 체크될 수 있도록 하자.

 

 

 

 

위의 Label 컴포넌트를 확인하고 같은 모양으로 Goals.js 를 바꿔준다.

Label을 선택한 이유는 나중에 todomate처럼 목표를 클릭하면 체크박스가 체크될 수 있도록 하기 위해서이다.

label 속성에 item.title이 들어가면 되겠다.

 

checked 속성은 아래와 같이 변경해야 하기 때문에 item.done의 값도 checked로 변경해준다.

 

 

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

 

  // 목표goals 페이지 goal 아이템
  let [goal, goalChange] = useState(
     { 
       items: [{
       id: '0',
       title: '첫번째',
       done: 'checked',
        },
        { id: '1',
          title: '두번째',
          done: '',
      }]
    }
  )

 

 

state를 위와 같이 바꾸고 Goals.js 컴포넌트도 아래와 같이 변경했다.

 

 

import React from "react";
import { Checkbox, FormControlLabel, FormGroup, IconButton, InputBase, ListItem, ListItemText } from "@mui/material";
import GoalForm from "./GoalForm";
import { ListItemSecondaryAction } from "@material-ui/core";

export default function Goals(props) {
  console.log(props);
  let goalItems = props.goal;
  let addGoal = props.addGoal;
  let deleteGoal = props.deleteGoal;
  let checkboxEventHandler = props.checkboxEventHandler;


  //목표 삭제 이벤트핸들러 함수

    function deleteEventHandler(e) {
      console.log( 'id : ',  e.target.id)
      deleteGoal(e.target.id, goalItems)
    }


  return (
    <FormGroup>
    <GoalForm addGoal={addGoal} />

        {
        goalItems.map((item, idx) => {
         
        return ( <ListItem className="goals-wrap" key={item.id} > { console.log('item: ', item) }
                    <ListItemText>
                    <FormControlLabel control={<Checkbox checked={item.done} onChange={checkboxEventHandler} />}
                    id={item.id}
                    name={item.id}
                    label={item.title}
                    fullWidth={true}
                    
                    />
                    </ListItemText>
                    <ListItemSecondaryAction>
                    <IconButton aria-label="Delete Todo" id={item.id} onClick={deleteEventHandler} sx={{ fontSize: '14px' }}>
                        삭제
                    </IconButton>
                    </ListItemSecondaryAction>
                </ListItem>
                );
            })
        }
    </FormGroup>
  );
}

 

 

모양은 예쁘게 잘 나왔는데... 정신차려보니 우리가 구현해야 하는 '목표' 는 그야말로 목표고 

실제로는 체크박스의 기능을 전혀 사용하지 않고 있었다.

 

 

클론하는 원본의 기능도 제대로 파악을 못했다는게 너무 어이없었다.

 

 

위의 Goals.js 코드를 다시 변경해보자

 

 

import React from "react";
import {  IconButton, List, ListItem  } from "@mui/material";
import GoalForm from "./GoalForm";
import { ListItemText } from "@material-ui/core";

export default function Goals(props) {
  console.log(props);
  let goalItems = props.goal;
  let addGoal = props.addGoal;
  let deleteGoal = props.deleteGoal;

  /* 함수 시작 */

  //목표 삭제 이벤트핸들러 함수

    function deleteEventHandler(e) {
      console.log( 'id : ',  e.target.id)
      deleteGoal(e.target.id, goalItems)
    }

/* 함수 끝 */


  return (
    <>
    <GoalForm addGoal={addGoal} />
    <List>
        {
        goalItems.map((item, idx) => {
         
        return ( <ListItem className="goals-wrap" id={item.id} key={item.id}  > 
                    <ListItemText>{item.title} </ListItemText>
                    <IconButton aria-label="Delete Todo" id={item.id} onClick={deleteEventHandler} sx={{ fontSize: '14px' }}>
                        삭제
                    </IconButton>
                </ListItem>
                );
            })
        }
    </List>
    </>
  );
}

 

 

이렇게 깔끔하게 정리해주었다.

삭제 버튼의 onClick 핸들러는 그대로 작동하기 때문에 수정할 필요가 없고, props로 내용은 잘 가지고 오고 있으니 그대로 사용하면 된다.

Goal state에서 done을 삭제해주면 되겠다!

 

 

  // 목표goals 페이지 goal 아이템
  let [goal, goalChange] = useState(
     { 
       items: [{
       id: '0',
       title: '첫번째',
        },
        { id: '1',
          title: '두번째',
      }]
    }
  )

 

 

그럼 입력도 정상적으로 될 수 있도록 addGoal 함수도 수정한다.

item.done이 생성되지 않도록 지워주고, readOnly 관련 함수도 삭제해 App.js 를 전체 수정한다.

 

 

 

import React, { useState } from "react";
import "../stylesheets/App.css";
import { Button  } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Switch, Route, useHistory } from "react-router-dom";
import Signin from "./Signin";
import Join from "./Join";
import BasicNavBar from "./BasicNavBar";
import Goals from "./Goals";
import Main from "./Main";


const theme = createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
  typography: {
    Link: {
      color: '#222',
    },
    bolder: {
      fontWeight: 600,
    },
    button: {

    },
  },
  palette: {
    btn: {
      main: "#f2f2f2",
      contrastText: "#111",
    },
    basicnav: {
      main: "#fefefe",
      contrastText: "#111",
    },
    mainnav: {
      main: '#FAFAFA'
    },
    main: {
      main: '#e4f2b4'
    },
    content: {
      main: '#23fa43'
    },
    explore: {
      main: '#2a5dc9'
    },
    feed: {
      main: '#f66a55'
    },
    calendar: {
      main: '#9f4cd6'
    },
  },
});

function App() {
  
  /* Hook 선언 시작 */
  
  let history = useHistory();

  /* Hook 선언 끝 */


  /* Dummy State 시작 */

  // 목표goals 페이지 goal 아이템
  let [goal, goalChange] = useState(
     { 
       items: [{
       id: '0',
       title: '첫번째',
        },
        { id: '1',
          title: '두번째',
      }]
    }
  )

  /* Dummy State 끝 */


  /* 함수 선언 시작 */


  //목표 추가 함수
  function addGoal(item){

    const thisItems = goal.items; // goal State 원본 카피
    item.id = 'ID-' + thisItems.length; //key를 위한 id 추가
    thisItems.push(item) // 카피한 goal 리스트에 아이템 추가
    goalChange({items: thisItems}); //goalChange를 이용해 state 변경
    console.log('items :', goal.items)
  }

  //목표 삭제 함수
  function deleteGoal(targetId, item){

    const thisItems = item; // goal State 원본 카피
    console.log('Before Update Items :', item );
    const newItems = thisItems.filter(e => e.id !== targetId)
    goalChange({items: newItems})
  }

  /* 함수 선언 끝 */


  return (
    <ThemeProvider theme={theme}>
      <Switch>
        <Route exact path="/">
          <div className="App">
            <div className="header">
              <img className="main_img" src="images/todomate.jpg" />
              <h1>todo mate</h1>
              <h3>할 일을 작성, 계획, 관리하세요.</h3>
            </div>
            <div className="start_btn">
              <Button 
                className="join_btn" 
                color="btn"
                variant="contained" 
                sx={{ boxShadow: 'none'}}
                onClick={() => {
                  history.push("/join");
                }}
              >
                가입하기
              </Button>
              <Button
                className="signin_btn"
                color="btn"
                variant="contained"
                sx={{ boxShadow: 'none'}}
                onClick={() => {
                  history.push("/signin");
                }}
              >
                로그인
              </Button>
            </div>
          </div>
        </Route>
        <Route exact path="/main">
          <Main/>
        </Route>
        <Route exact path="/join">
        <BasicNavBar/>
          <Join />
        </Route>
        <Route exact path="/signin">
        <BasicNavBar/>
          <Signin />
        </Route>
        <Route exact path="/goals">
        <BasicNavBar/>
          <Goals goal={goal.items} addGoal={addGoal} deleteGoal={deleteGoal} />
        </Route>
        </Switch>
    </ThemeProvider>
  );
}

export default App;

 

 

 

진작 이렇게 할걸 ^^

 

 

그럼 이제 드디어 수정을 구현해보자;