diff --git a/backend/src/main/java/sw_css/auth/application/AuthEmailService.java b/backend/src/main/java/sw_css/auth/application/AuthEmailService.java
index 6f0d87b9..336daf02 100644
--- a/backend/src/main/java/sw_css/auth/application/AuthEmailService.java
+++ b/backend/src/main/java/sw_css/auth/application/AuthEmailService.java
@@ -8,6 +8,8 @@
 import sw_css.auth.application.dto.response.SendAuthCodeResponse;
 import sw_css.auth.domain.EmailAuthRedis;
 import sw_css.auth.domain.repository.EmailAuthRedisRepository;
+import sw_css.auth.exception.AuthException;
+import sw_css.auth.exception.AuthExceptionType;
 import sw_css.utils.MailUtil;
 
 @Service
@@ -20,8 +22,11 @@ public class AuthEmailService {
 
     private final MailUtil mailUtil;
     private final EmailAuthRedisRepository emailAuthRedisRepository;
+    private final AuthCheckDuplicateService authCheckDuplicateService;
 
     public SendAuthCodeResponse emailAuth(String email) {
+        checkIsDuplicateEmail(email);
+
         String authCode = generateRandomAuthCode();
         emailAuthRedisRepository.save(EmailAuthRedis.of(email, authCode));
         sendAuthCode(email, authCode);
@@ -52,4 +57,10 @@ private void sendAuthCode(String email, String authCode) {
         String text = "SW역량강화플랫폼 인증코드는 " + authCode + " 입니다.";
         mailUtil.sendMail(toUserList, subject, text);
     }
+
+    private void checkIsDuplicateEmail(String email) {
+        if (authCheckDuplicateService.isDuplicateEmail(email)) {
+            throw new AuthException(AuthExceptionType.MEMBER_EMAIL_DUPLICATE);
+        }
+    }
 }
diff --git a/backend/src/main/java/sw_css/auth/application/AuthSignInService.java b/backend/src/main/java/sw_css/auth/application/AuthSignInService.java
index 36ebb577..11c082e0 100644
--- a/backend/src/main/java/sw_css/auth/application/AuthSignInService.java
+++ b/backend/src/main/java/sw_css/auth/application/AuthSignInService.java
@@ -39,10 +39,11 @@ public SignInResponse signIn(String email, String rawPassword) {
         }
 
         String role = loadMemberRole(member);
-        
+        boolean isModerator = role.equals(Role.ROLE_ADMIN.toString());
+
         String accessToken = jwtTokenProvider.createToken(member.getId(), role);
 
-        return SignInResponse.of(member, role, accessToken);
+        return SignInResponse.of(member, role, isModerator, accessToken);
     }
 
     public void resetPassword(String email, String name) {
diff --git a/backend/src/main/java/sw_css/auth/application/AuthSignUpService.java b/backend/src/main/java/sw_css/auth/application/AuthSignUpService.java
index 5b2a74e9..45a4e57f 100644
--- a/backend/src/main/java/sw_css/auth/application/AuthSignUpService.java
+++ b/backend/src/main/java/sw_css/auth/application/AuthSignUpService.java
@@ -29,7 +29,6 @@ public class AuthSignUpService {
     public long signUp(SignUpRequest request) {
         checkIsDuplicateEmail(request.email());
         checkIsDuplicateStudentId(request.student_id());
-        checkIsDuplicatePhoneNumber(request.phone_number());
 
         String actualAuthCode = loadActualAuthCode(request.email());
         checkAuthCodeMatch(request.auth_code(), actualAuthCode);
diff --git a/backend/src/main/java/sw_css/auth/application/dto/response/SignInResponse.java b/backend/src/main/java/sw_css/auth/application/dto/response/SignInResponse.java
index 3c28892d..19519d72 100644
--- a/backend/src/main/java/sw_css/auth/application/dto/response/SignInResponse.java
+++ b/backend/src/main/java/sw_css/auth/application/dto/response/SignInResponse.java
@@ -7,10 +7,11 @@ public record SignInResponse(
         String name,
         String email,
         String role,
+        boolean is_moderator,
         String token
 ) {
 
-    public static SignInResponse of(Member member, String role, String token) {
-        return new SignInResponse(member.getId(), member.getName(), member.getEmail(), role, token);
+    public static SignInResponse of(Member member, String role, Boolean isModerator, String token) {
+        return new SignInResponse(member.getId(), member.getName(), member.getEmail(), role, isModerator, token);
     }
 }
diff --git a/backend/src/test/java/sw_css/restdocs/docs/SignInApiDocsTest.java b/backend/src/test/java/sw_css/restdocs/docs/SignInApiDocsTest.java
index 59065853..c4fc1f30 100644
--- a/backend/src/test/java/sw_css/restdocs/docs/SignInApiDocsTest.java
+++ b/backend/src/test/java/sw_css/restdocs/docs/SignInApiDocsTest.java
@@ -40,6 +40,7 @@ public void signIn() throws Exception {
                 fieldWithPath("email").type(JsonFieldType.STRING).description("부산대학교 이메일"),
                 fieldWithPath("name").type(JsonFieldType.STRING).description("실명"),
                 fieldWithPath("role").type(JsonFieldType.STRING).description("회원의 역할 (ADMIN, MEMBER)"),
+                fieldWithPath("is_moderator").type(JsonFieldType.BOOLEAN).description("관리자 인지 판별"),
                 fieldWithPath("token").type(JsonFieldType.STRING).description("회원의 토큰")
         );
 
@@ -51,7 +52,7 @@ public void signIn() throws Exception {
         final String token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZSI6IlJPTEVfTUVNQkVSIiwiaWF0IjoxNzI0MjIxMDI0LCJleHAiOjE3MjQyNTcwMjR9.i1zj-_jRjkdO89_5ixKVgZXWr1V8e0PMr-958YGQAQQ";
 
         final SignInRequest request = new SignInRequest(email, password);
-        final SignInResponse response = new SignInResponse(member_id, email, name, role, token);
+        final SignInResponse response = new SignInResponse(member_id, email, name, role, false, token);
 
         // when
         when(authSignInService.signIn(email, password)).thenReturn(response);
diff --git a/frontend/src/adminComponents/Header/components/UserName/index.tsx b/frontend/src/adminComponents/Header/components/UserName/index.tsx
index 6002b9e3..0897c0a1 100644
--- a/frontend/src/adminComponents/Header/components/UserName/index.tsx
+++ b/frontend/src/adminComponents/Header/components/UserName/index.tsx
@@ -8,7 +8,7 @@ const UserName = () => {
 
   return (
     <span style={{ font: FONT_STYLE.xs.normal, color: COLOR.comment, display: 'flex', alignItems: 'center' }}>
-      반갑습니다! <span style={{ color: COLOR.primary.main }}>{auth.username}</span>님
+      반갑습니다! <span style={{ color: COLOR.primary.main }}>{auth.name}</span>님
     </span>
   );
 };
diff --git a/frontend/src/adminComponents/Header/index.tsx b/frontend/src/adminComponents/Header/index.tsx
index a693aa0d..9b466a2e 100644
--- a/frontend/src/adminComponents/Header/index.tsx
+++ b/frontend/src/adminComponents/Header/index.tsx
@@ -12,7 +12,7 @@ const Header = () => (
     <HeaderLayout>
       <div style={{ display: 'flex' }}>
         <LogoLink href="/admin">
-          <Image src="/images/logo/SW_logo.svg" alt="SW_logo" width="120" height="40" priority={false} />
+          <Image src="" alt="SW_logo" width="120" height="40" priority={false} />
         </LogoLink>
         <Navigator />
       </div>
diff --git a/frontend/src/app/(auth)/sign-in/components/InputUserInfo/index.tsx b/frontend/src/app/(auth)/sign-in/components/InputUserInfo/index.tsx
index 9514efb6..ee785340 100644
--- a/frontend/src/app/(auth)/sign-in/components/InputUserInfo/index.tsx
+++ b/frontend/src/app/(auth)/sign-in/components/InputUserInfo/index.tsx
@@ -5,43 +5,75 @@ import { useRouter } from 'next/navigation';
 import { InputFixedText, Input, InputLabel, InputWrapper, SignButton } from '@/app/(auth)/styled';
 import { useAppDispatch, useAppSelector } from '@/lib/hooks/redux';
 import { signIn } from '@/store/auth.slice';
+import { useSignInMutation } from '@/lib/hooks/useApi';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 const InputUserInfo = () => {
+  const [userInfo, setUserInfo] = useState({
+    email: '',
+    password: '',
+  });
+
   const router = useRouter();
+
+  const { mutate: signInMutation } = useSignInMutation();
+
   const dispatch = useAppDispatch();
   const auth = useAppSelector((state) => state.auth).value;
 
   if (auth.isAuth) router.push('/');
 
-  const handleSignInClick = () => {
-    // TODO: api 연결
-    dispatch(
-      signIn({
-        token: 'token',
-        username: 'name',
-        uid: 202055558,
-        isModerator: true,
-      }),
-    );
-    setTimeout(() => {
-      router.refresh();
-    }, 0);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInfo((prev) => {
+      return {
+        ...prev,
+        [e.target.id]: e.target.value,
+      };
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    signInMutation(userInfo, {
+      onSuccess(data, variables, context) {
+        dispatch(
+          signIn({
+            id: data.member_id,
+            token: `Bearer ${data.token}`,
+            name: data.name,
+            email: data.email,
+            isModerator: data.is_moderator,
+          }),
+        );
+        router.push('/');
+      },
+      onError(error, variables, context) {
+        toast.error(error.message);
+      },
+    });
   };
 
   return (
     <>
-      <InputWrapper>
-        <InputLabel htmlFor="id">아이디(이메일)</InputLabel>
-        <Input id="id" placeholder="아이디 입력" />
-        <InputFixedText>@pusan.ac.kr</InputFixedText>
-      </InputWrapper>
-      <InputWrapper>
-        <InputLabel htmlFor="password">비밀번호</InputLabel>
-        <Input id="password" placeholder="비밀번호 입력" />
-      </InputWrapper>
-      <SignButton type="button" onClick={handleSignInClick}>
-        로그인
-      </SignButton>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+        <InputWrapper>
+          <InputLabel htmlFor="email">아이디(이메일)</InputLabel>
+          <Input id="email" placeholder="아이디 입력" value={userInfo.email} onChange={handleInputChange} />
+          <InputFixedText>@pusan.ac.kr</InputFixedText>
+        </InputWrapper>
+        <InputWrapper>
+          <InputLabel htmlFor="password">비밀번호</InputLabel>
+          <Input
+            type="password"
+            id="password"
+            placeholder="비밀번호 입력"
+            value={userInfo.password}
+            onChange={handleInputChange}
+          />
+        </InputWrapper>
+        <SignButton type="submit">로그인</SignButton>
+      </form>
     </>
   );
 };
diff --git a/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/components/EmailTextInput/index.tsx b/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/components/EmailTextInput/index.tsx
index c3087b50..e4ca465e 100644
--- a/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/components/EmailTextInput/index.tsx
+++ b/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/components/EmailTextInput/index.tsx
@@ -15,7 +15,7 @@ export const EmailTextInput = ({ ...props }: TextInputProps) => {
   const hasError = errorText !== undefined;
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex grow flex-col gap-1">
       <label htmlFor={inputProps.id || inputProps.name} className="text-sm font-semibold">
         {label} <span className="text-sm font-semibold text-red-400">*</span>{' '}
         <span className="text-xs text-comment">
diff --git a/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/index.tsx b/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/index.tsx
index 02c7141a..a53e39ec 100644
--- a/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/index.tsx
+++ b/frontend/src/app/(auth)/sign-up/components/SignUpFirstPage/index.tsx
@@ -8,9 +8,14 @@ import * as Yup from 'yup';
 import { TextInput } from '@/app/components/Formik/TextInput';
 
 import EmailTextInput from './components/EmailTextInput';
+import { useState } from 'react';
+import { useSendAuthCodeMutation } from '@/lib/hooks/useApi';
+import { toast } from 'react-toastify';
+import { getValidationStudentId } from '@/lib/api/server.api';
 
 export interface FirstInfo {
   email: string;
+  authCode: string;
   password: string;
   passwordConfirmation: string;
   name: string;
@@ -18,11 +23,24 @@ export interface FirstInfo {
   phoneNumber: string;
 }
 
+const validateStudentId = async (studentId: string) => {
+  if (!studentId.match(/^[\d]{9}$/)) return false;
+  try {
+    const isDuplicated = await getValidationStudentId(studentId);
+    return isDuplicated;
+  } catch (err) {
+    return false;
+  }
+};
+
 const validationSchema = Yup.object().shape({
   email: Yup.string()
     .required('필수 입력란입니다. 이메일을 입력해주세요.')
     .matches(/^((?!@).)*$/, '부산대 이메일만 가입 가능합니다. 이메일 도메인 부분을 삭제해주세요.')
     .matches(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*$/, '존재하는 이메일인지 확인해주세요.'),
+  authCode: Yup.string()
+    .required('필수 입력란입니다. 부산대 메일 인증코드를 입력해주세요.')
+    .matches(/^[A-Za-z0-9]{10}$/, '인증코드의 패턴이 일치하지 않습니다.'),
   password: Yup.string()
     .required('필수 입력란입니다. 비밀번호를 입력해주세요.')
     .matches(
@@ -35,7 +53,10 @@ const validationSchema = Yup.object().shape({
   name: Yup.string().required('필수 입력란입니다. 이름을 입력해주세요.'),
   studentId: Yup.string()
     .required('필수 입력란입니다. 학번을 입력해주세요.')
-    .matches(/^[\d]{9}$/, '9자리의 학번을 입력해주세요.'),
+    .matches(/^[\d]{9}$/, '9자리의 학번을 입력해주세요.')
+    .test('student_id', '중복된 학번이라서 사용할 수 없습니다.', (value) => {
+      return validateStudentId(value);
+    }),
   phoneNumber: Yup.string()
     .required('필수 입력란입니다. 전화번호를 입력해주세요.')
     .matches(/^([0-9]{10,11})$/, '띄어쓰기나 특수기호 없이 숫자로만 입력해주세요.'),
@@ -46,101 +67,144 @@ interface SignUpFirstPageProps {
   handleNextButtonClick: (value: FirstInfo) => void;
 }
 
-const SignUpSecondPage = ({ initialValues, handleNextButtonClick }: SignUpFirstPageProps) => (
-  <Formik
-    initialValues={initialValues}
-    validationSchema={validationSchema}
-    onSubmit={(values, { setSubmitting }) => {
-      handleNextButtonClick(values);
-      setSubmitting(false);
-    }}
-    className="w-full"
-  >
-    {({ isSubmitting, values, touched, handleChange, handleBlur, errors }) => (
-      <Form className="flex flex-col gap-6" autoComplete="off">
-        <EmailTextInput
-          name="email"
-          label="아이디(이메일)"
-          type="text"
-          placeholder="아이디 입력"
-          value={values.email}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={touched.email && errors.email ? errors.email : undefined}
-        />
-        <TextInput
-          name="password"
-          label="비밀번호"
-          type="password"
-          isRequired
-          placeholder="비밀번호 입력"
-          value={values.password}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={touched.password && errors.password ? errors.password : undefined}
-        />
-        <TextInput
-          name="passwordConfirmation"
-          label="비밀번호 검증"
-          type="password"
-          isRequired
-          placeholder="비밀번호 입력"
-          value={values.passwordConfirmation}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={
-            touched.passwordConfirmation && errors.passwordConfirmation ? errors.passwordConfirmation : undefined
-          }
-        />
-        <TextInput
-          name="name"
-          label="이름"
-          type="text"
-          isRequired
-          placeholder="예) 홍길동"
-          value={values.name}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={touched.name && errors.name ? errors.name : undefined}
-        />
-        <TextInput
-          name="studentId"
-          label="학번"
-          type="text"
-          isRequired
-          placeholder="예) 202012345"
-          value={values.studentId}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={touched.studentId && errors.studentId ? errors.studentId : undefined}
-        />
-        <TextInput
-          name="phoneNumber"
-          label="전화번호"
-          type="text"
-          isRequired
-          placeholder="예) 01012345678"
-          value={values.phoneNumber}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          errorText={touched.phoneNumber && errors.phoneNumber ? errors.phoneNumber : undefined}
-        />
-        <button
-          className="mt-2 rounded-sm bg-primary-main p-3 text-base text-white"
-          type="submit"
-          disabled={isSubmitting}
-        >
-          다음
-        </button>
-        <div className="text-center text-xs text-comment">
-          이미 회원이신가요?{' '}
-          <a href="/sign-in" className="font-semibold underline underline-offset-2">
-            뒤로가기
-          </a>
-        </div>
-      </Form>
-    )}
-  </Formik>
-);
+const SignUpSecondPage = ({ initialValues, handleNextButtonClick }: SignUpFirstPageProps) => {
+  const [isSendedMail, setIsSendedMail] = useState<boolean>(false);
+  const { mutate: sendAuthCodeMutation } = useSendAuthCodeMutation();
+
+  const handleMailAuthButtonClick = (email: string) => {
+    setIsSendedMail(true);
+
+    sendAuthCodeMutation(email + '@pusan.ac.kr', {
+      onSuccess(data, variables, context) {
+        toast.info('메일이 정상 발송되었습니다.');
+      },
+      onError(error, variables, context) {
+        toast.error(error.message);
+      },
+    });
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        handleNextButtonClick(values);
+        setSubmitting(false);
+      }}
+      className="w-full"
+    >
+      {({ isSubmitting, values, touched, handleChange, handleBlur, errors }) => (
+        <Form className="flex flex-col gap-6" autoComplete="off">
+          <div className="flex items-end gap-2">
+            <EmailTextInput
+              name="email"
+              label="아이디(이메일)"
+              type="text"
+              placeholder="아이디 입력"
+              value={values.email}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              errorText={touched.email && errors.email ? errors.email : undefined}
+            />
+            <div className="flex flex-col gap-1">
+              <button
+                type="button"
+                className="h-[44px] shrink-0 rounded-sm bg-primary-main px-2 text-base text-white"
+                onClick={() => handleMailAuthButtonClick(values.email)}
+              >
+                메일 인증
+              </button>
+              {touched.email && errors.email && <span className="h-[14px]" />}
+            </div>
+          </div>
+          {isSendedMail && (
+            <TextInput
+              name="authCode"
+              label="인증코드"
+              type="text"
+              isRequired
+              placeholder="메일 인증코드 입력"
+              value={values.authCode}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              errorText={touched.authCode && errors.authCode ? errors.authCode : undefined}
+            />
+          )}
+          <TextInput
+            name="password"
+            label="비밀번호"
+            type="password"
+            isRequired
+            placeholder="비밀번호 입력"
+            value={values.password}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            errorText={touched.password && errors.password ? errors.password : undefined}
+          />
+          <TextInput
+            name="passwordConfirmation"
+            label="비밀번호 검증"
+            type="password"
+            isRequired
+            placeholder="비밀번호 입력"
+            value={values.passwordConfirmation}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            errorText={
+              touched.passwordConfirmation && errors.passwordConfirmation ? errors.passwordConfirmation : undefined
+            }
+          />
+          <TextInput
+            name="name"
+            label="이름"
+            type="text"
+            isRequired
+            placeholder="예) 홍길동"
+            value={values.name}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            errorText={touched.name && errors.name ? errors.name : undefined}
+          />
+          <TextInput
+            name="studentId"
+            label="학번"
+            type="text"
+            isRequired
+            placeholder="예) 202012345"
+            value={values.studentId}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            errorText={touched.studentId && errors.studentId ? errors.studentId : undefined}
+          />
+          <TextInput
+            name="phoneNumber"
+            label="전화번호"
+            type="text"
+            isRequired
+            placeholder="예) 01012345678"
+            value={values.phoneNumber}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            errorText={touched.phoneNumber && errors.phoneNumber ? errors.phoneNumber : undefined}
+          />
+          <button
+            className="mt-2 rounded-sm bg-primary-main p-3 text-base text-white"
+            type="submit"
+            disabled={isSubmitting}
+          >
+            다음
+          </button>
+          <div className="text-center text-xs text-comment">
+            이미 회원이신가요?{' '}
+            <a href="/sign-in" className="font-semibold underline underline-offset-2">
+              뒤로가기
+            </a>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
 
 export default SignUpSecondPage;
diff --git a/frontend/src/app/(auth)/sign-up/page.tsx b/frontend/src/app/(auth)/sign-up/page.tsx
index 48e0a297..32ed0187 100644
--- a/frontend/src/app/(auth)/sign-up/page.tsx
+++ b/frontend/src/app/(auth)/sign-up/page.tsx
@@ -7,12 +7,16 @@ import { SignUpPhase } from '@/data/signUp';
 
 import SignUpFirstPage, { FirstInfo } from './components/SignUpFirstPage';
 import SignUpSecondPage, { SecondInfo } from './components/SignUpSecondPage';
+import { useSignUpMutation } from '@/lib/hooks/useApi';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
 
 type UserInformation = FirstInfo & SecondInfo;
 
 const Page = () => {
   const [userInfo, setUserInfo] = useState<UserInformation>({
     email: '',
+    authCode: '',
     password: '',
     passwordConfirmation: '',
     name: '',
@@ -28,6 +32,8 @@ const Page = () => {
     careerDetail: '',
   });
   const [phase, setPhase] = useState<SignUpPhase>(SignUpPhase.one);
+  const { mutate: signUpMutation } = useSignUpMutation();
+  const router = useRouter();
 
   const handleNextButtonClick = (value: FirstInfo) => {
     setUserInfo((prev) => ({ ...prev, ...value }));
@@ -42,14 +48,17 @@ const Page = () => {
   const handleSubmitButtonClick = (value: SecondInfo) => {
     setUserInfo((prev) => ({ ...prev, ...value }));
 
-    const tempUserInfo = { ...userInfo, ...value };
-    console.log(tempUserInfo);
-    // TODO: 회원가입 api 연결
-  };
+    const UserInfo = { ...userInfo, ...value };
 
-  useEffect(() => {
-    console.log(userInfo);
-  }, [userInfo]);
+    signUpMutation(UserInfo, {
+      onSuccess(data, variables, context) {
+        router.push('/sign-in');
+      },
+      onError(error, variables, context) {
+        toast.error(error.message);
+      },
+    });
+  };
 
   return (
     <div className="mx-auto w-sign max-w-full pb-10 pt-14 lg:pt-20">
diff --git a/frontend/src/app/(auth)/styled.ts b/frontend/src/app/(auth)/styled.ts
index 933ca9d4..01098781 100644
--- a/frontend/src/app/(auth)/styled.ts
+++ b/frontend/src/app/(auth)/styled.ts
@@ -62,6 +62,7 @@ export const SignButton = styled.button`
   border: none;
   border-radius: ${BORDER_RADIUS.sm};
   padding: 8px;
+  margin-top: 16px;
   background-color: ${COLOR.primary.main};
   color: ${COLOR.white};
   font: ${FONT_STYLE.base.normal};
diff --git a/frontend/src/app/(withSidebar)/my-page/components/MilestoneHistorySection/index.tsx b/frontend/src/app/(withSidebar)/my-page/components/MilestoneHistorySection/index.tsx
index 78cd5a90..101a6ab1 100644
--- a/frontend/src/app/(withSidebar)/my-page/components/MilestoneHistorySection/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/components/MilestoneHistorySection/index.tsx
@@ -14,16 +14,21 @@ const MilestoneHistorySection = async () => {
   // TODO - auth에 학번 정보 저장하도록 하기
   const auth = getAuthFromCookie();
 
-  const milestoneHistoriesOfStudent = await getMilestoneHistoriesOfStudent(
-    auth.uid,
-    undefined,
-    undefined,
-    undefined,
-    MilestoneHistorySortCriteria.ACTIVATED_AT,
-    SortDirection.DESC,
-    0,
-    5,
-  );
+  let milestoneHistoriesOfStudent;
+  try {
+    milestoneHistoriesOfStudent = await getMilestoneHistoriesOfStudent(
+      auth.id,
+      undefined,
+      undefined,
+      undefined,
+      MilestoneHistorySortCriteria.ACTIVATED_AT,
+      SortDirection.DESC,
+      0,
+      5,
+    );
+  } catch (err) {
+    // TODO: server api error handling...
+  }
 
   return (
     <div className="relative w-full min-w-[260px] flex-1 rounded-sm bg-white p-5 lg:max-w-[280px]">
diff --git a/frontend/src/app/(withSidebar)/my-page/components/MilestoneSection/index.tsx b/frontend/src/app/(withSidebar)/my-page/components/MilestoneSection/index.tsx
index 13f545fa..5af631a8 100644
--- a/frontend/src/app/(withSidebar)/my-page/components/MilestoneSection/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/components/MilestoneSection/index.tsx
@@ -29,7 +29,7 @@ const MilestoneSection = () => {
   };
   const [selectedInfoType, setSelectedInfoType] = useState<MilestoneInfoType>(MilestoneInfoType.TOTAL);
   const { data: milestoneScores } = useMilestoneScoresOfStudentQuery(
-    auth.uid,
+    auth.id,
     searchFilterPeriod.startDate,
     searchFilterPeriod.endDate,
   );
diff --git a/frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/index.tsx b/frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/index.tsx
index d8d46cee..31c87e21 100644
--- a/frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/index.tsx
@@ -5,7 +5,7 @@
 import SubTitle from '@/components/SubTitle';
 import { useAppSelector } from '@/lib/hooks/redux';
 import { useStudentMemberQuery } from '@/lib/hooks/useApi';
-import { appendDashPhoneNumber, convertCareer } from '@/lib/utils/utils';
+import { appendDashPhoneNumber, convertCareerToStr } from '@/lib/utils/utils';
 import { VscWarning } from '@react-icons/all-files/vsc/VscWarning';
 
 import StudentInfoLabel from './StudentInfoLabel';
@@ -13,7 +13,7 @@ import StudentInfoLabel from './StudentInfoLabel';
 const StudentInfoSection = () => {
   // TODO - 관리자가 로그인한 경우에 대한 처린
   const auth = useAppSelector((state) => state.auth).value;
-  const { data: member } = useStudentMemberQuery(auth.uid);
+  const { data: member } = useStudentMemberQuery(auth.id);
   return (
     <div className="relative flex-grow rounded-sm bg-white p-5">
       <SubTitle title="내 정보" urlText="수정" url="/my-page/edit" />
@@ -35,7 +35,7 @@ const StudentInfoSection = () => {
               value={
                 <>
                   <span className="mr-4 rounded border px-2 py-1 font-medium text-primary-main">
-                    {convertCareer(member.career)}
+                    {convertCareerToStr(member.career)}
                   </span>
                   <span>{member.careerDetail}</span>
                 </>
@@ -44,7 +44,7 @@ const StudentInfoSection = () => {
           </div>
         </div>
       ) : (
-        <div className="text-admin-semantic-error-light absolute inset-0 flex flex-col items-center justify-center gap-2 text-center">
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-center text-admin-semantic-error-light">
           <VscWarning className="h-8 w-8" />
           <p>
             학생 정보를 불러오는 데<br />
diff --git a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneDetail/index.tsx b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneDetail/index.tsx
index d40cdb57..4699d258 100644
--- a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneDetail/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneDetail/index.tsx
@@ -14,7 +14,7 @@ import MilestoneRowBarTable from '../../../components/MilestoneRowBarTable';
 const MilestoneDetail = ({ startDate, endDate }: Period) => {
   const auth = useAppSelector((state) => state.auth).value;
   const [selectedGroup, setSelectedGroup] = useState<string>(MilestoneGroup.ACTIVITY);
-  const { data: milestoneScores } = useMilestoneScoresOfStudentQuery(auth.uid, startDate, endDate);
+  const { data: milestoneScores } = useMilestoneScoresOfStudentQuery(auth.id, startDate, endDate);
 
   return (
     <div style={{ display: 'flex', flexGrow: '1', flexDirection: 'column' }}>
diff --git a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneHistoryTable/index.tsx b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneHistoryTable/index.tsx
index 3b73d217..c9a98ad2 100644
--- a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneHistoryTable/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneHistoryTable/index.tsx
@@ -19,7 +19,7 @@ const MilestoneHistoryTable = ({ searchFilterPeriod, pageNumber, pageSize }: Mil
   const pathname = usePathname();
   const auth = useAppSelector((state) => state.auth).value;
   const { data: milestoneHistoriesOfStudent } = useMilestoneHistoriesOfStudentQuery(
-    auth.uid,
+    auth.id,
     searchFilterPeriod.startDate,
     searchFilterPeriod.endDate,
     MilestoneHistoryStatus.APPROVED,
diff --git a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneOverview/index.tsx b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneOverview/index.tsx
index b50241af..992366a1 100644
--- a/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneOverview/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneOverview/index.tsx
@@ -19,7 +19,7 @@ interface MilestoneOverviewProps {
 const MilestoneOverview = ({ searchFilterPeriod }: MilestoneOverviewProps) => {
   const auth = useAppSelector((state) => state.auth).value;
   const { data: milestoneScoresOfStudent } = useMilestoneScoresOfStudentQuery(
-    auth.uid,
+    auth.id,
     searchFilterPeriod.startDate,
     searchFilterPeriod.endDate,
   );
diff --git a/frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryTable/index.tsx b/frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryTable/index.tsx
index 2f7a4706..6c99e0a7 100644
--- a/frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryTable/index.tsx
+++ b/frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryTable/index.tsx
@@ -19,15 +19,20 @@ const MilestoneHistoryTable = async ({ pageNumber }: MilestoneHistoryTableProp)
   const pathname = headersList.get('x-pathname') || '';
 
   const auth = getAuthFromCookie();
-  const milestoneHistories = await getMilestoneHistoriesOfStudent(
-    auth.uid,
-    undefined,
-    undefined,
-    undefined,
-    MilestoneHistorySortCriteria.CREATED_AT,
-    SortDirection.DESC,
-    pageNumber - 1,
-  );
+  let milestoneHistories;
+  try {
+    milestoneHistories = await getMilestoneHistoriesOfStudent(
+      auth.id,
+      undefined,
+      undefined,
+      undefined,
+      MilestoneHistorySortCriteria.CREATED_AT,
+      SortDirection.DESC,
+      pageNumber - 1,
+    );
+  } catch (e) {
+    // TODO: server api error handling...
+  }
 
   return (
     <div className="flex flex-col gap-4">
diff --git a/frontend/src/app/admin/milestone/list/[slug]/page.tsx b/frontend/src/app/admin/milestone/list/[slug]/page.tsx
index db6e08e0..cd6ebbe6 100644
--- a/frontend/src/app/admin/milestone/list/[slug]/page.tsx
+++ b/frontend/src/app/admin/milestone/list/[slug]/page.tsx
@@ -16,7 +16,12 @@ interface MilestoneHistoryDetailPageProps {
 }
 
 const Page = async ({ params: { slug } }: MilestoneHistoryDetailPageProps) => {
-  const history = await getMilestoneHistory(slug);
+  let history;
+  try {
+    history = await getMilestoneHistory(slug);
+  } catch (e) {
+    // TODO: server api error handling...
+  }
 
   if (!history) notFound();
 
diff --git a/frontend/src/app/admin/milestone/list/page.tsx b/frontend/src/app/admin/milestone/list/page.tsx
index 0a19e011..2106c310 100644
--- a/frontend/src/app/admin/milestone/list/page.tsx
+++ b/frontend/src/app/admin/milestone/list/page.tsx
@@ -17,13 +17,18 @@ const Page = async ({ searchParams }: { searchParams?: { [key: string]: string |
   const field = searchParams?.field ? parseInt(searchParams.field, 10) : 0;
   const keyword = searchParams?.keyword ? searchParams.keyword : '';
 
-  const milstoneHistories = await getMilestoneHistories(field, keyword, page - 1);
+  let milestoneHistories;
+  try {
+    milestoneHistories = await getMilestoneHistories(field, keyword, page - 1);
+  } catch {
+    // TODO: server api error handling...
+  }
 
   return (
     <div>
       <div className="flex items-center rounded-sm border-[1px] border-admin-border bg-admin-background-light px-5 py-3 text-sm">
         <span className="mr-20">
-          총 <span className="text-admin-primary-main">{milstoneHistories?.totalElements ?? 0}</span>건의 내역이
+          총 <span className="text-admin-primary-main">{milestoneHistories?.totalElements ?? 0}</span>건의 내역이
           있습니다.
         </span>
         <SearchBox
@@ -32,11 +37,11 @@ const Page = async ({ searchParams }: { searchParams?: { [key: string]: string |
           path="/admin/milestone/list"
         />
       </div>
-      <MilestoneHistoryTable histories={milstoneHistories?.content} />
+      <MilestoneHistoryTable histories={milestoneHistories?.content || []} />
       <div className="flex justify-end">
         <MilestoneHistoryExcelFileDownloadButton field={field} keyword={keyword} />
       </div>
-      <Pagination currentPage={page} totalItems={milstoneHistories?.totalElements} pathname={pathname} />
+      <Pagination currentPage={page} totalItems={milestoneHistories?.totalElements || 0} pathname={pathname} />
     </div>
   );
 };
diff --git a/frontend/src/app/components/ExternalLink/index.tsx b/frontend/src/app/components/ExternalLink/index.tsx
index bfeda878..196b7d35 100644
--- a/frontend/src/app/components/ExternalLink/index.tsx
+++ b/frontend/src/app/components/ExternalLink/index.tsx
@@ -9,9 +9,9 @@ const ExternalLink = () => (
     {externalLinkInfos.map((link) => {
       const markup = { __html: link.title };
       return (
-        <ItemWrapper href={link.url}>
+        <ItemWrapper key={link.url} href={link.url}>
           <ImageWrapper>
-            <Image src={link.img} alt={link.title} width="50" height="50" priority={false} />
+            <Image src={link.img} alt={link.title} width="50" height="50" style={{ width: 50, height: 50 }} />
           </ImageWrapper>
           <ImageTitle dangerouslySetInnerHTML={markup} />
         </ItemWrapper>
diff --git a/frontend/src/app/components/PnuLink/index.tsx b/frontend/src/app/components/PnuLink/index.tsx
index 5469b79d..8d2ee2e1 100644
--- a/frontend/src/app/components/PnuLink/index.tsx
+++ b/frontend/src/app/components/PnuLink/index.tsx
@@ -53,9 +53,9 @@ const PnuLink = () => {
         loop
       >
         {pnuLinkInfos.map((link) => (
-          <SwiperSlide>
+          <SwiperSlide key={link.url}>
             <PnuLinker href={link.url} target="_blank">
-              <Image width="160" height="50" src={link.img} alt={link.title} />
+              <Image width="160" height="50" src={link.img} alt={link.title} style={{ width: 'auto', height: 50 }} />
             </PnuLinker>
           </SwiperSlide>
         ))}
diff --git a/frontend/src/app/components/SignIn/components/InputUserInfo/index.tsx b/frontend/src/app/components/SignIn/components/InputUserInfo/index.tsx
index 16c8292b..dc94e70b 100644
--- a/frontend/src/app/components/SignIn/components/InputUserInfo/index.tsx
+++ b/frontend/src/app/components/SignIn/components/InputUserInfo/index.tsx
@@ -7,45 +7,66 @@ import { useAppDispatch } from '@/lib/hooks/redux';
 import { signIn } from '@/store/auth.slice';
 
 import { FixedEmail, InputID, InputPW, SignInButton } from './styled';
+import { useSignInMutation } from '@/lib/hooks/useApi';
+import { toast } from 'react-toastify';
 
 const InputUserInfo = () => {
-  const [userID, setUserID] = useState<string>('');
-  const [userPW, setUserPW] = useState<string>('');
+  const [userInfo, setUserInfo] = useState({
+    email: '',
+    password: '',
+  });
+
+  const { mutate: signInMutation } = useSignInMutation();
 
   const router = useRouter();
   const dispatch = useAppDispatch();
 
-  const handleSignInClick = () => {
-    // TODO: api 연결
-    dispatch(
-      signIn({
-        token: 'token',
-        username: 'name',
-        uid: 202055558,
-        isModerator: true,
-      }),
-    );
-    setTimeout(() => {
-      router.refresh();
-    }, 0);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInfo((prev) => {
+      return {
+        ...prev,
+        [e.target.id]: e.target.value,
+      };
+    });
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    signInMutation(userInfo, {
+      onSuccess(data, variables, context) {
+        dispatch(
+          signIn({
+            id: data.member_id,
+            token: `Bearer ${data.token}`,
+            name: data.name,
+            email: data.email,
+            isModerator: data.is_moderator,
+          }),
+        );
+        router.refresh();
+      },
+      onError(error, variables, context) {
+        toast.error(error.message);
+      },
+    });
   };
 
   return (
-    <div style={{ display: 'flex', gap: '20px' }}>
+    <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '20px' }}>
       <div style={{ display: 'flex', flexDirection: 'column', flexGrow: '1', position: 'relative' }}>
-        <InputID placeholder="아이디 입력" value={userID} onChange={(e) => setUserID(e.target.value)} />
+        <InputID placeholder="아이디 입력" id="email" value={userInfo.email} onChange={handleInputChange} />
         <InputPW
           placeholder="비밀번호 입력"
           type="password"
-          value={userPW}
-          onChange={(e) => setUserPW(e.target.value)}
+          id="password"
+          value={userInfo.password}
+          onChange={handleInputChange}
         />
         <FixedEmail>@pusan.ac.kr</FixedEmail>
       </div>
-      <SignInButton type="button" onClick={handleSignInClick}>
-        로그인
-      </SignInButton>
-    </div>
+      <SignInButton type="submit">로그인</SignInButton>
+    </form>
   );
 };
 
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 32a37b2d..ba0bf5f7 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -27,7 +27,13 @@ const Header = () => {
     <S.HeaderWrapper>
       <S.HeaderDesktopLayout>
         <Link href="/" style={{ width: 'fit-content' }}>
-          <Image src="/images/logo/SW_logo.svg" alt="SW_logo" width="160" height="50" priority={false} />
+          <Image
+            src="/images/logo/SW_logo.svg"
+            alt="SW_logo"
+            width="160"
+            height="50"
+            style={{ width: 160, height: 50 }}
+          />
         </Link>
         <div style={{ display: 'flex', justifyContent: 'center', flexGrow: 1 }}>
           {headerInfos.map(
@@ -62,7 +68,13 @@ const Header = () => {
       />
       <S.HeaderTabletLayout>
         <Link href="/" style={{ width: 'fit-content', height: '50px', padding: '5px 10px' }}>
-          <Image src="/images/logo/SW_logo.svg" alt="SW_logo" width="125" height="40" priority={false} />
+          <Image
+            src="/images/logo/SW_logo.svg"
+            alt="SW_logo"
+            width="125"
+            height="40"
+            style={{ width: 125, height: 40 }}
+          />
         </Link>
         <div style={{ display: 'flex' }}>
           {auth.isAuth ? (
diff --git a/frontend/src/data/queryKey.ts b/frontend/src/data/queryKey.ts
index a3cef194..34b45b90 100644
--- a/frontend/src/data/queryKey.ts
+++ b/frontend/src/data/queryKey.ts
@@ -36,4 +36,5 @@ export const QueryKeys = {
   ) => ['milestone-scores', startDate, endDate, page, size],
   MILESTONE_HISTORY_SCORE_EXCEL: (startDate: string, endDate: string) => ['milestone-score-excel', startDate, endDate],
   FILE: (fileName: string | null) => ['file', fileName],
+  DUPLICATE_STUDENT_ID: ['duplicate_student_id'],
 };
diff --git a/frontend/src/data/signUp.ts b/frontend/src/data/signUp.ts
index 2674f0a0..b24b9e67 100644
--- a/frontend/src/data/signUp.ts
+++ b/frontend/src/data/signUp.ts
@@ -1,8 +1,8 @@
-export const careerCategory: { id: number; name: string }[] = [
-  { id: 1, name: '대학원 진학' },
-  { id: 2, name: '기업 취업' },
-  { id: 3, name: '공공기관 취업' },
-  { id: 4, name: '창업' },
+export const careerCategory: { id: number; name: string; type: string }[] = [
+  { id: 1, name: '대학원 진학', type: 'GRADUATE_SCHOOL' },
+  { id: 2, name: '기업 취업', type: 'EMPLOYMENT_COMPANY' },
+  { id: 3, name: '공공기관 취업', type: 'EMPLOYMENT_PUBLIC_INSTITUTION' },
+  { id: 4, name: '창업', type: 'FOUNDATION' },
 ];
 
 export enum SignUpPhase {
diff --git a/frontend/src/lib/api/server.api.ts b/frontend/src/lib/api/server.api.ts
index 89d7caf7..27d375a2 100644
--- a/frontend/src/lib/api/server.api.ts
+++ b/frontend/src/lib/api/server.api.ts
@@ -19,40 +19,67 @@ export async function getMilestoneHistoriesOfStudent(
   page: number = 0,
   size: number = 10,
 ) {
-  const response = await server.get<MilestoneHistoryOfStudentPageableDto>(`/milestones/histories/members/${memberId}`, {
-    params: removeEmptyField({
-      start_date: startDate,
-      end_date: endDate,
-      filter,
-      sort_by: sortBy,
-      sort_direction: sortDirection,
-      page,
-      size,
-    }),
-  });
-  return response?.data;
+  const response = await server
+    .get<MilestoneHistoryOfStudentPageableDto>(`/milestones/histories/members/${memberId}`, {
+      params: removeEmptyField({
+        start_date: startDate,
+        end_date: endDate,
+        filter,
+        sort_by: sortBy,
+        sort_direction: sortDirection,
+        page,
+        size,
+      }),
+    })
+    .then((res) => res.data)
+    .catch((err) => Promise.reject(err));
+  return response;
 }
 
 export async function getMilestoneHistories(field?: number, keyword?: string, page: number = 0, size: number = 10) {
-  const response = await server.get<MilestoneHistoryPageableDto>('/admin/milestones/histories', {
-    params: removeEmptyField({
-      field,
-      keyword,
-      page,
-      size,
-    }),
-  });
-  return response?.data;
+  const response = await server
+    .get<MilestoneHistoryPageableDto>('/admin/milestones/histories', {
+      params: removeEmptyField({
+        field,
+        keyword,
+        page,
+        size,
+      }),
+    })
+    .then((res) => res.data)
+    .catch((err) => Promise.reject(err));
+  return response;
 }
 
 export async function getMilestoneHistory(historyId: number) {
-  const response = await server.get<MilestoneHistoryDto>(`/admin/milestones/histories/${historyId}`);
-  return response?.data;
+  const response = await server
+    .get<MilestoneHistoryDto>(`/admin/milestones/histories/${historyId}`)
+    .then((res) => res.data)
+    .catch((err) => Promise.reject(err));
+  return response;
 }
 
 export async function getFile(fileName: string | null) {
-  const response = await server.get<Blob>(`/files/${fileName}`, {
-    responseType: 'blob',
-  });
-  return response.data;
+  const response = await server
+    .get<Blob>(`/files/${fileName}`, {
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+    .catch((err) => Promise.reject(err));
+  return response;
+}
+
+export async function getValidationStudentId(studentId: string) {
+  const response = await server
+    .get(`/sign-up/exists/student-id`, {
+      params: removeEmptyField({
+        student_id: studentId,
+      }),
+    })
+    .then((res) => res.data)
+    .catch((err) => {
+      return Promise.reject(err);
+    });
+
+  return response;
 }
diff --git a/frontend/src/lib/api/server.axios.ts b/frontend/src/lib/api/server.axios.ts
index a440847c..306964b5 100644
--- a/frontend/src/lib/api/server.axios.ts
+++ b/frontend/src/lib/api/server.axios.ts
@@ -6,7 +6,5 @@ export const server = axios.create({ baseURL: process.env.NEXT_PUBLIC_SERVER_URL
 
 server.interceptors.response.use(
   (response) => response,
-  (error) => {
-    Promise.reject(categorizeError(error));
-  },
+  (error) => Promise.reject(categorizeError(error)),
 );
diff --git a/frontend/src/lib/hooks/useApi.ts b/frontend/src/lib/hooks/useApi.ts
index f059404f..557f072a 100644
--- a/frontend/src/lib/hooks/useApi.ts
+++ b/frontend/src/lib/hooks/useApi.ts
@@ -14,7 +14,9 @@ import {
 import { BusinessError } from '@/types/error';
 import { MilestoneHistorySortCriteria, SortDirection } from '@/types/milestone';
 
-import { removeEmptyField } from '../utils/utils';
+import { convertNumToCareer, removeEmptyField } from '../utils/utils';
+import { FirstInfo } from '@/app/(auth)/sign-up/components/SignUpFirstPage';
+import { SecondInfo } from '@/app/(auth)/sign-up/components/SignUpSecondPage';
 
 export const useCollegeQuery = () =>
   useAxiosQuery({
@@ -165,3 +167,47 @@ export function useMilestoneHistoryDeleteMutation() {
     },
   });
 }
+
+export function useSignUpMutation() {
+  return useAxiosMutation({
+    mutationFn: async (userInfo: FirstInfo & SecondInfo) => {
+      const data = {
+        email: userInfo.email + '@pusan.ac.kr',
+        password: userInfo.password,
+        name: userInfo.name,
+        student_id: userInfo.studentId,
+        phone_number: userInfo.phoneNumber,
+        major_id: userInfo.majorId,
+        minor_id: userInfo.minorId === 0 ? null : userInfo.minorId,
+        double_major_id: userInfo.doubleMajorId === 0 ? null : userInfo.doubleMajorId,
+        career: convertNumToCareer(userInfo.career),
+        career_detail: userInfo.careerDetail,
+        auth_code: userInfo.authCode,
+      };
+      await client
+        .post(`/sign-up`, data)
+        .then((res) => res.data)
+        .catch((err) => Promise.reject(err));
+    },
+  });
+}
+
+export function useSendAuthCodeMutation() {
+  return useAxiosMutation({
+    mutationFn: async (email: string) =>
+      await client
+        .post(`/sign-up/send-auth-code`, { email })
+        .then((res) => res.data)
+        .catch((err) => Promise.reject(err)),
+  });
+}
+
+export function useSignInMutation() {
+  return useAxiosMutation({
+    mutationFn: async ({ email, password }: { email: string; password: string }) =>
+      await client
+        .post(`/sign-in`, { email: email + '@pusan.ac.kr', password })
+        .then((res) => res.data)
+        .catch((err) => Promise.reject(err)),
+  });
+}
diff --git a/frontend/src/lib/utils/utils.tsx b/frontend/src/lib/utils/utils.tsx
index 86e202b0..7368cf20 100644
--- a/frontend/src/lib/utils/utils.tsx
+++ b/frontend/src/lib/utils/utils.tsx
@@ -43,13 +43,28 @@ export const convertMilestoneHistoryStatus = (status: string) => {
   }
 };
 
-export const convertCareer = (enumValue: string) => {
+export const convertNumToCareer = (num: number) => {
+  switch (num) {
+    case 1:
+      return 'GRADUATE_SCHOOL';
+    case 2:
+      return 'EMPLOYMENT_COMPANY';
+    case 3:
+      return 'EMPLOYMENT_PUBLIC_INSTITUTION';
+    case 4:
+      return 'FOUNDATION';
+    default:
+      return 'ETC';
+  }
+};
+
+export const convertCareerToStr = (enumValue: string) => {
   switch (enumValue) {
     case 'GRADUATE_SCHOOL':
       return '대학원 진학';
     case 'EMPLOYMENT_COMPANY':
       return '취업(기업체)';
-    case 'EMPLOYMENT_PUBLIC_"INSTITUTION':
+    case 'EMPLOYMENT_PUBLIC_INSTITUTION':
       return '취업(공공기관)';
     case 'FOUNDATION':
       return '취업(창업)';
diff --git a/frontend/src/store/auth.slice.ts b/frontend/src/store/auth.slice.ts
index d67fce2d..235d4f6a 100644
--- a/frontend/src/store/auth.slice.ts
+++ b/frontend/src/store/auth.slice.ts
@@ -3,18 +3,15 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cookie from 'react-cookies';
 
 export interface AuthState {
+  readonly id: number;
   token: string;
-  username: string;
-  uid: number;
-  isModerator: boolean;
+  name: string;
+  email: string;
+  isModerator: boolean; // 관리자 계정인지.
 }
 
 export interface AuthSliceState extends AuthState {
-  token: string;
   isAuth: boolean; // 로그인되어 있는지.
-  username: string;
-  uid: number;
-  isModerator: boolean; // 관리자 계정인지.
 }
 
 interface InitialState {
@@ -23,10 +20,11 @@ interface InitialState {
 
 const initialState: InitialState = {
   value: {
+    id: -1,
     token: '',
+    name: '',
+    email: '',
     isAuth: false,
-    username: '',
-    uid: -1,
     isModerator: false,
   },
 };
diff --git a/frontend/src/types/error.ts b/frontend/src/types/error.ts
index 974dc2f8..53e666e2 100644
--- a/frontend/src/types/error.ts
+++ b/frontend/src/types/error.ts
@@ -5,100 +5,100 @@ import { AxiosError } from 'axios';
 export class ApplicationError extends Error {
   originalError?: AxiosError<any>;
 
-  constructor(error?: AxiosError) {
+  constructor(error?: AxiosError, message?: string) {
     super();
     this.originalError = error;
     this.name = 'ApplicationError';
-    this.message = 'ApplicationError';
+    this.message = message ? message : 'ApplicationError';
   }
 }
 
 export class BusinessError extends Error {
   originalError?: AxiosError<any>;
 
-  constructor(error?: AxiosError) {
+  constructor(error?: AxiosError, message?: string) {
     super();
     this.originalError = error;
     this.name = 'BusinessError';
-    this.message = 'BusinessError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class AuthError extends BusinessError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'AuthError';
-    this.message = 'AuthError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class NotFoundError extends AuthError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'NotFoundError';
-    this.message = 'NotFoundError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class AccessDeniedError extends AuthError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'AccessDeniedError';
-    this.message = 'AccessDeniedError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class UnauthorizedError extends AuthError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'UnauthorizedError';
-    this.message = 'UnauthorizedError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class MemberRoleNotMatchedError extends AuthError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'MemberRoleNotMatchedError';
-    this.message = 'MemberRoleNotMatchedError';
+    this.message = message ? message : 'MemberRoleNotMatchedError';
   }
 }
 
 export class MemberNotFoundError extends AuthError {
-  constructor(error?: AxiosError) {
-    super(error);
+  constructor(error?: AxiosError, message?: string) {
+    super(error, message);
     this.name = 'MemberNotFoundError';
-    this.message = 'MemberNotFoundError';
+    this.message = message ? message : 'MemberNotFoundError';
   }
 }
 
 export const categorizeError = (error: Error) => {
   if (error instanceof AxiosError && error.response) {
     if (error.response.status === 401) {
-      return new UnauthorizedError(error);
+      return new UnauthorizedError(error, error.response.data.message);
     }
 
     if (error.response.status === 403) {
-      return new AccessDeniedError(error);
+      return new AccessDeniedError(error, error.response.data.message);
     }
 
     if (error.response.status === 404) {
       if (error.response.data.title === 'MEMBER_NOT_FOUND') {
-        return new MemberNotFoundError(error);
+        return new MemberNotFoundError(error, error.response.data.message);
       }
-      return new NotFoundError(error);
+      return new NotFoundError(error, error.response.data.message);
     }
 
     if (error.response.status === 409 && error.response.data.title === 'MEMBER_ROLE_NOT_MATCHED') {
-      return new MemberRoleNotMatchedError(error);
+      return new MemberRoleNotMatchedError(error, error.response.data.message);
     }
 
     if (error.response.status >= 400 && error.response.status < 500) {
-      return new BusinessError(error);
+      return new BusinessError(error, error.response.data.message);
     }
 
     if (error.response.status >= 500) {
-      return new ApplicationError(error);
+      return new ApplicationError(error, error.response.data.message);
     }
   }
   return error;