Feat: 결제 기능 추가 및 테스트 보완사항 수정

[aquaman122]

💡 작업 내용

• 결제 기능 추가
• 중복확인 누를때 input 창 아래에 메세지 띄우기
• 은행 텍스트값은 한글로 변경
• 회원가입 완료 버튼 주황색
• 계좌번호 입력시 숫자 검증
• 필수값 모두 입력시 주황색 아니면 회색
• 회원가입 완료시 토스트 알림 수정
• 설정 버튼 임시 주석처리
• 닉네임 중복 부분 메세지 변경
• 프로필수정부분에 현재 디폴트이미지 가져오는걸로 수정
• 이미지 변경시 마우스 커서 변경
• 닉네임 중복이거나 닉네임 validation 조건 부합시 버튼 회색으로 바꾸기(클릭 불가능)
• 프로필 삭제버튼은 X로, 사진클릭하면 새로운이미지 업로드
• 프로필 삭제부분 API 확인

💡 자세한 설명

🛠️ 결제 기능 추가

export const postPayment = () => {
  const [payment, setPayment] = useState<TossPaymentsPayment | null>(null);
  const [amount, setAmount] = useState({
    currency: "KRW",
    value: 1,
  });

  useEffect(() => {
    const fetchPayment = async () => {
      try {
        const tossPayments = await loadTossPayments(clientKey);
        const payment = tossPayments.payment({ customerKey });
        setPayment(payment);
      } catch (error) {
        console.error("Error fetching payment:", error);
      }
    };

    fetchPayment();
  }, []);

  // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
  const requestPayment = async (auctionId: string, orderId: string) => {
    const { addressData } = usePostOrderId(auctionId);
    if (!payment) {
      console.error("Payment not initialized");
      return;
    }

    try {
      await payment.requestPayment({
        method: "CARD", // 카드 결제
        amount,
        orderId,
        orderName: addressData.productName,
        successUrl: window.location.origin + `/payment/success?auctionId=${auctionId}&orderId=${orderId}`,
        failUrl: window.location.origin + "/fail",
        customerEmail: "[email protected]",
        customerName: "김토스",
        customerMobilePhone: "010-1234-5678",
        card: {
          useEscrow: false,
          flowMode: "DEFAULT",
          useCardPoint: false,
          useAppCardOnly: false,
        },
      });
    } catch (error) {
      console.error("Error during payment request:", error);
    }
  };

  return { requestPayment, setAmount };
};

function generateRandomString() {
  return window.btoa(Math.random().toString()).slice(0, 20);
}

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #이슈번호

[CLOUDoort]

고생하셨습니다.