경북대 FE_이효은_4주차 과제 Step2

src/components/Order/CashReceipt.tsx

@@ -1,36 +1,38 @@
 import { Checkbox, Input, Select } from '@chakra-ui/react';
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 
-export const CashReceipt = () => {
-  const [checked, setChecked] = useState(false);
-  const [value, setValue] = useState('');
+export const CashReceipt = forwardRef<HTMLInputElement, { checked: boolean; setChecked: (checked: boolean) => void }>(
+  ({ checked, setChecked }, ref) => {
+    const [value, setValue] = useState('');
 
-  return (
-    <CashReceiptWrapper>
-      <Checkbox
-        checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
-        borderColor="#e6e6e6"
-        size="lg"
-        padding="10px 0px"
-        colorScheme="yellow"
-      >
-        <Label>현금영수증 신청</Label>
-      </Checkbox>
-      <Select borderColor="#e6e6e6">
-        <option value="option1">개인소득공제</option>
-        <option value="option2">사업자증빙용</option>
-      </Select>
-      <Input
-        placeholder="(-없이) 숫자만 입력해주세요."
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        borderColor="#e6e6e6"
-      />
-    </CashReceiptWrapper>
-  );
-};
+    return (
+      <CashReceiptWrapper>
+        <Checkbox
+          isChecked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+          borderColor="#e6e6e6"
+          size="lg"
+          padding="10px 0px"
+          colorScheme="yellow"
+        >
+          <Label>현금영수증 신청</Label>
+        </Checkbox>
+        <Select borderColor="#e6e6e6">
+          <option value="option1">개인소득공제</option>
+          <option value="option2">사업자증빙용</option>
+        </Select>
+        <Input
+          placeholder="(-없이) 숫자만 입력해주세요."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          borderColor="#e6e6e6"
+          ref={ref}
+        />
+      </CashReceiptWrapper>
+    );
+  },
+);
 const CashReceiptWrapper = styled.div`
   display: flex;
   flex-direction: column;

src/components/Order/PaymentSection.tsx

@@ -1,31 +1,61 @@
 import { Divider } from '@chakra-ui/layout';
 import styled from '@emotion/styled';
+import { useRef, useState } from 'react';
 
 import { Button } from '../common/Button';
 import { HandleBox, Loading } from '../common/Handle';
 import { CashReceipt } from './CashReceipt';
 
 import { useProductDetail } from '@/services/useProductDetail';
 
-export const PaymentSection = ({ orderHistory }: { orderHistory: { id: number; count: number } }) => {
+export const PaymentSection = ({
+  orderHistory,
+  inputRef,
+}: {
+  orderHistory: { id: number; count: number };
+  inputRef: React.RefObject<HTMLInputElement>;
+}) => {
   const { isError, isPending, data, error } = useProductDetail(orderHistory.id.toString());
+  const [checked, setChecked] = useState(false);
+  const numberRef = useRef<HTMLInputElement>(null);
 
   if (isPending) {
     return <Loading />;
   }
   if (isError) {
     return <HandleBox>{error.message}</HandleBox>;
   }
-  const totalPrice = data.detail.price.basicPrice * orderHistory.count;
+
   const handleClick = () => {
-    window.alert('주문이 완료되었습니다.');
+    const number = numberRef.current?.value;
+    const input = inputRef.current?.value || '';
+
+    if (input.length > 100) {
+      alert('메시지는 100자 이내로 입력해주세요.');
+      return;
+    }
+    if (!input) {
+      alert('메시지를 입력해주세요.');
+      return;
+    }
+    if (checked && !number) {
+      alert('현금영수증 번호를 입력해주세요');
+      return;
+    }
+    if (isNaN(Number(number))) {
+      alert('현금영수증 번호는 숫자로만 입력해주세요.');
+      return;
+    }
+    alert('주문이 완료되었습니다.');
   };
 
+  const totalPrice = data.detail.price.basicPrice * orderHistory.count;
+
   return (
     <PaymentSectionWrapper>
       <Title>결제 정보</Title>
       <Divider color="#e6e6e6" />
-      <CashReceipt />
+      <CashReceipt ref={numberRef} checked={checked} setChecked={setChecked}/>
       <PaymentInfo>
         <Divider color="#e6e6e6" />
         <FinallyPrice>

src/pages/OrderPage.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useRef } from 'react';
 
 import { Container } from '@/components/common/Layout/Container';
 import { GiftMessageSection } from '@/components/Order/GiftMessageSection';
@@ -7,15 +8,18 @@ import { useOrderHistory } from '@/hooks/useOrderHistory';
 
 export default function OrderPage() {
   const { orderHistoryToken } = useOrderHistory();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <OrderPageWrapper>
       <Container maxWidth="1280px">
         <Inner>
           <Left>
-            <GiftMessageSection orderHistory={orderHistoryToken} />
+            <GiftMessageSection orderHistory={orderHistoryToken} inputRef={inputRef} />
           </Left>
           <Right>
-            <PaymentSection orderHistory={orderHistoryToken} />
+            <PaymentSection orderHistory={orderHistoryToken} inputRef={inputRef} />
           </Right>
         </Inner>
       </Container>