Merge branch 'develop' of github.com:team-pofo/frontend into feature/#25

/projectDetailPage
team-pofo · Dec 19, 2024 · fb7e82e · fb7e82e
2 parents 88a471c + f1bfcf3
commit fb7e82e
Show file tree

Hide file tree

Showing 9 changed files with 333 additions and 84 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# environment variables
+.env
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,8 +1,10 @@
 import removeImports from "next-remove-imports";
 
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {
@@ -16,6 +18,15 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: false,
   },
+  // 리프레시 토큰을 요청에 실어서 보내기 위함. 도메인이 달라서 안 실어짐
+  rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${BASE_URL}/:path*`,
+      },
+    ];
+  },
 };
 
 export default removeImports()(nextConfig);
diff --git a/src/components/LoginModal/LoginModel.tsx b/src/components/LoginModal/LoginModel.tsx
@@ -4,9 +4,8 @@ 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";
+import { getUserInfo, login, signup } from "@/services/auth";
 import { Button } from "../ui/button";
-import KeepLogin from "./KeepLogin";
 import { Input } from "../ui/input";
 import { Checkbox } from "../ui/checkbox";
 
@@ -23,49 +22,100 @@ interface ModalProps {
 
 const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
   const [modalStep, setModalStep] = useState(initialStep);
+  // 회원가입관련 상태
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    agreeTerms: false,
+  });
+  // 로그인관련 상태
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const { login: setLoginState } = useAuthStore();
+  const { setAccessToken } = useAuthStore();
 
   useEffect(() => {
     setModalStep(initialStep);
   }, [initialStep]);
 
-  const handleLogin = async (e: React.FormEvent) => {
+  // 입력값 변경 핸들러
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value, type, checked } = e.target;
+    setFormData({ ...formData, [id]: type === "checkbox" ? checked : value });
+  };
+
+  // 회원가입 요청 처리
+  const handleSignUp = async (e: React.FormEvent) => {
     e.preventDefault();
+    const { email, password, name, agreeTerms } = formData;
+
+    // 유효성 검사
+    if (!name || !email || !password || !agreeTerms) {
+      alert("모든 필드를 입력하고 약관에 동의해주세요.");
+      return;
+    }
+
     try {
-      const user = await login("email", "password");
-      setLoginState(user);
-      console.log(user);
-      alert("로그인 성공!");
+      const response = await signup(email, password);
+      console.log("response");
+      console.log(response);
+      alert("회원가입 성공!");
+      setModalStep("main"); // 메인 화면으로 이동
     } catch (error) {
-      console.error(error);
-      alert("로그인 실패!");
+      console.error("회원가입 실패:", error);
+      alert("회원가입 중 오류가 발생했습니다.");
     }
   };
 
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
+  // 입력값 검증 및 로그인 요청
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // 입력값 검증
+    if (!email.trim() || !password.trim()) {
+      alert("이메일과 비밀번호를 모두 입력해주세요.");
+      return;
     }
-  };
 
-  const handleSwitchToEmailLogin = () => {
-    setModalStep("emailLogin");
-  };
+    try {
+      // 서버로 로그인 요청
+      const response = await login(email, password);
+      console.log("response");
+      console.log(response);
+      const token = response.data.accessToken;
+      if (response.success) {
+        setAccessToken(response.data.accessToken);
 
-  const handleSwitchToSignup = () => {
-    setModalStep("signup");
-  };
+        try {
+          const response = await getUserInfo();
+          if (response.success) {
+            setLoginState(token, response.data);
+          }
+          console.log(response);
+        } catch {
+          console.log("error");
+        }
 
-  const handleSwitchToEmailSignup = () => {
-    setModalStep("emailSignup");
+        alert("로그인 성공!");
+        onClose();
+      }
+    } catch (error) {
+      console.error("로그인 실패:", error);
+      alert("이메일 또는 비밀번호가 잘못되었습니다.");
+    }
   };
 
-  const handleSwitchToPasswordReset = () => {
-    setModalStep("passwordReset");
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
   };
 
-  const handleSwitchToMainLogin = () => {
-    setModalStep("main");
+  const switchModalStep = (
+    step: Exclude<ModalProps["initialStep"], undefined>,
+  ) => {
+    setModalStep(step);
   };
 
   return (
@@ -88,17 +138,16 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
             </S.Header>
             <S.ButtonBox>
               <Button>Github로 로그인</Button>
-              <Button variant={"secondary"} onClick={handleSwitchToEmailLogin}>
+              <Button
+                variant={"secondary"}
+                onClick={() => switchModalStep("emailLogin")}
+              >
                 이메일로 로그인
               </Button>
-              <Button variant={"destructive"} onClick={handleLogin}>
-                로그인 테스트
-              </Button>
             </S.ButtonBox>
-            <KeepLogin />
             <S.Footer>
               아직 회원이 아니신가요?
-              <S.SignUpLink onClick={handleSwitchToSignup}>
+              <S.SignUpLink onClick={() => switchModalStep("signup")}>
                 회원가입
               </S.SignUpLink>
             </S.Footer>
@@ -113,30 +162,41 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
                   width={24}
                   height={24}
                   alt="back"
-                  onClick={handleSwitchToSignup}
+                  onClick={() => switchModalStep("signup")}
                 />
               </S.BackIconContainer>
               <S.Title>Email로 로그인</S.Title>
             </S.Header>
             <S.InputContainer>
               <label htmlFor="email">이메일</label>
-              <Input type="email" placeholder="이메일을 입력하세요" />
+              <Input
+                id="email"
+                type="email"
+                placeholder="이메일을 입력하세요"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
             </S.InputContainer>
             <S.InputContainer>
               <label htmlFor="password">비밀번호</label>
-              <Input type="password" placeholder="비밀번호를 입력하세요" />
+              <Input
+                id="password"
+                type="password"
+                placeholder="비밀번호를 입력하세요"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
             </S.InputContainer>
-            <KeepLogin />
-            <Button>로그인</Button>
+            <Button onClick={handleEmailLogin}>로그인</Button>
             <S.Footer style={{ marginBottom: "0px" }}>
               비밀번호를 잊으셨나요?
-              <S.SignUpLink onClick={handleSwitchToPasswordReset}>
+              <S.SignUpLink onClick={() => switchModalStep("passwordReset")}>
                 비밀번호 찾기
               </S.SignUpLink>
             </S.Footer>
             <S.Footer>
               아직 회원이 아니신가요?
-              <S.SignUpLink onClick={handleSwitchToSignup}>
+              <S.SignUpLink onClick={() => switchModalStep("signup")}>
                 회원가입
               </S.SignUpLink>
             </S.Footer>
@@ -149,13 +209,16 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
             </S.Header>
             <S.ButtonBox>
               <Button>Github로 가입</Button>
-              <Button variant={"secondary"} onClick={handleSwitchToEmailSignup}>
+              <Button
+                variant={"secondary"}
+                onClick={() => switchModalStep("emailSignup")}
+              >
                 이메일로 가입
               </Button>
             </S.ButtonBox>
             <S.Footer>
               이미 회원이신가요?
-              <S.SignUpLink onClick={handleSwitchToMainLogin}>
+              <S.SignUpLink onClick={() => switchModalStep("main")}>
                 로그인
               </S.SignUpLink>
             </S.Footer>
@@ -170,34 +233,54 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
                   width={24}
                   height={24}
                   alt="back"
-                  onClick={handleSwitchToSignup}
+                  onClick={() => switchModalStep("signup")}
                 />
               </S.BackIconContainer>
               <S.Title>Email로 가입</S.Title>
             </S.Header>
             <S.InputContainer>
               <label htmlFor="name">이름</label>
-              <Input type="email" placeholder="이름을 입력하세요" />
+              <Input
+                id="name"
+                placeholder="이름을 입력하세요"
+                value={formData.name}
+                onChange={handleChange}
+              />
             </S.InputContainer>
             <S.InputContainer>
               <label htmlFor="email">이메일</label>
-              <Input type="email" placeholder="이메일을 입력하세요" />
+              <Input
+                id="email"
+                type="email"
+                placeholder="이메일을 입력하세요"
+                value={formData.email}
+                onChange={handleChange}
+              />
             </S.InputContainer>
             <S.InputContainer>
               <label htmlFor="password">비밀번호</label>
-              <Input type="password" placeholder="비밀번호를 입력하세요" />
+              <Input
+                id="password"
+                type="password"
+                placeholder="비밀번호를 입력하세요"
+                value={formData.password}
+                onChange={handleChange}
+              />
             </S.InputContainer>
             <S.CheckboxContainer>
-              <Checkbox id="agreeTerms" />
+              <Checkbox
+                id="agreeTerms"
+                checked={formData.agreeTerms}
+                onCheckedChange={(checked) =>
+                  setFormData({ ...formData, agreeTerms: !!checked })
+                }
+              />
               <label htmlFor="agreeTerms">다음 약관에 모두 동의합니다.</label>
-              <S.ForgotLink href="#">약관 보기</S.ForgotLink>
             </S.CheckboxContainer>
-            <S.Button bgColor="#000000" textColor="#ffffff">
-              가입하기
-            </S.Button>
+            <Button onClick={handleSignUp}>가입하기</Button>
             <S.Footer>
               이미 회원이신가요?
-              <S.SignUpLink onClick={handleSwitchToMainLogin}>
+              <S.SignUpLink onClick={() => switchModalStep("main")}>
                 로그인
               </S.SignUpLink>
             </S.Footer>
@@ -212,7 +295,7 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
                   width={24}
                   height={24}
                   alt="back"
-                  onClick={handleSwitchToSignup}
+                  onClick={() => switchModalStep("signup")}
                 />
               </S.BackIconContainer>
               <S.Title>비밀번호 찾기</S.Title>
@@ -234,7 +317,7 @@ const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
             </S.Button>
             <S.Footer>
               비밀번호가 기억나셨나요?
-              <S.SignUpLink onClick={handleSwitchToMainLogin}>
+              <S.SignUpLink onClick={() => switchModalStep("main")}>
                 로그인
               </S.SignUpLink>
             </S.Footer>