#11 [ui] 스토리텔링 뷰 작업

app/src/main/AndroidManifest.xml

@@ -19,6 +19,21 @@
         tools:targetApi="31">
         <activity
             android:name=".ui.main.MainActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
+
+        <activity
+            android:name=".ui.main.happy.HappyActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
+
+        <activity
+            android:name=".ui.onboarding.OnboardingActivity"
+            android:exported="false"
+            android:screenOrientation="portrait" />
+
+        <activity
+            android:name=".ui.storytelling.StoryTellingActivity"
             android:exported="true"
             android:screenOrientation="portrait">
             <intent-filter>
@@ -28,13 +43,6 @@
             </intent-filter>
         </activity>
 
-        <activity
-            android:name=".ui.main.happy.HappyActivity"
-            android:exported="true"
-            android:screenOrientation="portrait"></activity>
-        <activity
-            android:name=".ui.onboarding.OnboardingActivity"
-            android:exported="false"></activity>
     </application>
 
 </manifest>

app/src/main/java/com/sopetit/softie/ui/main/happy/HappyEmptyFragment.kt

@@ -15,7 +15,7 @@ class HappyEmptyFragment : Fragment() {
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
-        savedInstanceState: Bundle?,
+        savedInstanceState: Bundle?
     ): View? {
         _binding = FragmentHappyEmptyBinding.inflate(inflater, container, false)
         return binding.root

app/src/main/java/com/sopetit/softie/ui/storytelling/StoryTellingActivity.kt

@@ -0,0 +1,38 @@
+package com.sopetit.softie.ui.storytelling
+
+import android.os.Bundle
+import androidx.core.content.ContextCompat
+import androidx.fragment.app.Fragment
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.ActivityStoryTellingBinding
+import com.sopetit.softie.util.binding.BindingActivity
+
+class StoryTellingActivity :
+    BindingActivity<ActivityStoryTellingBinding>(R.layout.activity_story_telling) {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        initFragment()
+        initStatusBarColor()
+    }
+
+    private fun initFragment() {
+        val currentFragment =
+            supportFragmentManager.findFragmentById(R.id.fcv_story_telling_fragment)
+        if (currentFragment == null) {
+            supportFragmentManager.beginTransaction()
+                .add(R.id.fcv_story_telling_fragment, StoryTellingIntroFragment())
+                .commit()
+        }
+    }
+
+    private fun initStatusBarColor() {
+        window.statusBarColor = ContextCompat.getColor(this, R.color.story_telling_background)
+    }
+
+    fun replaceFragment(fragment: Fragment) {
+        val fragmentManager = supportFragmentManager
+        val fragmentTransaction = fragmentManager.beginTransaction()
+        fragmentTransaction.replace(R.id.fcv_story_telling_fragment, fragment).commit()
+    }
+}

app/src/main/java/com/sopetit/softie/ui/storytelling/StoryTellingConclusionFragment.kt

@@ -0,0 +1,14 @@
+package com.sopetit.softie.ui.storytelling
+
+import android.os.Bundle
+import android.view.View
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.FragmentStoryTellingConclusionBinding
+import com.sopetit.softie.util.binding.BindingFragment
+
+class StoryTellingConclusionFragment :
+    BindingFragment<FragmentStoryTellingConclusionBinding>(R.layout.fragment_story_telling_conclusion) {
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+    }
+}

app/src/main/java/com/sopetit/softie/ui/storytelling/StoryTellingIntroFragment.kt

@@ -0,0 +1,24 @@
+package com.sopetit.softie.ui.storytelling
+
+import android.os.Bundle
+import android.view.View
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.FragmentStoryTellingIntroBinding
+import com.sopetit.softie.util.binding.BindingFragment
+
+class StoryTellingIntroFragment :
+    BindingFragment<FragmentStoryTellingIntroBinding>(R.layout.fragment_story_telling_intro) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        initClickListener()
+    }
+
+    private fun initClickListener() {
+        binding.tvStoryTellingIntro.setOnClickListener {
+            val storyTellingMainFragment = StoryTellingMainFragment()
+            (activity as StoryTellingActivity).replaceFragment(storyTellingMainFragment)
+        }
+    }
+}

app/src/main/java/com/sopetit/softie/ui/storytelling/StoryTellingMainFragment.kt

@@ -0,0 +1,23 @@
+package com.sopetit.softie.ui.storytelling
+
+import android.os.Bundle
+import android.view.View
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.FragmentStoryTellingMainBinding
+import com.sopetit.softie.util.binding.BindingFragment
+
+class StoryTellingMainFragment :
+    BindingFragment<FragmentStoryTellingMainBinding>(R.layout.fragment_story_telling_main) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        initClickListener()
+    }
+
+    private fun initClickListener() {
+        binding.tvStoryTellingMain.setOnClickListener {
+            val storyTellingConclusionFragment = StoryTellingConclusionFragment()
+            (activity as StoryTellingActivity).replaceFragment(storyTellingConclusionFragment)
+        }
+    }
+}

app/src/main/res/drawable/ic_onboard_next.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M12.356,5.619C13.059,5.996 13.059,7.004 12.356,7.381L4.972,11.34C4.306,11.697 3.5,11.214 3.5,10.458L3.5,2.542C3.5,1.786 4.306,1.303 4.972,1.66L12.356,5.619Z"
+      android:fillColor="#26282B"/>
+</vector>

app/src/main/res/drawable/ic_spotlight2.xml

@@ -0,0 +1,23 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="360dp"
+    android:height="780dp"
+    android:viewportWidth="360"
+    android:viewportHeight="780">
+  <path
+      android:pathData="M0,0h360v780h-360z"
+      android:strokeAlpha="0.5"
+      android:fillAlpha="0.5">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:centerX="363.84"
+          android:centerY="530.73"
+          android:gradientRadius="595.78"
+          android:type="radial">
+        <item android:offset="0" android:color="#33FFCC00"/>
+        <item android:offset="0.55" android:color="#00FFCC00"/>
+        <item android:offset="1" android:color="#00FFCC00"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+</vector>

app/src/main/res/drawable/ic_spotlight3.xml

@@ -0,0 +1,23 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="360dp"
+    android:height="780dp"
+    android:viewportWidth="360"
+    android:viewportHeight="780">
+  <path
+      android:pathData="M0,0h360v780h-360z"
+      android:strokeAlpha="0.5"
+      android:fillAlpha="0.5">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:centerX="172.32"
+          android:centerY="533.13"
+          android:gradientRadius="528.33"
+          android:type="radial">
+        <item android:offset="0" android:color="#33FFCC00"/>
+        <item android:offset="0.49" android:color="#00FFCC00"/>
+        <item android:offset="1" android:color="#00FFCC00"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+</vector>

app/src/main/res/drawable/shape_white_fill_12_rect.xml

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

app/src/main/res/layout/activity_story_telling.xml

@@ -0,0 +1,23 @@
+<?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">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <androidx.fragment.app.FragmentContainerView
+            android:id="@+id/fcv_story_telling_fragment"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/layout/fragment_story_telling_conclusion.xml

@@ -0,0 +1,67 @@
+<?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">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/story_telling_background">
+
+        <ImageView
+            android:id="@+id/iv_story_telling_main_spotlight"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:src="@drawable/ic_spotlight3" />
+
+        <ImageView
+            android:id="@+id/iv_story_telling_conclusion_door"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="242dp"
+            android:src="@drawable/ic_door"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+        <ImageView
+            android:id="@+id/iv_story_telling_conclusion_box"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="210dp"
+            android:src="@drawable/ic_box_closed"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_story_telling_conclusion"
+            style="@style/bubble20"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="20dp"
+            android:layout_marginBottom="74dp"
+            android:background="@drawable/shape_white_fill_12_rect"
+            android:gravity="center"
+            android:paddingTop="23dp"
+            android:paddingBottom="22dp"
+            android:text="@string/story_telling_conclusion"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+        <ImageView
+            android:id="@+id/btn_story_telling_conclusion_next"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="16dp"
+            android:src="@drawable/ic_onboard_next"
+            app:layout_constraintBottom_toBottomOf="@id/tv_story_telling_conclusion"
+            app:layout_constraintEnd_toEndOf="@id/tv_story_telling_conclusion"
+            app:layout_constraintTop_toTopOf="@id/tv_story_telling_conclusion" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/layout/fragment_story_telling_intro.xml

@@ -0,0 +1,51 @@
+<?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">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/story_telling_background">
+
+        <ImageView
+            android:id="@+id/iv_story_telling_intro_girl"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="20dp"
+            android:layout_marginTop="194dp"
+            android:src="@drawable/ic_girl1"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_story_telling_intro"
+            style="@style/bubble20"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="20dp"
+            android:layout_marginBottom="74dp"
+            android:background="@drawable/shape_white_fill_12_rect"
+            android:gravity="center"
+            android:paddingTop="23dp"
+            android:paddingBottom="22dp"
+            android:text="@string/story_telling_intro"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+        <ImageView
+            android:id="@+id/btn_story_telling_intro_next"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="16dp"
+            android:src="@drawable/ic_onboard_next"
+            app:layout_constraintBottom_toBottomOf="@id/tv_story_telling_intro"
+            app:layout_constraintEnd_toEndOf="@id/tv_story_telling_intro"
+            app:layout_constraintTop_toTopOf="@id/tv_story_telling_intro" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>