팀 프로젝트 2주차. (프론트엔드 코딩)

자몽·2021년 7월 2일

Team Project.1

Team-Project

목록 보기

7/13

팀 프로젝트 관련 깃허브 링크: https://github.com/brown-the-duck/React

한동안 프로젝트에 전념하느라 velog 글 작성을 소흘히 한거같아, 그간 작업했던 것들을 간략하게 써보고자 한다.
프로젝트는 프론트엔드에서 보여지는 페이지를 기준으로 하여 크게 3가지로 나눌 수 있다.

로그인 화면
회원가입 화면
메인 todo앱 화면

📕 로그인 화면

기존에 디자인했던 로그인 화면

react로 만든 로그인 화면

설명:

로그인 화면은 flex로 각 요소들을 중앙 정렬시키고, 세부적으로 padding과 margin을 조작하는 정도로 마무리했다.

const LoginTemplate = () => {
    return (
        <div className="wrapper">
            <div className="LoginTemplate">
                <div className="LoginTitle">Todo List</div>
                <IdInsert />
                <PwInsert />
                <button className="login_btn">로그인</button>
                <LoginBottom />
            </div>
        </div>
    )
};

소감:

우리 팀에는 프론트엔드 팀원이 나를 포함해 총 2명이였다.
팀원이 자바스크립트까지 공부한 상태로 프로젝트에 참여하였기에 로그인 화면을 천천히 구상, 제작하면서 내가 팀원에게 react를 간단하게 알려주는 시간을 가졌다.
이제 리액트 책을 공부하면서 막 SPA를 공부하고 있는 나는 react를 잘한다고 절대 말할 수 없지만, 그래도 기초는 알고있기에 팀원을 도와주었는데, 생각 외로 오히려 내가 설명하면서 배운게 더 많은 것 같았다.
간단하게 예제 몇번 만들어본 나로써는 코드를 뜯어서 설명하고, 리액트의 컴포넌트, state, props를 설명하는게 버거웠기에 그만큼 열심히 공부하고 또 이걸 팀원에게 알려주는 좋은 선순환이 되었던 것 같다.
그래서 간단한 화면을 만드는 것임에도 거의 하루가 걸렸지만, 매우 유익했다 :)

📙 메인 화면

기존에 디자인했던 메인 화면

react로 만든 로그인 화면 (gif)

특징:

포스트잇을 아이디어 기반으로 해서, 각 주제를 생성할 수 있고, 주제마다 내부의 todo 포스트잇을 만들 수 있다.

소감:

참고하였던 todo앱 소스코드나, todo앱 예제에서는 간단하게 todo의 내용들을 주르륵 추가할 수 있는 기능이였다.
하지만, 우리가 만들 todo앱은 그것과는 조금 차별화되어 주제를 추가하고 그 내부에 todo를 추가할 수 있는 형태였다.

이를 구현할 수 있을까?
라는 의문을 가지면서 프론트를 제작하였는데,
주제를 추가시키고 저장하는 컴포넌트에 todo의 상태를 정의하면 어떨까? 해서 만들어진게 다음과 같은 코드이고, 이는 성공적으로 실행되었다.

주제의 상태를 정의하는 App.js 파일

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './main/TodoTemplate';
import LeftBar from './main/LeftBar';
import './App.css';

const App = () => {
  const [topics, setTopics] = useState([
    {
      id: 1,
      text: 'School',
      show: 'false',
    }
  ]);
  const nextTopic = useRef(2);
  const onTopicInsert = useCallback(
    text => {
      const topic = {
        id: nextTopic.current,
        text,
        show: false,
      };
      setTopics(topics.concat(topic));
      nextTopic.current += 1;
    }, [topics]
  );
  const onToggle = useCallback(
    id => {
      setTopics(
        topics.map(topic =>
          topic.id === id ? { ...topic, show: !topic.show } : { ...topic, show: false },
        ),
      );
    }, [topics],
  );
  return (
    <div>
      <LeftBar topics={topics} onToggle={onToggle} />
      <TodoTemplate topics={topics} onTopicInsert={onTopicInsert} onToggle={onToggle} />
    </div>
  )
}
export default App;

todo의 상태를 정의하는 TodoTopic.js

import React, { useState, useRef, useCallback } from 'react';
import TodoInsert from './TodoInsert';
import TodoList from './TodoList';
import './TodoTopic.css';
import cn from 'classnames';
const TodoTopic = ({ topic }) => {
    const { show } = topic;
    const [todos, setTodos] = useState([
        {
            id: 1,
            text: "sample page",
        },
    ]);
    const nextTodo = useRef(2);
    const onInsert = useCallback(
        text => {
            const todo = {
                id: nextTodo.current,
                text
            };
            setTodos(todos.concat(todo));
            nextTodo.current += 1;
        }, [todos]
    );
    return (
        <div>
            <div className={cn('ShowState', { show })} >
                {show ? <div className="TodoTopic">
                    <div className="app-title">{topic.text}</div>
                    <div className="sub">
                        <TodoInsert onInsert={onInsert} />
                        <TodoList todos={todos} />
                    </div>
                </div>
                    : <div></div>}

            </div>
        </div >
    )
}
export default TodoTopic;

이것 외에도 메인 화면을 만들면서 애먹었던 부분은 각 주제별로 따로 todos를 보여주는 것이였다.

왼쪽의 바에서 주제를 선택하면 해당 주제에 대한 화면만이 보여야했는데, 그렇지가 않고 모든 todos가 보였다.
따라서 이를 해결하기 위해서, 위의 코드와 같이,

return (
       <div>
           <div className={cn('ShowState', { show })} >
               {show ? <div className="TodoTopic">
                   <div className="app-title">{topic.text}</div>
                   <div className="sub">
                       <TodoInsert onInsert={onInsert} />
                       <TodoList todos={todos} />
                   </div>
               </div>
                   : <div></div>}

           </div>
       </div >
   )