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

- btn-container globals.css에 추가
NeoSelf1 · Aug 23, 2024 · d1d15a3 · d1d15a3
1 parent 2d553bd
commit d1d15a3
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 306 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-1/2 transform -translate-x-1/2 flex justify-center bg-white p-4 max-w-md w-full;
+  }
   .btn-primary {
     @apply btn bg-gray-800 text-white hover:bg-gray-700;
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import './globals.css';
 import localFont from 'next/font/local';
-import Header from '@/components/Header';
+import ClipContainer from '@/components/ClipContainer';
 
 const pretendard = localFont({
   src: '../fonts/PretendardVariable.woff2',
@@ -22,11 +22,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className={`${pretendard.className} bg-gray-50`}>
-        <div className="max-w-md mx-auto bg-white min-h-screen flex flex-col">
-          <Header />
+      <body className={`${pretendard.className} bg-gray-100 overflow-x-hidden`}>
+        <ClipContainer>
           <main className="flex-grow overflow-y-auto">{children}</main>
-        </div>
+        </ClipContainer>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,7 +20,7 @@ const Home = () => {
       <div className="relative z-20 h-full flex flex-col justify-between">
         <div className="pl-[1.25rem]">
           <h1 className="body-2 mt-[6.94rem] mb-[0.64rem] text-white">
-            순간을 chik다,
+            순간을 Chik다,
             <br />
             칙스냅
           </h1>
@@ -39,8 +39,9 @@ const Home = () => {
               어려우셨다면 저희가 찾아드릴게요!
             </p>
           </div>
+
           <Link href="/select-type" className="btn-default body-3">
-            원하는 사진작가 찾아보기
+            다음으로
           </Link>
         </div>
       </div>

diff --git a/src/app/photographer/page.tsx b/src/app/photographer/page.tsx
@@ -5,7 +5,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { photographers_mu } from '@/data/database';
-import ArrowBack from '@/data/arrowLeft.svg';
 import Loading from '@/components/Loading';
 
 const RecommendedPhotographers = () => {
@@ -15,15 +14,11 @@ const RecommendedPhotographers = () => {
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
-    }, 2500); // 2.5초
+    }, 1500); // 2.5초
 
     return () => clearTimeout(timer);
   }, []);
 
-  const backFunction = () => {
-    router.back();
-  };
-
   const searchParams = useSearchParams();
   const type = searchParams.get('type');
   const moods = searchParams.get('moods');
@@ -40,27 +35,25 @@ const RecommendedPhotographers = () => {
   }
 
   return (
-    <div className="relative flex flex-col mx-[1rem] mt-[3.5rem]">
-      <div className="cursor-pointer" onClick={backFunction}>
-        <div className="flex w-[1.5rem] h-[1.5rem] my-[0.75rem]">
-          <Image src={ArrowBack} alt="Back" objectFit="cover" />
-        </div>
-      </div>
-      <h2 className="title-1 mt-[0.62rem] mb-[0.25rem]">
-        칙스냅에서 추천드리는 작가예요!
-      </h2>
-      <h3 className="body-3 text-gray-500 mb-[1.75rem]">
-        선택하신 분위기를 기반으로
-        <br />
-        칙스냅에서 추천드리는 작가님들이에요.
+    <div className="relative flex flex-col mx-4 mb-24">
+      <h2 className="title-1 mt-2">칙스냅에서 추천드리는 작가예요!</h2>
+
+      <h3 className="body-3 text-gray-500 mt-1 mb-6 text-balance">
+        아래 작가분들은 여러분의 선택을 기반으로 칙스냅에서 추천드리는
+        작가님이에요. 자세히 보기를 통해 작가님의 정보를 확인하고 그리던 사진을
+        촬영해요
       </h3>
-      <div className="flex flex-col gap-[0.62rem] mb-[5rem]">
+
+      <div className="flex flex-col gap-[0.62rem]">
         {selectedPhotographers.map((photographer) => (
           <div
             key={photographer.id}
             className="flex flex-col w-full bg-gray-50 hover:bg-gray-100 p-[0.75rem] rounded-[0.5rem] cursor-pointer"
           >
-            <a href={`https://www.instagram.com/${photographer.instagramId}/`}>
+            <Link
+              target={'_blank'}
+              href={`https://www.instagram.com/${photographer.instagramId}`}
+            >
               <div className="flex flex-col w-full justify-center">
                 <div className="flex w-full mb-[0.63rem]">
                   <div className="flex relative w-[2.25rem] h-[2.25rem] mr-[0.62rem] rounded-[0.25rem]">
@@ -73,15 +66,18 @@ const RecommendedPhotographers = () => {
                       className="rounded-lg transition-transform duration-300 ease-in-out hover:scale-110"
                     />
                   </div>
+
                   <div className="flex items-center gap-[0.5rem]">
                     <span className="body-1 text-gray-900">
                       {photographer.name}
                     </span>
+
                     <span className="caption text-gray-600">
                       {`@${photographer.instagramId}`}
                     </span>
                   </div>
                 </div>
+
                 <div className="flex items-center gap-[0.25rem] mb-[0.62rem]">
                   <div className="caption px-[0.5rem] py-[0.25rem] bg-gray-200 rounded-[0.25rem]">
                     {photographer.price}
@@ -109,20 +105,18 @@ const RecommendedPhotographers = () => {
                   </div>
                 ))}
               </div>
-            </a>
+            </Link>
           </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">
-          <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
@@ -1,67 +1,57 @@
 'use client';
 
 import { ChangeEvent, useState } from 'react';
-import Image from 'next/image';
-import ArrowBack from '@/data/arrowLeft.svg';
 import { useRouter } from 'next/navigation';
 import { submitForm } from '../api/apis';
+import PopupWindow from '@/components/PopupWindow';
+import { handlePhoneNumberChange } from '@/lib/utils';
+import { LoadingIndicator } from '@/lib/svgs';
 
 const RequestCustom = () => {
   const router = useRouter();
-  const backFunction = () => {
-    router.back();
-  };
 
   const [text, setText] = useState<string>('');
   const [phoneNumber, setPhoneNumber] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  const isOverLimit = text.length > 600;
+  const isTextEntered = text.length > 0;
+  const isPhoneNumberEntered = phoneNumber.trim().length > 12;
 
   const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setText(e.target.value);
   };
 
-  const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setPhoneNumber(e.target.value);
-  };
-
-  const isOverLimit = text.length > 600;
-  const isTextEntered = text.length > 0;
-  const isPhoneNumberEntered = phoneNumber.trim().length > 0;
-
   const handleSubmit = async () => {
-    console.log(phoneNumber);
-    console.log(text);
     if (!isPhoneNumberEntered) return;
-
     setLoading(true);
 
     try {
       await submitForm({ phone_number: phoneNumber, prefer_style: text });
-
-      alert('요청이 성공적으로 전송되었습니다.');
-      router.push('/');
     } catch (error) {
       console.error('실패: ', error);
       alert('요청 전송에 실패했습니다. 다시 시도해주세요.');
     } finally {
+      setIsModalOpen(true);
       setLoading(false);
     }
   };
 
+  const onClose = () => {
+    setIsModalOpen(false);
+    router.push('/');
+  };
+
   return (
-    <div className="relative flex flex-col mx-[1rem] mt-[3.5rem]">
-      <div className="cursor-pointer" onClick={backFunction}>
-        <div className="flex w-[1.5rem] h-[1.5rem] my-[0.75rem]">
-          <Image src={ArrowBack} alt="Back" objectFit="cover" />
-        </div>
-      </div>
-      <h2 className="title-1 mt-[0.62rem] mb-[0.25rem]">
-        맞춤형 작가 요청하기
-      </h2>
-      <h3 className="body-3 text-gray-500 mb-[1.75rem]">
-        칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요. 약 1~3일
-        정도 소요될 수 있어요.
+    <div className="relative flex flex-col mx-4 mb-24">
+      <h2 className="title-1 mt-2">맞춤형 작가 요청해보세요.</h2>
+
+      <h3 className="body-3 text-gray-500 mt-1 mb-6 whitespace-pre-line">
+        {`칙스냅에서 회원님에게 최적화된 작가분들을 찾아 추천해드릴게요.
+        약 1~3일 정도 소요될 수 있어요!`}
       </h3>
+
       <div className="flex flex-col gap-[0.5rem]">
         <div className="flex justify-between">
           <h2 className="body-1">전화번호</h2>
@@ -72,7 +62,7 @@ const RequestCustom = () => {
             type="text"
             placeholder="XXX - XXXX - XXXX"
             value={phoneNumber}
-            onChange={handlePhoneNumberChange}
+            onChange={(e) => handlePhoneNumberChange(e, setPhoneNumber)}
             className="w-full h-[3.125rem] px-[0.875rem] bg-gray-50 rounded-lg body-1 placeholder-gray-300
             hover:bg-gray-100 focus:bg-gray-100 focus:border-gray-200 focus:ring-0 focus:outline-none
             border border-transparent transition-colors duration-200
@@ -84,7 +74,7 @@ const RequestCustom = () => {
         <h2 className="body-1">희망하는 작가님 스타일 (분위기, 종류 등)</h2>
         <div className="mb-[1.75rem]">
           <textarea
-            placeholder="예) 따뜻한 분위기의 숲속에서 찍는 스타일, "
+            placeholder="예) 따뜻한 색감, 필름카메라 느낌"
             className={`flex w-full min-h-[13rem] p-[0.875rem] rounded-lg body-3 placeholder-gray-300 resize-none  bg-gray-50
             ${
               isOverLimit
@@ -110,21 +100,30 @@ 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>
+
+      <PopupWindow
+        isOpen={isModalOpen}
+        onClose={onClose}
+        message={{
+          title: '작가 요청이 완료되었어요!',
+          body: `회원님만을 위한 맞춤형 작가를 찾아 연락드릴게요.
+조금만 기다려주세요.`,
+        }}
+      />
     </div>
   );
 };