From 73dd678d1f01995f6c46b587885e8795cd54ebd4 Mon Sep 17 00:00:00 2001
From: hodu <92203597+Junyoung-WON@users.noreply.github.com>
Date: Mon, 14 Oct 2024 21:53:08 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A6=AC=EC=86=8C=EC=8A=A4=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81=20=EB=B0=8F=20xml=20?=
 =?UTF-8?q?=EC=BB=A8=EB=B2=A4=EC=85=98=20=EC=A0=81=EC=9A=A9=20#473=20(#478?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: View 별 스타일 분리 및 세분화

- 너무 많은 스타일을 가지고 있는 View 의 경우 따로 파일을 생성하여 분리
- 연관성 있는 View style 끼리 정렬
- 주석으로 View 별 스타일 구분
- 스타일 추가 및 세분화

* refactor: 사용하지 않는 layout 제거

- Google Map Fragment 레이아웃과 방문기록(현 스타카토) 레이아웃 제거

* refactor: 상세 페이지 Toolbar의 레이아웃을 include

- 기존에 사용하던 toolbar_detail 의 레이아웃을 include 태그로 적용

* refactor: NavigationToolbar 의 paddingEnd 속성을 style에 지정

* refactor: ConstraintLayout 리팩터링

- ConstraintLayout 내부 View 들의 match_parent 속성을 0dp 로 변경하고 constraint 설정
- 중첩된 ConstraintLayout 제거

* refactor: 기분 선택 리사이클러뷰의 padding 속성 수정

* refactor: 이미지 contentDescription 설정 및 lint 설정

* refactor: xml layout 의 ID 네이밍 컨벤션 적용

- 누락된 이미지 contentDescription 설정

* fix: 스타카토 조회 화면에서 사용하는 Toolbar로 롤백

- 수정, 삭제 시 Memory의 ID가 필요하기 때문에 기존에 사용하는 Toolbar 와 동작이 다름

* ui: 추억 소개 InputText 의 크기 축소 및 여백 너비 조정

* refactor: TextInput style의 이름 변경

- TextInputEditTextStyle.OneLine -> TextInputEditTextStyle.SingleLine

* refactor: View 에서 MaterialDivider 로 변경

* refactor: MaterialDivider View의 id명 변경 및 divider 색상 속성 변경

- view_timeline_line -> divider_timeline
- foreground -> dividerColor
---
 .../src/main/res/layout/activity_login.xml    |   3 +-
 .../app/src/main/res/layout/activity_main.xml |   3 +-
 .../res/layout/activity_memory_creation.xml   |   8 +-
 .../res/layout/activity_memory_update.xml     |   8 +-
 .../src/main/res/layout/activity_mypage.xml   |  14 +-
 .../src/main/res/layout/activity_recovery.xml | 103 +++++----
 .../res/layout/activity_visit_creation.xml    |   9 +-
 .../main/res/layout/activity_visit_update.xml |  11 +-
 .../fragment_delete_impossibility_dialog.xml  |   4 +-
 .../app/src/main/res/layout/fragment_maps.xml |   8 -
 .../src/main/res/layout/fragment_moment.xml   |   7 +-
 .../res/layout/fragment_moment_comments.xml   |  77 +++----
 .../fragment_moment_feeling_selection.xml     |   2 +-
 .../src/main/res/layout/fragment_visit.xml    |  43 ----
 .../res/layout/item_moment_my_comment.xml     |  17 +-
 .../res/layout/item_moment_others_comment.xml |  17 +-
 .../main/res/layout/item_viewpage_photo.xml   |   2 +-
 .../main/res/layout/layout_photo_attach.xml   |   5 +-
 .../src/main/res/layout/layout_timeline.xml   |  21 +-
 .../src/main/res/layout/toolbar_detail.xml    |   3 +-
 .../app/src/main/res/values/styles.xml        | 217 +++---------------
 .../app/src/main/res/values/styles_button.xml |  93 ++++++++
 .../src/main/res/values/styles_comment.xml    |  41 ++++
 .../src/main/res/values/styles_text_input.xml |  46 ++++
 .../src/main/res/values/styles_toolbar.xml    |  38 +++
 25 files changed, 390 insertions(+), 410 deletions(-)
 delete mode 100644 android/Staccato_AN/app/src/main/res/layout/fragment_maps.xml
 delete mode 100644 android/Staccato_AN/app/src/main/res/layout/fragment_visit.xml
 create mode 100644 android/Staccato_AN/app/src/main/res/values/styles_button.xml
 create mode 100644 android/Staccato_AN/app/src/main/res/values/styles_comment.xml
 create mode 100644 android/Staccato_AN/app/src/main/res/values/styles_text_input.xml
 create mode 100644 android/Staccato_AN/app/src/main/res/values/styles_toolbar.xml

diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_login.xml b/android/Staccato_AN/app/src/main/res/layout/activity_login.xml
index 33b35af49..b816ee3c6 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_login.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_login.xml
@@ -58,8 +58,7 @@
                 app:layout_constraintTop_toBottomOf="@id/space_login_separating_logo_and_nickname_et">
 
                 <com.google.android.material.textfield.TextInputEditText
-                    style="@style/TextInputEditTextStyle.Title"
-                    android:layout_marginHorizontal="0dp"
+                    style="@style/TextInputEditTextStyle.SingleLine"
                     android:hint="@string/login_nickname_hint"
                     android:imeOptions="actionDone"
                     android:maxLength="20"
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_main.xml b/android/Staccato_AN/app/src/main/res/layout/activity_main.xml
index 3652b8abc..5821ea417 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_main.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_main.xml
@@ -87,12 +87,11 @@
             <androidx.fragment.app.FragmentContainerView
                 android:id="@+id/fragment_container_view_main_bottom_sheet"
                 android:name="androidx.navigation.fragment.NavHostFragment"
-                android:layout_width="match_parent"
+                android:layout_width="0dp"
                 android:layout_height="0dp"
                 app:defaultNavHost="true"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintHorizontal_bias="0.0"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@id/view_main_drag_bar"
                 app:navGraph="@navigation/bottom_navigation_graph" />
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_memory_creation.xml b/android/Staccato_AN/app/src/main/res/layout/activity_memory_creation.xml
index d42b1bb9e..bf1cbd38e 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_memory_creation.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_memory_creation.xml
@@ -25,7 +25,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_memory_creation"
-            style="@style/TitleToolbarStyle"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -159,11 +159,9 @@
                     app:layout_constraintTop_toBottomOf="@id/tv_memory_creation_description">
 
                     <com.google.android.material.textfield.TextInputEditText
-                        style="@style/TextInputEditTextStyle"
-                        android:gravity="top"
+                        style="@style/TextInputEditTextStyle.Description"
                         android:hint="@string/memory_creation_description_hint"
                         android:maxLength="500"
-                        android:minHeight="255dp"
                         android:text="@={viewModel.description}" />
 
                 </com.google.android.material.textfield.TextInputLayout>
@@ -172,7 +170,7 @@
                     android:id="@+id/tv_memory_creation_period_title"
                     style="@style/SubTitleStyle"
                     android:layout_marginStart="24dp"
-                    android:layout_marginTop="24dp"
+                    android:layout_marginTop="40dp"
                     android:text="@string/memory_creation_period_setting"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/text_input_memory_creation_description" />
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_memory_update.xml b/android/Staccato_AN/app/src/main/res/layout/activity_memory_update.xml
index dab0ca439..c80a8e4c7 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_memory_update.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_memory_update.xml
@@ -25,7 +25,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_memory_update"
-            style="@style/TitleToolbarStyle"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -160,11 +160,9 @@
                     app:layout_constraintTop_toBottomOf="@id/tv_memory_update_description">
 
                     <com.google.android.material.textfield.TextInputEditText
-                        style="@style/TextInputEditTextStyle"
-                        android:gravity="top"
+                        style="@style/TextInputEditTextStyle.Description"
                         android:hint="@string/memory_creation_description_hint"
                         android:maxLength="500"
-                        android:minHeight="255dp"
                         android:text="@={viewModel.description}" />
 
                 </com.google.android.material.textfield.TextInputLayout>
@@ -173,7 +171,7 @@
                     android:id="@+id/tv_memory_update_period_title"
                     style="@style/SubTitleStyle"
                     android:layout_marginStart="24dp"
-                    android:layout_marginTop="24dp"
+                    android:layout_marginTop="40dp"
                     android:text="@string/memory_creation_period_setting"
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toBottomOf="@id/text_input_memory_update_description" />
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_mypage.xml b/android/Staccato_AN/app/src/main/res/layout/activity_mypage.xml
index a8679fa3e..2dc3f1dae 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_mypage.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_mypage.xml
@@ -26,7 +26,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_mypage"
-            style="@style/DefaultToolbarStyle"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -61,8 +61,8 @@
                     app:layout_constraintStart_toStartOf="parent"
                     app:layout_constraintTop_toTopOf="parent"
                     bind:coilCircleImageUrl="@{viewModel.accountInformation.profileImageUrl}"
-                bind:coilPlaceHolder="@{@drawable/icon_member}"
-                tools:src="@drawable/icon_member" />
+                    bind:coilPlaceHolder="@{@drawable/icon_member}"
+                    tools:src="@drawable/icon_member" />
 
                 <ImageView
                     android:layout_width="wrap_content"
@@ -83,10 +83,10 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="20dp"
                 android:text="@{viewModel.accountInformation.nickname}"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/frame_mypage_profile_image"
-            tools:text="사용자 닉네임" />
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/frame_mypage_profile_image"
+                tools:text="사용자 닉네임" />
 
             <TextView
                 android:id="@+id/tv_mypage_profile_uuid"
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_recovery.xml b/android/Staccato_AN/app/src/main/res/layout/activity_recovery.xml
index 5eec4c4c0..b673f5089 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_recovery.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_recovery.xml
@@ -21,67 +21,74 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_recovery"
-            style="@style/TitleToolbarStyle"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <androidx.constraintlayout.widget.ConstraintLayout
-            android:layout_width="match_parent"
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline_recovery_start_margin"
+            android:layout_width="0dp"
             android:layout_height="0dp"
-            android:paddingHorizontal="24dp"
-            android:paddingTop="72dp"
-            android:paddingBottom="24dp"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/toolbar_recovery">
+            android:orientation="vertical"
+            app:layout_constraintGuide_begin="24dp" />
 
-            <TextView
-                android:id="@+id/tv_recovery_title"
-                style="@style/Typography.Title1"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="12dp"
-                android:text="@string/recovery_title"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toTopOf="parent" />
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guideline_recovery_end_margin"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:orientation="vertical"
+            app:layout_constraintGuide_end="24dp" />
 
-            <TextView
-                android:id="@+id/tv_recovery_subtitle"
-                style="@style/Typography.Title1"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="12dp"
-                android:layout_marginTop="8dp"
-                android:text="@string/recovery_subtitle"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/tv_recovery_title" />
+        <TextView
+            android:id="@+id/tv_recovery_title"
+            style="@style/Typography.Title1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="12dp"
+            android:layout_marginTop="72dp"
+            android:text="@string/recovery_title"
+            app:layout_constraintStart_toStartOf="@id/guideline_recovery_start_margin"
+            app:layout_constraintTop_toBottomOf="@id/toolbar_recovery" />
 
-            <EditText
-                android:id="@+id/et_recovery_code"
-                style="@style/EditTextStyle"
-                android:layout_marginTop="40dp"
+        <TextView
+            android:id="@+id/tv_recovery_subtitle"
+            style="@style/Typography.Title1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="12dp"
+            android:layout_marginTop="8dp"
+            android:text="@string/recovery_subtitle"
+            app:layout_constraintStart_toStartOf="@id/guideline_recovery_start_margin"
+            app:layout_constraintTop_toBottomOf="@id/tv_recovery_title" />
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/text_input_recovery_code"
+            style="@style/TextInputLayoutStyle"
+            android:layout_marginTop="40dp"
+            app:counterMaxLength="36"
+            app:layout_constraintEnd_toEndOf="@id/guideline_recovery_end_margin"
+            app:layout_constraintStart_toStartOf="@id/guideline_recovery_start_margin"
+            app:layout_constraintTop_toBottomOf="@id/tv_recovery_subtitle">
+
+            <com.google.android.material.textfield.TextInputEditText
+                style="@style/TextInputEditTextStyle.SingleLine"
                 android:hint="@string/recovery_code_hint"
                 android:imeOptions="actionDone"
-                android:inputType="text"
                 android:maxLength="36"
-                android:maxLines="1"
-                android:text="@={viewModel.recoveryCode}"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/tv_recovery_subtitle" />
+                android:text="@={viewModel.recoveryCode}" />
 
-            <androidx.appcompat.widget.AppCompatButton
-                android:id="@+id/btn_start_staccato"
-                style="@style/ButtonStyle.Recovery"
-                android:onClick="@{() -> handler.onRecoveryClicked()}"
-                app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintStart_toStartOf="parent"
-                bind:recoveryButtonEnabled="@{viewModel.recoveryCode}" />
+        </com.google.android.material.textfield.TextInputLayout>
 
-        </androidx.constraintlayout.widget.ConstraintLayout>
+        <androidx.appcompat.widget.AppCompatButton
+            android:id="@+id/btn_start_staccato"
+            style="@style/ButtonStyle.Recovery"
+            android:layout_marginBottom="24dp"
+            android:onClick="@{() -> handler.onRecoveryClicked()}"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="@id/guideline_recovery_end_margin"
+            app:layout_constraintStart_toStartOf="@id/guideline_recovery_start_margin"
+            bind:recoveryButtonEnabled="@{viewModel.recoveryCode}" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_visit_creation.xml b/android/Staccato_AN/app/src/main/res/layout/activity_visit_creation.xml
index f9313e3a5..5be4a9605 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_visit_creation.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_visit_creation.xml
@@ -28,10 +28,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_visit_creation"
-            style="@style/TitleToolbarStyle"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingEnd="8dp"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -39,10 +36,12 @@
             app:title="@string/visit_creation_toolbar_title" />
 
         <androidx.core.widget.NestedScrollView
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="0dp"
             android:overScrollMode="never"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/toolbar_visit_creation">
 
             <androidx.constraintlayout.widget.ConstraintLayout
diff --git a/android/Staccato_AN/app/src/main/res/layout/activity_visit_update.xml b/android/Staccato_AN/app/src/main/res/layout/activity_visit_update.xml
index 34d1981c6..3bf8466bf 100644
--- a/android/Staccato_AN/app/src/main/res/layout/activity_visit_update.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/activity_visit_update.xml
@@ -28,10 +28,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_visit_update"
-            style="@style/TitleToolbarStyle"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingEnd="8dp"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
@@ -39,10 +36,12 @@
             app:title="@string/visit_update_toolbar_title" />
 
         <androidx.core.widget.NestedScrollView
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="0dp"
             android:overScrollMode="never"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/toolbar_visit_update">
 
             <androidx.constraintlayout.widget.ConstraintLayout
@@ -225,7 +224,7 @@
                     android:id="@+id/tv_memory_selection_title"
                     style="@style/SubTitleStyle"
                     android:layout_marginTop="35dp"
-                    android:text="추억 선택"
+                    android:text="@string/visit_creation_memory_selection"
                     app:layout_constraintStart_toStartOf="@id/tv_photo_title"
                     app:layout_constraintTop_toBottomOf="@id/constraint_current_location" />
 
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_delete_impossibility_dialog.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_delete_impossibility_dialog.xml
index e4b81a728..29a5e0fdc 100644
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_delete_impossibility_dialog.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/fragment_delete_impossibility_dialog.xml
@@ -6,9 +6,7 @@
 
     </data>
 
-    <androidx.constraintlayout.widget.ConstraintLayout
-        style="@style/DialogBackgroundStyle"
-        android:layout_width="match_parent">
+    <androidx.constraintlayout.widget.ConstraintLayout style="@style/DialogBackgroundStyle">
 
         <TextView
             android:id="@+id/tv_delete_impossibility_dialog_title"
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_maps.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_maps.xml
deleted file mode 100644
index 678a10b8e..000000000
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_maps.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<fragment xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/map"
-    android:name="com.google.android.gms.maps.SupportMapFragment"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".presentation.maps.MapsFragment" />
\ No newline at end of file
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_moment.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_moment.xml
index 8ef78af42..0d254ecb0 100644
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_moment.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/fragment_moment.xml
@@ -26,8 +26,7 @@
 
         <com.google.android.material.appbar.MaterialToolbar
             android:id="@+id/toolbar_moment"
-            style="@style/DefaultToolbarStyle"
-            android:paddingEnd="8dp"
+            style="@style/NavigationToolbarStyle"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent">
@@ -153,7 +152,7 @@
 
                 <androidx.fragment.app.FragmentContainerView
                     android:id="@+id/container_moment_feeling_selection"
-                    android:layout_width="match_parent"
+                    android:layout_width="0dp"
                     android:layout_height="wrap_content"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintStart_toStartOf="parent"
@@ -162,7 +161,7 @@
 
                 <androidx.fragment.app.FragmentContainerView
                     android:id="@+id/container_moment_comments"
-                    android:layout_width="match_parent"
+                    android:layout_width="0dp"
                     android:layout_height="wrap_content"
                     app:layout_constraintEnd_toEndOf="parent"
                     app:layout_constraintHorizontal_bias="0.0"
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_moment_comments.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_moment_comments.xml
index bceb7490e..dfb835f80 100644
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_moment_comments.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/fragment_moment_comments.xml
@@ -60,11 +60,12 @@
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/rv_moment_comments"
-            android:layout_width="match_parent"
-            android:layout_height="0dp"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
             android:minHeight="360dp"
             android:overScrollMode="never"
             app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+            app:layout_constraintBottom_toTopOf="@id/et_moment_comments_input"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/tv_moment_comments_title"
@@ -72,49 +73,39 @@
             tools:itemCount="3"
             tools:listitem="@layout/item_moment_my_comment" />
 
-        <Space
-            android:layout_width="match_parent"
-            android:layout_height="48dp"
-            app:layout_constraintTop_toBottomOf="@id/rv_moment_comments" />
-
-        <androidx.constraintlayout.widget.ConstraintLayout
-            android:id="@+id/constraint_moment_comments_input"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+        <com.google.android.material.textfield.TextInputEditText
+            android:id="@+id/et_moment_comments_input"
+            style="@style/TextInputEditTextStyle"
+            android:layout_width="0dp"
+            android:layout_marginHorizontal="10dp"
+            android:layout_marginBottom="12dp"
+            android:hint="@string/visit_enter_log"
+            android:imeOptions="actionNone"
+            android:inputType="textMultiLine"
+            android:maxLength="500"
+            android:maxLines="10"
+            android:text="@={viewModel.commentInput}"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent">
+            app:layout_constraintEnd_toStartOf="@id/iv_moment_comments_send"
+            app:layout_constraintStart_toStartOf="parent" />
 
-            <com.google.android.material.textfield.TextInputEditText
-                android:id="@+id/et_moment_comments_input"
-                style="@style/TextInputEditTextStyle.Title"
-                android:layout_width="0dp"
-                android:layout_marginStart="10dp"
-                android:hint="@string/visit_enter_log"
-                android:imeOptions="actionNone"
-                android:inputType="textMultiLine"
-                android:maxLength="500"
-                android:maxLines="10"
-                android:text="@={viewModel.commentInput}"
-                app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintEnd_toStartOf="@id/iv_moment_comments_send"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toTopOf="parent" />
-
-            <ImageButton
-                android:id="@+id/iv_moment_comments_send"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:background="@drawable/selector_comment_sendable"
-                android:backgroundTint="@null"
-                android:onClick="@{() -> commentHandler.onSendButtonClicked()}"
-                android:padding="8dp"
-                app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintTop_toTopOf="parent"
-                bind:sendButtonEnabled="@{viewModel.commentInput}" />
-
-        </androidx.constraintlayout.widget.ConstraintLayout>
+        <ImageButton
+            android:id="@+id/iv_moment_comments_send"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginEnd="12dp"
+            android:background="@drawable/selector_comment_sendable"
+            android:backgroundTint="@null"
+            android:contentDescription="@string/all_image_content_description"
+            android:minWidth="0dp"
+            android:minHeight="0dp"
+            android:onClick="@{() -> commentHandler.onSendButtonClicked()}"
+            android:padding="8dp"
+            app:layout_constraintBottom_toBottomOf="@id/et_moment_comments_input"
+            app:layout_constraintDimensionRatio="1:1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@id/et_moment_comments_input"
+            bind:sendButtonEnabled="@{viewModel.commentInput}" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_moment_feeling_selection.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_moment_feeling_selection.xml
index 7b59883ed..38b0f8c8e 100644
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_moment_feeling_selection.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/fragment_moment_feeling_selection.xml
@@ -30,7 +30,7 @@
             android:nestedScrollingEnabled="false"
             android:orientation="horizontal"
             android:overScrollMode="never"
-            android:paddingStart="13dp"
+            android:paddingHorizontal="13dp"
             app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
diff --git a/android/Staccato_AN/app/src/main/res/layout/fragment_visit.xml b/android/Staccato_AN/app/src/main/res/layout/fragment_visit.xml
deleted file mode 100644
index 5659f87ad..000000000
--- a/android/Staccato_AN/app/src/main/res/layout/fragment_visit.xml
+++ /dev/null
@@ -1,43 +0,0 @@
-<?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"
-    xmlns:bind="http://schemas.android.com/apk/res-auto">
-
-    <data>
-
-        <variable
-            name="toolbarHandler"
-            type="com.on.staccato.presentation.common.ToolbarHandler" />
-    </data>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/constraint_visit"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="@color/white"
-        tools:context=".presentation.ui.staccato.StaccatoActivity">
-
-        <include
-            android:id="@+id/include_visit_toolbar"
-            layout="@layout/toolbar_detail"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            bind:toolbarHandler="@{toolbarHandler}" />
-
-        <androidx.recyclerview.widget.RecyclerView
-            android:id="@+id/rv_visit_detail"
-            android:layout_width="0dp"
-            android:layout_height="0dp"
-            android:clipToPadding="false"
-            android:paddingBottom="15dp"
-            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/include_visit_toolbar" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-</layout>
diff --git a/android/Staccato_AN/app/src/main/res/layout/item_moment_my_comment.xml b/android/Staccato_AN/app/src/main/res/layout/item_moment_my_comment.xml
index 405999ee3..0f138aee1 100644
--- a/android/Staccato_AN/app/src/main/res/layout/item_moment_my_comment.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/item_moment_my_comment.xml
@@ -18,12 +18,8 @@
 
         <ImageView
             android:id="@+id/iv_moment_my_comment_profile"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:layout_margin="10dp"
-            android:layout_marginEnd="19dp"
+            style="@style/CommentProfileImageStyle.MyProfile"
             android:contentDescription="@string/all_image_content_description"
-            android:elevation="8dp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             bind:coilCircleImageUrl="@{myComment.memberImageUrl}"
@@ -41,17 +37,8 @@
 
         <TextView
             android:id="@+id/tv_moment_my_comment_chat"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="25dp"
-            android:layout_marginTop="6dp"
-            android:layout_marginEnd="10dp"
-            android:background="@drawable/shape_my_visit_log_12dp"
-            android:paddingHorizontal="16dp"
-            android:paddingVertical="12dp"
+            style="@style/CommentChatBoxStyle.MyComment"
             android:text="@{myComment.content}"
-            android:textAppearance="@style/Typography.Body3"
-            android:textColor="@color/gray5"
             app:layout_constrainedWidth="true"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@id/iv_moment_my_comment_profile"
diff --git a/android/Staccato_AN/app/src/main/res/layout/item_moment_others_comment.xml b/android/Staccato_AN/app/src/main/res/layout/item_moment_others_comment.xml
index 706c8e4a2..03e5b5991 100644
--- a/android/Staccato_AN/app/src/main/res/layout/item_moment_others_comment.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/item_moment_others_comment.xml
@@ -18,12 +18,8 @@
 
         <ImageView
             android:id="@+id/iv_moment_others_comment_profile"
-            android:layout_width="40dp"
-            android:layout_height="40dp"
-            android:layout_margin="10dp"
-            android:layout_marginStart="19dp"
+            style="@style/CommentProfileImageStyle.OtherProfile"
             android:contentDescription="@string/all_image_content_description"
-            android:elevation="8dp"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             bind:coilCircleImageUrl="@{othersComment.memberImageUrl}"
@@ -41,17 +37,8 @@
 
         <TextView
             android:id="@+id/tv_moment_others_comment_chat"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="10dp"
-            android:layout_marginTop="6dp"
-            android:layout_marginEnd="25dp"
-            android:background="@drawable/shape_others_visit_log_12dp"
-            android:paddingHorizontal="16dp"
-            android:paddingVertical="12dp"
+            style="@style/CommentChatBoxStyle.OtherComment"
             android:text="@{othersComment.content}"
-            android:textAppearance="@style/Typography.Body3"
-            android:textColor="@color/gray5"
             app:layout_constrainedWidth="true"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
diff --git a/android/Staccato_AN/app/src/main/res/layout/item_viewpage_photo.xml b/android/Staccato_AN/app/src/main/res/layout/item_viewpage_photo.xml
index 317a2de79..006ee48ea 100644
--- a/android/Staccato_AN/app/src/main/res/layout/item_viewpage_photo.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/item_viewpage_photo.xml
@@ -16,7 +16,7 @@
 
         <ImageView
             android:id="@+id/iv_item_photo"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="0dp"
             android:adjustViewBounds="true"
             android:contentDescription="@string/all_image_content_description"
diff --git a/android/Staccato_AN/app/src/main/res/layout/layout_photo_attach.xml b/android/Staccato_AN/app/src/main/res/layout/layout_photo_attach.xml
index 0163c2b73..78301e1e5 100644
--- a/android/Staccato_AN/app/src/main/res/layout/layout_photo_attach.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/layout_photo_attach.xml
@@ -9,11 +9,12 @@
         android:id="@+id/view_photo_attach_camera"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:contentDescription="@string/all_image_content_description"
         android:src="@drawable/icon_camera"
-        app:tint="@color/gray4"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:tint="@color/gray4" />
 
     <TextView
         android:layout_width="wrap_content"
diff --git a/android/Staccato_AN/app/src/main/res/layout/layout_timeline.xml b/android/Staccato_AN/app/src/main/res/layout/layout_timeline.xml
index 3cfbb50d3..1ad1cea6e 100644
--- a/android/Staccato_AN/app/src/main/res/layout/layout_timeline.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/layout_timeline.xml
@@ -28,34 +28,35 @@
             android:id="@+id/iv_timeline_folder"
             android:layout_width="25dp"
             android:layout_height="25dp"
+            android:contentDescription="@string/all_image_content_description"
             android:src="@drawable/icon_folder"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <View
-            android:id="@+id/view_line"
+        <com.google.android.material.divider.MaterialDivider
+            android:id="@+id/divider_timeline"
             android:layout_width="1dp"
             android:layout_height="0dp"
             android:layout_marginStart="8dp"
-            android:foreground="@color/gray2"
+            app:dividerColor="@color/gray2"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toEndOf="@id/iv_timeline_folder"
             app:layout_constraintTop_toTopOf="parent" />
 
         <TextView
-            android:id="@+id/tv_memory_period"
+            android:id="@+id/tv_timeline_memory_period"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
             android:textAppearance="@style/Typography.Body4"
-            app:layout_constraintStart_toStartOf="@id/view_line"
-            app:layout_constraintTop_toBottomOf="@id/tv_memory_title"
+            app:layout_constraintStart_toStartOf="@id/divider_timeline"
+            app:layout_constraintTop_toBottomOf="@id/tv_timeline_memory_title"
             bind:endAt="@{memory.endAt}"
             bind:startAt="@{memory.startAt}"
             tools:text="2024.7.23 ~ 2024.9.30" />
 
         <TextView
-            android:id="@+id/tv_memory_title"
+            android:id="@+id/tv_timeline_memory_title"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="8dp"
@@ -63,13 +64,13 @@
             android:maxLines="1"
             android:text="@{memory.memoryTitle}"
             android:textAppearance="@style/Typography.Title3"
-            app:layout_constraintEnd_toStartOf="@id/iv_memory_thumbnail"
-            app:layout_constraintStart_toEndOf="@id/view_line"
+            app:layout_constraintEnd_toStartOf="@id/iv_timeline_memory_thumbnail"
+            app:layout_constraintStart_toEndOf="@id/divider_timeline"
             app:layout_constraintTop_toTopOf="parent"
             tools:text="제주도 가족 여행" />
 
         <ImageView
-            android:id="@+id/iv_memory_thumbnail"
+            android:id="@+id/iv_timeline_memory_thumbnail"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:contentDescription="@string/all_image_content_description"
diff --git a/android/Staccato_AN/app/src/main/res/layout/toolbar_detail.xml b/android/Staccato_AN/app/src/main/res/layout/toolbar_detail.xml
index a34306eff..9a0709e61 100644
--- a/android/Staccato_AN/app/src/main/res/layout/toolbar_detail.xml
+++ b/android/Staccato_AN/app/src/main/res/layout/toolbar_detail.xml
@@ -10,8 +10,7 @@
 
     <com.google.android.material.appbar.MaterialToolbar
         android:id="@+id/toolbar_detail"
-        style="@style/DefaultToolbarStyle"
-        android:paddingEnd="8dp">
+        style="@style/NavigationToolbarStyle">
 
         <androidx.appcompat.widget.AppCompatButton
             android:id="@+id/btn_detail_delete"
diff --git a/android/Staccato_AN/app/src/main/res/values/styles.xml b/android/Staccato_AN/app/src/main/res/values/styles.xml
index 7aa9b641e..f354e6ff7 100644
--- a/android/Staccato_AN/app/src/main/res/values/styles.xml
+++ b/android/Staccato_AN/app/src/main/res/values/styles.xml
@@ -1,28 +1,6 @@
 <resources>
 
-    <style name="DefaultToolbarStyle">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="navigationIcon">@drawable/icon_arrow_left</item>
-    </style>
-
-    <style name="TitleToolbarStyle" parent="DefaultToolbarStyle">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="titleTextAppearance">@style/Typography.Title2</item>
-        <item name="subtitleTextAppearance">@style/Typography.Body4</item>
-        <item name="subtitleTextColor">@color/gray5</item>
-        <item name="titleTextColor">@color/gray5</item>
-    </style>
-
-    <style name="CloseToolbarStyle">
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:paddingEnd">8dp</item>
-        <item name="titleCentered">true</item>
-        <item name="titleTextAppearance">@style/Typography.Title2</item>
-        <item name="titleTextColor">@color/gray5</item>
-    </style>
+    <!-- SubTitle sytles -->
 
     <style name="SubTitleStyle">
         <item name="android:layout_width">wrap_content</item>
@@ -31,174 +9,60 @@
     </style>
 
     <style name="RequiredMarkStyle" parent="SubTitleStyle">
+        <item name="android:layout_marginStart">4dp</item>
         <item name="android:text">@string/all_required_mark</item>
         <item name="android:textColor">@color/staccato_blue</item>
-        <item name="android:layout_marginStart">4dp</item>
     </style>
 
-    <style name="DialogDescriptionStyle">
-        <item name="android:layout_width">wrap_content</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_marginTop">4dp</item>
-        <item name="android:textAppearance">@style/Typography.Body2</item>
-        <item name="android:textColor">@color/gray3</item>
-    </style>
+    <!-- Divider styles   -->
 
-    <style name="TextInputLayoutStyle">
+    <style name="DividerStyle">
         <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_marginTop">8dp</item>
-        <item name="counterEnabled">true</item>
-        <item name="counterTextAppearance">@style/Typography.Body4</item>
-        <item name="counterTextColor">@color/gray3</item>
-        <item name="hintEnabled">false</item>
-    </style>
-
-    <style name="TextInputEditTextStyle">
-        <item name="android:layout_marginHorizontal">24dp</item>
-        <item name="android:layout_width">match_parent</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:textAppearance">@style/Typography.Body1</item>
-        <item name="android:background">@drawable/shape_all_gray1_8dp</item>
-        <item name="android:paddingHorizontal">16dp</item>
-        <item name="android:paddingVertical">12dp</item>
-        <item name="android:textColorHint">@color/gray3</item>
-    </style>
-
-    <style name="TextInputEditTextStyle.Title" parent="TextInputEditTextStyle">
-        <item name="android:inputType">text</item>
-        <item name="maxLines">1</item>
+        <item name="android:layout_height">0.5dp</item>
+        <item name="dividerColor">@color/gray2</item>
     </style>
 
-    <style name="EditTextStyle">
-        <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:textAppearance">@style/Typography.Body1</item>
-        <item name="android:background">@drawable/shape_all_gray1_8dp</item>
-        <item name="android:paddingHorizontal">16dp</item>
-        <item name="android:paddingVertical">12dp</item>
-        <item name="android:textColorHint">@color/gray3</item>
-    </style>
+    <!-- Dialog styles   -->
 
-    <style name="ButtonStyle">
-        <item name="android:layout_width">0dp</item>
+    <style name="DialogBackgroundStyle">
+        <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
-        <item name="android:minWidth">0dp</item>
-        <item name="android:minHeight">0dp</item>
-        <item name="android:paddingVertical">14dp</item>
-        <item name="android:stateListAnimator">@null</item>
-        <item name="android:textAppearance">@style/Typography.Title3</item>
-    </style>
-
-    <style name="ButtonStyle.Save" parent="ButtonStyle">
-        <item name="android:background">@drawable/selector_button_5dp</item>
-        <item name="android:text">@string/all_save</item>
-        <item name="android:textColor">@color/gray4</item>
-        <item name="android:enabled">false</item>
-    </style>
-
-    <style name="ButtonStyle.Save.Active" parent="ButtonStyle.Save">
-        <item name="android:textColor">@color/white</item>
-        <item name="android:enabled">true</item>
-    </style>
-
-    <style name="ButtonStyle.Confirm" parent="ButtonStyle">
-        <item name="android:background">@drawable/shape_button_staccato_blue_5dp</item>
-        <item name="android:text">@string/all_confirm</item>
-        <item name="android:layout_marginTop">36dp</item>
-        <item name="android:textColor">@color/white</item>
-    </style>
-
-    <style name="ButtonStyle.Confirm.Narrow" parent="ButtonStyle.Confirm">
-        <item name="android:paddingHorizontal">32dp</item>
-    </style>
-
-    <style name="ButtonStyle.Cancel" parent="ButtonStyle">
-        <item name="android:text">@string/all_cancel</item>
-        <item name="android:layout_marginTop">36dp</item>
-        <item name="android:paddingHorizontal">32dp</item>
-        <item name="android:background">@drawable/shape_button_gray1_5dp</item>
-        <item name="android:textColor">@color/gray4</item>
-    </style>
-
-    <style name="ButtonStyle.Login" parent="ButtonStyle">
-        <item name="android:background">@drawable/selector_button_5dp</item>
-        <item name="android:text">@string/login_start</item>
-        <item name="android:textColor">@color/gray4</item>
-        <item name="android:enabled">false</item>
-    </style>
-
-    <style name="ButtonStyle.Login.Active" parent="ButtonStyle.Login">
-        <item name="android:textColor">@color/white</item>
-        <item name="android:enabled">true</item>
-    </style>
-
-    <style name="ButtonStyle.Recovery" parent="ButtonStyle">
-        <item name="android:background">@drawable/selector_button_5dp</item>
-        <item name="android:text">@string/recovery_load</item>
-        <item name="android:textColor">@color/gray4</item>
-        <item name="android:enabled">false</item>
-    </style>
-
-    <style name="ButtonStyle.Recovery.Active" parent="ButtonStyle.Recovery">
-        <item name="android:textColor">@color/white</item>
-        <item name="android:enabled">true</item>
-    </style>
-
-    <style name="ButtonStyle.MyPage" parent="ButtonStyle">
-        <item name="android:background">@android:color/transparent</item>
-        <item name="android:drawableEnd">@drawable/icon_arrow_right</item>
-        <item name="android:paddingVertical">8dp</item>
-        <item name="android:paddingStart">24dp</item>
-        <item name="android:paddingEnd">12dp</item>
-        <item name="android:textAlignment">textStart</item>
+        <item name="android:background">@drawable/shape_dialog_10dp</item>
+        <item name="android:paddingHorizontal">24dp</item>
+        <item name="android:paddingVertical">20dp</item>
     </style>
 
-    <style name="ToolbarMenuStyle">
+    <style name="DialogDescriptionStyle">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
-        <item name="android:layout_gravity">end</item>
-        <item name="android:paddingVertical">14dp</item>
-        <item name="android:background">@android:color/transparent</item>
+        <item name="android:layout_marginTop">4dp</item>
         <item name="android:textAppearance">@style/Typography.Body2</item>
-        <item name="android:minHeight">0dp</item>
-        <item name="android:minWidth">0dp</item>
-        <item name="android:paddingHorizontal">8dp</item>
+        <item name="android:textColor">@color/gray3</item>
     </style>
 
-    <style name="PhotoAttachMenuStyle">
+    <!-- PhotoAttatch styles   -->
+
+    <style name="PhotoAttachBoxStyle">
         <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">0dp</item>
+        <item name="android:background">@drawable/shape_all_gray1_8dp</item>
         <item name="android:clickable">true</item>
-        <item name="android:paddingVertical">16dp</item>
         <item name="android:focusable">true</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:textAppearance">@style/Typography.Body1</item>
-        <item name="android:textColor">@color/gray4</item>
+        <item name="layout_constraintDimensionRatio">8:5</item>
     </style>
 
-    <style name="DividerStyle">
+    <style name="PhotoAttachMenuStyle">
         <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">0.5dp</item>
-        <item name="dividerColor">@color/gray2</item>
-    </style>
-
-    <style name="DialogBackgroundStyle">
-        <item name="android:layout_width">match_parent</item>
         <item name="android:layout_height">wrap_content</item>
-        <item name="android:background">@drawable/shape_dialog_10dp</item>
-        <item name="android:paddingHorizontal">24dp</item>
-        <item name="android:paddingVertical">20dp</item>
-    </style>
-
-    <style name="PhotoAttachBoxStyle">
-        <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">0dp</item>
         <item name="android:clickable">true</item>
         <item name="android:focusable">true</item>
-        <item name="android:background">@drawable/shape_all_gray1_8dp</item>
-        <item name="layout_constraintDimensionRatio">8:5</item>
+        <item name="android:paddingVertical">16dp</item>
+        <item name="android:textAppearance">@style/Typography.Body1</item>
+        <item name="android:textColor">@color/gray4</item>
     </style>
 
+    <!-- DargHandle styles   -->
+
     <style name="DragHandleStyle">
         <item name="android:layout_width">40dp</item>
         <item name="android:layout_height">4dp</item>
@@ -206,10 +70,12 @@
         <item name="android:background">@drawable/shape_drag_handle</item>
     </style>
 
+    <!-- MeterialCalendar styles   -->
+
     <style name="DatePickerStyle" parent="ThemeOverlay.Material3.MaterialCalendar">
+        <item name="android:background">@color/white</item>
         <item name="colorPrimary">@color/staccato_blue</item>
         <item name="colorOnPrimary">@color/white</item>
-        <item name="android:background">@color/white</item>
         <item name="fontFamily">@font/pretendard_medium</item>
         <item name="materialCalendarHeaderSelection">@style/Typography.Title1</item>
         <item name="materialCalendarStyle">@style/CustomMaterialCalendarStyle</item>
@@ -219,31 +85,16 @@
         <item name="rangeFillColor">@color/staccato_blue_30</item>
     </style>
 
+    <!-- Feeling styles   -->
+
     <style name="FeelingStyle">
         <item name="android:layout_width">60dp</item>
         <item name="android:layout_height">60dp</item>
         <item name="android:layout_marginHorizontal">5dp</item>
-        <item name="android:padding">5dp</item>
-        <item name="android:gravity">center</item>
         <item name="android:clickable">true</item>
         <item name="android:focusable">true</item>
-    </style>
-
-    <style name="CurrentLocationStyle" parent="Widget.Material3.Button.OutlinedButton">
-        <item name="android:clickable">true</item>
-        <item name="android:layout_width">0dp</item>
-        <item name="android:layout_height">wrap_content</item>
-        <item name="android:text">@string/visit_creation_load_current_location</item>
-        <item name="android:textAppearance">@style/Typography.Body4</item>
-        <item name="android:textColor">@color/gray4</item>
-
-        <item name="icon">@drawable/icon_crosshair</item>
-        <item name="iconGravity">textStart</item>
-        <item name="iconPadding">10dp</item>
-        <item name="iconTint">@color/gray3</item>
-
-        <item name="rippleColor">@android:color/transparent</item>
-        <item name="strokeColor">@color/gray3</item>
+        <item name="android:gravity">center</item>
+        <item name="android:padding">5dp</item>
     </style>
 
     <style name="LottieStyle">
diff --git a/android/Staccato_AN/app/src/main/res/values/styles_button.xml b/android/Staccato_AN/app/src/main/res/values/styles_button.xml
new file mode 100644
index 000000000..04ed697b2
--- /dev/null
+++ b/android/Staccato_AN/app/src/main/res/values/styles_button.xml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="ButtonStyle">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:minWidth">0dp</item>
+        <item name="android:minHeight">0dp</item>
+        <item name="android:paddingVertical">14dp</item>
+        <item name="android:stateListAnimator">@null</item>
+        <item name="android:textAppearance">@style/Typography.Title3</item>
+    </style>
+
+    <style name="ButtonStyle.Save" parent="ButtonStyle">
+        <item name="android:background">@drawable/selector_button_5dp</item>
+        <item name="android:enabled">false</item>
+        <item name="android:text">@string/all_save</item>
+        <item name="android:textColor">@color/gray4</item>
+    </style>
+
+    <style name="ButtonStyle.Save.Active" parent="ButtonStyle.Save">
+        <item name="android:enabled">true</item>
+        <item name="android:textColor">@color/white</item>
+    </style>
+
+    <style name="ButtonStyle.Confirm" parent="ButtonStyle">
+        <item name="android:layout_marginTop">36dp</item>
+        <item name="android:background">@drawable/shape_button_staccato_blue_5dp</item>
+        <item name="android:text">@string/all_confirm</item>
+        <item name="android:textColor">@color/white</item>
+    </style>
+
+    <style name="ButtonStyle.Confirm.Narrow" parent="ButtonStyle.Confirm">
+        <item name="android:paddingHorizontal">32dp</item>
+    </style>
+
+    <style name="ButtonStyle.Cancel" parent="ButtonStyle">
+        <item name="android:layout_marginTop">36dp</item>
+        <item name="android:background">@drawable/shape_button_gray1_5dp</item>
+        <item name="android:paddingHorizontal">32dp</item>
+        <item name="android:text">@string/all_cancel</item>
+        <item name="android:textColor">@color/gray4</item>
+    </style>
+
+    <style name="ButtonStyle.Login" parent="ButtonStyle">
+        <item name="android:background">@drawable/selector_button_5dp</item>
+        <item name="android:enabled">false</item>
+        <item name="android:text">@string/login_start</item>
+        <item name="android:textColor">@color/gray4</item>
+    </style>
+
+    <style name="ButtonStyle.Login.Active" parent="ButtonStyle.Login">
+        <item name="android:enabled">true</item>
+        <item name="android:textColor">@color/white</item>
+    </style>
+
+    <style name="ButtonStyle.Recovery" parent="ButtonStyle">
+        <item name="android:background">@drawable/selector_button_5dp</item>
+        <item name="android:enabled">false</item>
+        <item name="android:text">@string/recovery_load</item>
+        <item name="android:textColor">@color/gray4</item>
+    </style>
+
+    <style name="ButtonStyle.Recovery.Active" parent="ButtonStyle.Recovery">
+        <item name="android:enabled">true</item>
+        <item name="android:textColor">@color/white</item>
+    </style>
+
+    <style name="ButtonStyle.MyPage" parent="ButtonStyle">
+        <item name="android:background">@android:color/transparent</item>
+        <item name="android:drawableEnd">@drawable/icon_arrow_right</item>
+        <item name="android:paddingEnd">12dp</item>
+        <item name="android:paddingStart">24dp</item>
+        <item name="android:paddingVertical">8dp</item>
+        <item name="android:textAlignment">textStart</item>
+    </style>
+
+    <style name="CurrentLocationStyle" parent="Widget.Material3.Button.OutlinedButton">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:clickable">true</item>
+        <item name="android:text">@string/visit_creation_load_current_location</item>
+        <item name="android:textAppearance">@style/Typography.Body4</item>
+        <item name="android:textColor">@color/gray4</item>
+        <item name="icon">@drawable/icon_crosshair</item>
+        <item name="iconGravity">textStart</item>
+        <item name="iconPadding">10dp</item>
+        <item name="iconTint">@color/gray3</item>
+        <item name="rippleColor">@android:color/transparent</item>
+        <item name="strokeColor">@color/gray3</item>
+    </style>
+
+</resources>
diff --git a/android/Staccato_AN/app/src/main/res/values/styles_comment.xml b/android/Staccato_AN/app/src/main/res/values/styles_comment.xml
new file mode 100644
index 000000000..ea8f971ac
--- /dev/null
+++ b/android/Staccato_AN/app/src/main/res/values/styles_comment.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="CommentProfileImageStyle">
+        <item name="android:layout_width">40dp</item>
+        <item name="android:layout_height">40dp</item>
+        <item name="android:layout_margin">10dp</item>
+        <item name="android:elevation">8dp</item>
+    </style>
+
+    <style name="CommentProfileImageStyle.MyProfile" parent="CommentProfileImageStyle">
+        <item name="android:layout_marginEnd">19dp</item>
+    </style>
+
+    <style name="CommentProfileImageStyle.OtherProfile" parent="CommentProfileImageStyle">
+        <item name="android:layout_marginStart">19dp</item>
+    </style>
+
+    <style name="CommentChatBoxStyle">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginTop">6dp</item>
+        <item name="android:paddingHorizontal">16dp</item>
+        <item name="android:paddingVertical">12dp</item>
+        <item name="android:textAppearance">@style/Typography.Body3</item>
+        <item name="android:textColor">@color/gray5</item>
+    </style>
+
+    <style name="CommentChatBoxStyle.MyComment" parent="CommentChatBoxStyle">
+        <item name="android:layout_marginStart">25dp</item>
+        <item name="android:layout_marginEnd">10dp</item>
+        <item name="android:background">@drawable/shape_my_visit_log_12dp</item>
+    </style>
+
+    <style name="CommentChatBoxStyle.OtherComment" parent="CommentChatBoxStyle">
+        <item name="android:layout_marginStart">10dp</item>
+        <item name="android:layout_marginEnd">25dp</item>
+        <item name="android:background">@drawable/shape_others_visit_log_12dp</item>
+    </style>
+
+</resources>
diff --git a/android/Staccato_AN/app/src/main/res/values/styles_text_input.xml b/android/Staccato_AN/app/src/main/res/values/styles_text_input.xml
new file mode 100644
index 000000000..ef4502cbc
--- /dev/null
+++ b/android/Staccato_AN/app/src/main/res/values/styles_text_input.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!--  TextInputLayout style  -->
+
+    <style name="TextInputLayoutStyle">
+        <item name="android:layout_width">0dp</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_marginTop">8dp</item>
+        <item name="counterEnabled">true</item>
+        <item name="counterTextAppearance">@style/Typography.Body4</item>
+        <item name="counterTextColor">@color/gray3</item>
+        <item name="hintEnabled">false</item>
+    </style>
+
+    <!--  TextInputEditText styles  -->
+
+    <style name="TextInputEditTextStyle">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:background">@drawable/shape_all_gray1_8dp</item>
+        <item name="android:paddingHorizontal">16dp</item>
+        <item name="android:paddingVertical">12dp</item>
+        <item name="android:textAppearance">@style/Typography.Body1</item>
+        <item name="android:textColorHint">@color/gray3</item>
+    </style>
+
+    <style name="TextInputEditTextStyle.SingleLine" parent="TextInputEditTextStyle">
+        <item name="android:inputType">text</item>
+        <item name="maxLines">1</item>
+    </style>
+
+    <style name="TextInputEditTextStyle.MultiLine" parent="TextInputEditTextStyle">
+        <item name="android:gravity">top</item>
+    </style>
+
+    <style name="TextInputEditTextStyle.Title" parent="TextInputEditTextStyle.SingleLine">
+        <item name="android:layout_marginHorizontal">24dp</item>
+    </style>
+
+    <style name="TextInputEditTextStyle.Description" parent="TextInputEditTextStyle.MultiLine">
+        <item name="android:layout_marginHorizontal">24dp</item>
+        <item name="android:minHeight">100dp</item>
+    </style>
+
+</resources>
diff --git a/android/Staccato_AN/app/src/main/res/values/styles_toolbar.xml b/android/Staccato_AN/app/src/main/res/values/styles_toolbar.xml
new file mode 100644
index 000000000..7afdb9b71
--- /dev/null
+++ b/android/Staccato_AN/app/src/main/res/values/styles_toolbar.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="DefaultToolbarStyle">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+    </style>
+
+    <style name="TitleToolbarStyle" parent="DefaultToolbarStyle">
+        <item name="titleTextAppearance">@style/Typography.Title2</item>
+        <item name="titleTextColor">@color/gray5</item>
+        <item name="subtitleTextAppearance">@style/Typography.Body4</item>
+        <item name="subtitleTextColor">@color/gray5</item>
+    </style>
+
+    <style name="NavigationToolbarStyle" parent="TitleToolbarStyle">
+        <item name="android:paddingEnd">8dp</item>
+        <item name="navigationIcon">@drawable/icon_arrow_left</item>
+    </style>
+
+    <style name="CloseToolbarStyle" parent="TitleToolbarStyle">
+        <item name="android:paddingEnd">8dp</item>
+        <item name="titleCentered">true</item>
+    </style>
+
+    <style name="ToolbarMenuStyle">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_gravity">end</item>
+        <item name="android:background">@android:color/transparent</item>
+        <item name="android:minHeight">0dp</item>
+        <item name="android:minWidth">0dp</item>
+        <item name="android:paddingHorizontal">8dp</item>
+        <item name="android:paddingVertical">14dp</item>
+        <item name="android:textAppearance">@style/Typography.Body2</item>
+    </style>
+
+</resources>