[Android] 카카오뱅크 클론 코딩 (2)

📝 Compose로 구현한 커스텀 컴포넌트와 리스트 화면 정리

 

✅ BankComponent

• More 아이콘: 추가 옵션 버튼 표시.
• 커스텀 배경 색상: 호출 시 색상 지정 가능.
  
  
• 컴포저블 함수 작성 방식
  • @Composable 애노테이션을 통해 UI 컴포넌트를 선언.
  • 재사용 가능한 컴포넌트를 만드는 기본 패턴을 배울 수 있음.
• 레이아웃 구성 및 정렬
  • Box를 활용하여 여러 UI 요소를 겹치거나 특정 위치에 배치하는 방식을 배울 수 있음.
  • Modifier.align()을 통해 Alignment 옵션으로 위치를 조정.
• UI 커스터마이징
  • 입력값: name, amount, backgroundColor를 매개변수로 받아 동적으로 UI를 변경.
  • 기본값 제공: backgroundColor에 기본값을 설정하여 유연성을 높임.

 

BankComponent 코드

// src/main/java/com/gdg/kakaobank/component/Bank.kt
package com.gdg.kakaobank.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.gdg.kakaobank.R
import com.gdg.kakaobank.ui.theme.B4_R
import com.gdg.kakaobank.ui.theme.Black
import com.gdg.kakaobank.ui.theme.H6_B
import com.gdg.kakaobank.ui.theme.Main_Yellow

@Composable
fun BankComponent(name: String, amount: String, backgroundColor: Color = Main_Yellow) {
    Box(
        modifier = Modifier
            .size(340.dp, 140.dp)
            .background(backgroundColor, shape = RoundedCornerShape(20.dp))
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_bank),
            contentDescription = "KaKao Bank Icon",
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .size(31.dp)
                .align(Alignment.TopStart)
                .offset(y = 10.dp) // 아래로 이동
        )
        Text(
            text = "${name}의 통장",
            style = B4_R,
            color = Black,
            modifier = Modifier
                .align(Alignment.TopStart)
                .padding(start = 40.dp)
                .offset(y = 10.dp) // 아래로 이동
        )
        Text(
            text = "${amount}원",
            style = H6_B,
            color = Black,
            modifier = Modifier
                .align(Alignment.TopStart)
                .padding(start = 40.dp)
                .offset(y = 26.dp) // 아래로 이동
        )
        Image(
            painter = painterResource(id = R.drawable.more),
            contentDescription = "More Icon",
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .size(29.dp)
                .align(Alignment.TopEnd)
        )
    }
}

 

✅ HomeScreen

HomeScreen은 계좌 정보를 표시하는 메인 화면입니다.

• 주요 기능
  1. LazyColumn: 리스트 기반 계좌 정보를 효율적으로 렌더링.
  2. 다양한 데이터 관리: bankList를 활용해 다수의 계좌 정보를 동적으로 생성.
  3. 스타일링 및 정렬: 상단 헤더와 계좌 리스트를 구분해 배치.
• 구현 특징
  • BankComponent를 활용하여 리스트 구성.
  • 계좌 별로 다른 배경색을 설정하기 위해 색상 리스트를 사용하여 동적 스타일링 구현.
    
    

HomeScreen 코드

@Composable
fun HomeScreen() {
    val bankList = listOf(
        Pair("김나현", "700,000,000"),
        Pair("조영서", "700,000,000"),
        Pair("이가을", "100,000,000"),
        Pair("백서연", "100,000,000"),
        Pair("이현진", "100,000,000")
    )

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(White)
            .padding(top = 24.dp)
    ) {
        // 상단 헤더
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 20.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(text = "눈송이", style = H5_B, color = Black)
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "내 계좌", style = B4_B, color = Black)
            }
            Image(
                painter = painterResource(id = R.drawable.bell),
                contentDescription = "Bell Icon",
                modifier = Modifier.size(30.dp)
            )
        }

        Spacer(modifier = Modifier.height(20.dp))

        // 계좌 리스트
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .background(White),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 내 계좌 표시
            items(1) {
                MyBankComponent(name = "눈송이", amount = "100,000,000")
                Spacer(modifier = Modifier.height(12.dp))
            }
            // 다른 사용자 계좌 표시
            items(bankList.size) { index ->
                val colors = listOf(Pink, Dark_Mint, Light_Mint, Deep_Blue)
                val (name, amount) = bankList[index]
                BankComponent(
                    name = name,
                    amount = amount,
                    backgroundColor = colors[index % colors.size]
                )
                Spacer(modifier = Modifier.height(12.dp))
            }
        }
    }
}

 

 

---

로그아웃 다이얼로그 구현

로그아웃 및 회원 탈퇴 기능은 팝업 다이얼로그로 구현되어 사용자의 의사를 명확히 확인할 수 있도록 디자인했습니다.

✅ 주요 구현 요소

• 다이얼로그 창: AlertDialog를 활용해 사용자 확인 절차 추가.
• Toast 메시지: 동작 완료 시 피드백 제공.
• 유연한 UI: DialogProperties를 통해 플랫폼에 맞는 다이얼로그 크기 설정.
  
  
  

MoreScreen 코드

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.gdg.kakaobank.R
import com.gdg.kakaobank.ui.theme.*
import androidx.compose.ui.window.DialogProperties
import androidx.compose.foundation.shape.RoundedCornerShape
import android.widget.Toast
import androidx.compose.ui.platform.LocalContext

@Composable
fun MoreScreen() {
    val moreInfoList1 = listOf("서비스 이용약관", "개인정보 처리방침", "버전 정보")
    val moreInfoList2 = listOf("고객센터", "로그아웃", "회원 탈퇴")
    var showDialog by remember { mutableStateOf(false) }
    var dialogType by remember { mutableStateOf("") }
    val context = LocalContext.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(White)
            .padding(top = 45.dp, start = 16.dp, end = 30.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(5.dp) //줄간격 속성
        ) {
            Text("눈송이님", style = H5_B)
            Text("카카오뱅크 서비스", style = H5_B, color = Main_Yellow)
            Text("관련 안내사항입니다", style = H5_B)
        }
        Spacer(modifier = Modifier.height(16.dp))
        Text("이용안내", style = H6_SB)
        Spacer(modifier = Modifier.height(4.dp))
        moreInfoList1.forEach { info ->
            MoreInfo(text = info)
        }
        Spacer(modifier = Modifier.height(16.dp))
        Text("기타", style = H6_SB)
        Spacer(modifier = Modifier.height(4.dp))
        //회원 탈퇴 및 로그아웃 팝업 알림 뜨도록 설정
        moreInfoList2.forEach { info ->
            if (info == "회원 탈퇴" || info == "로그아웃") {
                MoreInfo(text = info, onClick = {
                    showDialog = true
                    dialogType = info
                })
            } else {
                MoreInfo(text = info)
            }
        }
    }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            text = {
                Text(
                    "${dialogType} 하시겠습니까?",
                    style = H5_SB,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp, 30.dp, 16.dp, 10.dp)
                )
            },
            confirmButton = {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly
                ) {
                    Button(
                        colors = ButtonDefaults.buttonColors(containerColor = Gray, contentColor = White),
                        onClick = {
                            showDialog = false
                        },
                        modifier = Modifier.size(width = 110.dp, height = 45.dp)
                    ) {
                        Text("취소", style = H7_B)
                    }
                    Button(
                        colors = ButtonDefaults.buttonColors(containerColor = Main_Yellow, contentColor = Black),
                        onClick = {
                            showDialog = false
                            Toast.makeText(context, "${dialogType} 되었습니다", Toast.LENGTH_SHORT).show()
                        },
                        modifier = Modifier.size(width = 110.dp, height = 45.dp)
                    ) {
                        Text(dialogType, style = H7_B)
                    }
                }
            },
            properties = DialogProperties(usePlatformDefaultWidth = false),
            containerColor = Light_Gray,
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier.size(width = 280.dp, height = 180.dp)
        )
    }
}

@Composable
fun MoreInfo(text: String, onClick: () -> Unit = {}) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .background(White)
            .padding(8.dp)
            .clickable(onClick = onClick),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(text, style = B1_SB, color = Dark_Gray)
        Image(painter = painterResource(id = R.drawable.icn_next), contentDescription = null)
    }
}

@Composable
@Preview(showBackground = true)
fun MoreScreenPreview() {
    MoreScreen()
}

 

다이얼로그 창과 Toast 메시지 정리

✅ 다이얼로그 창 (AlertDialog)

• 기능: 사용자 확인 절차를 추가하여 실수 방지.
• 구현: AlertDialog를 사용하여 로그아웃 또는 회원 탈퇴 시 확인 창 표시.
• 구성 요소:
  • 취소 버튼: 작업을 중단하고 다이얼로그를 닫음.
  • 확인 버튼: 작업을 수행하고 다이얼로그를 닫음.

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        text = {
            Text(
                "${dialogType} 하시겠습니까?",
                style = H5_SB,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp, 30.dp, 16.dp, 10.dp)
            )
        },
        confirmButton = {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Button(
                    colors = ButtonDefaults.buttonColors(containerColor = Gray, contentColor = White),
                    onClick = {
                        showDialog = false
                    },
                    modifier = Modifier.size(width = 110.dp, height = 45.dp)
                ) {
                    Text("취소", style = H7_B)
                }
                Button(
                    colors = ButtonDefaults.buttonColors(containerColor = Main_Yellow, contentColor = Black),
                    onClick = {
                        showDialog = false
                        Toast.makeText(context, "${dialogType} 되었습니다", Toast.LENGTH_SHORT).show()
                    },
                    modifier = Modifier.size(width = 110.dp, height = 45.dp)
                ) {
                    Text(dialogType, style = H7_B)
                }
            }
        },
        properties = DialogProperties(usePlatformDefaultWidth = false),
        containerColor = Light_Gray,
        shape = RoundedCornerShape(16.dp),
        modifier = Modifier.size(width = 280.dp, height = 180.dp)
    )
}

 

✅ Toast 메시지

• 기능: 작업 완료 후 사용자에게 피드백 제공.
• 구현: Toast.makeText()를 통해 작업 성공 메시지를 출력.

Toast.makeText(context, "${dialogType} 되었습니다", Toast.LENGTH_SHORT).show()