이것은 DEV Weekend Challenge: Community (dev.to in Bing) 제출입니다.

Source: Dev.to

resetreel6879.web.app

프로젝트 개요

저는 Reset Reel을 배턴루지의 청소년들을 위해 만들었습니다. 이들은 빠르게 움직이고, 빠르게 느끼며, 때때로 숨 쉴 틈도 없이 반응합니다. 많은 청소년이 감정 기복, 과도한 자극, “강해 보이기”라는 압박을 경험하는데, 내부적으로는 압도당하고 있습니다. Reset Reel은 강의를 하는 것이 아니라, 그 순간을 끊어주어 다시 스스로를 선택할 수 있는 시간을 주기 위한 도구입니다.

이 앱은 React + Vite 로 만든 작은 프로젝트로, 탭을 통해 감정을 중단시키는 도구입니다. 과도하게 자극받은 청소년들을 위해 어두운 테마와 차분한 화면으로 구성된 짧은 시퀀스를 안내합니다. 어린스럽거나 설교조가 아닌 것이 특징입니다.

앱 흐름

1. Opening – 숨을 쉬는 순간
2. PeelLayer – 빠른 감정 리셋
3. SelfiePrompt – 사용자에게 셀카를 찍게 요청
4. SelfieReview – 찍은 셀카를 다시 보여줌
5. ChooseYourself – 자신을 인식하는 마지막 순간

마지막 화면 이후에는 추후 추가될 도구들을 위한 자리 표시자가 표시됩니다.

화면 상태 예시

const [screen, setScreen] = useState("opening");

각 화면은 자체 컴포넌트를 반환하여 로직을 간단히 파악하고 확장할 수 있게 합니다.

제작 방법

• React + Vite 로 빠른 개발
• 컴포넌트 기반 화면 흐름
• 상태 기반 네비게이션
• 간단한 CSS‑in‑JS 스타일링
• 로컬 전용 개발 (GitHub 저장소 없음)

도구 및 감사 인사

저는 아직 React를 배우는 중이며, 이번 프로젝트를 통해 import 디버깅, 대소문자 구분, JSX 구조, 그리고 컴포넌트를 깔끔하고 의도적으로 유지하는 방법을 많이 배웠습니다. Microsoft Copilot의 도움을 받아 혼란스러운 부분을 해결하고 정리할 수 있었습니다. 이 프로젝트는 전적으로 제 작업이며, 이를 실현하도록 도와준 모든 안내에 감사드립니다.