S3) Unit 8. [실습] Coz'Mini Hackaton (Todo-List)

📣  스타일 컴포넌트 & 리덕스 & 리액트 라우터를 활용한 투두 리스트 구현하기

𝟭. 파일 구조

src

   ㄴ components (컴포넌트 파일)

        ㄴ TodoList.js : TodoItem을 모아 논 TotoList

        ㄴ TodoItem.js : 하나의 TodoItem

        ㄴ TodoInsert.js : Todo 입력하는 칸

        ㄴ MemoList.js : MemoItem을 모아 논 MemoList

        ㄴ MemoItem.js : 하나의 MemoItem

        ㄴ MemoInsert.js : Memo 입력하는 칸

 

   ㄴ pages ( 라우터를 통해 이동할 페이지)

        ㄴ TodoTemplate.js : 처음 페이지 열었을 때 뜨는 화면(Menu 토글, 햄스터 보기 창도 여기서 띄운다)

        ㄴ MemoTemplate.js : Header에서 메모 아이콘 누르면 이동하는 화면

        ㄴ Ctreator.js : 처음 페이지에서 메뉴 아이콘 -> 제작자 누르면 이동하는 화면

 

   ㄴ reducer ( 액션, 액션 생성 함수)

        ㄴ Todo.js : TodoList에 필요한 액션, 액션 생성함수 정의

        ㄴ Memo.js : MemoList에 필요한 액션, 액션 생성함수 정의

---

𝟮. 피그마 시연화면

➰ 피그마로 입력값 바꾸는 건 어떻게 하는 걸까..

---

𝟯. 코드 구현 (중요하거나 구현할 때 어려웠던 코드만)

− Todo랑 Memo가 구현 방법은 같으므로 Todo만 설명

 

📌 App.js

import TodoTemplate from './pages/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';
import styled, { createGlobalStyle } from 'styled-components';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MemoInsert from './components/MemoInsert';
import MemoTemplate from './pages/MemoTemplate';
import Creator from './pages/Creator';
import { AnimatePresence } from "framer-motion";

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    font-family: 'Jua', sans-serif;
  }
`;

const AppContainer = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
`

function App() {
  return (
    <Router>
      <AppContainer>
        <GlobalStyle />    
        <AnimatePresence> 
          <Routes>
            <Route path="/" element={
              <TodoTemplate>
                <TodoInsert />
                <TodoList />
                <MemoInsert />
              </TodoTemplate>
            } />
            <Route path="/memolist" element={<MemoTemplate />} />
            <Route path="/creator" element={<Creator />} />
          </Routes>
        </AnimatePresence>   
      </AppContainer>
    </Router>
  );
}

export default App;

➰ GlobalStyle을 사용해서 box-sizing속성을 모든 요소에 적용해주고, 글꼴도 바꿔준다.

➰ 페이지 전환이 자연스럽게 되는 motion을 사용하기 위해서는 페이지 이동이 일어나는 <Routes> 부분을 'framer-motion' 라이브러리의 <AnimatePresence>로 감싸주어야 한다.

➰ 페이지 전환이 일어나는 파일(컴포넌트)은 <Route path="">를 사용해서 미리 경로를 지정해주어야 한다.

 

 

📌 Todo.js 

// 액션, 액션 생성함수인 리듀서 
// 액션 -> dispatch() -> 리듀서 -> store 생성
// 내가 액션을 실행해야 할 때 dispatch()로 불러온다.

// 액션 타입 정의
const TODO_INSERT = "TODO/INSERT";
const TODO_REMOVE = "TODO/REMOVE";
const TODO_UPDATE = "TODO/UPDATE";
const TODO_TOGGLE = "TODO/TOGGLE";
const TODO_RESET = "TODO/RESET";


// 액션 생성 함수 정의(컴포넌트에서 받아온 인자를 전달받아 사용한다)
export const todoInsert = (id, text) => {
  return {
    type: TODO_INSERT,
    payload: {
      id: id,
      text: text,
      isCompleted: false,
    },
  };
};

// Remove, Update, Toggle도 같은 원리


// 초깃값 정의
const initState = {
  todos: [
    {
      id: 1,
      text: "끝내주게 숨쉬기",
      isCompleted: true,
    },
    {
      id: 2,
      text: "간지나게 자기",
      isCompleted: false,
    },
    {
      id: 3,
      text: "작살나게 밥먹기",
      isCompleted: false,
    },
  ],
  
};

// 리듀서 생성(액션을 리듀서에 전달하고, 리듀서가 이를 보고 스토어의 상태를 업데이트 한다)
// 액션을 리듀서에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.
export default function todoReducer(state = initState, { type, payload }) {
  switch (type) {

    case TODO_INSERT:
      return {
        ...state,
        todos: state.todos.concat({
          id: payload.id,
          text: payload.text,
          isCompleted: false,
        }),
      };

    case TODO_REMOVE:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== payload.id),
      };

    case TODO_UPDATE:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === payload.id ? { ...todo, text: payload.text } : todo
          // todoUpdate는 업데이트 할 text를 받아오므로 text만 바꿔준다.
        ),
      };

    case TODO_TOGGLE:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === payload.id
            ? { ...todo, isCompleted: !todo.isCompleted }
            : todo
        ),
      };

    default:
      return { ...state };
  }
}

 

📌 TodoTemplate.js 

import { motion } from "framer-motion";

.hide-menu{
    //...
  }

  .show-menu{
    position: absolute;
    width: 100%;
    height: 80%;
    background-color: #F5EBE0;
    margin: 0;
    border-radius: 15px 15px 0 0;
    padding: 1rem;
    bottom: 0;
    left: 0;
    transition: 1s;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    }
  // 메뉴 버튼 누르기 전엔 숨겨놓고, 누르면 왼->오 로 나타나게 한다.
  
  function TodoTemplate({children}){
  let today = new Date();
  let todayStr = today.toISOString().slice(0, 10);
  const week = ['일', '월', '화', '수', '목', '금', '토'];
  let todayWeek = week[today.getDay()];
  const todos = useSelector((state) => state.todoReducer.todos);
  let completedTodo = todos.filter((todo) => todo.isCompleted);
  const [menuOn, setMenuOn] = useState(false);
  const [imgOn, setImgOn] = useState(false);

  const toggleMenu = () => {
    setMenuOn(!menuOn);
  }

  const toggleImg = () => {
    setImgOn(!imgOn);
  }

  return(
    <motion.div
        initial={{opacity: 0}}
        animate={{opacity: 1}}
        exit={{opacity: 0}}
        >

      <Template>
      <Header>
        <StyledLink to="/memolist"><TbNotes className="memo" size="30" color="#1B1A17"/></StyledLink>
      	// react-router의 Link로 메모 버튼을 누르면 메모들이 저장된 페이지로 이동한다.
      </Header>
      <Title> 오늘의 할 일 </Title>
      <CompletedTodo>
        ...
      </CompletedTodo>
      {children}
          <ul className={menuOn ? 'show-menu': 'hide-menu'}>
            <StyledLink to="/creator"><MenuLi><MdPeopleOutline className="icon" size="40" color="#1B1A17" />제작자</MenuLi></StyledLink>
            // 여기도 Link를 이용해서 누르면 제작자 페이지로 이동한다.
          </ul>
          { imgOn ? 
              <motion.div
              initial={{opacity: 0}}
              animate={{opacity: 1}}
              exit={{opacity: 0}}
              >
            <ImgContainer onClick={toggleImg}>
              <img src={cinammon} className="cinnamon" alt="크기가 변하는 햄스터"></img>
            </ImgContainer>
              </motion.div>
            :
            null
          }
    </Template>

    </motion.div>
  )
}

➰ Menu 토글을 styled-component의 props를 이용해서 구현하고 싶었는데, 그러면 나타나기는 하는데 펼쳐지는 것 같은 효과를 줄 수가 없어서 사용하지 못하고, 평소대로 class를 사용해서 구현했다.

➰ 'framer-motion' 라이브러리의 motion을 사용해서 리액트 라우터로 페이지가 이동할 때, 한번에 딱 켜지는게 아닌 opacity를 조정해서 자연스럽게 페이지 전환이 되게 만들었다.

➰ 메뉴에서 '햄스터 보기' 탭을 누르면 imgOn이 true로 바뀌며 햄스터 사진이 오버레이로 나타난다.

 

📌 TodoInsert.js

function TodoInsert(){
  const [todoInput, setTodoInput] = useState('');
  let nextId = useRef(4); // 렌더링이 계속 되면 안되기 때문에 useRef사용
  // id 값이 계속 ++ 되야 하는데 useRef를 사용하지 않으면 계속 렌더링 되서 초기화된다.

  const dispatch = useDispatch();
  // 디스패치를 사용할 수 있게 해주는 Hooks

  //...

  const addTodo = () => {
    if(todoInput.length === 0){
      alert("할 일을 입력해주세요!");
      return;
    }

    dispatch(todoInsert(nextId.current, todoInput));
    // 액션을 dispatch를 통해 리듀서로 전달한다.
    // 추가 될 할 일의 id와 내가 입력한 값(할 일 텍스트)을 전달한다.
    nextId.current += 1; // 다음에 들어올 할 일을 위해서 id+1 해준다. 
    onRemove();  
  } 

  return(
    ...
  )

}

➰ dispatch를 사용해서 Todo.js에 정의해 두었던 액션 함수를 가져온다.

 

📌 TodoItem.js

const TextBox = styled.input`
  flex: 1;
  display: inline;
  border: none;
  outline: none;
  background-color: ${(props) => (!props.readOnly ? "rgb(0, 0, 0, 0.1)" : "transparent")};
  width: 500px;
  cursor: ${(props) => (!props.readOnly ? "defalut" : "pointer")};
  text-decoration: ${(props) => (props.checked ? "line-through" : "none")};
  color: ${(props) => (props.checked ? "gray" : "black")};
  font-size: 1rem;
`;
// props를 이용해서 css를 다르게 설정 할 수 있다.

function TodoItem({todo}) {
  const {id, text, isCompleted} = todo;
  const [readOnly, setReadOnly] = useState(true);
  const [updateText, setUpdateText] = useState(text);
  const dispatch = useDispatch();

  const onChangeText = (e) => {
    const value = e.target.value;
    setUpdateText(value);
  }

  const updateTodo = () => {
    if(!isCompleted) {
      setReadOnly(!readOnly);
    }
  };

  return(
    <TodoItemBox>
      <CheckBox onClick={() => dispatch(todoToggle(id))}>
        {isCompleted ? (
          <FiCheckSquare size="25px" />
        ) : (
          <FiSquare size="25px" color="black" />
        )}
         {/* 체크박스 누르면 todoToggle을 불러와서 isComplete 속성을 바꿔준다 */}
      </CheckBox>
      <TextBox 
        name="text" 
        readOnly={readOnly}
        defaultValue={text} 
        checked={isCompleted} 
        onChange={onChangeText}
        onBlur={() => dispatch(todoUpdate(id, updateText))}
        />
      {/* 나중에 수정기능 위해서 readOnly 선언해준다. */}
      {/* onBlur => TextBox에 포커스가 사라지면 변경된 텍스트 값을 dispatch를 사용해서 스토어에 반영 */}

      ...

      <Button onClick={() => dispatch(todoRemove(id))}>
      {/* 버튼을 누르면 todoRemove을 불러와서 그 id를 가진 todo를 삭제한다. */}
        <BsFillTrashFill size="25px" color="#e56b6f" />
      </Button>
    </TodoItemBox>
  )
}

 

📌 MemoItem.js (textarea 높이 설정 -> 받아온 text 길이에 따라 textarea의 높이를 다르게 설정해준다)

const TextBox = styled.textarea`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background-color: ${(props) => (!props.readOnly ? "rgb(0, 0, 0, 0.1)" : "transparent")};
  cursor: ${(props) => (!props.readOnly ? "defalut" : "pointer")};
  width: 100%;
  text-align: center;
  font-size: 1rem;
  height: ${(props) => props.line !== 1 ? `${props.line * 21}px` : "24px"};
  resize: none;
  font-weight: 200;
`;

function MemoItem({memo}) {
  ...
  return(
    <MemoItemBox>
      <div className="textContainer">
        <TextBox 
          name="text" 
          readOnly={readOnly}
          defaultValue={text} 
          checked={isCompleted} 
          onChange={onChangeText}
          onBlur={() => dispatch(memoUpdate(id, updateText))}
          line={Math.ceil(text.length / 23)}
        ></TextBox>
      </div>
      ...
    </MemoItemBox>
  )
}

➰ textarea에 line이라는 props를 전달해주는데, 전체 텍스트 개수를 대략 한 줄에 입력할 수 있는 텍스트 개수로 나눠준다(받아온 텍스트가 몇 줄인지 대략 계산 하는 것)

➰ css를 지정해주는 부분에서 line을 받아서, 대략 한줄의 높이인 21을 곱해서 텍스트 높이에 따라 textarea 높이도 다르게 지정해준다.

➰ 내가 구현한 방법으로는 정확히 딱 맞아떨어지게 계산 할 수가 없어서 빈 공간이 생기거나, 글꼴에 따라 원하는 높이를 가져올 수 없을 수도 있다.

➰ 그래서 많이 검색해보고 알아봤는데, useRef를 쓰는 방법도 있는데 내 코드에 적용해서 여기저기 수정해봐도 원하는 방향으로 구현할 수 없었다..ㅠㅠ

---

𝟰. 시연 화면

 

배포할려고 이것저것 만졌다가 

투두리스트 웹이 안열려서...ㅎ ㅏ..

처음부터 다시 리액트 플젝 새로 만들어서 하나하나 붙여넣기 하면서 에러 찾아봤는데 아직도 어디가 에런지 모르곘음ㅠㅠㅠㅠㅠ

원래 플젝에서 Provider 쓰면 hooks invalid 에러가 뜨던데 새로 만든 플젝에서는 그대로 해도 안뜨고..

진짜 짜증난다 정말 ㅎㅎㅎ

어쨌든 복구 완..

이제 아무것도 건드리지 않을테야 배포 나중에 할래..