react-google-recaptcha를 다루기가 너무 어려워요.

안녕하세요. 이번 프로젝트에서 reCaptcha를 사용하여 로그인을 구현을 하고 있습니다 :) 그래서 react-google-recaptcha라는 라이브러리를 활용하고 있는데, 2가지 정도의 난관이 있더라구요. 내용은 아래와 같습니다. 1. ReCAPTCHA 컴포넌트의 width값을 반응형으로 조절하기가 어렵습니다. 인라인 스타일, 상위에 래핑하여 width를 먹여도 그대로이며, ReCAPTCHA 컴포넌트의 속성인 size를 활용해도 더 나아지는 부분이 보이질 않습니다. 2. google reCaptcha에서 sitekey와 secretkey를 받고 아래와 같이 코드를 작성하였습니다. 그런데도 계속 다음과 같은 모습만 보이네요.. 잘 작동하는 key인데 말이죠. 저도 열심히 경험을 많이 쌓아서 다른 분들의 고민을 해결해주는 그런 사람이 되고 싶네요. 감사합니다 :) + 아, 참고로 개발환경은 React + Typescript + Vite입니다. 해당 라이브러리 주소 : https://www.npmjs.com/package/react-google-recaptcha

1import * as S from "./styled";
2import ReCAPTCHA from "react-google-recaptcha";
3import Button from "@/components/common/Button";
4import Input from "@/components/common/Input";
5import ContactBox from "@/components/common/ContactBox";
6
7const Captcha = () => {
8  const sitekey = import.meta.env.VITE_RECAPTCHA_SITE_KEY;
9
10  console.log(sitekey);
11  const onChange = (value: any) => {
12    console.log("captcha test : ", value);
13  };
14
15  return (
16    <S.ReCaptchaContainer>
17      <ReCAPTCHA sitekey={sitekey} size="normal" onChange={onChange} />
18    </S.ReCaptchaContainer>
19  );
20};

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

이상원 Frontend Dev 님의 질문