refactor: 하단버튼 fixed로 통일 및 구조 개선 (#8)

- btn-container globals.css에 추가
TEAM-CLIP · Aug 23, 2024 · e50fa5a · e50fa5a
1 parent 4d1d9a1
commit e50fa5a
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );