DEP-201 ui: 공유하기 페이지 UI 구현

app/build.gradle

@@ -47,6 +47,7 @@ dependencies {
     implementation(project(":presentation:create"))
     implementation(project(":presentation:history"))
     implementation(project(":presentation:notification"))
+    implementation(project(":presentation:mate"))
 
     implementation(jetpackDeps)
     implementation(coroutines)

app/src/main/AndroidManifest.xml

@@ -42,6 +42,10 @@
         <activity
             android:name="com.depromeet.threedays.notification.NotificationActivity"
             android:exported="false"/>
+
+        <activity
+            android:name="com.depromeet.threedays.mate.share.ShareMateActivity"
+            android:exported="false"/>
     </application>
 
 </manifest>

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@color/gray_800" />
+    <corners android:radius="8dp" />
+
+</shape>

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

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="60dp"
+    android:height="60dp"
+    android:viewportWidth="60"
+    android:viewportHeight="60">
+  <path
+      android:pathData="M30,30m-30,0a30,30 0,1 1,60 0a30,30 0,1 1,-60 0"
+      android:fillColor="#E8EBF0"/>
+  <path
+      android:pathData="M22.272,38.728L28.869,32.131C29.265,31.735 29.463,31.537 29.691,31.463C29.892,31.398 30.108,31.398 30.309,31.463C30.537,31.537 30.735,31.735 31.131,32.131L37.684,38.684M32,33L34.869,30.131C35.265,29.735 35.463,29.537 35.691,29.463C35.892,29.398 36.108,29.398 36.309,29.463C36.537,29.537 36.735,29.735 37.131,30.131L40,33M28,27C28,28.105 27.105,29 26,29C24.895,29 24,28.105 24,27C24,25.895 24.895,25 26,25C27.105,25 28,25.895 28,27ZM24.8,39H35.2C36.88,39 37.72,39 38.362,38.673C38.926,38.385 39.385,37.926 39.673,37.362C40,36.72 40,35.88 40,34.2V25.8C40,24.12 40,23.28 39.673,22.638C39.385,22.073 38.926,21.615 38.362,21.327C37.72,21 36.88,21 35.2,21H24.8C23.12,21 22.28,21 21.638,21.327C21.073,21.615 20.615,22.073 20.327,22.638C20,23.28 20,24.12 20,25.8V34.2C20,35.88 20,36.72 20.327,37.362C20.615,37.926 21.073,38.385 21.638,38.673C22.28,39 23.12,39 24.8,39Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#5B616C"
+      android:strokeLineCap="round"/>
+</vector>

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:drawable="@drawable/ic_instagram_share"
+        android:width="60dp"
+        android:height="60dp" />
+</layer-list>

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

@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="93dp"
+    android:height="29dp"
+    android:viewportWidth="93"
+    android:viewportHeight="29">
+  <path
+      android:pathData="M51.909,21.878V16.091H63.789V21.878H51.909ZM61.608,19.993V17.975H54.106V19.993H61.608ZM61.608,15.435V7.428H63.789V15.435H61.608ZM53.925,7.428H56.122C56.122,8.319 56.023,9.194 55.841,10.018C56.783,11.431 58.304,12.76 59.824,13.568L58.518,15.216C57.263,14.493 56.007,13.416 55.048,12.256C54.404,13.585 53.462,14.712 52.289,15.569L50.653,14.123C52.818,12.642 53.925,10.321 53.925,7.428Z"
+      android:fillColor="#DFF5EC"/>
+  <path
+      android:pathData="M81.733,11.007C81.733,12.027 82.466,12.713 83.482,12.713C84.497,12.713 85.263,12.027 85.263,11.007C85.263,9.987 84.497,9.301 83.482,9.301C82.466,9.301 81.733,9.987 81.733,11.007ZM79.552,11.007C79.552,8.916 81.217,7.428 83.482,7.428C85.763,7.428 87.444,8.916 87.444,11.007C87.444,13.081 85.763,14.569 83.482,14.569C81.217,14.569 79.552,13.081 79.552,11.007ZM92.689,20.205V21.878H80.402V17.68H90.175V16.81H80.402V15.121H92.372V19.319H82.616V20.205H92.689ZM92.372,7.428V14.552H90.175V7.428H92.372Z"
+      android:fillColor="#DFF5EC"/>
+  <path
+      android:pathData="M77.075,16.091V21.878H65.535V16.091H77.075ZM67.68,19.993H74.913V17.975H67.68V19.993ZM78.896,10.287V12.407H77.075V15.435H74.913V7.428H77.075V10.287H78.896ZM67.664,7.428H69.826C69.826,8.319 69.728,9.194 69.55,10.018C70.476,11.431 71.971,12.76 73.467,13.568L72.183,15.216C70.947,14.493 69.712,13.416 68.769,12.256C68.135,13.585 67.209,14.712 66.055,15.569L64.446,14.123C66.575,12.642 67.664,10.321 67.664,7.428Z"
+      android:fillColor="#DFF5EC"/>
+  <path
+      android:pathData="M4.234,13.219C4.053,13.162 4.073,12.899 4.261,12.87L9.382,12.071L4.25,4.808C4.13,4.657 4.3,4.448 4.472,4.535L13.414,9.012L15.575,3.928C15.627,3.806 15.788,3.78 15.876,3.879L20.053,8.586L24.678,4.996C24.802,4.899 24.981,4.996 24.968,5.153L24.657,8.97L29.742,7.691C29.921,7.646 30.044,7.868 29.91,7.996L24.326,13.34C24.343,13.374 24.37,13.403 24.406,13.421L29.964,16.255C30.128,16.339 30.076,16.586 29.892,16.596L25.528,16.84L27.579,22.622C27.634,22.778 27.469,22.92 27.323,22.841L19.426,18.588L14.812,23.533C14.718,23.634 14.551,23.597 14.509,23.466L13.108,19.134L5.645,22.555C5.477,22.632 5.316,22.438 5.422,22.288L10.403,15.188L4.234,13.219Z"
+      android:fillColor="#DFF5EC"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M49.584,10.589V12.675H47.811V15.935H45.742V7.428H47.811V10.589H49.584ZM47.811,16.647V21.878H45.643V18.617H35.922V16.647H47.811ZM39.453,9.497C39.403,10.258 39.305,10.986 39.141,11.682C39.403,12.344 39.781,13.055 40.126,13.552C40.766,12.608 41.177,11.069 41.308,9.497H39.453ZM38.303,13.999C37.925,14.744 37.449,15.406 36.891,16.002L35.134,14.909C36.579,13.519 37.269,11.748 37.416,9.497H35.774V7.659H44.986V9.497H43.344C43.295,10.109 43.196,10.722 43.065,11.301C43.705,12.426 44.625,13.519 45.627,14.33L44.165,15.637C43.492,15.042 42.835,14.28 42.277,13.486C41.751,14.562 41.045,15.472 40.208,16.118C39.485,15.588 38.845,14.826 38.303,13.999Z"
+      android:fillColor="#DFF5EC"/>
+</vector>

presentation/mate/src/main/AndroidManifest.xml

@@ -1,5 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.depromeet.threedays.mate">
-
-</manifest>
+<manifest package="com.depromeet.threedays.mate"/>

presentation/mate/src/main/java/com/depromeet/threedays/mate/share/ShareMateActivity.kt

@@ -0,0 +1,22 @@
+package com.depromeet.threedays.mate.share
+
+import android.os.Bundle
+import androidx.activity.viewModels
+import com.depromeet.threedays.core.BaseActivity
+import com.depromeet.threedays.core.setOnSingleClickListener
+import com.depromeet.threedays.mate.R
+import com.depromeet.threedays.mate.databinding.ActivityShareMateBinding
+import dagger.hilt.android.AndroidEntryPoint
+
+@AndroidEntryPoint
+class ShareMateActivity : BaseActivity<ActivityShareMateBinding>(R.layout.activity_share_mate) {
+    private val viewModel by viewModels<ShareMateViewModel>()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        binding.ivClose.setOnSingleClickListener {
+            finish()
+        }
+    }
+}

presentation/mate/src/main/java/com/depromeet/threedays/mate/share/ShareMateViewModel.kt

@@ -0,0 +1,12 @@
+package com.depromeet.threedays.mate.share
+
+import com.depromeet.threedays.core.BaseViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import javax.inject.Inject
+
+@HiltViewModel
+class ShareMateViewModel @Inject constructor(
+
+) : BaseViewModel() {
+
+}

presentation/mate/src/main/res/layout/activity_share_mate.xml

@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        tools:context=".share.ShareMateActivity">
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/gl_begin"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_begin="20dp" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/gl_end"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_end="20dp" />
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="24dp"
+            android:text="@string/share"
+            android:textAppearance="@style/Typography.Heading"
+            android:textColor="@color/gray_800"
+            app:layout_constraintStart_toStartOf="@id/gl_begin"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <ImageView
+            android:id="@+id/iv_close"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="24dp"
+            android:src="@drawable/ic_close"
+            app:layout_constraintEnd_toEndOf="@id/gl_end"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <!-- 스크린샷을 저장할 영역 -->
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_screen_shot_area"
+            android:layout_width="0dp"
+            android:layout_height="413dp"
+            android:layout_marginTop="35dp"
+            android:background="@color/green_50"
+            app:layout_constraintEnd_toEndOf="@id/gl_end"
+            app:layout_constraintStart_toStartOf="@id/gl_begin"
+            app:layout_constraintTop_toBottomOf="@+id/iv_close">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:layout_marginHorizontal="24dp"
+                android:layout_marginTop="24dp"
+                android:layout_marginBottom="62dp"
+                android:background="@drawable/bg_rect_gray800_r8"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <TextView
+                    android:id="@+id/tv_emoji"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/medicine"
+                    android:textAppearance="@style/Typography.Title1"
+                    app:layout_constraintBottom_toBottomOf="@+id/tv_mate_name"
+                    app:layout_constraintEnd_toStartOf="@+id/tv_mate_name"
+                    app:layout_constraintHorizontal_bias="0.5"
+                    app:layout_constraintHorizontal_chainStyle="packed"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="@id/tv_mate_name" />
+
+                <TextView
+                    android:id="@+id/tv_mate_name"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="4dp"
+                    android:layout_marginTop="32dp"
+                    android:text="가나다라마바사아자차어쩌십오자"
+                    android:textAppearance="@style/Typography.Title1"
+                    android:textColor="@color/white"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintHorizontal_bias="0.5"
+                    app:layout_constraintStart_toEndOf="@+id/tv_emoji"
+                    app:layout_constraintTop_toTopOf="parent" />
+
+                <TextView
+                    android:id="@+id/tv_achieve"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:text="12번 실천 완료"
+                    android:textAppearance="@style/Typography.Body1"
+                    android:textColor="@color/gray_500"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/tv_mate_name" />
+
+                <ImageView
+                    android:id="@+id/iv_mate"
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:layout_marginHorizontal="25dp"
+                    android:layout_marginTop="1dp"
+                    android:layout_marginBottom="25dp"
+                    android:src="@drawable/ic_emoji_animal_focused"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@+id/tv_achieve" />
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="17dp"
+                android:src="@drawable/ic_logo_white"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <TextView
+            android:id="@+id/tv_image_save"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="48dp"
+            android:drawableTop="@drawable/ic_image_save"
+            android:drawablePadding="12dp"
+            android:textAppearance="@style/Typography.Body4.Medium"
+            android:text="@string/save_as_image"
+            android:textColor="@color/gray_600"
+            app:layout_constraintEnd_toStartOf="@+id/tv_instargram_share"
+            app:layout_constraintHorizontal_chainStyle="packed"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/cl_screen_shot_area" />
+
+        <TextView
+            android:id="@+id/tv_instargram_share"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="37dp"
+            android:drawableTop="@drawable/ic_instagram_share_resized"
+            android:drawablePadding="12dp"
+            android:textAppearance="@style/Typography.Body4.Medium"
+            android:text="@string/share_story"
+            android:textColor="@color/gray_600"
+            app:layout_constraintBottom_toBottomOf="@id/tv_image_save"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/tv_image_save"
+            app:layout_constraintTop_toTopOf="@id/tv_image_save"/>
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="40dp"
+            android:text="@string/share_page_guide"
+            android:textAppearance="@style/Typography.Body3"
+            android:textColor="@color/gray_500"
+            app:layout_constraintStart_toStartOf="@id/gl_begin"
+            app:layout_constraintEnd_toEndOf="@id/gl_end"
+            app:layout_constraintBottom_toBottomOf="parent"/>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

presentation/mate/src/main/res/values/strings.xml

@@ -41,4 +41,10 @@
     <string name="on_boarding_third_content">습관 실천을 통해 얻은 박수로 짝꿍이 레벨업해요!</string>
     <string name="next">다음</string>
     <string name="with_mate">짝꿍과 함께하기</string>
+
+    <!-- share mate -->
+    <string name="share">공유하기</string>
+    <string name="save_as_image">이미지로 저장</string>
+    <string name="share_story">스토리 공유</string>
+    <string name="share_page_guide">\@ZZAKSIM 을 태그해주시면 리포스팅 해드려요</string>
 </resources>