Merge pull request #53 from Go-Socket-Project/feature/design_system_refactor

ImGaram · web-flow · commit 8487f6951301 · 2024-12-06T15:47:02.000+09:00
🔀 :: (#48) design system refactoring
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/appbar/GoSocketAppbar.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/appbar/GoSocketAppbar.kt
@@ -14,11 +14,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.chat.designsystem.theme.White
 
 @Composable
 fun GoSocketAppbar(
     modifier: Modifier = Modifier,
-    background: Color = Color.White,
+    background: Color = White,
     padding: PaddingValues = PaddingValues(0.dp),
     horizontalArrangement: Arrangement.HorizontalOrVertical = Arrangement.spacedBy(8.dp),
     content: @Composable RowScope.() -> Unit = {},
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/bottom_sheet/CreateMessageBottomSheet.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/bottom_sheet/CreateMessageBottomSheet.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcCreateDirectMessage
 import com.chat.designsystem.theme.IcCreateSpace
 import com.chat.designsystem.theme.Typography
+import com.chat.designsystem.theme.White
 import com.chat.designsystem.util.clickableNoRipple
 
 @Composable
@@ -82,7 +83,7 @@ fun CreateMessageBottomSheetPreview() {
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(Color.White)
+            .background(White)
     ) {
         if (isBottomSheetOpen) {
             CreateMessageBottomSheet(
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/bottom_sheet/GoSocketBottomSheet.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/bottom_sheet/GoSocketBottomSheet.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
+import com.chat.designsystem.theme.White
 import com.chat.designsystem.util.toDp
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -45,7 +46,7 @@ fun GoSocketBottomSheet(
     ModalBottomSheet(
         sheetState = bottomSheetState,
         shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
-        containerColor = Color.White,
+        containerColor = White,
         dragHandle = {
             HorizontalDivider(
                 modifier = Modifier
@@ -79,7 +80,7 @@ fun GoSocketBottomSheetPreview() {
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(Color.White)
+            .background(White)
     ) {
         if (isBottomSheetOpen) {
             GoSocketBottomSheet(onDismissRequest = { isBottomSheetOpen = false }) {
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/button/GoSocketButton.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/button/GoSocketButton.kt
@@ -21,6 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcCreateDirectMessage
 import com.chat.designsystem.theme.Typography
+import com.chat.designsystem.theme.White
 
 @Composable
 fun GoSocketButton(
@@ -29,7 +30,7 @@ fun GoSocketButton(
     enabled: Boolean = true,
     shape: Shape = RoundedCornerShape(8.dp),
     colors: ButtonColors = ButtonDefaults.buttonColors(containerColor = Color(0xFF6263FB)),
-    textColor: Color = Color.White,
+    textColor: Color = White,
     textStyle: TextStyle = Typography.b5,
     elevation: ButtonElevation? = null,
     border: BorderStroke? = null,
@@ -77,6 +78,6 @@ fun GoSocketButtonPreview() {
         GoSocketButton(
             text = "GoSocketButton",
             onClick = {}
-        ) { IcCreateDirectMessage(modifier = Modifier.size(22.dp, 18.dp), tint = Color.White) }
+        ) { IcCreateDirectMessage(modifier = Modifier.size(22.dp, 18.dp), tint = White) }
     }
 }
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/button/GoSocketFloatingActionButton.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/button/GoSocketFloatingActionButton.kt
@@ -14,13 +14,14 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcGrayRocket
 import com.chat.designsystem.theme.IcHeavyPlus
+import com.chat.designsystem.theme.White
 
 @Composable
 fun GoSocketFloatingActionButton(
     modifier: Modifier = Modifier,
     shape: Shape = CircleShape,
     containerColor: Color = Color(0xFF6263FB),
-    contentColor: Color = Color.White,
+    contentColor: Color = White,
     onClick: () -> Unit,
 ) {
     FloatingActionButton(
@@ -41,7 +42,7 @@ fun GoSocketFloatingActionButton(
                     .size(10.dp)
                     .align(Alignment.TopEnd)
                     .offset(x = 2.dp, y = (-2).dp),
-                tint = Color.White
+                tint = White
             )
         }
     }
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/button/InviteFriendButton.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/button/InviteFriendButton.kt
@@ -9,6 +9,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcCreateDirectMessage
+import com.chat.designsystem.theme.White
 
 @Composable
 fun InviteFriendButton(
@@ -21,7 +22,7 @@ fun InviteFriendButton(
         shape = RoundedCornerShape(30.dp),
         border = BorderStroke(1.dp, Color(0x3B1E2432)),
         onClick = onClick,
-    ) { IcCreateDirectMessage(modifier = Modifier.size(22.dp, 18.dp), tint = Color.White) }
+    ) { IcCreateDirectMessage(modifier = Modifier.size(22.dp, 18.dp), tint = White) }
 }
 
 @Preview
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/dialog/GoSocketDialog.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/dialog/GoSocketDialog.kt
@@ -12,7 +12,7 @@ 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.Button
+import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -24,16 +24,20 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
+import com.chat.designsystem.component.button.GoSocketButton
 import com.chat.designsystem.theme.IcSmallX
 import com.chat.designsystem.theme.Typography
+import com.chat.designsystem.theme.White
 
 @Composable
 fun GoSocketDialog(
     modifier: Modifier = Modifier,
-    background: Color = Color.White,
+    background: Color = White,
     backgroundShape: Shape = RoundedCornerShape(8.dp),
     padding: PaddingValues = PaddingValues(0.dp),
     properties: DialogProperties = DialogProperties(),
+    buttonText: String = "확인",
+    buttonColors: ButtonColors = ButtonDefaults.buttonColors(containerColor = Color(0xFF6263FB)),
     onDismissRequest: () -> Unit = {},
     onButtonClicked: () -> Unit = {},
     content: @Composable ColumnScope.() -> Unit = {},
@@ -66,27 +70,20 @@ fun GoSocketDialog(
                     .padding(vertical = 11.dp),
                 horizontalArrangement = Arrangement.End
             ) {
-                Button(
+                GoSocketButton(
+                    text = buttonText,
                     modifier = Modifier
                         .height(28.dp)
                         .padding(end = 17.dp),
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color(0xFF6263FB),
-                        contentColor = Color.White
-                    ),
+                    colors = buttonColors,
+                    textStyle = Typography.m5,
                     shape = RoundedCornerShape(4.dp),
                     contentPadding = PaddingValues(
                         horizontal = 22.dp,
                         vertical = 6.dp
                     ),
-                    onClick = { onButtonClicked() }
-                ) {
-                    Text(
-                        modifier = Modifier,
-                        text = "만들기",
-                        style = Typography.m5,
-                    )
-                }
+                    onClick = onButtonClicked
+                )
             }
         }
     }
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/dialog/InviteDialog.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/dialog/InviteDialog.kt
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/GoSocketTextField.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/GoSocketTextField.kt
@@ -22,8 +22,11 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.chat.designsystem.theme.BG
+import com.chat.designsystem.theme.Black
 import com.chat.designsystem.theme.IcSearch
 import com.chat.designsystem.theme.IcSend
+import com.chat.designsystem.theme.N3
 import com.chat.designsystem.theme.Typography
 
 @Composable
@@ -36,9 +39,9 @@ fun GoSocketTextField(
     contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
     visualTransformation: VisualTransformation = VisualTransformation.None,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
-    backgroundColor: Color = Color.White,
-    textColor: Color = Color.Black,
-    placeholderColor: Color = Color(0xFFBFBCCC),
+    backgroundColor: Color = BG,
+    textColor: Color = Black,
+    placeholderColor: Color = N3,
     leadingIconColor: Color = placeholderColor,
     trailingIconColor: Color = placeholderColor,
     backgroundShape: Shape = RoundedCornerShape(8.dp),
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/InviteTextField.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/InviteTextField.kt
@@ -8,21 +8,24 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.chat.designsystem.theme.N5
 
 @Composable
-fun InviteTextField(modifier: Modifier = Modifier) {
+fun InviteTextField(
+    modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = PaddingValues(8.dp)
+) {
     var value by remember { mutableStateOf("") }
 
     GoSocketTextField(
         modifier = modifier,
         value = value,
-        placeholder = "Email",
-        backgroundColor = Color(0x14000000),
+        placeholder = "받는사람 : 검색하기",
+        backgroundColor = N5,
         backgroundShape = RoundedCornerShape(8.dp),
-        contentPadding = PaddingValues(horizontal = 14.dp, vertical = 9.dp),
+        contentPadding = contentPadding,
         onValueChange = { value = it },
     )
 }
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/MessageTextField.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/MessageTextField.kt
@@ -7,10 +7,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcSend
+import com.chat.designsystem.theme.N2
+import com.chat.designsystem.theme.N5
 import com.chat.designsystem.util.clickableNoRipple
 
 @Composable
@@ -24,8 +25,7 @@ fun MessageTextField(
         modifier = modifier,
         value = value,
         placeholder = "Your message",
-        backgroundColor = Color(0xFFF2F2F4),
-        trailingIconColor = Color(0xFF656B80),
+        trailingIconColor = N2,
         backgroundShape = RoundedCornerShape(16.dp),
         onValueChange = { value = it },
         trailingIcon = {
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/SearchTextField.kt b/core/designsystem/src/main/java/com/chat/designsystem/component/textfield/SearchTextField.kt
@@ -9,11 +9,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.chat.designsystem.theme.IcRoundSmallX
 import com.chat.designsystem.theme.IcSearch
+import com.chat.designsystem.theme.White
 import com.chat.designsystem.util.clickableNoRipple
 
 @Composable
@@ -27,10 +27,9 @@ fun SearchTextField(
     GoSocketTextField(
         modifier = modifier,
         value = value,
-        placeholder = "Your message",
-        backgroundColor = Color(0xFFF2F2F4),
-        trailingIconColor = Color(0xFF656B80),
-        backgroundShape = RoundedCornerShape(16.dp),
+        placeholder = "검색어를 입력하세요",
+        backgroundColor = White,
+        backgroundShape = RoundedCornerShape(8.dp),
         onValueChange = { value = it },
         leadingIcon = {
             IcSearch(
diff --git a/core/designsystem/src/main/java/com/chat/designsystem/theme/Color.kt b/core/designsystem/src/main/java/com/chat/designsystem/theme/Color.kt
@@ -3,6 +3,28 @@ package com.chat.designsystem.theme
 import androidx.compose.ui.graphics.Color
 
 val P1 = Color(0xFF6263FB)
+val P2 = Color(0xFF9747FF)
+val P3 = Color(0xFFC0C0FF)
 
+val N1 = Color(0xFF0B0928)
+val N2 = Color(0xFF656B80)
 val N3 = Color(0xFFBBBBCC)
 val N4 = Color(0xFFE2E2EE)
+val N5 = Color(0xFFF2F2F4)
+
+val BG = Color(0xFFF8F9FB)
+val BG2 = Color(0xFFF2F2FC)
+val Card = Color(0xFFFDFDFD)
+val ItemBG = Color(0xFFC1E7FE)
+val ItemBG2 = Color(0xFFEDF2FC)
+val ItemBG3 = Color(0xFFE5EDFE)
+
+val Error = Color(0xFFFF7D7D)
+val Positive = Color(0xFF5EFF8B)
+val Warning = Color(0xFFFCFF5E)
+
+val Green = Color(0xFF9BDA93)
+val Yellow = Color(0xFFEEE170)
+val Red = Color(0xFFF3A199)
+val Black = Color(0xFF000000)
+val White = Color(0xFFFFFFFF)
