diff --git a/frontend/package.json b/frontend/package.json
index a1987ac..059ea7e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,7 @@
 {
   "name": "frontend",
   "version": "0.1.0",
+  "proxy": "https://api.doit-toeic.xyz",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
diff --git a/frontend/src/apis/BaseUrl.ts b/frontend/src/apis/BaseUrl.ts
new file mode 100644
index 0000000..b3edd4b
--- /dev/null
+++ b/frontend/src/apis/BaseUrl.ts
@@ -0,0 +1,3 @@
+import axios from 'axios';
+
+export default axios.create({ baseURL: 'https://api.doit-toeic.xyz' });
diff --git a/frontend/src/apis/FetchRegister.ts b/frontend/src/apis/FetchRegister.ts
new file mode 100644
index 0000000..977789f
--- /dev/null
+++ b/frontend/src/apis/FetchRegister.ts
@@ -0,0 +1,19 @@
+import { RegisterData } from '../types/RegisterData';
+import url from './BaseUrl';
+
+export const FetchRegister = async (register: RegisterData) => {
+  const data = { email: register.email, password: register.password };
+
+  const headers = {
+    'Content-Type': 'application/json',
+  };
+
+  try {
+    const res = await url.post('/auth/register', data, { headers });
+    res && alert('회원가입이 완료되었습니다.');
+    return res.data;
+  } catch (error) {
+    alert('회원가입이 실패하였습니다.');
+    throw new Error();
+  }
+};
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
deleted file mode 100644
index 208f533..0000000
--- a/frontend/src/components/Header.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import Logo from './common/Logo';
-import Mascort from './common/Mascort';
-import { HeaderCSS } from '../style/components/common/HeaderCSS';
-
-function Header() {
-  return (
-    <HeaderCSS>
-      <Logo />
-      <Mascort />
-    </HeaderCSS>
-  );
-}
-
-export default Header;
diff --git a/frontend/src/components/LoginForm.tsx b/frontend/src/components/LoginForm.tsx
deleted file mode 100644
index 7517a81..0000000
--- a/frontend/src/components/LoginForm.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { FormData } from '../types/FormData';
-import SubmitBtn from './common/SubmitBtn';
-import { LoginFormCSS } from '../style/components/login/LoginFormCSS';
-
-function LoginForm() {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormData>();
-
-  const onSubmit: SubmitHandler<FormData> = (data) => {
-    console.log(data);
-  };
-
-  return (
-    <>
-      <LoginFormCSS onSubmit={handleSubmit(onSubmit)}>
-        <fieldset>
-          <label>ID</label>
-          <input
-            id="id"
-            spellCheck={false}
-            {...register('id', { required: true })}
-          />
-        </fieldset>
-
-        <fieldset>
-          <label>PW</label>
-          <input
-            id="password"
-            spellCheck={false}
-            {...register('password', { required: true })}
-          />
-        </fieldset>
-
-        <SubmitBtn children={'로그인'} />
-      </LoginFormCSS>
-      {errors.id && <span>아이디를 작성해주세요!</span>}
-      {errors.password && <span>비밀번호를 작성해주세요!</span>}
-    </>
-  );
-}
-
-export default LoginForm;
diff --git a/frontend/src/components/common/SubmitBtn.tsx b/frontend/src/components/common/SubmitBtn.tsx
index 2502a3a..d9d27cb 100644
--- a/frontend/src/components/common/SubmitBtn.tsx
+++ b/frontend/src/components/common/SubmitBtn.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { SubmitBtnCSS } from '../../style/components/common/SubmitBtnCSS';
 import { SubmitBtnProps } from '../../types/SubmitBtnProps';
 
-function SubmitBtn({ children, bgColor, color }: SubmitBtnProps) {
-  return <SubmitBtnCSS children={children} bgColor={bgColor} color={color} />;
+function SubmitBtn({ children, bgcolor, color }: SubmitBtnProps) {
+  return <SubmitBtnCSS children={children} bgcolor={bgcolor} color={color} />;
 }
 
 export default SubmitBtn;
diff --git a/frontend/src/components/register/DoubleCheck.tsx b/frontend/src/components/register/DoubleCheck.tsx
deleted file mode 100644
index 40e5d3b..0000000
--- a/frontend/src/components/register/DoubleCheck.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { ReactNode } from 'react';
-import { DoubleCheckCSS } from '../../style/components/register/DoubleCheckCSS';
-
-type DoubleCheckProps = {
-  children: ReactNode;
-};
-
-function DoubleCheck({ children }: DoubleCheckProps) {
-  return <DoubleCheckCSS children={children} />;
-}
-
-export default React.memo(DoubleCheck);
diff --git a/frontend/src/components/register/RegisterForm.tsx b/frontend/src/components/register/RegisterForm.tsx
index 01b0b03..d6b84e7 100644
--- a/frontend/src/components/register/RegisterForm.tsx
+++ b/frontend/src/components/register/RegisterForm.tsx
@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
 import { RegisterFormCSS } from '../../style/components/register/RegisterFormCSS';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { RegisterData } from '../../types/RegisterData';
-import DoubleCheck from './DoubleCheck';
 import Agreement from './Agreement';
 import SubmitBtn from '../common/SubmitBtn';
+import { FetchRegister } from '../../apis/FetchRegister';
+import { useNavigate } from 'react-router-dom';
 
 function RegisterForm() {
   const {
@@ -12,46 +12,43 @@ function RegisterForm() {
     handleSubmit,
     watch,
     formState: { errors },
-    setError,
-    clearErrors,
   } = useForm<RegisterData>();
+  const navigate = useNavigate();
 
-  const onsubmit: SubmitHandler<RegisterData> = (data) => console.log(data);
+  const onsubmit: SubmitHandler<RegisterData> = async (Register) => {
+    await FetchRegister(Register);
+    navigate('/login');
+  };
 
-  useEffect(() => {
-    if (
-      watch('password') !== watch('password_confirm') &&
-      watch('password_confirm')
-    ) {
-      setError('password_confirm', {
-        type: 'password-mismatch',
-        message: '비밀번호가 일치하지 않습니다.',
-      });
-    } else {
-      clearErrors('password_confirm');
-    }
-  }, [watch('password'), watch('password_confirm')]);
+  const passwordRef = watch('password');
 
   return (
     <>
       <RegisterFormCSS onSubmit={handleSubmit(onsubmit)}>
         <fieldset>
           <input
-            placeholder="아이디"
-            {...register('username', { required: true })}
+            placeholder="이메일"
+            {...register('email', {
+              required: true,
+              pattern: {
+                value:
+                  /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,}$/ as RegExp,
+                message: '유효하지 않은 이메일입니다.',
+              },
+            })}
           />
-          <DoubleCheck children={'중복'} />
         </fieldset>
-        {errors.username && <span>잘못된 아이디입니다</span>}
+        {errors.email && <span>유효하지 않은 이메일입니다.</span>}
 
         <fieldset>
           <input
-            placeholder="비밀번호(영문, 숫자, 특수문자 포함 8 ~ 20자)"
+            placeholder="비밀번호(영문, 영문 대문자, 숫자, 특수문자 포함 8 ~ 20자)"
             type="password"
             {...register('password', {
-              required: true,
+              required: '비밀번호를 작성해주세요.',
               pattern: {
-                value: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,20}$/,
+                value:
+                  /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,20}$/,
                 message: '유효하지 않은 비밀번호 입니다.',
               },
             })}
@@ -64,34 +61,17 @@ function RegisterForm() {
             placeholder="비밀번호 확인"
             type="password"
             {...register('password_confirm', {
-              required: true,
+              required: '비밀번호를 확인해주세요.',
+              validate: (value) =>
+                value === passwordRef || '비밀번호가 일치하지 않습니다.',
             })}
           />
         </fieldset>
-        {(errors.password_confirm?.message && (
+        {errors.password_confirm && (
           <span>{errors.password_confirm.message}</span>
-        )) ||
-          (watch('password') !== watch('password_confirm') &&
-            watch('password_confirm') && (
-              <span>{errors.password_confirm?.message}</span>
-            ))}
-
-        <fieldset>
-          <input
-            placeholder="이메일"
-            {...register('email', { required: true })}
-          />
-          <DoubleCheck children={'인증'} />
-        </fieldset>
-        {errors.email && <span>유효하지 않은 이메일입니다.</span>}
-
-        <fieldset>
-          <input placeholder="인증번호" />
-          <DoubleCheck children={'확인'} />
-        </fieldset>
+        )}
 
         <Agreement />
-
         <fieldset className="radio-filed">
           <label>
             <input
@@ -103,13 +83,13 @@ function RegisterForm() {
           </label>
 
           <label>
-            <input type="radio" name="agree" checked={true} value="false" />
+            <input type="radio" name="agree" defaultChecked value="false" />
             비동의
           </label>
         </fieldset>
         {errors.agree && <span>개인정보 동의서를 읽고 동의해주세요</span>}
 
-        <SubmitBtn children={'회원가입'} bgColor="#7AC3CE" color="#fff" />
+        <SubmitBtn children={'회원가입'} bgcolor="#7AC3CE" color="#fff" />
       </RegisterFormCSS>
     </>
   );
diff --git a/frontend/src/style/components/common/SubmitBtnCSS.ts b/frontend/src/style/components/common/SubmitBtnCSS.ts
index 2f5fe34..e4ecfdb 100644
--- a/frontend/src/style/components/common/SubmitBtnCSS.ts
+++ b/frontend/src/style/components/common/SubmitBtnCSS.ts
@@ -3,14 +3,14 @@ import { SubmitBtnProps } from '../../../types/SubmitBtnProps';
 import { media } from '../../mediaQuery';
 
 export const SubmitBtnCSS = styled.button<SubmitBtnProps>`
-  background: ${(props) => props.bgColor || '#fff'};
+  background: ${(props) => props.bgcolor || '#fff'};
   color: ${(props) => props.color || '#7AC3CE'};
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.35);
   margin-top: 10px;
 
   &:hover {
     background-color: ${(props) => props.color || '#7AC3CE'};
-    color: ${(props) => props.bgColor || '#fff'};
+    color: ${(props) => props.bgcolor || '#fff'};
   }
 
   ${media.smallMobile`
diff --git a/frontend/src/types/FormData.ts b/frontend/src/types/FormData.ts
deleted file mode 100644
index b306fef..0000000
--- a/frontend/src/types/FormData.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type FormData = {
-  id: string;
-  password: string;
-};
diff --git a/frontend/src/types/RegisterData.ts b/frontend/src/types/RegisterData.ts
index a399c93..3ff29c0 100644
--- a/frontend/src/types/RegisterData.ts
+++ b/frontend/src/types/RegisterData.ts
@@ -1,5 +1,4 @@
 export type RegisterData = {
-  username: string;
   password: string;
   password_confirm: string;
   email: string;
diff --git a/frontend/src/types/SubmitBtnProps.ts b/frontend/src/types/SubmitBtnProps.ts
index ce8a714..ebb59f9 100644
--- a/frontend/src/types/SubmitBtnProps.ts
+++ b/frontend/src/types/SubmitBtnProps.ts
@@ -2,6 +2,6 @@ import { ReactNode } from 'react';
 
 export type SubmitBtnProps = {
   children: ReactNode;
-  bgColor?: string;
+  bgcolor?: string;
   color?: string;
 };