[UI] 동아리 목록 컴포넌트 구현

composeApp/src/commonMain/kotlin/org/whosin/client/data/dto/response/MyClubResponseDto.kt

@@ -0,0 +1,30 @@
+package org.whosin.client.data.dto.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class MyClubResponseDto(
+    @SerialName("success")
+    val success: Boolean,
+    @SerialName("status")
+    val status: Int,
+    @SerialName("message")
+    val message: String,
+    @SerialName("data")
+    val data: UserClubs
+)
+
+@Serializable
+data class UserClubs(
+    @SerialName("userClubs")
+    val userClubs: List<ClubData>
+)
+
+@Serializable
+data class ClubData(
+    @SerialName("clubId")
+    val clubId: Int,
+    @SerialName("clubName")
+    val clubName: String
+)

composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt

@@ -7,18 +7,18 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
@@ -27,23 +27,50 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.koin.compose.viewmodel.koinViewModel
+import org.whosin.client.data.dto.response.ClubData
+import org.whosin.client.presentation.mypage.component.MyClubComponent
 import org.whosin.client.presentation.mypage.component.MyPageButton
 import org.whosin.client.presentation.mypage.component.MyPageTopAppBar
 import whosinclient.composeapp.generated.resources.Res
-import whosinclient.composeapp.generated.resources.complete_edit
 import whosinclient.composeapp.generated.resources.edit_my_information
 import whosinclient.composeapp.generated.resources.my_information
 import whosinclient.composeapp.generated.resources.nickname
+
 @Composable
-fun MyPageScreen(modifier: Modifier = Modifier, onNavigateToAddClub:() -> Unit,onNavigateBack: () -> Unit, onNavigateToEdit: () -> Unit) {
+fun MyPageScreen(
+    modifier: Modifier = Modifier,
+    onNavigateToAddClub: () -> Unit,
+    onNavigateBack: () -> Unit,
+    onNavigateToEdit: () -> Unit
+) {
+    val viewModel: MyPageViewModel = koinViewModel()
     var nickName by remember { mutableStateOf("조익성") }
+    val myClubs = listOf(
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+    )
     Box(
-        modifier = modifier.fillMaxSize().background(Color.White).padding(16.dp)
+        modifier = modifier
+            .fillMaxSize()
+            .background(Color.White)
+            .padding(16.dp)
     ) {
         Column(
-            verticalArrangement = Arrangement.spacedBy(32.dp)
+            modifier = Modifier.fillMaxWidth()
         ) {
             MyPageTopAppBar(onNavigateBack)
+            Spacer(modifier = Modifier.size(16.dp))
             Text(
                 text = stringResource(Res.string.my_information),
                 fontSize = 24.sp,
@@ -52,6 +79,7 @@ fun MyPageScreen(modifier: Modifier = Modifier, onNavigateToAddClub:() -> Unit,o
                 fontWeight = FontWeight.SemiBold,
                 modifier = Modifier.fillMaxWidth()
             )
+            Spacer(modifier = Modifier.size(32.dp))
             Column(
                 modifier = Modifier.fillMaxWidth()
             ) {
@@ -79,23 +107,40 @@ fun MyPageScreen(modifier: Modifier = Modifier, onNavigateToAddClub:() -> Unit,o
                     shape = RoundedCornerShape(10.dp)
                 )
             }
+            Spacer(modifier = Modifier.size(32.dp))
             // 내 동아리 / 학과 목록
-            Column(
-                modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp)
-            ) {
-                Text(text = "내 동아리 / 학과 목록")
-            }
-            Spacer(modifier = Modifier.weight(1f))
-            // 내 정보 수정 버튼
-            MyPageButton(onClick = onNavigateToEdit, text = stringResource(Res.string.edit_my_information), enabled = nickName.isNotEmpty())
+            MyClubComponent(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .padding(bottom = 72.dp),
+                myClubs = myClubs,
+                onDeleteClub = {
+                    // TODO: 동아리 삭제
+//                    viewModel.deleteClub(it)
+                },
+                onNavigateToAddClub =  onNavigateToAddClub
+            )
         }
+
+        // 내 정보 수정 버튼 - 하단에 고정
+        MyPageButton(
+            onClick = onNavigateToEdit,
+            text = stringResource(Res.string.edit_my_information),
+            enabled = nickName.isNotEmpty(),
+            modifier = Modifier.align(Alignment.BottomCenter)
+        )
     }
 
 }
 
 @Preview
 @Composable
 private fun MyPageScreenPreview() {
-    MyPageScreen(onNavigateBack = {}, onNavigateToEdit = {}, onNavigateToAddClub = {} )
+    MyPageScreen(
+        onNavigateBack = {},
+        onNavigateToEdit = {},
+        onNavigateToAddClub = {}
+    )
 }
 

composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyClubComponent.kt

@@ -0,0 +1,140 @@
+package org.whosin.client.presentation.mypage.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+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.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil3.compose.AsyncImage
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.whosin.client.data.dto.response.ClubData
+import ui.theme.pretendardFontFamily
+import whosinclient.composeapp.generated.resources.Res
+
+@Composable
+fun MyClubComponent(
+    modifier: Modifier = Modifier,
+    myClubs: List<ClubData>,
+    onDeleteClub: (Int) -> Unit,
+    onNavigateToAddClub: () -> Unit
+) {
+    Column(
+        modifier = modifier
+    ){
+        Row(
+            modifier = Modifier
+                .fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = "내 동아리/학과 목록",
+                color = Color.Black,
+                fontFamily = pretendardFontFamily(),
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 16.sp
+            )
+            Text(
+                modifier = Modifier
+                    .clickable(onClick = onNavigateToAddClub),
+                text = "추가하기",
+                color = Color(0xFFF89531),
+                fontFamily = pretendardFontFamily(),
+                fontSize = 16.sp,
+                textDecoration = TextDecoration.Underline
+            )
+        }
+        Spacer(modifier = Modifier.size(20.dp))
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxWidth()
+                .border(
+                    width = 1.dp,
+                    color = Color(0xFFE5E5E5),
+                    shape = RoundedCornerShape(20.dp)
+                ),
+            contentPadding = PaddingValues(16.dp),
+            verticalArrangement = Arrangement.spacedBy(24.dp)
+        ) {
+            items(myClubs) { clubData ->
+                MyClubItem(
+                    modifier = Modifier,
+                    clubName = clubData.clubName
+                ) {
+                    println("clicked clubId : ${clubData.clubId}")
+                    onDeleteClub(clubData.clubId)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun MyClubItem(
+    modifier: Modifier = Modifier,
+    clubName: String,
+    onDeleteClub: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(
+            text = clubName,
+            color = Color.Black,
+            fontFamily = pretendardFontFamily(),
+            fontSize = 16.sp
+        )
+        AsyncImage(
+            model = Res.getUri("files/ic_x.svg"),
+            contentDescription = "Delete Club",
+            modifier = Modifier
+                .size(24.dp)
+                .clickable(onClick = onDeleteClub)
+        )
+    }
+}
+
+@Preview
+@Composable
+fun MyClubComponentPreview(
+
+) {
+    val dummyClubs = listOf(
+        ClubData(clubId = 1, clubName = "메이커스팜"),
+        ClubData(clubId = 2, clubName = "KUIT"),
+    )
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+            .padding(horizontal = 20.dp)
+    ) {
+        MyClubComponent(
+            myClubs = dummyClubs,
+            onDeleteClub = {},
+            onNavigateToAddClub = {}
+        )
+    }
+}