[01.16] todolist 마무리하기😆

💥 props프롭스

특정 데이터를 사용할 때 컴포넌트들 끼리 공유를 해야하는 상황이 오는데 그때 프롭스를 이용해 정보를 넘겨줄 수 있다

💥 오늘의 날씨 추가해보기

 - MyWeather_Func.tsx

props를 이용해 날씨를 나타내는 MyWeather_Func.tsx 를 만들었다.

props는 클래스형, 함수형 둘 다 사용이 가능한데 함수형을 선택해서 사용했다.

 - App.tsx

App.tsx에 MyWeather 추가해주고, weather엔 '맑음' 이란 데이터를 입력해주었다.

맑음 말고도 비, 흐림, ... 등등 ' ' 안에 데이터만 바꿔주면 원하는 데이터로 변경이 가능하다 :D

 - 결과

리스트 밑에 '일기예보'가 정상적으로 나타나는 걸 볼 수 있다.

원래 시계도 밑에 있었는데 위에 있는 게 좀 더 보기 예쁠 것 같아서 위치는 옮겼다!

💥 Todo모달창 띄우기&닫기

 - TodoModal.tsx

모달창은 Bootstrap을 이용하여 만들었다.

알아서 디자인하라해도 뚝딱 만들 순 있을 것 같긴한데 확실히 Bootstrap을 이용하면 바로 디자인이 나와서 보기좋다.. 굿👏

import { useState } from 'react'
import Clock from './Timer'
import TodoModal from './TodoModal'

type Todo = {
    id : number
    text : string
    isChecked : boolean
}

const Todolist : React.FC = () => {
    const title : string = "오늘 할 일"

    const [todos, setTodos] = useState<Todo[]>([
        {id : 1, text : '공부하기', isChecked : false},
        {id : 2, text : '잠자기', isChecked : false},
        {id : 3, text : '미팅하기', isChecked : false}
    ])

    const [newTodo, setNewTodo] = useState<string>('')

    const [showDetail, setShowDetail] = useState<boolean>(false)
    const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null)

    
    const handleCheckedChange = (itemId : number) => {
        setTodos((prevItems)=>
            prevItems.map((item)=>
                item.id === itemId ? {...item, isChecked : !item.isChecked} : item
            )
        )
    }

    const handleTodoClick = (todo : Todo) => {
        setShowDetail(true)
        setSelectedTodo(todo)
    }
    
    const handleCloseDetail = () => {
        setShowDetail(false)
    }

    const addTodo = () => {
        if(newTodo.trim() !== ''){
            setTodos([...todos, { id : Date.now(), text : newTodo, isChecked : false }])
            setNewTodo('');
        }
    }

    const removeTodo = (id : number) => {
        setTodos(todos.filter((todo)=> todo.id !== id))
    }

    return(
        <div>
            <h1>{title}</h1>
            <Clock></Clock>
            <div className="container">
                <div>
                    <input type="text" className='todoInput'
                        placeholder='할 일 입력'
                        style={{marginRight : '10px', writingMode : 'horizontal-tb', fontSize : '14px'}}
                        onChange={(e)=> setNewTodo(e.target.value)}
                    />
                    <button className='addBtn' onClick={addTodo}>추가</button>
                </div>
                <p></p>
                <div className="board">
                    <ul className='boardBox'>
                        {
                            todos.map((todo, index)=>( // map을 사용할 땐 li에 key속성 넣는 걸 추천
                                <li key={index} className='todoList'>
                                    <input type="checkbox" onChange={()=>{handleCheckedChange(todo.id)}} />
                                    <span className='todolist' onClick={()=>handleTodoClick(todo)}>
                                        {
                                            todo.isChecked ? <del>{todo.text}</del> : <span>{todo.text}</span>
                                        }
                                    </span>
                                    <button className='delBtn' onClick = {()=> removeTodo(todo.id)}>
                                        -
                                    </button>
                                </li>
                            ))
                        }
                    </ul>
                </div>
            </div>
            <TodoModal show={showDetail} todo={selectedTodo} handleClose={handleCloseDetail}></TodoModal>
        </div>
    )
}

export default Todolist

 - Todolist.tsx

Todolist 파일은 너무 길어서.. 그냥 코드블럭으로 올리겠다😑

handleTodoClick, handleCloseDetail을 사용해서 리스트를 누르면 모달창이 켜지고 X를 누르면 꺼지게 만들었다.

모달창 안에 상세내용은 리스트의 내용과 동일하게 나오도록 todo={selectedTodo}를 이용하였다.

 - 결과

그럼 이렇게 '미팅하기' 텍스트를 눌렀을 때, Todo 상세정보 모달창이 뜨게 된다.