앱센터 2번째 차시 - 투두 리스트

1. 디자인 정하기!

가장 먼저 디자인을 어떻게 할 것인지 생각해보았습니다. 아주 심플하게 생각해보았는데요.

포인트 컬러는 블루로 하고 아래 사진에서 할 일 목록들 버튼에 옅은 하늘색 컬러를 줄 예정입니다.

그리고 아래에 총 할 일이 몇개인지, 남은 일, 완료한 일 등 뜨는 부분은 파트장님이 하신 것처럼 할 일이 n개 남았습니다! 형태로 단순화할 예정입니다.

위 사진은 피그마 ai가 만들어주었습니다(양심 고백)

2. 프로젝트 개요

프로젝트 개발에 들어가기에 앞서 1주차 코드 리뷰나 교안 내용을 참고해 최대한 지키고자 하는 내용들을 적어보려고 합니다.

• jsx 대신 tsx 파일로
• Styled-Component 대신 Tailwind 사용하기
• 시멘틱 구조 !!
• 지피티 사용 최대한 줄이기...
• localStorage 사용
• useState와 useEffect 사용
• 재사용되는 컴포넌트를 공통화
• 폴더 구조 원하는 방식으로 해보기

3. 컴포넌트

참고로 저는 인프런 강좌를 참고하여 프로젝트를 진행해보았습니다.

우선
1. header 영역
2. editor 영역
3. list 영역
4. footer 영역
이렇게 4가지 영역으로 나눠보았습니다.

const Header = () => {
    return <div>Header</div>
};
export default Header;

components 폴더에 컴포넌트들을 만들어 줍니다.

import { useState } from 'react'
import './App.css'
import Header from './components/Header.tsx'
import List from './components/List.tsx'
import Editor from './components/Editor.tsx'
import Footer from './components/Footer.tsx'
function App() {
  return (
    <div className="p-4 mx-auto max-w-2xl border border-gray-300 rounded-xl my-12 shadow-lg">
      <header className="mb-4">
        <Header />
      </header>
      <main>
        <Editor />
        <List />
      </main>
      <footer>
        <Footer />
      </footer>
    </div>
  )
}
export default App

이후 위처럼 App.tsx 파일에 컴포넌트들을 추가해줍니다.
각각의 파일에서 컴포넌트를 제작하고, 기능을 구현하는 식으로 진행했습니다.

4. 결과물

기본적으로 할 일을 추가하고, 수정 및 삭제할 수 있는 간단한 프로젝트입니다.
기본 컬러는 파란색과 보라색이 섞인 듯한 컬러로 골라보았습니다.

커서를 위에 두면 위 사진과 같이 연한 파스텔톤 색이 적용되도록 했습니다.

수정을 위해 연필 아이콘을 누르면 우측에 완료 버튼이 생기며 사용자가 텍스트를 수정 후 완료 버튼을 누름으로써 수정을 마칠 수 있도록 했습니다.

5. 최종 정리

간단한 프로젝트였지만 Tailwind css도 처음 써보고 컴포넌트 제작을 최대한 혼자 힘으로 해본 뜻깊은 프로젝트였습니다. 아직 기능 구현을 하는 부분은 많이 부족해 지피티의 도움을 받았지만 다음 번에는 혼자 힘으로 최대한 해볼 수 있었으면 좋겠다고 생각했습니다.

추가로 할 일이 몇개 남았는지 보여주는 기능의 경우 숫자가 좀 더 부드럽게 변하도록 수정하면 좀 더 좋을 것 같다고 생각했습니다. 추가로 체크 표시를 통해 할 일을 완료하면 수정이 불가능하게 하거나 위나 아래로 순서가 정렬되어 사용자로 하여금 편리하게 느껴지도록 하면 좋겠다고 생각했습니다.