[WIL] 2024년 5월 넷째주 (심화 팀프로젝트 마무리 및 발표)

 

 

 

📅 24년 5월 20일 ~ 5월 26일
	월요일	화요일	수요일	목요일	금요일 및 주말
심화 강의 복습	□ 미세먼지앱
과제 해설		□ 과제 해설 수강
팀 프로젝트	■ 추가 기능 구현 - MVC -> MVVM - DataStore	■ 추가 기능 구현    및 마무리 - UI 마무리 - 오류 수정	■ 최종 머지 ■ 발표 준비	■ 발표 준비	■ 발표 및 마무리
베이직반 강의			■ 이전 강의 수강    (1/2/3강)	■ 베이직반 9회차    (Retrofit)
Joyce 서적 독학		□ TodoList 제작    (Room)	□ 미세먼지 V1.0	□ 미세먼지 V2.0	□ 미세먼지 V3.0
심화 목표
- KIA 개념 훑기  - Android Developer 읽기  - 개인프로젝트 UI 구현  - 지난 프로젝트 코드 뜯어보기  - 링크 수강  - 캠프 공식 교육이 끝나고 나면, 챌린지/스탠다드 차례로 수강하기  - 정창경 정리

 

 

 

 

---

 

 

1. 팀 프로젝트 : DataStore로 유저 이름 저장 구현하기

 

Preferences Datastore를 사용하여 작업하기  |  Android Developers

• 1. Gradle 설정
• 2. Datastore 설정 (UserPreferences.kt)
  DataStore를 이용하여 사용자 이름을 저장하고 불러올 수 있도록 설정
• 3. Fragment 설정 (MyVideoFragment.kt에서 UI 구성, 정보 업데이트)
  텍스트뷰를 클릭하면 다이얼로그를 띄워 사용자가 이름을 입력할 수 있게 하기

 

 

(1) build.gradle 설정

build.gradle

implementation ("androidx.datastore:datastore-preferences-android:1.1.1")

 

 

(2) Datastore 설정 (UserPreferences.kt)

UserPreferences.kt


// preferenceDataStore(name = "") 데이터스토어 설정 및 이름 설정
val Context.dataStore by preferencesDataStore(name = "user_prefs")

// DataStore를 통해 저장 및 불러오는 기능
class UserPreferences(context: Context) {
    private val dataStore = context.dataStore // 앞에서 정의한 DataStore 사용

    companion object { // 클래스의 모든 인스턴스에서 USER_NAME_KEY 공통으로 사용가능하도록 선언
        val USER_NAME_KEY = stringPreferencesKey("user_name")
    }

    val userNameFlow = dataStore.data
        .catch { exception -> // IO 예외 시 빈 기본설정 반환, 기타 예외 처리
            if (exception is IOException) {
                emit(emptyPreferences())
            } else {
                throw exception
            }
        }
        .map { preferences -> // DataStore에서 읽은 데이터를 원하는 형식으로 변환
            preferences[USER_NAME_KEY] ?: "아무개님!"
        }

    suspend fun updateUserName(name: String) { // 비동기 실행을 위한 suspend fun
        dataStore.edit { preferences -> // DataStore에 데이터 저장, preferences는 현재 저장된 데이터
            preferences[USER_NAME_KEY] = name + "님!"
        }
    }
}

 

 

(3) Fragment 설정 (MyVideoFragment.kt에서 UI 구성, 정보 업데이트)

class MyVideoFragment : Fragment() {
	...
    
    // userPreferences 초기화
    private val userPreferences by lazy {
        UserPreferences(requireContext())
    }
	...

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        
        binding.myIdTv.setOnClickListener {
            showEditNameDialog()
        }
        observeUserName()
        
    }
	
    // 텍스트 클릭 시 나올 다이얼로그 생성
    private fun showEditNameDialog() {
        val editText = EditText(requireContext()).apply {
            hint = "이름을 입력하세요"
        }

        AlertDialog.Builder(requireContext())
            .setTitle("이름을 수정해요")
            .setView(editText)
            .setPositiveButton("저장해요") { dialog, _ ->
                val newName = editText.text.toString()
                saveUserName(newName)
                dialog.dismiss()
            }
            .setNegativeButton("취소해요") { dialog, _ ->
                dialog.dismiss()
            }
            .show()
    }

    private fun saveUserName(newName: String) {
        lifecycleScope.launch { // 코루틴 비동기
            userPreferences.updateUserName(newName) 
        }

    }
    
    private fun observeUserName() {
        lifecycleScope.launch { // 코루틴 비동기
            userPreferences.userNameFlow.collect { userName -> // DataStore에서 이름이 변경될 때마다 감지하고 뷰에 업데이트
                binding.myIdTv.text = userName
            }
        }
    }

...

 

 

(4) 다이얼로그 커스텀

dialog_username.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    android:layout_marginRight="50dp"
    android:background="@drawable/bg_btn_dialog_cancel"
    android:padding="20dp">

    <TextView
        android:id="@+id/tv_username_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:fontFamily="@font/gangwonmodubold"
        android:text="이름을 변경해보세요!"
        android:textSize="25sp"
        app:layout_constraintBottom_toTopOf="@+id/et_edit_username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/et_edit_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:backgroundTint="#F3F3F3"
        android:ellipsize="end"
        android:fontFamily="@font/gangwonmodubold"
        android:singleLine="true"
        android:hint="변경할 이름을 입력하세요"
        android:inputType="text"
        android:textColor="@color/grey88"
        android:textSize="25sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_username_title" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_username_confirm"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="125dp"
        android:layout_height="46dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/bg_btn_dialog_confirm"
        android:fontFamily="@font/gangwonmodubold"
        android:text="확인"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn_username_cancel"
        app:layout_constraintTop_toBottomOf="@+id/et_edit_username" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn_username_cancel"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="125dp"
        android:layout_height="46dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/bg_rv_searchitem"
        android:fontFamily="@font/gangwonmodubold"
        android:text="취소"
        android:textColor="@color/primary_yellow"
        android:textSize="18sp"
        app:layout_constraintEnd_toStartOf="@+id/btn_username_confirm"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_edit_username" />

</androidx.constraintlayout.widget.ConstraintLayout>

showEditNameDialog 함수 수정

    private fun showEditNameDialog() {
        val dialogBinding = DialogUsernameBinding.inflate(layoutInflater) // 바인딩으로 구현
        val dialog = AlertDialog.Builder(requireContext())
            .setView(dialogBinding.root)
            .create()

        dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        dialogBinding.btnUsernameConfirm.setOnClickListener {
            val newName = dialogBinding.etEditUsername.text.toString()
            saveUserName(newName)
            dialog.dismiss()
        }

        dialogBinding.btnUsernameCancel.setOnClickListener {
            dialog.dismiss()
        }

        dialog.show()
    }

• 커스텀 디자인을 구현하기 위해 다이얼로그 빌더 메소드를 수정한다.
• 바인딩이 편하기 때문에 바인딩을 연결해주어 사용했다.

 

 

 

 

---

 

2. 팀 프로젝트 : 프로젝트 전체적인 UI 수정 작업

 

• 모든 필수 기능 구현이 끝나고나서, 스타일이 다르게 구현된 전체적인 UI를 수정하였다.
• 수정 목록
  - HomeFragment 및 리사이클러뷰 아이템, 스피너
  - DetailFragment
  - SearchFragment 및 리사이클러뷰 아이템
  - MyFragment 및 리사이클러뷰 아이템

 

 

🔨 HomeFragment

 

왼쪽 디자인 ▶ 오른쪽 디자인으로 수정

• 다양한 레이아웃 수정
  • LinearLayout으로 설정되어 있던 것 다수 Constraint로 변경
  • 각 요소마다의 margin 및 연결 구조 재수정

 

(1) 상단 아이콘 벡터(SVG) 수정

• png로 적용되던 아이콘을 벡터로 수정

 

• 벡터로 등록할 수 없는 텍스트 로고는 PNG로 등록하면서, 해상도 깨지지 않게 wrap_content 처리

 

 

(2) Background.xml 생성 및 적용

 

bg_fragment_home.xml

<?xml version ="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:angle="270"
        android:startColor="#FFC00A"
        android:centerColor="#FFEDBA"
        android:endColor="#FFFAEB"
        android:centerX="0.1"
         />

</shape>

• 기존에 이미지로 따로따로 적용되던 배경을 하나의 그라디언트로 설정한 background.xml 생성
• centerX로 centerColor의 시작점 지정

 

 

(3) Bottom Navigation 수정

• height가 70dp로 설정되어 있던 것(왼쪽)을 wrap_content로 수정하여 정상적으로 출력되도록 수정(오른쪽)

 

• 왼쪽 사진처럼 클릭 시 생기던 회색 애니메이션 삭제 (ItemRippleColor를 투명으로 설정)

 

 

(4) 리사이클러뷰 각 아이템 마다 설정

• 단순하게 ImageView로 표시된 것들을 모두 카드뷰 형태로 수정
• 각 아이템을 Figma 기본 설계에 맞게 색상/마진/레이아웃/폰트 등 모두 수정
• maxWidth 아이템에 맞게 수정

 

(5) Spinner 디자인 설정

 

[안드로이드] 커스텀 스피너 만들기

 

 

(6) CustomDialog

    override fun onBackPressed() {
        val dialogView = LayoutInflater.from(this).inflate(R.layout.dialog, null)
        val builder = AlertDialog.Builder(this)
        builder.setView(dialogView)
            .setCancelable(false)

        val alertDialog = builder.create()

        // 다이얼로그 내부의 버튼 초기화 및 클릭 이벤트 설정
        dialogView.findViewById<AppCompatButton>(R.id.btn_confirm).setOnClickListener {
            alertDialog.dismiss()
            super.onBackPressed()  // 확인 버튼을 누르면 앱 종료
        }

        dialogView.findViewById<AppCompatButton>(R.id.btn_cancel).setOnClickListener {
            alertDialog.dismiss()  // 취소 버튼을 누르면 다이얼로그 닫기
        }

        alertDialog.show()
    }

 

 

🔨 DetailFragment

 

• 폰트 변경
• API로 불러오는 Thumbnail의 해상도값 변경

 

 

 

🔨 SearchFragment 

• 저번주 WIL에 작성 완료

 

 

 

 

🔨 MyVideoFragment

 

UI 변화 과정

• background src 수정
• 리사이클러뷰 아이템 수정
• 각종 Margin, layout 재설정

 

최종 UI

 

 

 

 

 

---

 

3. 팀 프로젝트 : 네비게이션 이동 수정, 각종 트러블슈팅

 

 

• 이번 주 내내 다양한 형태의 트러블을 겪고, 그걸 해결하는 과정을 거쳤다.
• 팀 노션 및 GitHub Repository에 위키로 모두 작성되어 있으므로 블로그에 따로 적진 않겠다.

 

 

 

 

 

---

 

4. 팀 프로젝트 : 발표 및 마무리

 

 

• 팀원들과 함께 초기 와이어프레임 수정 및 PPT를 제작했다.

 

 

• 프로젝트가 잘 마무리 돼서 기분이 좋다.
• 이번 팀이 소통이 잘 되고 서로서로 알려주면서 해서, 코드에 대한 이해도가 매우 높아졌다.

 

 

 

 

 

---

 

5. 베이직 마지막 강의

 

앱 아키텍처 가이드  |  Android Developers

• guide to app architecture 이거 다 읽지 않으면 안드로이드 개발 어디서 한다고 말하면 안됨
• 단순한 앱 아키텍처는 클린아키텍처가 아님. 예시에 있는 깃허브 코드나 이런 거 읽어라
• data (network-di,model,retrofit,source / repository)
• domain(di, model, repository-인터페이스로 구현, 실제 작업은 data의 repository, usecase)
• 문서에 Dependency injection(의존성 주입) 도 다 있으니까 다 읽기.
  익숙해지기 위해서는 반복 숙달로 이런 게 있구나 하고 계속 읽어야 함
• 연습하기 API : CATAAS.com
• 모든 API는 Docs를 참조해야 함

 

 

 

 

💭 Retrospect

이번 팀프로젝트를 하면서 많은 부분에서 성장한 것 같다. 저번주에 고민했던 부분은 정말 모두 해결되었고, 팀프로젝트에 많은 기여를 할 수 있었고, 이해도도 매우 높아졌다. 이번 팀과 함께하며 '팀'이란 건 개개인의 실력보다도 서로간의 소통할 수 있는 역량이 훨씬 더 중요한 것이라 체감했다. 발표하자마자 바로 6주간의 최종 프로젝트가 시작인데, 최종 때는 얼마나 성장할 수 있을까 기대된다.

마무리 끝까지 잘하자!

​