ONECO (원코)

"아빠가 알려주는 친절한 경제 공부"

부모·자녀 페어링 기반 경제 키워드 학습 서비스

공식 사이트 주소: https://oneco.io.kr

프로젝트 소개

ONECO는 중·고등학생의 낮은 경제 이해력 문제를 해결하기 위한 학습 서비스입니다.

문제 인식

• 2024년 기획재정부 조사에 따르면 중고등학생의 경제 이해력 점수는 100점 만점에 평균 51점으로 수준 미달
• 부모의 경제 교육 역량 부족
• 실생활과 동떨어진 이론 중심의 학교 교육
• 경제 공부를 지속하게 만드는 학습 동기 부족

해결 방안

• 약속된 보상: 학습 완료 시 부모가 제공하는 보상을 통해 학습 동기 부여
• 부모-자녀 교육: 부모의 말투로 설명하여 학습 효율 향상
• 실생활 연계: 경제 키워드 학습 후 관련 기사를 제공하여 실제 적용 사례 확인

핵심 기능 정리

자녀 기능

• 미션 제안: 원하는 경제 커리큘럼과 보상을 선택하여 부모에게 제안서 전송
• 키워드 학습: 매일 하나씩 경제 키워드를 부모의 말투로 학습
• 퀴즈: 학습한 내용을 확인하는 퀴즈 풀이
• 관련 기사: 학습한 키워드와 관련된 실제 경제 기사 목록 제공
• 학습 기록: 캘린더와 피드 형식으로 학습 기록 확인
• 북마크: 중요한 키워드를 저장하고 나중에 다시 보기

부모 기능

• 제안서 관리: 자녀가 보낸 미션 제안서 승인 또는 거절
• 학습 모니터링: 자녀의 학습 진행률 및 학습 기록 확인
• 피드 확인: 자녀가 공부한 경제 키워드를 피드 형식으로 확인

공통 기능

• 가족 연결: 초대 링크를 통한 간편한 가족 구성원 추가
• 역할 선택: 부모/자녀 역할 선택
• 미션 현황: 진행중인 미션 상황, 종료된 미션, 제출된 제안서 확인

서비스 화면

로그인 및 역할 선택

가족 초대

미션 생성

홈 미션 데시보드

경제 키워드 학습 및 퀴즈

학습 피드(기록)

미션 현황

기술 스택

• Core: React 19, Vite
• Styling: TailwindCSS 4
• State Management:
  • Zustand (클라이언트 상태 관리)
• Routing: React Router 7
• HTTP Client: Axios
• UI Libraries:
  • React Markdown (마크다운 렌더링)
  • Swiper (슬라이더)
  • Highlight.js (코드 하이라이팅)
  • React Spinners (로딩 스피너)
• PWA: Vite PWA Plugin
• Code Quality: ESLint, Prettier

DevOps

• Netlify (프론트엔드 배포)
• GitHub Actions (CI/CD)

프로젝트 폴더 구조

src/
├── api/                # API 클라이언트 및 엔드포인트
│   ├── auth.js         # 인증 관련
│   ├── family.js       # 가족 관리
│   ├── members.js      # 멤버 관리
│   ├── mission.js      # 미션 관리
│   └── studyRecords.js # 학습 기록
├── components/         # 재사용 가능한 컴포넌트
│   ├── Mission/        # 미션 관련 컴포넌트
│   └── icons/          # 아이콘 컴포넌트
├── hooks/              # 커스텀 훅
├── layouts/            # 레이아웃 컴포넌트
├── pages/              # 페이지 컴포넌트
├── router/             # 라우터 설정
├── store/              # 상태 관리 스토어
└── utils/              # 유틸리티 함수

프론트엔드 팀원 소개

박주한 팀장, FE

이원재 FE

---

중·고등학생들이 경제를 어렵지 않게, 그리고 꾸준히 배울 수 있기를 기대하고 있습니다.

Made by Team ONECO 🪙