From 7363da558b9fbd9403e2d22a4c1d550e1ccd16f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nami=2Eand=28=EB=82=98=EB=AF=B8=29?= <dnska6657@naver.com>
Date: Fri, 29 Aug 2025 01:11:17 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20?=
 =?UTF-8?q?=EB=B0=A9=EB=AC=B8=EC=9E=90=20=EB=AA=A8=EB=93=9C=20=EB=B7=B0=20?=
 =?UTF-8?q?=EC=A4=91=EC=95=99=20=EB=B0=B0=EC=B9=98=20-=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=BD=94=EB=93=9C=20=EA=B3=B5=ED=86=B5=ED=99=94=20?=
 =?UTF-8?q?-=20=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=20=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EB=A7=81=20=EB=A6=AC=EC=86=8C=EC=8A=A4=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../runnect/binding/BaseVisitorFragment.kt    |  52 ++++++
 .../presentation/mypage/MyPageFragment.kt     | 174 +++++++-----------
 .../storage/StorageMainFragment.kt            |  62 ++-----
 app/src/main/res/layout/fragment_my_page.xml  |  90 +++++----
 .../main/res/layout/fragment_storage_main.xml |  90 +++++----
 app/src/main/res/values/strings.xml           |   5 +
 6 files changed, 237 insertions(+), 236 deletions(-)
 create mode 100644 app/src/main/java/com/runnect/runnect/binding/BaseVisitorFragment.kt

diff --git a/app/src/main/java/com/runnect/runnect/binding/BaseVisitorFragment.kt b/app/src/main/java/com/runnect/runnect/binding/BaseVisitorFragment.kt
new file mode 100644
index 000000000..db1bdad57
--- /dev/null
+++ b/app/src/main/java/com/runnect/runnect/binding/BaseVisitorFragment.kt
@@ -0,0 +1,52 @@
+package com.runnect.runnect.binding
+
+import android.content.Intent
+import android.os.Bundle
+import android.view.View
+import android.widget.Button
+import androidx.annotation.LayoutRes
+import androidx.core.view.isVisible
+import androidx.databinding.ViewDataBinding
+import com.runnect.runnect.R
+import com.runnect.runnect.presentation.MainActivity
+import com.runnect.runnect.presentation.login.LoginActivity
+
+abstract class BaseVisitorFragment<T : ViewDataBinding>(
+    @LayoutRes private val layoutRes: Int
+) : BindingFragment<T>(layoutRes) {
+    
+    abstract val visitorContainer: View
+    abstract val contentViews: List<View>
+    
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        
+        if (MainActivity.isVisitorMode) {
+            showVisitorMode()
+        } else {
+            showContent()
+            onContentModeInit()
+        }
+    }
+    
+    private fun showVisitorMode() {
+        visitorContainer.isVisible = true
+        visitorContainer.findViewById<Button>(R.id.btn_visitor_mode)?.setOnClickListener {
+            navigateToLogin() 
+        }
+        contentViews.forEach { it.isVisible = false }
+    }
+    
+    private fun showContent() {
+        visitorContainer.isVisible = false
+        contentViews.forEach { it.isVisible = true }
+    }
+    
+    private fun navigateToLogin() {
+        val intent = Intent(requireContext(), LoginActivity::class.java)
+        startActivity(intent)
+        requireActivity().finish()
+    }
+    
+    abstract fun onContentModeInit()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/runnect/runnect/presentation/mypage/MyPageFragment.kt b/app/src/main/java/com/runnect/runnect/presentation/mypage/MyPageFragment.kt
index e0aebe72c..a062677fe 100644
--- a/app/src/main/java/com/runnect/runnect/presentation/mypage/MyPageFragment.kt
+++ b/app/src/main/java/com/runnect/runnect/presentation/mypage/MyPageFragment.kt
@@ -1,10 +1,9 @@
 package com.runnect.runnect.presentation.mypage
 
+import android.app.Activity
 import android.app.Activity.RESULT_OK
-import android.content.ContentValues
 import android.content.Intent
 import android.os.Bundle
-import android.view.View
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.core.view.isVisible
@@ -15,10 +14,8 @@ import com.kakao.sdk.common.util.KakaoCustomTabsClient
 import com.kakao.sdk.talk.TalkApiClient
 import com.runnect.runnect.BuildConfig
 import com.runnect.runnect.R
-import com.runnect.runnect.binding.BindingFragment
+import com.runnect.runnect.binding.BaseVisitorFragment
 import com.runnect.runnect.databinding.FragmentMyPageBinding
-import com.runnect.runnect.presentation.MainActivity
-import com.runnect.runnect.presentation.login.LoginActivity
 import com.runnect.runnect.presentation.mypage.editname.MyPageEditNameActivity
 import com.runnect.runnect.presentation.mypage.history.MyHistoryActivity
 import com.runnect.runnect.presentation.mypage.reward.MyRewardActivity
@@ -31,106 +28,63 @@ import com.runnect.runnect.util.analytics.EventName.EVENT_CLICK_RUNNING_RECORD
 import com.runnect.runnect.util.analytics.EventName.EVENT_CLICK_UPLOADED_COURSE
 import com.runnect.runnect.util.extension.getStampResId
 import dagger.hilt.android.AndroidEntryPoint
-import timber.log.Timber
 
 @AndroidEntryPoint
-class MyPageFragment : BindingFragment<FragmentMyPageBinding>(R.layout.fragment_my_page) {
+class MyPageFragment : BaseVisitorFragment<FragmentMyPageBinding>(R.layout.fragment_my_page) {
     private val viewModel: MyPageViewModel by activityViewModels()
     private lateinit var resultEditNameLauncher: ActivityResultLauncher<Intent>
-    var isVisitorMode: Boolean = MainActivity.isVisitorMode
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-        if (isVisitorMode) {
-            activateVisitorMode()
-        } else {
-            deactivateVisitorMode()
-        }
 
-    }
+    override val visitorContainer by lazy { binding.clVisitorMode }
+    override val contentViews by lazy { listOf(binding.constraintInside) }
 
-    private fun activateVisitorMode() {
-        with(binding) {
-            ivVisitorMode.isVisible = true
-            tvVisitorMode.isVisible = true
-            btnVisitorMode.isVisible = true
-            constraintInside.isVisible = false
-
-            btnVisitorMode.setOnClickListener {
-                val intent = Intent(requireContext(), LoginActivity::class.java)
-                startActivity(intent)
-                requireActivity().finish()
-            }
-        }
-    }
-
-    private fun deactivateVisitorMode() {
-        with(binding) {
-            ivVisitorMode.isVisible = false
-            tvVisitorMode.isVisible = false
-            btnVisitorMode.isVisible = false
-            constraintInside.isVisible = true
-
-            binding.vm = viewModel
-            binding.lifecycleOwner = this@MyPageFragment.viewLifecycleOwner
-            viewModel.getUserInfo()
-            addListener()
-            addObserver()
-            setResultEditNameLauncher()
-        }
+    override fun onContentModeInit() {
+        binding.vm = viewModel
+        binding.lifecycleOwner = this@MyPageFragment.viewLifecycleOwner
+        viewModel.getUserInfo()
+        addListener()
+        addObserver()
+        setResultEditNameLauncher()
     }
 
     private fun setResultEditNameLauncher() {
         resultEditNameLauncher =
             registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
                 if (result.resultCode == RESULT_OK) {
-                    val name =
-                        result.data?.getStringExtra(EXTRA_NICK_NAME) ?: viewModel.nickName.value
+                    val name = result.data?.getStringExtra(EXTRA_NICK_NAME) ?: viewModel.nickName.value
                     viewModel.setNickName(name!!)
                 }
             }
     }
 
     private fun addListener() {
-        binding.ivMyPageEditFrame.setOnClickListener {
-            val intent = Intent(requireContext(), MyPageEditNameActivity::class.java)
-            intent.putExtra(EXTRA_NICK_NAME, "${viewModel.nickName.value}")
-            val stampResId = requireContext().getStampResId(
-                stampId = viewModel.stampId.value,
-                resNameParam = RES_NAME,
-                resType = RES_STAMP_TYPE,
-                packageName = requireContext().packageName
-            )
-            intent.putExtra(EXTRA_PROFILE, stampResId)
-            resultEditNameLauncher.launch(intent)
-        }
+        with(binding) {
+            ivMyPageEditFrame.setOnClickListener {
+                val intent = Intent(requireContext(), MyPageEditNameActivity::class.java)
+                intent.putExtra(EXTRA_NICK_NAME, "${viewModel.nickName.value}")
+                val stampResId = getStampResourceId()
+                intent.putExtra(EXTRA_PROFILE, stampResId)
+                resultEditNameLauncher.launch(intent)
+            }
 
-        binding.viewMyPageMainRewardFrame.setOnClickListener {
-            Analytics.logClickedItemEvent(EVENT_CLICK_GOAL_REWARD)
-            startActivity(Intent(requireContext(), MyRewardActivity::class.java))
-            requireActivity().overridePendingTransition(
-                R.anim.slide_in_right, R.anim.slide_out_left
-            )
-        }
-        binding.viewMyPageMainHistoryFrame.setOnClickListener {
-            Analytics.logClickedItemEvent(EVENT_CLICK_RUNNING_RECORD)
-            startActivity(Intent(requireContext(), MyHistoryActivity::class.java))
-            requireActivity().overridePendingTransition(
-                R.anim.slide_in_right, R.anim.slide_out_left
-            )
-        }
+            viewMyPageMainRewardFrame.setOnClickListener {
+                Analytics.logClickedItemEvent(EVENT_CLICK_GOAL_REWARD)
+                navigateTo<MyRewardActivity>()
+            }
+            viewMyPageMainHistoryFrame.setOnClickListener {
+                Analytics.logClickedItemEvent(EVENT_CLICK_RUNNING_RECORD)
+                navigateTo<MyHistoryActivity>()
+            }
 
-        binding.viewMyPageMainUploadFrame.setOnClickListener {
-            Analytics.logClickedItemEvent(EVENT_CLICK_UPLOADED_COURSE)
-            startActivity(Intent(requireContext(), MyUploadActivity::class.java))
-            requireActivity().overridePendingTransition(
-                R.anim.slide_in_right, R.anim.slide_out_left
-            )
-        }
-        binding.viewMyPageMainSettingFrame.setOnClickListener {
-            moveToSettingFragment()
-        }
-        binding.viewMyPageMainKakaoChannelInquiryFrame.setOnClickListener {
-            inquiryKakao()
+            viewMyPageMainUploadFrame.setOnClickListener {
+                Analytics.logClickedItemEvent(EVENT_CLICK_UPLOADED_COURSE)
+                navigateTo<MyUploadActivity>()
+            }
+            viewMyPageMainSettingFrame.setOnClickListener {
+                moveToSettingFragment()
+            }
+            viewMyPageMainKakaoChannelInquiryFrame.setOnClickListener {
+                inquiryKakao()
+            }
         }
     }
 
@@ -149,30 +103,14 @@ class MyPageFragment : BindingFragment<FragmentMyPageBinding>(R.layout.fragment_
 
         viewModel.userInfoState.observe(viewLifecycleOwner) {
             when (it) {
-                UiState.Empty -> binding.indeterminateBar.isVisible = false
-                UiState.Loading -> {
-                    binding.indeterminateBar.isVisible = true
-                    binding.ivMyPageEditFrame.isClickable = false
-                    binding.viewMyPageMainSettingFrame.isClickable = false
-                }
-
+                UiState.Empty -> setLoadingState(false)
+                UiState.Loading -> setLoadingState(true)
                 UiState.Success -> {
-                    binding.indeterminateBar.isVisible = false
-                    val stampResId = requireContext().getStampResId(
-                        viewModel.stampId.value,
-                        RES_NAME,
-                        RES_STAMP_TYPE,
-                        requireContext().packageName
-                    )
+                    setLoadingState(false)
+                    val stampResId = getStampResourceId()
                     viewModel.setProfileImg(stampResId)
-                    binding.ivMyPageEditFrame.isClickable = true
-                    binding.viewMyPageMainSettingFrame.isClickable = true
-                }
-
-                UiState.Failure -> {
-                    binding.indeterminateBar.isVisible = false
-                    Timber.tag(ContentValues.TAG).d("Failure : ${viewModel.errorMessage.value}")
                 }
+                UiState.Failure -> setLoadingState(false)
             }
         }
     }
@@ -182,6 +120,30 @@ class MyPageFragment : BindingFragment<FragmentMyPageBinding>(R.layout.fragment_
         KakaoCustomTabsClient.openWithDefault(requireActivity(), url)
     }
 
+    private fun getStampResourceId(): Int {
+        return requireContext().getStampResId(
+            stampId = viewModel.stampId.value,
+            resNameParam = RES_NAME,
+            resType = RES_STAMP_TYPE,
+            packageName = requireContext().packageName
+        )
+    }
+
+    private fun setLoadingState(isLoading: Boolean) {
+        with(binding) {
+            indeterminateBar.isVisible = isLoading
+            ivMyPageEditFrame.isClickable = !isLoading
+            viewMyPageMainSettingFrame.isClickable = !isLoading
+        }
+    }
+
+    private inline fun <reified T : Activity> navigateTo() {
+        startActivity(Intent(requireContext(), T::class.java))
+        requireActivity().overridePendingTransition(
+            R.anim.slide_in_right, R.anim.slide_out_left
+        )
+    }
+
     companion object {
         const val RES_NAME = "mypage_img_stamp_"
         const val RES_STAMP_TYPE = "drawable"
diff --git a/app/src/main/java/com/runnect/runnect/presentation/storage/StorageMainFragment.kt b/app/src/main/java/com/runnect/runnect/presentation/storage/StorageMainFragment.kt
index b7576fb0a..c59b42284 100644
--- a/app/src/main/java/com/runnect/runnect/presentation/storage/StorageMainFragment.kt
+++ b/app/src/main/java/com/runnect/runnect/presentation/storage/StorageMainFragment.kt
@@ -1,68 +1,30 @@
 package com.runnect.runnect.presentation.storage
 
-import android.content.Intent
-import android.os.Bundle
-import android.view.View
-import androidx.core.view.isVisible
 import androidx.fragment.app.add
 import androidx.fragment.app.commit
 import androidx.fragment.app.replace
 import androidx.fragment.app.viewModels
 import com.google.android.material.tabs.TabLayout
 import com.runnect.runnect.R
-import com.runnect.runnect.binding.BindingFragment
+import com.runnect.runnect.binding.BaseVisitorFragment
 import com.runnect.runnect.databinding.FragmentStorageMainBinding
-import com.runnect.runnect.presentation.MainActivity
-import com.runnect.runnect.presentation.login.LoginActivity
 import com.runnect.runnect.util.analytics.Analytics
 import com.runnect.runnect.util.analytics.EventName.EVENT_CLICK_MY_DRAW_STORAGE_COURSE_DRAWING_START
 import com.runnect.runnect.util.analytics.EventName.EVENT_CLICK_SCRAP_COURSE
 import dagger.hilt.android.AndroidEntryPoint
-import timber.log.Timber
 
 @AndroidEntryPoint
 class StorageMainFragment :
-    BindingFragment<FragmentStorageMainBinding>(R.layout.fragment_storage_main) {
+    BaseVisitorFragment<FragmentStorageMainBinding>(R.layout.fragment_storage_main) {
     val viewModel: StorageViewModel by viewModels()
-    var isVisitorMode: Boolean = MainActivity.isVisitorMode
+    
+    override val visitorContainer by lazy { binding.clVisitorMode }
+    override val contentViews by lazy { listOf(binding.storageTab, binding.tabUnderLine) }
 
-    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        super.onViewCreated(view, savedInstanceState)
-        if (isVisitorMode) {
-            activateVisitorMode()
-        } else {
-            deactivateVisitorMode()
-        }
-    }
-
-    private fun activateVisitorMode() {
-        with(binding) {
-            ivVisitorMode.isVisible = true
-            tvVisitorMode.isVisible = true
-            btnVisitorMode.isVisible = true
-            storageTab.isVisible = false
-            tabUnderLine.isVisible = false
-
-            btnVisitorMode.setOnClickListener {
-                val intent = Intent(requireContext(), LoginActivity::class.java)
-                startActivity(intent)
-                requireActivity().finish()
-            }
-        }
-    }
-
-    private fun deactivateVisitorMode() {
-        with(binding) {
-            ivVisitorMode.isVisible = false
-            tvVisitorMode.isVisible = false
-            btnVisitorMode.isVisible = false
-            storageTab.isVisible = true
-            tabUnderLine.isVisible = true
-
-            binding.lifecycleOwner = requireActivity()
-            initView()
-            tabLayoutAction()
-        }
+    override fun onContentModeInit() {
+        binding.lifecycleOwner = requireActivity()
+        initView()
+        tabLayoutAction()
     }
 
     private fun initView() {
@@ -81,16 +43,16 @@ class StorageMainFragment :
                                 EVENT_CLICK_MY_DRAW_STORAGE_COURSE_DRAWING_START
                             )
                             replace<StorageMyDrawFragment>(R.id.fl_main)
-                            Timber.tag("hu").d("내가 그린 코스로 이동하였음")
                         }
 
                         1 -> childFragmentManager.commit {
                             Analytics.logClickedItemEvent(EVENT_CLICK_SCRAP_COURSE)
                             replace<StorageScrapFragment>(R.id.fl_main)
-                            Timber.tag("hu").d("스크랩으로 이동하였음")
                         }
 
-                        else -> IllegalArgumentException("${this::class.java.simpleName} Not found menu item id")
+                        else -> childFragmentManager.commit {
+                            replace<StorageMyDrawFragment>(R.id.fl_main)
+                        }
                     }
                 }
 
diff --git a/app/src/main/res/layout/fragment_my_page.xml b/app/src/main/res/layout/fragment_my_page.xml
index 471724cff..1f3da6ec4 100644
--- a/app/src/main/res/layout/fragment_my_page.xml
+++ b/app/src/main/res/layout/fragment_my_page.xml
@@ -14,49 +14,59 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
-        <ImageView
-            android:id="@+id/iv_visitor_mode"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="13dp"
-            android:background="@drawable/finish_run"
-            android:visibility="invisible"
-            app:layout_constraintBottom_toTopOf="@id/tv_visitor_mode"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent" />
-
-        <TextView
-            android:id="@+id/tv_visitor_mode"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="22dp"
-            android:fontFamily="@font/pretendard_medium"
-            android:gravity="center"
-            android:lineSpacingExtra="5sp"
-            android:text="러넥트에 가입하고 나의 러닝 기록과\n스탬프를 확인해 보세요!"
-            android:textAlignment="center"
-            android:textColor="@color/G2"
-            android:textSize="13sp"
-            android:visibility="invisible"
-            app:layout_constraintBottom_toTopOf="@id/btn_visitor_mode"
-            app:layout_constraintEnd_toEndOf="@id/iv_visitor_mode"
-            app:layout_constraintStart_toStartOf="@id/iv_visitor_mode" />
-
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/btn_visitor_mode"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_visitor_mode"
             android:layout_width="match_parent"
-            android:layout_height="40dp"
-            android:layout_marginHorizontal="73dp"
-            android:layout_marginBottom="283dp"
-            android:background="@drawable/radius_10_m1_button"
-            android:fontFamily="@font/pretendard_semibold"
-            android:text="가입하기"
-            android:textColor="@color/W1"
-            android:textSize="15sp"
+            android:layout_height="0dp"
             android:visibility="invisible"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent" />
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageView
+                android:id="@+id/iv_visitor_mode"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="13dp"
+                android:background="@drawable/finish_run"
+                app:layout_constraintBottom_toTopOf="@id/tv_visitor_mode"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_chainStyle="packed" />
+
+            <TextView
+                android:id="@+id/tv_visitor_mode"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="22dp"
+                android:fontFamily="@font/pretendard_medium"
+                android:gravity="center"
+                android:lineSpacingExtra="5sp"
+                android:text="@string/visitor_mode_mypage_message"
+                android:textAlignment="center"
+                android:textColor="@color/G2"
+                android:textSize="13sp"
+                app:layout_constraintBottom_toTopOf="@id/btn_visitor_mode"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/iv_visitor_mode" />
+
+            <androidx.appcompat.widget.AppCompatButton
+                android:id="@+id/btn_visitor_mode"
+                android:layout_width="0dp"
+                android:layout_height="40dp"
+                android:layout_marginHorizontal="73dp"
+                android:background="@drawable/radius_10_m1_button"
+                android:fontFamily="@font/pretendard_semibold"
+                android:text="@string/visitor_mode_signup_btn"
+                android:textColor="@color/W1"
+                android:textSize="15sp"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_visitor_mode" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/constraint_outside"
diff --git a/app/src/main/res/layout/fragment_storage_main.xml b/app/src/main/res/layout/fragment_storage_main.xml
index b6e5a4018..7d67004b2 100644
--- a/app/src/main/res/layout/fragment_storage_main.xml
+++ b/app/src/main/res/layout/fragment_storage_main.xml
@@ -67,49 +67,59 @@
                 android:text="@string/storage_main_tab_scrap" />
         </com.google.android.material.tabs.TabLayout>
 
-        <ImageView
-            android:id="@+id/iv_visitor_mode"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="13dp"
-            android:background="@drawable/finish_run"
-            android:visibility="invisible"
-            app:layout_constraintBottom_toTopOf="@id/tv_visitor_mode"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent" />
-
-        <TextView
-            android:id="@+id/tv_visitor_mode"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="22dp"
-            android:fontFamily="@font/pretendard_medium"
-            android:gravity="center"
-            android:lineSpacingExtra="5sp"
-            android:text="러넥트에 가입하면 내가 그린 코스와\n스크랩 코스를 관리할 수 있어요!"
-            android:textAlignment="center"
-            android:textColor="@color/G2"
-            android:textSize="13sp"
-            android:visibility="invisible"
-            app:layout_constraintBottom_toTopOf="@id/btn_visitor_mode"
-            app:layout_constraintEnd_toEndOf="@id/iv_visitor_mode"
-            app:layout_constraintStart_toStartOf="@id/iv_visitor_mode" />
-
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/btn_visitor_mode"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_visitor_mode"
             android:layout_width="match_parent"
-            android:layout_height="40dp"
-            android:layout_marginHorizontal="73dp"
-            android:layout_marginBottom="283dp"
-            android:background="@drawable/radius_10_m1_button"
-            android:fontFamily="@font/pretendard_semibold"
-            android:text="가입하기"
-            android:textColor="@color/W1"
-            android:textSize="15sp"
+            android:layout_height="0dp"
             android:visibility="invisible"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent" />
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageView
+                android:id="@+id/iv_visitor_mode"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="13dp"
+                android:background="@drawable/finish_run"
+                app:layout_constraintBottom_toTopOf="@id/tv_visitor_mode"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintVertical_chainStyle="packed" />
+
+            <TextView
+                android:id="@+id/tv_visitor_mode"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="22dp"
+                android:fontFamily="@font/pretendard_medium"
+                android:gravity="center"
+                android:lineSpacingExtra="5sp"
+                android:text="@string/visitor_mode_storage_message"
+                android:textAlignment="center"
+                android:textColor="@color/G2"
+                android:textSize="13sp"
+                app:layout_constraintBottom_toTopOf="@id/btn_visitor_mode"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/iv_visitor_mode" />
+
+            <androidx.appcompat.widget.AppCompatButton
+                android:id="@+id/btn_visitor_mode"
+                android:layout_width="0dp"
+                android:layout_height="40dp"
+                android:layout_marginHorizontal="73dp"
+                android:background="@drawable/radius_10_m1_button"
+                android:fontFamily="@font/pretendard_semibold"
+                android:text="@string/visitor_mode_signup_btn"
+                android:textColor="@color/W1"
+                android:textSize="15sp"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_visitor_mode" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
         <View
             android:id="@+id/tab_under_line"
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 217b03ca0..645346fe4 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -6,6 +6,11 @@
     <string name="update_dialog_message">더 좋아진 Runnect 앱을 사용하시기 위해서는 최신 버전으로 업데이트가 필요합니다.</string>
     <string name="update_dialog_btn_text">업데이트</string>
     <string name="default_version">0.0.0</string>
+    
+    <!-- Visitor Mode -->
+    <string name="visitor_mode_mypage_message">러넥트에 가입하고 나의 러닝 기록과\n스탬프를 확인해 보세요!</string>
+    <string name="visitor_mode_storage_message">러넥트에 가입하면 내가 그린 코스와\n스크랩 코스를 관리할 수 있어요!</string>
+    <string name="visitor_mode_signup_btn">가입하기</string>
 
     <string name="discover_title">코스 발견</string>
     <string name="discover_recommend_title">코스 추천</string>