From e50fa5a3939649a30a5a51da1926f1edc1abf302 Mon Sep 17 00:00:00 2001
From: Hyeongseok Kim <hyeongseok@coconutsilo.com>
Date: Fri, 23 Aug 2024 15:16:43 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=95=98=EB=8B=A8=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20fixed=EB=A1=9C=20=ED=86=B5=EC=9D=BC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0=20(#8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- btn-container globals.css에 추가
---
 src/app/globals.css                   |  3 ++
 src/app/photographer/page.tsx         | 16 +++++------
 src/app/request-custom/page.tsx       | 27 +++++++++---------
 src/app/request-notification/page.tsx | 40 +++++++++++++--------------
 src/app/select-mood/page.tsx          | 33 +++++++++++-----------
 src/app/select-type/page.tsx          | 33 +++++++++++-----------
 6 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 21de4fd..f5af60b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,6 +27,9 @@
   .btn {
     @apply h-[3rem] px-[1.5rem] py-[0.75rem] rounded-lg transition-colors duration-200 w-full text-center font-medium;
   }
+  .btn-container {
+    @apply fixed bottom-0 left-0 right-0 flex justify-center bg-white p-4;
+  }
   .btn-primary {
     @apply btn bg-gray-800 text-white hover:bg-gray-700;
   }
diff --git a/src/app/photographer/page.tsx b/src/app/photographer/page.tsx
index 6a9df51..e669a09 100644
--- a/src/app/photographer/page.tsx
+++ b/src/app/photographer/page.tsx
@@ -114,15 +114,13 @@ const RecommendedPhotographers = () => {
         ))}
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 flex justify-center py-4 cursor-pointer">
-        <div className="flex w-full max-w-md mx-4">
-          <Link
-            href={'/request-custom'}
-            className={'btn-default body-3 w-full lg:mx-4 md:mx-4 sm:mx-4'}
-          >
-            맞춤형 작가 요청하기
-          </Link>
-        </div>
+      <div className="btn-container">
+        <Link
+          href={'/request-custom'}
+          className={'btn-default body-3 w-full lg:mx-4 md:mx-4 sm:mx-4'}
+        >
+          마음에 드는 작가가 없으시다면?
+        </Link>
       </div>
     </div>
   );
diff --git a/src/app/request-custom/page.tsx b/src/app/request-custom/page.tsx
index 7b357f0..eeb67e4 100644
--- a/src/app/request-custom/page.tsx
+++ b/src/app/request-custom/page.tsx
@@ -110,20 +110,19 @@ const RequestCustom = () => {
           </div>
         </div>
       </div>
-      <div className="fixed bottom-0 left-0 right-0 flex justify-center py-4 cursor-pointer">
-        <div className="flex w-full max-w-md mx-4">
-          <button
-            onClick={handleSubmit}
-            disabled={!isPhoneNumberEntered || loading}
-            className={`body-3 w-full text-center py-3 rounded-lg transition-colors duration-200 lg:mx-4 md:mx-4 sm:mx-4 ${
-              isPhoneNumberEntered
-                ? 'btn-primary'
-                : 'btn-default pointer-events-none'
-            } ${loading ? 'opacity-50' : ''}`}
-          >
-            요청하기
-          </button>
-        </div>
+
+      <div className="btn-container">
+        <button
+          onClick={handleSubmit}
+          disabled={!isPhoneNumberEntered || !isTextEntered || loading}
+          className={
+            isPhoneNumberEntered && isTextEntered
+              ? 'btn-primary body-3 flex justify-center items-center'
+              : 'btn-default pointer-events-none body-3'
+          }
+        >
+          {loading ? <LoadingIndicator /> : '요청하기'}
+        </button>
       </div>
     </div>
   );
diff --git a/src/app/request-notification/page.tsx b/src/app/request-notification/page.tsx
index 21d9f3b..b9670c6 100644
--- a/src/app/request-notification/page.tsx
+++ b/src/app/request-notification/page.tsx
@@ -57,27 +57,27 @@ const RequestNotification = () => {
           />
         </div>
       </div>
-      <div className="flex space-x-2 absolute bottom-[1rem] w-full">
-        <a href={`https://www.instagram.com/chik_snap/`} className="w-1/2">
-          <button className="btn-default flex justify-center items-center w-full body-3 rounded-lg gap-[0.25rem]">
-            <div className="flex w-[1.5rem] h-[1.5rem]">
-              <Image src={Instagram} alt="Instagram" objectFit="cover" />
-            </div>
-            칙스냅에 문의하기
-          </button>
-        </a>
-        <Link href="/" className="flex-grow">
-          <button
-            className={`body-3 w-full py-3 rounded-lg transition-colors duration-200 ${
-              isPhoneNumberEntered
-                ? 'btn-primary body-3 text-white'
-                : 'btn-default body-3 cursor-not-allowed'
-            }`}
-            disabled={!isPhoneNumberEntered}
-          >
-            신청하기
-          </button>
+      <div className="btn-container space-x-2">
+        <Link
+          target="_blank"
+          href={`https://www.instagram.com/chik_snap/`}
+          className="btn-default flex justify-center space-x-1"
+        >
+          <Image src={Instagram} width={24} alt="Instagram" objectFit="cover" />
+          <h1 className="body-3">칙스냅에 문의하기</h1>
         </Link>
+
+        <button
+          className={
+            isPhoneNumberEntered
+              ? 'btn-primary body-3 text-white flex justify-center items-center'
+              : 'btn-default body-3 cursor-not-allowed'
+          }
+          disabled={!isPhoneNumberEntered}
+          onClick={handleSubmit}
+        >
+          {loading ? <LoadingIndicator /> : '신청하기'}
+        </button>
       </div>
     </div>
   );
diff --git a/src/app/select-mood/page.tsx b/src/app/select-mood/page.tsx
index af69c80..a71264e 100644
--- a/src/app/select-mood/page.tsx
+++ b/src/app/select-mood/page.tsx
@@ -67,24 +67,25 @@ const SelectMood = () => {
         />
       </div>
 
-      <div className="fixed bottom-0 left-0 right-0 flex justify-center py-4">
-        <div className="flex w-full max-w-md mx-4">
-          <Link
-            href={{
-              pathname: '/photographer',
-              query: { type, moods: selectedMoods.join(',') },
-            }}
-            aria-disabled={selectedMoods.length !== 3}
-            className={
-              selectedMoods.length === 3
-                ? 'btn-primary body-3 w-full lg:mx-4 md:mx-4 sm:mx-4'
-                : 'btn-default body-3 pointer-events-none w-full lg:mx-4 md:mx-4 sm:mx-4'
-            }
-          >
-            다음
-          </Link>
         </div>
       </div>
+
+      <div className="btn-container">
+        <Link
+          href={{
+            pathname: '/photographer',
+            query: { type, moods: selectedMoods.join(',') },
+          }}
+          aria-disabled={selectedMoods.length !== 3}
+          className={
+            selectedMoods.length === 3
+              ? 'btn-primary body-3 w-full'
+              : 'btn-default body-3 pointer-events-none w-full'
+          }
+        >
+          다음으로
+        </Link>
+      </div>
     </div>
   );
 };
diff --git a/src/app/select-type/page.tsx b/src/app/select-type/page.tsx
index 8758654..0fb3e39 100644
--- a/src/app/select-type/page.tsx
+++ b/src/app/select-type/page.tsx
@@ -89,23 +89,22 @@ const SelectType = () => {
           </div>
         ))}
       </div>
-      <div className="fixed bottom-0 left-0 right-0 flex justify-center py-4">
-        <div className="flex w-full max-w-md mx-4 ">
-          <Link
-            href={
-              selectedTypes.length > 0
-                ? `/select-mood?type=${selectedTypes.join(',')}`
-                : '#'
-            }
-            className={
-              selectedTypes.length > 0
-                ? 'btn-primary body-3 w-full lg:mx-4 md:mx-4 sm:mx-4'
-                : 'btn-default body-3 pointer-events-none w-full lg:mx-4 md:mx-4 sm:mx-4'
-            }
-          >
-            다음
-          </Link>
-        </div>
+
+      <div className="btn-container">
+        <Link
+          href={
+            selectedTypes.length > 0
+              ? `/select-mood?type=${selectedTypes.join(',')}`
+              : '#'
+          }
+          className={
+            selectedTypes.length > 0
+              ? 'btn-primary body-3'
+              : 'btn-default body-3 pointer-events-none'
+          }
+        >
+          다음으로
+        </Link>
       </div>
     </div>
   );