GDGoC CAU Winter Project - MunJangZip

About The Project

MunJangZip은 사용자가 자신만의 책 기억 저장소를 만들어나가며, 독서를 더욱 즐겁게 할 수 있고 그 순간의 감정과 기억을 오랫동안 간직하며 언제 어디서든 꺼내볼 수 있게 하는 서비스입니다.
MunJangZip is a service that helps users build a personalized repository of their reading memories, making the reading experience more enjoyable, preserving cherished moments, feelings at that moment and allowing them to revisit these memories anytime, anywhere.

🔗 Figma Link

https://www.figma.com/design/Ahb5aNUIbc7hKTc3jDVRnD/%EC%96%91%EB%A7%90%ED%8C%80-Peace?node-id=0-1&p=f&t=tbe1JUiOnojWbaaR-0

⚙️ Tech Stack

Front-end

Back-end

IDE

Coummunication Tool

OS

✅ Required environment

Front-end

• Android Gradle Plugin version: 8.8.2
• Gradle version: 8.10.2
• Kotlin version: 2.0.0
• Android version
  • minSdk: 31
  • targetSdk: 34

Back-end

• Java version: 17
• Spring version: 3.4.1

👍 Key features

• 책을 한손에 보관하는 기분 😎
  Gives you a feeling like carrying tonnes of books in your hand

• 책의 바코드를 찍으면 책이 내 손으로 📚
  Add books by only taking Barcode!!

• 책을 읽은, 그날의 생각을 보관!
  Capture your thoughts and emotions from today’s reading!

• 귀여운 ui ✨
  cute ui

Contributors

Ryu soo jung

@shu030929

Ryu ho in

@hoinhoin

Han ji kang

@sokft

Hyun so young

@thdudgus

---

MunJangZip_FE

MainAppComposable.kt 페이지 이동하는 라우팅

ui 패키지

SimpleBackGround.kt - 배경(초원 그림)

BackGround.kt - 배경(초원 그림 + 고양이)

BackGroundBubble.kt - 배경 (초원 그림 + 고양이 + 말풍선)
말풍선에 쓰일 이미지를 인수로 전달

theme 패키지 (기본으로 있는 패키지)

Color.kt
커스텀 색상 추가하고 싶으면 여기에 추가

appbar 패키지

TopBarWidget.kt
이런 구조의 탑바는 fun TopBarWidget() 실행

원래 기획했던 이 탑바는 발바닥 아이콘 기능인 마이페이지가 아직 구현전이라 발바닥 아이콘을 뺌

data 패키지

사용자 토큰(accessToken, refreshToken)을 관리하는 역할
SharedPreferences를 사용하여 토큰을 저장, 가져오기, 삭제하는 기능을 제공

di 패키지

Retrofit + OkHttp 설정 → 네트워크 요청을 관리
UserPreferences(토큰 저장소) 제공 → 로그인 상태 유지
Hilt를 사용하여 의존성 관리 → 클래스 간 결합도 낮춤, 유지보수 편리
각 API 및 Repository 객체를 싱글톤으로 제공 → 인스턴스 재사용으로 성능 향상

feature 패키지

auth - 로그인,회원가입 페이지들

addCategory

booklist

books

category

createMemo

loadBookInfo

책 정보 불러오기 성공
책정보 불러오기 실패

savebook

selectMemo

network 패키지

API 요청시 헤더에 자동으로 accessToken을 추가하는 interceptor를 만들어서 retrofit에 적용

API구현 부분 로직

➕ Notice

알아야할게 있어서 작성합니다

• 헤드에 엑세스 토큰 넣어서 요청해야되는데 계속 넘기는게 어지러울까봐 토큰 분리했어요
• 어지러울까봐 예시 보여주고 싶어서 카테고리추가 연결해놨습니다!
• accessToken 포함해서 요청 보내는 방법 =

1. RetrofitApi 작성하기 (파일에선 CategoryApi)
2. Request/Response 데이터 클래스 추가
 (view 모델에서 api 요청할 수 있게 레포 만들기 & Retrofit API가 사용할 데이터 모델 만들기!!)
3. ViewModel에서 API 호출&상태 관리 (AddCategoryViewModel)

4. 요청 보낼 버튼 로직처리 (AddCategoryScreen ->onClick = { viewModel.addCategory(text) } 이런식으로)
5. di > appModule에 API ,레포 추가하기

토큰 관련 추가사항

1. DataStore설정하기

• 로그인 성공시 accessToken 을 저장해야돼서 DataStore 사용함.
• data > UserPreferences.kt 파일입니다

2. 로그인하면 aaccessToken을 DataStore에 저장하기

• SignInViewModel.kt
• 대충 토큰 저장하는 부분이 있습니다

3.이제 API 요청시 헤더에 자동으로 accessToken을 추가하는 interceptor를 만들어서 retrofit에 적용하기

• network > authInterceptor.kt
• 대충 헤더에 자동 추가하는 코드입니다

4. Retrofit을 설정할 때 AuthInterceptor를 추가하면, 모든 API 요청에 Authorization 헤더가 자동으로 포함

• Retrofit 클라이언트에 AuthInterceptor 적용
• di > AppModule.kt