HappinesSQL 🍀

📚 프로젝트 소개

HappinesSQL은 사용자가 일상 속에서 어떤 활동이 행복을 가져다주는지 분석하고, 이를 통해 더 행복한 삶을 살 수 있도록 도와주는 맞춤형 행복 데이터 분석 서비스이다.

🌄 프로젝트 배경

User Research 결과 많은 사람들이 자신의 행복 요인을 잘 모르고 있다는 것을 알게 되었고, 이를 개선하기 위해 프로젝트를 시작하게 되었다.

⚙️ 기술 스택 소개 및 아키텍쳐

프론트엔드 기술 스택 및 컨벤션

분류	내용
프레임워크	React-native
패키지 매니저	yarn
App 생성	create-expo-app
Script 언어	javascript
상태 관리	useState, context API, recoil
기타 Hooks 사용	useEffect(), useIsFocused(), useNavigation(), useRef() 등
API 및 라이브러리	API 및 라이브러리 정리
API 호출	axios
CSS	Styled Components
빌드 프레임워크	Expo-CLI (eas)

폴더 구조

├── .expo 📦 expo 관련 설치 도구
├── assets 🗂 썸네일 이미지, 로고 이미지 저장
├── node_modules 🗂 노드 모듈 저장
├── package.json 📦 설치된 패키지를 관리하는 파일
├── App.js ✡️ 앱의 라우팅과 글로벌 스타일 지정
└── src
    ├── common 🗂 공통으로 사용되는 파일들 저장
         ├── context 📂 비교적 단순한 상태 관리 도구
         ├── data 📂 공통 mock 관련 데이터 파일들 저장
         ├── icon 📂 공통 이모티콘 파일들 저장
         ├── navigation 📂 하단 네비게이션 및 페이지 네비게이션 관리
         ├── notification 📂 전체 푸시 알림 설정
         ├── recoil 📂 전역 상태 관리 도구
    │
    ├── screens 페이지 별 폴더 관리
         ├── home 메인 화면 페이지
             ├── assets api, components, utils 등 각 페이지에서만 쓰는 컴포넌트들
                 ├── apis 공통 api 관련 파일들 저장
                 ├── components 공통 컴포넌트 관련 파일들 저장
         ├── Landing 앱 진입시 랜딩 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── Login 로그인 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── SignUp 회원가입 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── records 행복 톺아보기 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── report 📂 행복 리포트 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── calender 📂 행복 달력 페이지
         │   └── //세부 폴더구조 Home과 동일
         ├── trends 📂 행복 트렌드 페이지
         │   └── //세부 폴더구조 Home과 동일
    ├── styles 공통 style 관련 파일들 저장
        └── globalStyles.js

프론트엔드 화면 구성 및 주요 기능

• 랜딩, 회원가입, 로그인, 유저 프로필

• 메인 대시보드 (홈, 하단 네비게이션 바로 이동 가능)

• 행복 리포트 탭 / 행복 트렌드 탭 / 행복 달력 탭 / 행복 톺아보기 탭

🎞️ Demo

안드로이드에 설치 가능한 apk 파일

프로젝트에서 중요하게 생각한 점

RN에서 조건부 렌더링
추후 추가

👩🏻‍💻 Developer

Backend	Backend	Frontend
이상은	정예림	김솔미