<aside> <img src="notion://custom_emoji/76316048-6701-4d5c-9d59-7c273bcd3af2/15e3e5c7-022f-80fb-ab77-007a0af4d4bc" alt="notion://custom_emoji/76316048-6701-4d5c-9d59-7c273bcd3af2/15e3e5c7-022f-80fb-ab77-007a0af4d4bc" width="40px" />

Figma를 통한 UI 분석 및 역할 분배

안내된 사항에 따라 진행하고 역할 분배를 해놓은 노션 링크나 스크린샷을 제출해주세요.

</aside>

Figma에서 제시된 화면별로 역할을 나누어 프로젝트를 수행하였습니다. 아래는 역할을 분배하고 진행 상황과 트러블 슈팅 등을 기록하는 팀 노션 페이지입니다.

front 칸반보드 | Notion

<aside> <img src="attachment:1f69b29e-0204-4d59-bdee-fbdd6ba009ea:Android_symbol_green_RGB.png" alt="attachment:1f69b29e-0204-4d59-bdee-fbdd6ba009ea:Android_symbol_green_RGB.png" width="40px" />

모든 화면 UI 구현

Figma상으로 나와있는 모든 화면 UI를 XML 방식으로 작성했는지 확인해주세요. 모든 화면 UI 100% 구현!

본 프로젝트는 Jetpack Compose를 이용한 UI 개발을 수행하여 layout 폴더 및 XML 파일을 제작하지 않는 대신에, 각 화면을 모듈 별로 분할하여 구현하였습니다. 본 과제에서는 각 화면별로 UI를 구현하고 있는 모듈의 소스코드 Github 주소를 첨부하였습니다. Jetpack Compose를 통한 UI 개발의 현황을 이미지로 보시고 싶을 경우 팀 노션 페이지에서 UI 구현 현황을 클릭하여 열람하실 수 있습니다.

Ttatta_Android/feature at develop · Ttatta-org/Ttatta_Android

패키지 구조

아래는 각 화면을 구현하고 있는 모듈의 구조도입니다. 각 화면의 UI를 구현하고 있는 코드는 Screen 이름이 붙은 파일에 있습니다.

🗂️feature
├── 🗂️home("일기보관함" 화면)
│   ├── 📂(하위 폴더 구조 자유)
│   ├── HomeApp.kt = App 컴포저블은 내비게이팅 진입점 컴포저블이며, Screen 컴포저블과 ViewModel을 이어주는 역할을 합니다.
│   ├── HomeScreen.kt = Screen 컴포저블은 전체화면 뷰 요소입니다.
│   └── HomeViewModel.kt = ViewModel은 비즈니스 로직을 담당하는 요소입니다.
├── 🗂️category(카테고리 관리 화면)
│   └── 이하 동일..
├── 🗂️challenge("나의 챌린지" 화면. 이 화면은 기획상 가장 나중에 구현될 예정이며, 현재 미구현입니다.)
│   └── 이하 동일..
├── 🗂️footprint("나의 발자국" 화면)
│   └── 이하 동일..
├── 🗂️login(로그인 및 회원가입 화면)
│   └── 이하 동일..
├── 🗂️mypage("마이페이지" 화면)
│   └── 이하 동일..
└── 🗂️record("기록하기" 화면)
    └── 이하 동일..

<aside> <img src="attachment:1f69b29e-0204-4d59-bdee-fbdd6ba009ea:Android_symbol_green_RGB.png" alt="attachment:1f69b29e-0204-4d59-bdee-fbdd6ba009ea:Android_symbol_green_RGB.png" width="40px" />

API 연결

서버 측에서 제공해준 문서(Swagger or Notion)를 바탕으로 서비스 전체 API의 50% 이상 연결해주세요.

본 프로젝트는 리포지토리 패턴을 사용하여 백엔드 API와 연결합니다. core 모듈은 리포지토리의 인터페이스를 정의하고 있는 모듈이며, data 모듈은 core 모듈의 실제 객체를 구현한 모듈입니다. data 모듈에 Retrofit2 라이브러리를 사용한 API 연결 소스 코드가 들어 있으며, 서버 연결 객체는 100% 구현된 상태입니다.

패키지 구조

다음은 core 모듈과 data 모듈의 패키지 구조와 각 파일들에 대한 설명을 적은 구조도입니다.

🗂️core
├── 📂model
│   └── 각종 데이터 모델들..
├── 📂repository(리포지토리 패턴 인터페이스 모음)
│   ├── 📄DiaryRepository.kt = 일기 관련 데이터 접근
│   └── 📄UserRepository.kt = 사용자 관련 데이터 접근
└── 📄Geocoder.kt = 좌표-주소 변환기

🗂️data
├── 📂api(API 엔드포인트 연결 파일)
│   ├── 📂dto
│   │   └── 각종 DTO 객체들..
│   ├── 📄GeocodingApi.kt = 네이버 지오코딩 API 연결을 위한 Retofit 설정 파일
│   └── 📄ServerApi.kt = 백엔드 서버 API 연결을 위한 Retofit 설정 파일
├── 📂di(의존성 주입 설정 파일)
│   └── 의존성 주입 설정 파일들..
├── 📂implementation(구현체 모음)
│   ├── 📂preference
│   │   └── 📄AuthPreferenceImpl.kt = AuthPreference의 구현
│   ├── 📂repository
│   │   ├── 📄DiaryRepositoryImpl.kt = DiaryRepository의 구현
│   │   └── 📄UserRepositoryImpl.kt = UserRepository의 구현
│   └── GeocoderImpl.kt = Geocoder의 구현
├── 📂preference(디스크 접근 객체 인터페이스)
│   └── 📄AuthPreference.kt = 토큰 관리를 위한 SharedPreference 객체
└── 📂serializer(직렬화 변환기)
    └── 각종 직렬화 객체들..

UI 연결

UI와 API의 연결은 각 화면별 모듈 안의 뷰모델에서 수행합니다. 각 화면별 모듈의 소스 코드는 모든 화면 UI 구현 과제 목차에 기재하였습니다. 아래는 본 프로젝트의 뷰모델을 사용한 API 연결 구조를 간략히 나타낸 도식입니다.