Merge pull request #14 from HSU-Deulbull/design/aneey-booking#8

[Design] 사전 예매 UI 완성

Author: a-neey

package-lock.json

@@ -14,12 +14,14 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.9.4",
+    "react-scroll": "^1.9.3",
     "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@types/react-scroll": "^1.8.10",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^9.18.0",

package.json

@@ -0,0 +1,9 @@
+export const LINKS = {
+  QUESTION_CHAT: 'https://www.kakaocorp.com/page/service/service/openchat',
+  KAKAO_PAY: 'https://qr.kakaopay.com/Fbqn2HMS089292',
+  NAVER_PAY: 'https://smartstore.naver.com/example',
+};
+
+export const ACCOUNTS = {
+  DEFAULT: 'KB국민은행 93770201535579 이진현',
+};

src/assets/booking/check.svg

@@ -0,0 +1,52 @@
+import { useMemo, useState } from 'react';
+
+const UseBookingForm = () => {
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [member, setMember] = useState('');
+
+  const [checked, setChecked] = useState({
+    info: false,
+    price: false,
+    confirm: false,
+  });
+
+  // 위의 세 타입 중 하나만 받도록 설정
+  const toggleCheck = (key: keyof typeof checked) => {
+    setChecked((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const isNameValid = name.trim().length > 0;
+  const isPhoneValid = /^010-\d{3,4}-\d{4}$/.test(phone);
+  const isMemberValid = Number(member) > 0;
+  const isAllChecked = Object.values(checked).every(Boolean);
+
+  const isAllValid =
+    isNameValid && isPhoneValid && isMemberValid && isAllChecked;
+
+  const errorMsgs = useMemo(() => {
+    const msgs: string[] = [];
+    if (!isNameValid || !isPhoneValid || !isMemberValid)
+      msgs.push('*예매 정보 입력 항목을 다시 확인해 주세요.');
+    if (!checked.price)
+      msgs.push('*가격 안내 및 입금 항목을 다시 확인해 주세요.');
+    if (!checked.confirm)
+      msgs.push('*최종 확인 및 제출 항목을 다시 확인해 주세요.');
+    return msgs;
+  }, [isNameValid, isPhoneValid, isMemberValid, checked]);
+
+  return {
+    name,
+    phone,
+    member,
+    checked,
+    isAllValid,
+    errorMsgs,
+    setName,
+    setPhone,
+    setMember,
+    toggleCheck,
+  };
+};
+
+export default UseBookingForm;

src/assets/booking/checked.svg

@@ -0,0 +1,91 @@
+import * as S from './styles/BookingPage.style';
+
+import { Element } from 'react-scroll';
+
+import SectionHeader from './components/sectionHeader/SectionHeader';
+import UseBookingForm from '../../hooks/UseBookingForm';
+import InfoSection from './components/infoSection/InfoSection';
+import InputSection from './components/inputSection/InputSection';
+import PriceSection from './components/priceSection/PriceSection';
+import ConfirmSection from './components/confirmSection/ConfirmSection';
+import { useState } from 'react';
+import SubmitModal from './components/submitModal/SubmitModal';
+import { LINKS } from '../../datas/BookingLinks';
+
+const BookingPage = () => {
+  const form = UseBookingForm();
+  const { isAllValid, errorMsgs } = form;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [questionLink, setQuestionLink] = useState<string>(LINKS.QUESTION_CHAT);
+
+  const handleOpen = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  return (
+    <>
+      <S.BookingContainer id="bookingScroll">
+        {/* 상단 사전 예매 제목 */}
+        <SectionHeader
+          title="사전예매"
+          questionText="예매 관련 문의하기"
+          questionLink={questionLink}
+          subtitle="더 싼 가격으로 미리 하는 사전예매 ~ 12/12(마감일)"
+        />
+
+        {/* 공연 기본 정보 확인 */}
+        <InfoSection form={form} />
+        <S.Line />
+
+        <Element name="info">
+          {/* 예매 정보 입력 */}
+          <InputSection form={form} />
+        </Element>
+
+        <S.Line />
+
+        <Element name="price">
+          {/* 가격 안내 및 입금 */}
+          <PriceSection form={form} />
+        </Element>
+
+        <S.Line />
+
+        <Element name="confirm">
+          {/* 최종 확인 및 제출 */}
+          <ConfirmSection form={form} />
+        </Element>
+
+        <Element name="end">
+          {errorMsgs.length > 0 && (
+            <S.ErrorMsgWrapper>
+              {errorMsgs.map((msg, idx) => (
+                <S.ErrorMsg key={idx}>{msg}</S.ErrorMsg>
+              ))}
+            </S.ErrorMsgWrapper>
+          )}
+
+          <S.EndButton
+            $active={!!isAllValid}
+            onClick={() => {
+              if (isAllValid) handleOpen();
+            }}
+          >
+            <S.ButtonText>최종 제출</S.ButtonText>
+          </S.EndButton>
+        </Element>
+      </S.BookingContainer>
+
+      {isOpen && (
+        <SubmitModal
+          form={form}
+          onClose={handleOpen}
+          questionLink={questionLink}
+        />
+      )}
+    </>
+  );
+};
+
+export default BookingPage;