feat: main init

Author: kimmandoo

composeApp/src/commonMain/composeResources/drawable/img_android.png

@@ -10,7 +10,7 @@ import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.Measurable
 import androidx.compose.ui.layout.Placeable
 import androidx.compose.ui.unit.Constraints
-import io.github.kimmandoo.screen.MainScreen
+import io.github.kimmandoo.screen.main.MainScreen
 import io.github.kimmandoo.ui.MandooTheme
 import io.github.kimmandoo.ui.adaptive.LocalScreenSize
 import io.github.kimmandoo.ui.adaptive.LocalThemeMode

composeApp/src/wasmJsMain/kotlin/io/github/kimmandoo/App.kt

@@ -0,0 +1,38 @@
+package io.github.kimmandoo.screen.main
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.onClick
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.github.kimmandoo.screen.main.component.GreetingAnimation
+import io.github.kimmandoo.ui.adaptive.ThemeMode
+import io.github.kimmandoo.ui.adaptive.rememberDeviceState
+import kimmandoo_porfolio.composeapp.generated.resources.Res
+import kimmandoo_porfolio.composeapp.generated.resources.img_android
+import org.jetbrains.compose.resources.painterResource
+
+@Composable
+fun MainScreen(
+    modifier: Modifier = Modifier,
+    onThemeChanged: (ThemeMode) -> Unit,
+){
+    val deviceState = rememberDeviceState()
+    val listState = rememberLazyListState()
+    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
+
+    Row(modifier = modifier.height(IntrinsicSize.Max), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
+        GreetingAnimation()
+        Image(
+            modifier = Modifier.height(100.dp),
+            painter = painterResource(
+                resource = Res.drawable.img_android,
+            ),
+            contentDescription = "버그로이드"
+        )
+    }
+}

composeApp/src/wasmJsMain/kotlin/io/github/kimmandoo/screen/MainScreen.kt

@@ -0,0 +1,62 @@
+package io.github.kimmandoo.screen.main.component
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.delay
+
+@Composable
+fun GreetingAnimation() {
+    val greetings = remember {
+        listOf(
+            "안녕하세요",   // Korean
+            "Hello",      // English
+            "Bonjour",    // French
+            "Hola",       // Spanish
+            "こんにちは"      // Japanese
+        )
+    }
+
+    var currentGreetingIndex by remember { mutableStateOf(0) }
+    var visible by remember { mutableStateOf(false) }
+
+    // 1. visible 상태가 바뀔 때마다 alpha 값을 애니메이션으로 변경합니다.
+    val animatedAlpha by animateFloatAsState(
+        targetValue = if (visible) 1f else 0f,
+        animationSpec = tween(durationMillis = 1000) // 나타나거나 사라지는 데 1초
+    )
+
+    // 2. currentGreetingIndex가 바뀔 때마다 LaunchedEffect를 다시 실행하여 루프를 만듭니다.
+    LaunchedEffect(currentGreetingIndex) {
+        // Step 1: 글자 나타나기 (Fade In)
+        visible = true
+        delay(5000) // 3초 동안 글자를 보여줌
+
+        // Step 2: 글자 사라지기 (Fade Out)
+        visible = false
+        delay(1000) // 글자가 완전히 사라질 때까지 1초 대기 (애니메이션 시간과 동일)
+
+        // Step 3: 다음 인사말로 변경
+        currentGreetingIndex = (currentGreetingIndex + 1) % greetings.size
+    }
+
+    Box(
+        modifier = Modifier.width(300.dp),
+        contentAlignment = Alignment.Center // 2. 내용물(Text)을 중앙에 정렬합니다.
+    ){
+        Text(
+            text = greetings[currentGreetingIndex],
+            fontSize = 48.sp,
+            modifier = Modifier
+                .padding(8.dp)
+                .alpha(animatedAlpha) // 애니메이션이 적용된 alpha 값 사용
+        )
+    }
+}

composeApp/src/wasmJsMain/kotlin/io/github/kimmandoo/screen/main/MainScreen.kt

@@ -0,0 +1,10 @@
+package io.github.kimmandoo.shared
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import kimmandoo_porfolio.composeapp.generated.resources.Res
+import org.jetbrains.compose.resources.painterResource
+

composeApp/src/wasmJsMain/kotlin/io/github/kimmandoo/screen/main/component/Greeting.kt

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>kimmandoo_porfolio</title>
+    <title>Mingyu Kim</title>
     <link type="text/css" rel="stylesheet" href="styles.css">
     <script type="application/javascript" src="composeApp.js"></script>
 </head>