feat: add university certification page

src/app/sign-up/email/page.tsx

@@ -1 +1 @@
-export { default } from "../../../components/pages/sign-up/email";
+export { default } from "../../../components/pages/sign-up/email-certification";

src/app/sign-up/id-card/page.tsx

@@ -1 +1 @@
-export { default } from "../../../components/pages/sign-up/id-card";
+export { default } from "../../../components/pages/sign-up/id-card-certification";

src/app/sign-up/university/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../../components/pages/sign-up/university-certification";

src/components/buttons/button-fill-large.tsx

@@ -10,6 +10,7 @@ interface ButtonProps {
     state?: ButtonState;
     text: string;
     onClick: any;
+    bottom?: boolean;
 }
 
 const TEXT_COLOR = {
@@ -29,10 +30,16 @@ const BUTTON_COLOR = {
 const ButtonFillLarge = ({
     state = "active",
     text = "",
+    bottom = true,
     onClick
 }: ButtonProps) => {
     return (
-        <ButtonWrapper state={state} text={text} onClick={onClick}>
+        <ButtonWrapper
+            state={state}
+            text={text}
+            bottom={bottom}
+            onClick={onClick}
+        >
             <Text typo="Subtitle2b">{text}</Text>
         </ButtonWrapper>
     );
@@ -41,11 +48,12 @@ const ButtonFillLarge = ({
 const ButtonWrapper = styled.button<{
     state: ButtonState;
     text: string;
+    bottom: boolean;
 }>`
     width: 100%;
     min-height: 52px;
     padding: 0.88rem 3.75rem;
-    margin-bottom: 8rem;
+    margin-bottom: ${({ bottom }) => bottom && "8rem"};
 
     text-align: center;
     color: ${({ state }) => TEXT_COLOR.default[state]};

src/components/pages/sign-up/email.tsx → src/components/pages/sign-up/email-certification.tsx

@@ -1,14 +1,12 @@
 "use client";
 import { useRouter } from "next/navigation";
 import ButtonFillLarge from "src/components/buttons/button-fill-large";
-import ButtonFillSmall from "src/components/buttons/button-fill-small";
 import Flex from "src/components/common/Flex";
 import InputLine from "src/components/inputs/input-line";
 import NavigationTop from "src/components/navigations/navigation-top";
-import ButtonGenderSelect from "src/components/sign-up/button-gender-select";
 import { useInput } from "src/hooks/common/useInput";
 
-const SignIn = () => {
+const EmailCertification = () => {
     const router = useRouter();
     const email = useInput();
 
@@ -33,4 +31,4 @@ const SignIn = () => {
     );
 };
 
-export default SignIn;
+export default EmailCertification;

src/components/pages/sign-up/university-certification.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { useRouter } from "next/navigation";
+import ButtonFillLarge from "src/components/buttons/button-fill-large";
+import Flex from "src/components/common/Flex";
+import NavigationTop from "src/components/navigations/navigation-top";
+
+const UnivCertification = () => {
+    const router = useRouter();
+
+    return (
+        <Flex direction="column" justify="start" gap={40}>
+            <NavigationTop
+                leftIcon={<div onClick={router.back}>왼</div>}
+                title="회원 가입"
+            />
+            <Flex direction="column" gap={24}>
+                <ButtonFillLarge
+                    state="active"
+                    text="학교 이메일로 인증하기"
+                    onClick={() => router.push("/sign-up/email")}
+                    bottom={false}
+                />
+                <ButtonFillLarge
+                    state="active"
+                    text="학생증으로 인증하기"
+                    onClick={() => router.push("/sign-up/id-card")}
+                    bottom={false}
+                />
+            </Flex>
+        </Flex>
+    );
+};
+
+export default UnivCertification;