[init] 폰트, 색상 세팅 + 상단바 구현

.editorconfig

@@ -1,4 +1,7 @@
 root = true
 
 [*]
-max_line_length = off
+max_line_length = off
+
+[*.{kt,kts}]
+ktlint_function_naming_ignore_when_annotated_with=Composable

app/build.gradle.kts

@@ -9,7 +9,6 @@ plugins {
     alias(libs.plugins.ktlint)
 }
 
-
 val properties =
     Properties().apply {
         load(project.rootProject.file("local.properties").inputStream())
@@ -53,7 +52,6 @@ android {
     }
     composeOptions {
         kotlinCompilerExtensionVersion = "1.5.13"
-        kotlinCompilerVersion = "1.6.10"
     }
 }
 
@@ -62,6 +60,7 @@ dependencies {
     implementation(libs.bundles.androidx)
 
     implementation(libs.bundles.compose)
+    implementation(libs.androidx.foundation.android)
 
     // Compose
     debugImplementation(libs.compose.ui.tooling)
@@ -83,11 +82,4 @@ dependencies {
     implementation(libs.bundles.okhttp)
     implementation(libs.bundles.retrofit)
     implementation(libs.kotlin.serialization.json)
-
-    implementation ("androidx.compose.ui:ui:1.6.7")
-    implementation ("androidx.compose.material:material:1.6.7")
-    implementation ("androidx.compose.ui:ui-tooling-preview:1.6.7")
-    androidTestImplementation ("androidx.compose.ui:ui-test-junit4:1.6.7")
 }
-
-

app/src/main/java/org/sopt/kream/presentation/ui/dummy/DummyActivity.kt

@@ -14,7 +14,7 @@ class DummyActivity : BindingActivity<ActivityDummyBinding>({ ActivityDummyBindi
         super.onCreate(savedInstanceState)
 
         setContent {
-            View1Screen(dummyViewModel)
+            View1Screen()
         }
     }
 }

app/src/main/java/org/sopt/kream/presentation/ui/dummy/View1Screen.kt

@@ -1,23 +1,223 @@
 package org.sopt.kream.presentation.ui.dummy
 
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.ScrollableTabRow
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRowDefaults
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.times
+import kotlinx.coroutines.launch
+import org.sopt.kream.R
+import org.sopt.kream.theme.Black01
+import org.sopt.kream.theme.Black02
+import org.sopt.kream.theme.Black09
 import org.sopt.kream.theme.Gray06
+import org.sopt.kream.theme.body3SemiBold
+import org.sopt.kream.theme.body5Regular
 import org.sopt.kream.theme.head1Bold
 
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
 @Composable
-fun View1Screen(dummyViewModel: DummyViewModel) {
-    Column (modifier = Modifier.fillMaxSize(),
+fun View1Screen() {
+    val pages =
+        listOf(
+            stringResource(R.string.topBar_pageList_recommend),
+            stringResource(R.string.topBar_pageList_ranking),
+            stringResource(R.string.topBar_pageList_information),
+            stringResource(R.string.topBar_pageList_luxury),
+            stringResource(R.string.topBar_pageList_male),
+            stringResource(R.string.topBar_pageList_female),
+            stringResource(R.string.topBar_pageList_found),
+        )
+
+    var editText by remember {
+        mutableStateOf("")
+    }
+    val pagerState =
+        rememberPagerState {
+            pages.size
+        }
+    Scaffold(
+        topBar = {
+            Column(modifier = Modifier.fillMaxWidth()) {
+                Spacer(modifier = Modifier.height(33.dp))
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Spacer(modifier = Modifier.width(14.dp))
+
+                    BasicTextField(
+                        value = editText,
+                        onValueChange = { editText = it },
+                        singleLine = true,
+                        modifier =
+                            Modifier
+                                .weight(1f)
+                                .size(width = 293.dp, height = 33.dp)
+                                .background(color = Gray06, shape = RoundedCornerShape(9.dp)),
+                        decorationBox = { innerTextField ->
+                            Box(
+                                contentAlignment = Alignment.CenterStart,
+                                modifier = Modifier.padding(start = 7.dp),
+                            ) {
+                                innerTextField()
+                                if (editText.isEmpty()) {
+                                    Text(
+                                        style = body5Regular,
+                                        color = Black09,
+                                        text = stringResource(id = R.string.search_bar_label),
+                                    )
+                                }
+                            }
+                        },
+                    )
+
+                    Spacer(modifier = Modifier.width(14.dp))
+                    Icon(
+                        painter = painterResource(R.drawable.ic_topappbar_bell_28),
+                        contentDescription = null,
+                        modifier = Modifier.size(28.dp),
+                    )
+                    Spacer(modifier = Modifier.width(11.dp))
+                }
+                CustomTabPager(pages, pagerState, pages)
+            }
+        },
+    ) { innerPadding ->
+        View1Content(Modifier.padding(innerPadding))
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun CustomTabPager(
+    pages: List<String>,
+    pagerState: PagerState,
+    tabs: List<String>,
+) {
+    val coroutineScope = rememberCoroutineScope()
+    Column {
+        ScrollableTabRow(
+            selectedTabIndex = pagerState.currentPage,
+            indicator = { tabPositions ->
+                TabRowDefaults.PrimaryIndicator(
+                    modifier =
+                        Modifier
+                            .tabIndicatorOffset(tabPositions[pagerState.currentPage]),
+                    color = Black02,
+                    width = pages[pagerState.currentPage].length * 12.dp,
+                )
+            },
+            containerColor = Color.White,
+            contentColor = Black02,
+            edgePadding = 0.dp,
+            modifier = Modifier.padding(0.dp),
+            divider = {
+                HorizontalDivider(
+                    modifier =
+                        Modifier
+                            .fillMaxWidth(),
+                    color = Color.LightGray,
+                    thickness = 1.dp,
+                )
+            },
+        ) {
+            tabs.forEachIndexed { index, title ->
+                Tab(
+                    text = { Text(title, style = body3SemiBold) },
+                    selected = pagerState.currentPage == index,
+                    onClick = {
+                        coroutineScope.launch {
+                            pagerState.animateScrollToPage(index)
+                        }
+                    },
+                    modifier = Modifier.width(0.dp),
+                )
+            }
+        }
+
+        HorizontalPager(
+            state = pagerState,
+        ) { page ->
+            Column(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                when (page) {
+                    0 -> View1Content(modifier = Modifier)
+                    2 -> View2Content(modifier = Modifier)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun View1Content(modifier: Modifier) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Text(
+            text = "추천",
+            style = head1Bold,
+            color = Black01,
+        )
+    }
+}
+
+@Composable
+fun View2Content(modifier: Modifier) {
+    Column(
+        modifier = modifier.fillMaxSize(),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
-        ){
-        Text(text = "View1 Screen",
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Text(
+            text = "발매정보",
             style = head1Bold,
-            color = Gray06)
+            color = Black01,
+        )
     }
-}
+}

app/src/main/java/org/sopt/kream/theme/Color.kt

@@ -2,14 +2,6 @@ package org.sopt.kream.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
-val PurpleGrey80 = Color(0xFFCCC2DC)
-val Pink80 = Color(0xFFEFB8C8)
-
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
-
 val White = Color(0xFFFFFFFF)
 
 val Green01 = Color(0xFF02E16A)

app/src/main/java/org/sopt/kream/theme/Theme.kt

@@ -17,16 +17,18 @@ import androidx.core.view.WindowCompat
 
 private val DarkColorScheme =
     darkColorScheme(
-        primary = Purple80,
-        secondary = PurpleGrey80,
-        tertiary = Pink80,
+        primary = White,
+        secondary = White,
+        tertiary = White,
+        background = White,
     )
 
 private val LightColorScheme =
     lightColorScheme(
-        primary = Purple40,
-        secondary = PurpleGrey40,
-        tertiary = Pink40,
+        primary = White,
+        secondary = White,
+        tertiary = White,
+        background = White,
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),