Skip to content

[AIBE3/2팀/노현정] TODO APP 만들기 완료#24

Open
Bsbd0205 wants to merge 5 commits intosik2:mainfrom
Bsbd0205:main
Open

[AIBE3/2팀/노현정] TODO APP 만들기 완료#24
Bsbd0205 wants to merge 5 commits intosik2:mainfrom
Bsbd0205:main

Conversation

@Bsbd0205
Copy link

@Bsbd0205 Bsbd0205 commented Jul 9, 2025

React 기반의 TodoApp 만들기

이번 주 팀 활동 목표는 React 기반의 TodoApp 만들기이다. 각자가 기능을 구현한 후, GitHub에 PR(Pull Request)을 생성하고 팀원들과 코드리뷰를 통해 서로의 코드를 검토하고 피드백하는 경험을 쌓는 것이 핵심이다.
협업 도구(GitHub, 노션, 슬랙)를 적극적으로 활용해 개발 → 리뷰 → 피드백 전 과정을 실습해보는것이 목표다.

시작화면

image

전체 기능 요약

기능 설명
할 일 추가 텍스트 입력 후 버튼 클릭 시 리스트에 항목 추가
할 일 삭제 항목의 삭제 버튼 클릭 시 해당 항목 제거
완료 체크 체크박스를 클릭하면 완료 여부 표시 (스타일 변화 포함)
localStorage 저장 추가/삭제/체크 시 변경된 todo 상태를 localStorage에 저장
초기 로드 앱 실행 시 localStorage에서 데이터를 불러와 렌더링

Copy link

@seung-in-Yoo seung-in-Yoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다! 고민을 되게 많이 한 흔적이 보이는것 같아요

align-items: flex-start;
min-height: 100vh;
margin: 0;
padding-top: 50px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css를 구성할때 직접적인 px로 세부요소를 지정한다면 나중에 유지보수가 어렵고 통일된 디자인을 가져가기 힘들다고 생각해요. px 단위로 css를 구성하는것보다 rem/em 단위나 Tailwind의 spacing scale를 활용하는것도 한번 찾아보시면 좋을것 같아요!

}

export function getStorage() {
const saved = localStorage.getItem('todos')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

todos라는 키가 하드코딩 되어 있는것 같은데 다른 키를 쓸 경우 재사용 불가해서 개선 방안을 찾아보셔도 좋을것 같아요!

@luaerix
Copy link

luaerix commented Jul 10, 2025

check한 값에 따라서 textDecoration을 적용하여 완료된 리스트를 시각적으로 구분한게 직관적이고 좋았습니다.

@Unoguna
Copy link

Unoguna commented Jul 10, 2025

로컬 스토리지에 기본으로 주는 데이터를 storage.js파일에 넣어서 상대적으로 useTodos.js가 깔끔한 것 같아요
로컬 스토리지 getter와 setter에 예외처리가 있으면 더 좋을 것 같습니다!

@seokhwan13
Copy link

디자인이 깔끔하고 보기 좋네요 수고하셨습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants