diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..175be51
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,101 @@
+import React, { useRef, useState } from "react";
+import { useMutation } from "react-query";
+import { useNavigate } from "react-router-dom";
+import { ApiClient } from "../apis/apiClient";
+import { LoginType } from "../types/user";
+import AlertModal from "../components/molecules/AlertModal";
+import { setCookie } from "../utils/cookie";
+
+const Login = () => {
+ const navigate = useNavigate();
+
+ const [openModal, setOpenModal] = useState(false);
+ const [errorMessage, setErrorMessage] = useState("");
+
+ const idRef = useRef(null);
+ const passwordRef = useRef(null);
+
+ const loginMutation = useMutation((user: LoginType) =>
+ ApiClient.getInstance().login(user),
+ );
+
+ const login = async () => {
+ const id = idRef.current?.value;
+ const password = passwordRef.current?.value;
+
+ if (!id || !password) {
+ setOpenModal(true);
+ setErrorMessage("아이디 및 비밀번호를 입력해주세요.");
+ return;
+ }
+
+ try {
+ const response = await loginMutation.mutateAsync({
+ userId: id,
+ userPw: password,
+ });
+ console.log("로그인 성공!");
+ setCookie("token", response.token);
+ if (response.user.userRole === "USER") {
+ navigate("/choosePlace");
+ } else {
+ navigate("/admin");
+ }
+ } catch (error) {
+ setErrorMessage("잘못되거나 없는 회원 정보입니다.");
+ console.error("로그인 실패:", error);
+ }
+ };
+
+ return (
+
+ {openModal && (
+ setOpenModal(!openModal)}
+ />
+ )}
+ 
navigate("/checkUser")}
+ />
+
+
+
로그인
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Login;
diff --git a/src/pages/Order.tsx b/src/pages/Order.tsx
new file mode 100644
index 0000000..726963b
--- /dev/null
+++ b/src/pages/Order.tsx
@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Order = () => {
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ navigate("/completion");
+ }, 3000);
+
+ return () => clearTimeout(timeout);
+ }, [history]);
+
+ return (
+
+
+
+ 
+
+ );
+};
+
+export default Order;
diff --git a/src/pages/OrderCheck.tsx b/src/pages/OrderCheck.tsx
new file mode 100644
index 0000000..641cbc2
--- /dev/null
+++ b/src/pages/OrderCheck.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const OrderCheck = () => {
+ return OrderCheck
;
+};
+
+export default OrderCheck;
diff --git a/src/pages/OrderCompletion.tsx b/src/pages/OrderCompletion.tsx
new file mode 100644
index 0000000..41ff4f0
--- /dev/null
+++ b/src/pages/OrderCompletion.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const OrderCompletion = () => {
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ navigate("/");
+ }, 3000);
+
+ return () => clearTimeout(timeout);
+ }, [history]);
+
+ return (
+
+
+
+
결제가 완료 되었습니다.
+
감사합니다.
+
+
100
+
포인트
+
가 적립되었습니다.
+
+ {editable && (
+
+ )}
+
+ ) : (
+
+ )}
+ 
+