인증샷 보기 UI 구현

core/design-system/src/main/java/com/twix/designsystem/components/comment/CommentTextField.kt

@@ -47,10 +47,11 @@ private val CIRCLE_GAP: Dp = CIRCLE_PADDING_START - CIRCLE_SIZE
 @Composable
 fun CommentTextField(
     uiModel: CommentUiModel,
-    onCommentChanged: (TextFieldValue) -> Unit,
-    onFocusChanged: (Boolean) -> Unit,
-    onPositioned: (Rect) -> Unit,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    onCommentChanged: (TextFieldValue) -> Unit = {},
+    onFocusChanged: (Boolean) -> Unit = {},
+    onPositioned: (Rect) -> Unit = {},
 ) {
     val focusManager = LocalFocusManager.current
     val focusRequester = remember { FocusRequester() }
@@ -91,6 +92,7 @@ fun CommentTextField(
         BasicTextField(
             value = uiModel.comment,
             onValueChange = { newValue -> onCommentChanged(newValue) },
+            enabled = enabled,
             modifier =
                 Modifier
                     .alpha(0f)

core/design-system/src/main/res/drawable/ic_keepi_angry.xml

@@ -0,0 +1,69 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="132dp"
+    android:height="113dp"
+    android:viewportWidth="133"
+    android:viewportHeight="113">
+  <path
+      android:pathData="M80.05,63.6C77.3,63.46 75.18,61.12 75.32,58.36C75.46,55.61 77.8,53.49 80.56,53.63C83.31,53.77 85.43,56.11 85.29,58.87C85.16,61.62 82.81,63.74 80.05,63.6Z"
+      android:fillColor="#171717"/>
+  <path
+      android:pathData="M80.83,26.65C85.05,21.38 82.71,13.5 82.01,11.96C79.66,7.43 77.44,6.95 75.05,6.99C72.66,7.01 70.19,8.39 69.78,10.48"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M74.56,15.42C75.6,13.98 78,12.13 82.35,13.4"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M53.1,71.09L43.28,55.28L36.92,61.92L34.75,69.41L36.92,74.4L41.6,77.14L48.63,75.96L53.1,71.09Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M42.78,55.65C37.7,59.17 32.86,66.43 36.14,72.93C40.23,81.05 51.8,74.5 53.21,71.36"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M128.59,103.61a9.38,43.76 90,1 1,-87.52 0a9.38,43.76 90,1 1,87.52 0z"
+      android:fillColor="#C6C6C6"/>
+  <path
+      android:pathData="M127.71,60.01C127.71,38.9 111.11,21.55 89.88,19.5C84.78,19.53 73.66,20.14 69.97,22.27C54.54,28.3 43.64,42.9 43.64,60.01C43.64,82.49 62.44,100.72 85.68,100.72C108.91,100.72 127.71,82.49 127.71,60.01Z"
+      android:strokeWidth="1.64572"
+      android:fillColor="#ffffff"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M60.13,49.6C59.5,55.39 67.21,60.97 77.34,62.07C87.47,63.17 96.2,59.37 96.82,53.58C97.45,47.79 89.72,42.99 79.58,41.89C69.45,40.79 60.76,43.81 60.13,49.6Z"
+      android:fillColor="#C6C6C6"/>
+  <path
+      android:pathData="M96.8,57.37C95.07,57.28 93.75,55.81 93.83,54.09C93.92,52.36 95.39,51.03 97.11,51.12C98.84,51.21 100.16,52.68 100.08,54.4C99.99,56.13 98.52,57.45 96.8,57.37Z"
+      android:fillColor="#464646"/>
+  <path
+      android:pathData="M59.49,51.47C57.77,51.38 56.44,49.92 56.53,48.19C56.62,46.47 58.08,45.14 59.81,45.23C61.53,45.31 62.86,46.78 62.77,48.51C62.68,50.23 61.22,51.56 59.49,51.47Z"
+      android:fillColor="#464646"/>
+  <path
+      android:pathData="M92.34,75.47C92.34,75.47 76,61.62 58.39,69.83"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M108.71,77.74L120.33,62.13L127.51,68.9L130.68,73.6L130.68,79.59L127.51,84.55L121.35,86.11L112.36,82.59L108.71,77.74Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M123.27,64C128,67.82 133.32,75.06 129.33,81.71C124.34,90.02 110.82,82.96 109.22,79.69"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M0.82,40.73L35.3,61.75"
+      android:strokeWidth="1.64572"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+</vector>

core/design-system/src/main/res/drawable/ic_keepi_love.xml

@@ -0,0 +1,84 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="52dp"
+    android:height="52dp"
+    android:viewportWidth="52"
+    android:viewportHeight="52">
+  <path
+      android:pathData="M21.403,4.97C21.813,4.954 22.202,5.087 22.525,5.313L22.66,5.414L22.908,5.646C23.446,6.209 23.714,6.944 23.837,7.667C23.933,8.23 23.945,8.822 23.914,9.395C24.17,9.372 24.428,9.354 24.688,9.342H24.689C35.063,8.861 43.788,16.852 44.21,27.209C44.215,27.24 44.223,27.272 44.225,27.304C44.605,37.702 36.47,46.526 26.069,47.017C15.662,47.508 6.913,39.457 6.532,29.054C6.18,19.416 13.144,11.132 22.445,9.581C22.493,8.998 22.493,8.421 22.406,7.91C22.298,7.27 22.072,6.812 21.737,6.535L21.654,6.476C21.574,6.43 21.507,6.418 21.462,6.419C21.416,6.421 21.349,6.437 21.272,6.533L21.271,6.534C21.271,6.534 21.257,6.551 21.235,6.59C21.212,6.629 21.187,6.682 21.16,6.743C21.107,6.867 21.061,7.011 21.041,7.156C21.002,7.437 21.06,7.633 21.253,7.781C21.571,8.024 21.633,8.48 21.39,8.798C21.146,9.116 20.69,9.177 20.372,8.934C19.631,8.368 19.519,7.566 19.603,6.957C19.682,6.383 19.944,5.866 20.149,5.615C20.477,5.213 20.923,4.989 21.403,4.97Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <group>
+    <clip-path
+        android:pathData="M4.52,2.969h42v46h-42z"/>
+    <clip-path
+        android:pathData="M21.403,4.97C21.813,4.954 22.202,5.087 22.525,5.313L22.66,5.414L22.908,5.646C23.446,6.209 23.714,6.944 23.837,7.667C23.933,8.23 23.945,8.822 23.914,9.395C24.17,9.372 24.428,9.354 24.688,9.342H24.689C35.063,8.861 43.788,16.852 44.21,27.209C44.215,27.24 44.223,27.272 44.225,27.304C44.605,37.702 36.47,46.526 26.069,47.017C15.662,47.508 6.913,39.457 6.532,29.054C6.18,19.416 13.144,11.132 22.445,9.581C22.493,8.998 22.493,8.421 22.406,7.91C22.298,7.27 22.072,6.812 21.737,6.535L21.654,6.476C21.574,6.43 21.507,6.418 21.462,6.419C21.416,6.421 21.349,6.437 21.272,6.533L21.271,6.534C21.271,6.534 21.257,6.551 21.235,6.59C21.212,6.629 21.187,6.682 21.16,6.743C21.107,6.867 21.061,7.011 21.041,7.156C21.002,7.437 21.06,7.633 21.253,7.781C21.571,8.024 21.633,8.48 21.39,8.798C21.146,9.116 20.69,9.177 20.372,8.934C19.631,8.368 19.519,7.566 19.603,6.957C19.682,6.383 19.944,5.866 20.149,5.615C20.477,5.213 20.923,4.989 21.403,4.97Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M21.403,4.97L21.349,3.596L21.349,3.596L21.403,4.97ZM22.525,5.313L23.353,4.215C23.339,4.204 23.326,4.194 23.312,4.185L22.525,5.313ZM22.66,5.414L23.598,4.409C23.563,4.376 23.526,4.345 23.488,4.316L22.66,5.414ZM22.908,5.646L23.903,4.696C23.884,4.677 23.866,4.658 23.846,4.641L22.908,5.646ZM23.837,7.667L25.193,7.437L25.193,7.437L23.837,7.667ZM23.914,9.395L22.541,9.32C22.52,9.718 22.672,10.106 22.958,10.383C23.245,10.66 23.637,10.799 24.034,10.765L23.914,9.395ZM24.688,9.342V7.967C24.666,7.967 24.644,7.968 24.623,7.969L24.688,9.342ZM24.689,9.342V10.717C24.71,10.717 24.731,10.717 24.752,10.716L24.689,9.342ZM44.21,27.209L42.836,27.265C42.839,27.324 42.845,27.382 42.855,27.44L44.21,27.209ZM44.225,27.304L45.599,27.254L45.599,27.252L44.225,27.304ZM26.069,47.017L26.134,48.39H26.134L26.069,47.017ZM6.532,29.054L5.158,29.104L5.158,29.104L6.532,29.054ZM22.445,9.581L22.672,10.938C23.293,10.834 23.764,10.322 23.816,9.694L22.445,9.581ZM22.406,7.91L23.762,7.68L23.762,7.68L22.406,7.91ZM21.737,6.535L22.614,5.476C22.59,5.456 22.565,5.437 22.539,5.418L21.737,6.535ZM21.654,6.476L22.456,5.359C22.42,5.333 22.383,5.309 22.344,5.286L21.654,6.476ZM21.462,6.419L21.414,5.045L21.408,5.045L21.462,6.419ZM21.272,6.533L22.244,7.505C22.277,7.472 22.308,7.437 22.337,7.401L21.272,6.533ZM21.271,6.534L20.298,5.561C19.995,5.864 19.851,6.292 19.908,6.716C19.965,7.141 20.217,7.515 20.589,7.728L21.271,6.534ZM21.235,6.59L20.045,5.9L20.045,5.9L21.235,6.59ZM21.16,6.743L19.899,6.195L19.899,6.196L21.16,6.743ZM21.041,7.156L19.679,6.968L19.679,6.968L21.041,7.156ZM21.253,7.781L20.418,8.873L20.418,8.873L21.253,7.781ZM21.39,8.798L22.482,9.634L22.482,9.633L21.39,8.798ZM20.372,8.934L19.537,10.026L19.538,10.027L20.372,8.934ZM19.603,6.957L18.24,6.77L18.24,6.77L19.603,6.957ZM20.149,5.615L21.212,6.487L21.214,6.485L20.149,5.615ZM21.403,4.97L21.458,6.344C21.529,6.341 21.628,6.363 21.74,6.441L22.525,5.313L23.312,4.185C22.776,3.812 22.097,3.567 21.349,3.596L21.403,4.97ZM22.525,5.313L21.698,6.411L21.833,6.512L22.66,5.414L23.488,4.316L23.353,4.215L22.525,5.313ZM22.66,5.414L21.722,6.42L21.97,6.651L22.908,5.646L23.846,4.641L23.598,4.409L22.66,5.414ZM22.908,5.646L21.914,6.596C22.195,6.89 22.385,7.33 22.482,7.898L23.837,7.667L25.193,7.437C25.043,6.558 24.697,5.527 23.903,4.696L22.908,5.646ZM23.837,7.667L22.482,7.898C22.555,8.329 22.569,8.813 22.541,9.32L23.914,9.395L25.287,9.47C25.322,8.831 25.31,8.131 25.193,7.437L23.837,7.667ZM23.914,9.395L24.034,10.765C24.274,10.744 24.514,10.727 24.753,10.716L24.688,9.342L24.623,7.969C24.343,7.982 24.066,8.001 23.794,8.025L23.914,9.395ZM24.688,9.342V10.717H24.689V9.342V7.967H24.688V9.342ZM24.689,9.342L24.752,10.716C34.366,10.27 42.445,17.672 42.836,27.265L44.21,27.209L45.584,27.153C45.131,16.033 35.759,7.452 24.625,7.969L24.689,9.342ZM44.21,27.209L42.855,27.44C42.859,27.466 42.863,27.488 42.865,27.497C42.868,27.509 42.867,27.505 42.866,27.501C42.865,27.494 42.862,27.477 42.859,27.454C42.856,27.43 42.852,27.397 42.851,27.356L44.225,27.304L45.599,27.252C45.595,27.142 45.579,27.053 45.572,27.012C45.568,26.992 45.564,26.972 45.564,26.969C45.563,26.962 45.564,26.968 45.565,26.978L44.21,27.209ZM44.225,27.304L42.851,27.354C43.203,36.997 35.654,45.188 26.005,45.644L26.069,47.017L26.134,48.39C37.285,47.864 46.007,38.408 45.599,27.254L44.225,27.304ZM26.069,47.017L26.005,45.644C16.362,46.099 8.259,38.642 7.906,29.004L6.532,29.054L5.158,29.104C5.567,40.271 14.962,48.918 26.134,48.39L26.069,47.017ZM6.532,29.054L7.906,29.004C7.58,20.068 14.04,12.377 22.672,10.938L22.445,9.581L22.219,8.225C12.247,9.888 4.78,18.764 5.158,29.104L6.532,29.054ZM22.445,9.581L23.816,9.694C23.869,9.048 23.875,8.346 23.762,7.68L22.406,7.91L21.051,8.141C21.111,8.496 21.118,8.948 21.075,9.469L22.445,9.581ZM22.406,7.91L23.762,7.68C23.623,6.862 23.298,6.042 22.614,5.476L21.737,6.535L20.861,7.595C20.846,7.583 20.972,7.678 21.051,8.141L22.406,7.91ZM21.737,6.535L22.539,5.418L22.456,5.359L21.654,6.476L20.853,7.593L20.936,7.653L21.737,6.535ZM21.654,6.476L22.344,5.286C22.061,5.122 21.739,5.034 21.414,5.045L21.462,6.419L21.51,7.793C21.274,7.802 21.088,7.737 20.965,7.665L21.654,6.476ZM21.462,6.419L21.408,5.045C21.236,5.052 21.006,5.089 20.761,5.212C20.525,5.331 20.344,5.495 20.206,5.664L21.272,6.533L22.337,7.401C22.278,7.475 22.168,7.583 21.996,7.669C21.816,7.76 21.643,7.788 21.516,7.793L21.462,6.419ZM21.272,6.533L20.299,5.56L20.298,5.561L21.271,6.534L22.243,7.506L22.244,7.505L21.272,6.533ZM21.271,6.534L20.589,7.728C20.326,7.533 20.001,7.061 19.927,6.824C19.902,6.669 19.901,6.415 19.913,6.318C19.939,6.15 19.992,6.026 20.004,5.997C20.04,5.913 20.077,5.851 20.083,5.84C20.106,5.801 20.126,5.771 20.129,5.767C20.141,5.749 20.151,5.736 20.151,5.735C20.155,5.73 20.159,5.724 20.157,5.727C20.156,5.728 20.153,5.733 20.148,5.739C20.14,5.751 20.13,5.766 20.118,5.782C20.096,5.816 20.072,5.855 20.045,5.9L21.235,6.59L22.424,7.28C22.42,7.287 22.413,7.298 22.404,7.312C22.399,7.32 22.393,7.327 22.388,7.335C22.387,7.337 22.386,7.338 22.385,7.34C22.384,7.341 22.383,7.342 22.383,7.342C22.383,7.342 22.383,7.341 22.383,7.341C22.384,7.341 22.384,7.341 22.384,7.34C22.385,7.339 22.387,7.336 22.39,7.332C22.39,7.331 22.4,7.318 22.412,7.301C22.415,7.296 22.435,7.266 22.458,7.227C22.464,7.216 22.501,7.154 22.537,7.07C22.549,7.041 22.602,6.917 22.629,6.749C22.64,6.652 22.639,6.398 22.615,6.243C22.54,6.006 22.215,5.534 21.952,5.339L21.271,6.534ZM21.235,6.59L20.045,5.9C19.983,6.007 19.934,6.115 19.899,6.195L21.16,6.743L22.422,7.29C22.425,7.281 22.428,7.275 22.431,7.269C22.433,7.264 22.435,7.26 22.436,7.259C22.437,7.257 22.436,7.258 22.435,7.261C22.433,7.263 22.43,7.27 22.424,7.28L21.235,6.59ZM21.16,6.743L19.899,6.196C19.806,6.409 19.719,6.675 19.679,6.968L21.041,7.156L22.403,7.343C22.403,7.349 22.403,7.344 22.407,7.331C22.411,7.318 22.416,7.303 22.422,7.289L21.16,6.743ZM21.041,7.156L19.679,6.968C19.642,7.233 19.633,7.58 19.754,7.947C19.883,8.341 20.125,8.649 20.418,8.873L21.253,7.781L22.088,6.688C22.188,6.765 22.305,6.901 22.367,7.089C22.42,7.252 22.401,7.36 22.403,7.343L21.041,7.156ZM21.253,7.781L20.418,8.873C20.135,8.657 20.078,8.25 20.297,7.964L21.39,8.798L22.482,9.633C23.188,8.71 23.008,7.391 22.088,6.688L21.253,7.781ZM21.39,8.798L20.298,7.963C20.516,7.677 20.922,7.624 21.207,7.841L20.372,8.934L19.538,10.027C20.459,10.73 21.777,10.555 22.482,9.634L21.39,8.798ZM20.372,8.934L21.207,7.841C21.074,7.739 21.019,7.64 20.989,7.546C20.954,7.435 20.944,7.295 20.965,7.145L19.603,6.957L18.24,6.77C18.115,7.681 18.272,9.06 19.537,10.026L20.372,8.934ZM19.603,6.957L20.965,7.145C20.985,7.001 21.03,6.849 21.09,6.713C21.118,6.646 21.147,6.591 21.173,6.548C21.199,6.504 21.214,6.485 21.212,6.487L20.149,5.615L19.087,4.742C18.717,5.192 18.354,5.947 18.24,6.77L19.603,6.957ZM20.149,5.615L21.214,6.485C21.306,6.373 21.391,6.347 21.458,6.344L21.403,4.97L21.349,3.596C20.456,3.632 19.649,4.054 19.085,4.744L20.149,5.615Z"
+        android:fillColor="#ffffff"/>
+  </group>
+  <path
+      android:pathData="M22.493,12.949C22.493,12.949 24.285,7.694 22.203,5.976C21.739,5.594 21.12,5.578 20.714,6.076C20.476,6.366 19.883,7.645 20.817,8.358"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M43.504,27.324C43.87,37.323 36.045,45.813 26.04,46.285C16.036,46.758 7.628,39.02 7.262,29.02C6.896,19.021 14.722,10.531 24.726,10.059C34.731,9.595 43.138,17.324 43.496,27.324H43.504Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#ffffff"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M17.057,30.211C19.501,30.088 21.397,28.244 21.292,26.094C21.188,23.944 19.122,22.301 16.678,22.425C14.235,22.548 12.339,24.392 12.443,26.542C12.548,28.692 14.614,30.335 17.057,30.211Z"
+      android:fillColor="#FFD5DE"/>
+  <path
+      android:pathData="M34.502,28.299C36.983,28.174 38.908,26.303 38.801,24.12C38.695,21.937 36.598,20.268 34.117,20.394C31.636,20.519 29.711,22.391 29.817,24.574C29.924,26.757 32.021,28.425 34.502,28.299Z"
+      android:fillColor="#FFD5DE"/>
+  <path
+      android:pathData="M27.546,25.119C27.546,25.119 25.643,27.11 23.064,25.837C21.156,25.101 18.896,27.604 21.453,30.305C24.011,33.006 28.39,31.75 29.97,28.968C30.878,27.371 30.408,25.325 29.564,24.751C28.664,24.141 27.546,25.119 27.546,25.119Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#FFA271"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M29.726,29.05C29.726,29.05 25.13,25.791 21.847,30.353L20.309,27.368L21.858,26.025L25.787,26.443L29.194,24.551L30.463,26.313L29.726,29.05Z"
+      android:fillColor="#464646"/>
+  <path
+      android:pathData="M14.946,17.853C15.838,17.742 16.686,18.135 17.252,18.82C17.614,18.016 18.329,17.425 19.231,17.314C19.328,17.306 19.416,17.297 19.513,17.297C21.28,17.28 22.42,19.496 21.324,21.061L18.745,24.158C18.382,24.595 17.72,24.68 17.252,24.347L13.921,21.985C12.436,20.736 12.958,18.306 14.681,17.896C14.769,17.879 14.857,17.862 14.946,17.844V17.853Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#FF96AD"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M30.591,16.404C31.334,16.293 32.041,16.686 32.512,17.371C32.814,16.566 33.411,15.976 34.162,15.865C34.243,15.856 34.316,15.848 34.397,15.848C35.87,15.831 36.819,18.046 35.907,19.612L33.757,22.709C33.455,23.145 32.903,23.231 32.512,22.897L29.737,20.536C28.5,19.287 28.934,16.857 30.37,16.447C30.444,16.43 30.517,16.412 30.591,16.395V16.404Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#FF96AD"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M21.549,40.511C21.549,40.511 25.663,39.453 24.427,35.85C23.177,32.204 15.103,32.014 14.504,37.81"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M21.549,40.511C21.549,40.511 25.663,39.453 24.427,35.85C23.177,32.204 15.103,32.014 14.504,37.81"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M33.497,39.056C33.497,39.056 29.191,39.244 29.015,35.671C28.838,32.049 36.432,29.634 39.166,34.678"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M33.497,39.056C33.497,39.056 29.191,39.244 29.015,35.671C28.838,32.049 36.432,29.634 39.166,34.678"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.375"
+      android:fillColor="#00000000"
+      android:strokeColor="#464646"
+      android:strokeLineCap="round"/>
+</vector>