Merge pull request #199 from Yanabada/feature/#196

Feat: 휴대폰 번호 인증 구현중

package.json

@@ -26,7 +26,8 @@
     "@types/qs": "^6.9.11",
     "axios": "^1.6.2",
     "date-fns": "^3.0.6",
-    "firebase": "^10.7.1",
+    "firebase": "^10.7.2",
+    "firebase-functions": "^4.6.0",
     "framer-motion": "^10.16.16",
     "js-cookie": "^3.0.5",
     "popmotion": "^11.0.5",

src/components/certification/index.tsx

@@ -10,6 +10,21 @@ import BottomSheet from "@components/bottomSheet";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import SignInDataStore from "@pages/signIn/stores/SignInDataStore";
 import { signInApi } from "@pages/signIn/apis/signInApi";
+import firebase from "firebase/compat/app";
+import "firebase/compat/functions";
+// import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_APP_API_KEY,
+  authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_APP_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_APP_APP_ID,
+  measurementId: import.meta.env.VITE_APP_MEASUREMENT_ID
+};
+
+firebase.initializeApp(firebaseConfig);
 
 interface CertificationProps {
   width?: string;
@@ -140,6 +155,34 @@ const Certification = ({
     mutationFn && mutationFn(phoneNumber);
   };
 
+  const [phoneNumberState, setPhoneNumberState] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+
+  const sendVerificationCode = async () => {
+    const sendVerificationCodeFunction = firebase.functions().httpsCallable("sendVerificationCode");
+    try {
+      const response = await sendVerificationCodeFunction({ phoneNumberState });
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const checkVerificationCode = async () => {
+    const checkVerificationCodeFunction = firebase
+      .functions()
+      .httpsCallable("checkVerificationCode");
+    try {
+      const response = await checkVerificationCodeFunction({
+        phoneNumberState,
+        code: verificationCode
+      });
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   useEffect(() => {
     const performSignIn = async () => {
       if (isSignInFlow && email && password && nickName && phoneNumberSignin) {
@@ -163,6 +206,23 @@ const Certification = ({
   return (
     <>
       <UpperNavBar title={upperNavBarText} type="back" />
+      <div>
+        <input
+          type="text"
+          placeholder="Phone Number"
+          value={phoneNumberState}
+          onChange={(e) => setPhoneNumberState(e.target.value)}
+        />
+        <button onClick={sendVerificationCode}>Send Verification Code</button>
+
+        <input
+          type="text"
+          placeholder="Verification Code"
+          value={verificationCode}
+          onChange={(e) => setVerificationCode(e.target.value)}
+        />
+        <button onClick={checkVerificationCode}>Check Verification Code</button>
+      </div>
       <S.CertificationContainer>
         <S.CertificationWrapper width={width} gap="16px">
           <TextInput

src/functions/index.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+const functions = require("firebase-functions");
+const admin = require("firebase-admin");
+const twilio = require("twilio");
+
+admin.initializeApp();
+
+const accountSid = "AC4fcb1e4f01c88548697a10bdd94af92f";
+const authToken = import.meta.env.VITE_APP_TWILLIO_AUTH_TOKEN;
+const client = twilio(accountSid, authToken);
+
+exports.sendVerificationCode = functions.https.onCall(async (data, context) => {
+  const { phoneNumber } = data;
+
+  try {
+    const verification = await client.verify
+      .services("VA955ef896e56fa33814bd1b2efff0f37e")
+      .verifications.create({
+        to: phoneNumber,
+        channel: "sms"
+      });
+
+    return { success: true, verification };
+  } catch (error) {
+    console.error(error);
+    return { success: false, error: error.message };
+  }
+});
+
+exports.checkVerificationCode = functions.https.onCall(async (data, context) => {
+  const { phoneNumber, code } = data;
+
+  try {
+    const check = await client.verify
+      .services("your_verify_service_sid")
+      .verificationChecks.create({
+        to: phoneNumber,
+        code
+      });
+
+    return check.status === "approved" ? { success: true, check } : { success: false, check };
+  } catch (error) {
+    console.error(error);
+    return { success: false, error: error.message };
+  }
+});

tsconfig.json

@@ -37,7 +37,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": ["kakao.maps.d.ts", "node"]
+    "types": ["kakao.maps.d.ts", "node", "firebase-functions"]
   },
   "include": [
     "src",