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

WEB Dev/ToyProject 2022. 2. 8. 15:44

728x90

728x90

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate

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

1. Feed에 목표 뿌리기

2. 개별 목표 클릭했을 때 할 일 입력

3. todo state 각 목표에 맞게 뿌리기

할 일(to-do) 만들기를 진행하고 있다.

저번주 후반부터 집중하고 있는데 목표에 맞게 할 일 값을 뿌려 주는 것이 생각보다 어려웠다.

여러모로 중심이 되는 기능이다보니 state 다루는 것도 뭔가 더 고도화 된 기분이다.

1. Feed에 목표 뿌리기

atom으로 설정해 둔 goal 더미 데이터를 Main - Feed 에서도 쓸 수 있도록 한다.

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": "#C71585"
    }
  ]
})

import { useRecoilState, useRecoilValue } from "recoil";

import { goalsData } from "../atoms/todoData";

export default function Feed() {


/* Hook 선언 시작 */

/* atom 시작 */
    let goal = useRecoilValue(goalsData);
    
    
    return ();
    
 }

useRecoilState를 쓰지 않고 useRecoilValue를 쓴 이유는 목표의 생성, 수정, 삭제는 별도의 컴포넌트에서 진행하기 때문이다.

useRecoilValue로 값만 받아와 뿌려준 다음 페이지에 마크업 될 수 있도록 goal.map으로 화면에 뿌려준다.

그리고 클릭하면 기능들이 동작해야 하기 때문에 <Button> UI 컴포넌트로 감싸준다.

return (
        <Box className='feed-box'>
        <h2 className="feed-title">Feed</h2>
            <Box className="feed-goals-list-box">
                <List className="goals-list-wrap" >
                    {
                    goal.map((goal, index) => {
                    return ( <ListItem className="goals-listItem" id={goal.goal_id} key={goal.goal_id} > 
                        <Button className="goals-listItem-text-wrap" isselected={isGoalSelected[index]} id={goal.goal_id} onClick={(e)=>{(clickTodoHandler(e))}} data-index={index} >
                        <LibraryBooksIcon className="goals-listItem-icon" />
                                <ListItemText className="goals-listItem-text" id={goal.goal_id} name={goal.goal_id} sx={{ color:goal.title_color }}  >{goal.title}</ListItemText>
                            <ListItemText className="goals-listItem-add-icon" ><span>+</span></ListItemText>
                        </Button>
                        )
                     }   
                    )
                   }
                   
                </List>
            </Box>
        </Box>
        
        </>
   )

2. 개별 목표 클릭했을 때 할 일 입력

화면에 뿌려진 목표를 클릭했을 때 해당 클릭 부분 하단에 textfield가 나타나고

할 일을 입력했을 때 새로운 todo state가 만들어 질 수 있도록 한다.

여기서는 InputBase를 사용할 건데 목표 만들 때처럼 경험했던 것처럼 readonly속성에 따라 true일 때는 수정이 안되고 false일 때는 수정이 가능하도록하기 위해서이다.

목표를 클릭하면 CreateInput이라는 컴포넌트가 생성되고 해당 컴포넌트가 목표 아래 붙을 수 있도록 하기 위해 목표에 onClick 이벤트를 생성했고 CreateInput 컴포넌트를 하단에 별도로 만들었다.

이 CreateInput 컴포넌트에서 할 일을 입력하고 엔터를 치면 (submit 버튼 노출하지 않음)

아래 createTodoState에 담기고 react form hook을 통해 제출되게 된다.

// input 생성
export function CreateInput(props) {


    let id = props.id;
    let defaultDate = new Date().toJSON().substring(0,10);
    const isGoalSelected = props.isGoalSelected;
    const setIsGoalSelected = props.setIsGoalSelected;
    console.log("isGoalSelected" , isGoalSelected)
    /* Hook 선언 시작 */

    /* atom 시작 */
    const { register, handleSubmit, errors, watch } = useForm({ mode: "onChange" });
    let [todo, setTodo] = useRecoilState(todoData);
    let [createTodoState, setCreactTodoState] = useState({
        "todo_id": "",
        "goal_id": "", //묶여있는 goal id
        "next_todo_id": "", //다음 todo id (순서지정용)
        "title": "",
        "date": "",
        "end_repeat_date": "", //반복 종료 일자. 반복 없으면 date 와 값이 같거나 없음
        "repeat_days": {
            "sun": "N", //y 면 일요일 반복, n 이면 반복 x
            "mon": "N",
            "tue": "N",
            "wed": "N",
            "thu": "N",
            "fri": "N",
            "sat": "N",
        },
        "check_yn" : "N" //달성여부
      });

    /* Hook 선언 끝 */

    /* 함수 선언 시작 */

    //input 함수
    const onInputChange = (e) => {
        setCreactTodoState({...createTodoState, title: e.target.value})
        // console.log(createTodoState)
    }
    
    //todo 추가 함수
    const addTodo = (data, id) => {
        const copy_todo_state = [...todo];
        //추가되는 state 'todo_id', 'goal_id', 'next_todo_id', 'date', 'end_repeat_date'
        // 'repeat_days'와 'check_yn'은 default 값 "N" , 
        data.todo_id = copy_todo_state.length;
        data.goal_id = parseInt(id); //key를 위한 id 추가
        data.next_todo_id = copy_todo_state.length+1;
        data.date = defaultDate;
        data.end_repeat_date = defaultDate;
        copy_todo_state.push(data);
        setTodo(copy_todo_state, console.log(copy_todo_state))
    }
    
    // console.log(goal)//react-form-hook submit 함수
    const onSubmit =  (data) => { 
        console.log(data.goal_id)
        const index = data.goal_id
        const newArr = [...isGoalSelected];
        setIsGoalSelected(newArr[index] = false)
         setCreactTodoState(JSON.stringify(createTodoState));
         addTodo(createTodoState, index);
    }

    const onError = (error) => {
        console.log(error);
        };



    /* 함수 선언 끝 */

    return  (
            <Box className="goals-todo-input-create-Box">
                <form onSubmit={handleSubmit(onSubmit,onError)}>
                    <div className="goals-todo-input-create-wrap">
                    <CheckBoxOutlineBlankIcon className="goals-todo-input-create-check-icon"/>
                    <InputBase {...register("title")} id="todo-input" className="goals-todo-input-create-field"  placeholder="할 일을 입력해주세요." onChange={onInputChange} /> 
                    <InputBase {...register("goal_id")} id="todo-goal-id-input" className="todo-goal-create-id" type="hidden" value={id} /> 
                    <Button type="submit" className="goals-todo-input-btn"><MoreHorizIcon className="goals-todo-list-input-btn-icon" /></Button>
                    </div>
                </form>
            </Box>
            )
}

여기서 맵으로 뿌려지는 태그를 개별 선택하는 클릭 이벤트를 구현하는데 굉장히 애를 먹었다.

그러다 아래 블로그의 도움을 굉장히 많이 받았다.

react) map함수 클릭 이벤트에서 한개의 값만 스타일 변경하기

이전에는 클릭시 스타일만 변경하는 방법을 작성하였다. 하지만 홈페이지를 보면 하나만 클릭했을시 하나만 불이 들어온다거나 하나만 스타일이 변경되어야 한다.

velog.io

1. 목표 배열만큼 boolean 값으로 채워진 배열 생성하기

let [isGoalSelected, setIsGoalSelected] = useState(Array(goal.length).fill(false) );

로 별도의 배열을 하나 생성해준다.

2. 개별 목표 버튼에 할당할 이벤트 생성

<Button className="goals-listItem-text-wrap" isselected={isGoalSelected[index]} id={goal.goal_id} onClick={(e)=>{(clickCreateTodoHandler(e))}} data-index={index} ></Button>

//목표 클릭 시 이벤트 핸들러
const clickCreateTodoHandler = (e) => {
    const index = e.currentTarget.dataset.index;
    const newArr = Array(goal.length).fill(false) ;
    newArr[index] = true;
    setIsGoalSelected(newArr)
}

위와 같이 개별 목표 버튼에 onClick 이벤트를 넣어준 다음 클릭 이벤트 핸들러를 구현한다.

개별 Button에 dataset으로 설정된 index 값을 받아오고 (goal 배열의 인덱스와 같음)

newArr로 기존 배열과 같은 배열을 생성한 다음 해당 순서의 false 값을 true로 바꿔준다음 isGoalSelected 값을 변경해준다. (이 컴포넌트에서만 쓸 것이기 때문에 recoil에 넣지 않고 useState로 사용했다.

3. 조건문으로 CreateInput 컴포넌트 생성

해당 인덱스의 isGoalSelected가 true 인 경우 CreateInput 컴포넌트가 나타날 수 있도록 조건문을 설정한다.

 {isGoalSelected[index] ? <CreateInput />: null}

이렇게 하면 해당 인덱스 부분의 isGoalSelected의 값에 따라 CreateInput 이 등장하게 된다.

3. todo state 각 목표에 맞게 뿌리기

이제 생성된 할 일 들을 목표 아래에 노출되도록 해준다.

목표의 id와 할 일이 가지고 있는 goal_id가 매칭이 되어야 하고 해당 목표 아래에 할 일이 뿌려져야 한다.

목표와 동일하게 recoil로 더미데이터를 만들고 atom으로 가지고 온다.

import { todoData } from "../atoms/todoData";

export default function Feed() {


/* Hook 선언 시작 */

/* atom 시작 */

    let todo = useRecoilValue(todoData);
    
    
    return (<>
        
        <Box className='feed-box'>
        <h2 className="feed-title">Feed</h2>
            <Box className="feed-goals-list-box">
                <List className="goals-list-wrap" >
                    {
                    goal.map((goal, index) => {
                    return ( <ListItem className="goals-listItem" id={goal.goal_id} key={goal.goal_id} > 
                        <Button className="goals-listItem-text-wrap" isselected={isGoalSelected[index]} id={goal.goal_id} onClick={(e)=>{(clickCreateTodoHandler(e))}} data-index={index} >
                        <LibraryBooksIcon className="goals-listItem-icon" />
                                <ListItemText className="goals-listItem-text" id={goal.goal_id} name={goal.goal_id} sx={{ color:goal.title_color }}  >{goal.title}</ListItemText>
                            <ListItemText className="goals-listItem-add-icon" ><span>+</span></ListItemText>
                        </Button>
                        {todo.map((todo,index)=>{
                          
                            return (
                                <Box className="goals-todo-input-list-Box" key={index} onClick={clickTodoModalHandler} data-key={index}>
                              
                                {goal.goal_id === parseInt(todo.goal_id) ? (<>
                                <div className="goals-todo-input-list-check-wrap">
                                    <CheckBoxOutlineBlankIcon className="goals-todo-list-input-check-icon"/>
                                    <InputBase key={`todo${index}`} inputProps={{readOnly: todoReadOnly[index].toString(),}} type="text" name={todo.title} id="todo-input" value={todo.title} onChange={todoEditEventHandler} className="goals-todo-list-input"></InputBase> 
                                    { 
                                
                                 }
                                </div>
                                <Button className="goals-todo-list-input-btn" ><MoreHorizIcon className="goals-todo-list-input-btn-icon" /></Button>
                                </>
                                ) : null} 
                                </Box>
                            )
                        })}
                        {isGoalSelected[index] ? <CreateInput id={goal.goal_id} isGoalSelected={isGoalSelected} setIsGoalSelected={setIsGoalSelected} />: null}
                    </ListItem>
                            )
                        })
                    }
                    

                </List>
            </Box>
        </Box>

        {/* 모달 생성 */}
         <TodoModal modalOpen={modalOpen} handleTodoModalClose={handleTodoModalClose}selectedTodo={selectedTodo} clickTodoEditHandler={clickTodoEditHandler} clickTodoDeleteHandler={clickTodoDeleteHandler} selectedInputIndex={selectedInputIndex}  />
        </>
    );
}

그리고 goal.map 안에 todo를 뿌려주게 되는데 goal의 goal_id와 todo 의 goal_id가 같은 경우만 추려져 map으로 뿌려질 수 있게 하였다.

이제 각 할 일을 클릭하면 모달이 생성되고 해당 모달에서 5가지 기능 (수정, 삭제, 내일 하기, 날짜 바꾸기, 순서변경) 다섯 개의 기능이 동작하도록 해야 한다.

그런데 이게 생성보다 더 어려운 거 같아....

728x90

저작자표시

'WEB Dev > ToyProject' 카테고리의 다른 글

[ToyProject-Todomate] 투두메이트 클론 프로젝트 38 (0)	2022.03.21
[ToyProject-Todomate] 투두메이트 클론 프로젝트 36 (0)	2022.02.08
[ToyProject-Todomate] 투두메이트 클론 프로젝트 34 (0)	2022.02.03
[ToyProject-Todomate] 투두메이트 클론 프로젝트 33 (0)	2022.02.01
[ToyProject-Todomate] 투두메이트 클론 프로젝트 32 (0)	2022.01.26

ABOUT ME

Kenna Kenna

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate

티스토리툴바

ABOUT ME

🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate

1. Feed에 목표 뿌리기

2. 개별 목표 클릭했을 때 할 일 입력

3. todo state 각 목표에 맞게 뿌리기

'WEB Dev > ToyProject' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바