목록으로 돌아가기
diff --git a/src/Components/ui/comments/ProductsComment.jsx b/src/Components/ui/comments/ProductsComment.jsx
new file mode 100644
index 00000000..1b0cd2d6
--- /dev/null
+++ b/src/Components/ui/comments/ProductsComment.jsx
@@ -0,0 +1,102 @@
+"use client";
+import React, { useState } from "react";
+import OptionsMenu from "../button/OptionsMenu";
+import Image from "next/image";
+import profile from "@/public/images/profile.png";
+import { useAuth } from "@/providers/AuthProvider";
+import { timeAgo } from "@/lib/utils/time";
+
+export default function ProductsComment() {
+ const [content, setContent] = useState("");
+ const [comments, setComments] = useState([]);
+
+ const { user } = useAuth();
+
+ const handleInput = (e) => {
+ setContent(e.target.value);
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault(); // ✔ 줄바꿈 방지
+ handleSubmit();
+ }
+ };
+
+ const handleSubmit = () => {
+ const cleanContent = content.trim();
+
+ if (cleanContent === "") {
+ console.log("공백은 등록할 수 없습니다!");
+ return;
+ }
+
+ setComments((prev) => [...prev, { text: cleanContent, date: new Date() }]);
+
+ setContent("");
+ };
+
+ return (
+ <>
+
+
+
+ {comments.map((comment, i) => (
+ -
+
+
+
+
+
+
+
+
+
+
+ {user?.nickname || "비로그인 사용자!"}
+
+
+
+ {timeAgo(comment.date)}
+
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/Components/ui/modal/Modal.jsx b/src/Components/ui/modal/Modal.jsx
new file mode 100644
index 00000000..127ca50e
--- /dev/null
+++ b/src/Components/ui/modal/Modal.jsx
@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+
+export default function Modal({ isOpen, message, onClose }) {
+ if (!isOpen) return null;
+
+ return (
+
+ );
+}
diff --git a/src/app/(auth)/_components/_login/LoginInput.jsx b/src/app/(auth)/_components/_login/LoginInput.jsx
index 8edbaa1d..1118c16e 100644
--- a/src/app/(auth)/_components/_login/LoginInput.jsx
+++ b/src/app/(auth)/_components/_login/LoginInput.jsx
@@ -1,8 +1,13 @@
"use client";
+import { authService } from "@/lib/services/auth";
import clsx from "clsx";
import Image from "next/image";
+import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
+import EasyLogin from "./EasyLogin";
+import { useAuth } from "@/providers/AuthProvider";
+import Modal from "@/components/ui/modal/Modal";
export default function LoginInput() {
const [showEye, setShowEye] = useState(false);
@@ -10,13 +15,20 @@ export default function LoginInput() {
const [emailError, setEmailError] = useState("");
const [password, setPassword] = useState("");
const [passwordError, setPasswordError] = useState("");
+ const [error, setError] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [modalOpen, setModalOpen] = useState(false);
+ const [modalMessage, setModalMessage] = useState("");
+ const { login } = useAuth();
+ const router = useRouter();
const handleEmail = (e) => {
- setEmail(e.target.value);
+ const emailValue = e.target.value;
+ setEmail(emailValue);
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- if (e.target.value && !emailRegex.test(e.target.value)) {
+ if (emailValue && !emailRegex.test(emailValue)) {
setEmailError("잘못된 이메일입니다!");
} else {
setEmailError("");
@@ -24,12 +36,13 @@ export default function LoginInput() {
};
const handlePassword = (e) => {
- setPassword(e.target.value);
+ const passwordValue = e.target.value;
+ setPassword(passwordValue);
const passwordRegEx =
/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
- if (e.target.value && !passwordRegEx.test(e.target.value)) {
+ if (passwordValue && !passwordRegEx.test(passwordValue)) {
setPasswordError(
"비밀번호는 8자 이상, 영문·숫자·특수문자를 포함해야 합니다!"
);
@@ -38,8 +51,31 @@ export default function LoginInput() {
}
};
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ if (emailError || passwordError) {
+ setError("정보확인요망!");
+ return;
+ }
+
+ try {
+ setLoading(true);
+
+ const result = await login(email, password);
+ setModalMessage("로그인 성공!");
+ setModalOpen(true);
+ // router.push("/items");
+ } catch (error) {
+ setModalMessage("로그인에 실패했습니다!");
+ setModalOpen(true);
+ } finally {
+ setLoading(false);
+ }
+ };
+
return (
-