Merge pull request #21 from team-pofo/feature/#14/mdeditor-image-upload

Feature/#14/mdeditor image upload

package.json

@@ -14,13 +14,16 @@
     "@emotion/styled": "^11.13.0",
     "@reduxjs/toolkit": "^2.2.8",
     "@uiw/react-md-editor": "^3.6.0",
+    "axios": "^1.7.7",
     "next": "^14.2.14",
     "next-remove-imports": "^1.0.12",
     "polished": "^4.3.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "react-redux": "^9.1.2"
+    "react-redux": "^9.1.2",
+    "react-spinners": "^0.14.1",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/Common/Spinners.tsx

@@ -0,0 +1,23 @@
+import { CSSProperties } from "react";
+import { PropagateLoader } from "react-spinners";
+
+const override: CSSProperties = {
+  display: "block",
+  margin: "0 auto",
+  borderColor: "red",
+};
+
+function App() {
+  return (
+    <div className="sweet-loading">
+      <PropagateLoader
+        color={"#000000"}
+        loading={true}
+        cssOverride={override}
+        // size={25}
+      />
+    </div>
+  );
+}
+
+export default App;

src/components/LoginModal/LoginModel.tsx

@@ -3,6 +3,8 @@ import * as S from "./styles";
 import close from "../../../public/icons/close.svg";
 import chevron_left from "../../../public/icons/chevron_left.svg";
 import Image from "next/image";
+import { useAuthStore } from "@/stores/authStore";
+import { login } from "@/services/auth";
 
 interface ModalProps {
   onClose: () => void;
@@ -17,11 +19,25 @@ interface ModalProps {
 
 const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
   const [modalStep, setModalStep] = useState(initialStep);
+  const { login: setLoginState } = useAuthStore();
 
   useEffect(() => {
     setModalStep(initialStep);
   }, [initialStep]);
 
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const user = await login("email", "password");
+      setLoginState(user);
+      console.log(user);
+      alert("로그인 성공!");
+    } catch (error) {
+      console.error(error);
+      alert("로그인 실패!");
+    }
+  };
+
   const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) {
       onClose();
@@ -78,6 +94,14 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
               >
                 이메일로 로그인
               </S.Button>
+              <S.Button
+                bgColor="#ff000014"
+                hoverColor="#6aff0024"
+                textColor="#000000"
+                onClick={handleLogin}
+              >
+                로그인 테스트
+              </S.Button>
             </S.ButtonBox>
             <S.CheckboxContainer>
               <input type="checkbox" id="stayLoggedIn" />