+ 
+
+ {category}
+
+ );
+};
diff --git a/src/components/HomeComponent/EntertainmentSection.tsx b/src/components/HomeComponent/EntertainmentSection.tsx
new file mode 100644
index 00000000..1ee4036a
--- /dev/null
+++ b/src/components/HomeComponent/EntertainmentSection.tsx
@@ -0,0 +1,18 @@
+import { TextBox } from "../common/TextBox";
+
+const Entertainment = () => {
+ return (
+
+
+ );
+};
+
+export default Entertainment;
diff --git a/src/components/HomeComponent/FriendSelectSection.tsx b/src/components/HomeComponent/FriendSelectSection.tsx
new file mode 100644
index 00000000..051bc10c
--- /dev/null
+++ b/src/components/HomeComponent/FriendSelectSection.tsx
@@ -0,0 +1,31 @@
+import TextBox from "../common/TextBox";
+import { useUserGreeting } from "../../hooks/useUserGreeting";
+
+const FriendSelectSection = () => {
+ const handleFreindSelectButtonClick = () => {
+ console.log("친구 선택 버튼 클릭!");
+ };
+
+ const { isLoggedIn, nickname } = useUserGreeting();
+
+ const primaryTextContent = isLoggedIn
+ ? `${nickname}님! 선물할 친구를 선택해 주세요!`
+ : "선물할 친구를 선택해주세요";
+
+ const secondaryTextContent = "";
+
+ return (
+
+
+ );
+};
+export default FriendSelectSection;
diff --git a/src/components/HomeComponent/RankingProductList.tsx b/src/components/HomeComponent/RankingProductList.tsx
new file mode 100644
index 00000000..b64a3a2d
--- /dev/null
+++ b/src/components/HomeComponent/RankingProductList.tsx
@@ -0,0 +1,50 @@
+import ProductCard from "../common/ProductCard";
+import { type Product } from "../../api/product";
+
+interface RankingProductListProps {
+ products: Product[];
+ loading: boolean;
+ error: string | null;
+ isNumVisibleOption: boolean;
+ onProductClick: (productId: number) => void;
+}
+
+export const RankingProductList = ({
+ products,
+ loading,
+ error,
+ onProductClick,
+ isNumVisibleOption,
+}: RankingProductListProps) => {
+ if (loading) {
+ return
+
+ 랭킹 로딩 중...
; + } + + if (error) { + return에러: {error}
; + } + + if (products.length === 0) { + return ( ++ 해당 조건의 랭킹 상품이 없습니다. +
+ ); + } + + return ( +
+ {products.map((product, index) => (
+
+ );
+};
+
+export default RankingProductList;
diff --git a/src/components/HomeComponent/SortOptionSection.tsx b/src/components/HomeComponent/SortOptionSection.tsx
new file mode 100644
index 00000000..e086e4d8
--- /dev/null
+++ b/src/components/HomeComponent/SortOptionSection.tsx
@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { ImgBox } from "../common/ImgBox";
+import { RankingProductList } from "./RankingProductList";
+import {
+ getRankingProducts,
+ type TargetType,
+ type RankType,
+ type Product,
+} from "../../api/product";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../contexts/useAuth";
+
+const filterOptions: { id: TargetType; label: string; img: string }[] = [
+ { id: "ALL", label: "전체", img: "ALL" },
+ { id: "FEMALE", label: "여성이", img: "👩🏻" },
+ { id: "MALE", label: "남성이", img: "👱🏻♂️" },
+ { id: "TEEN", label: "청소년이", img: "🧑🏻🎓" },
+];
+
+const sortOptions: { id: RankType; label: string }[] = [
+ { id: "MANY_WISH", label: "받고 싶어한" },
+ { id: "MANY_RECEIVE", label: "많이 선물한" },
+ { id: "MANY_WISH_RECEIVE", label: "위시로 받은" },
+];
+
+export const SortOptionSection = () => {
+ const [activeFilter, setActiveFilter] = useState
+
+ );
+};
diff --git a/src/components/HomeComponent/ThemeSection.tsx b/src/components/HomeComponent/ThemeSection.tsx
new file mode 100644
index 00000000..02bf77a2
--- /dev/null
+++ b/src/components/HomeComponent/ThemeSection.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { ThemeCard } from "./Cards/ThemeCard";
+import { getThemes, type Theme } from "../../api/theme";
+import { useNavigate } from "react-router-dom";
+
+export const ThemeSection = () => {
+ const [themes, setThemes] = useState
+ {filterOptions.map((option) => (
+
+
+
+ setActiveFilter(option.id)}
+ />
+
+ ))}
+
+ {sortOptions.map((option) => (
+
+ ))}
+
+
+
+
+ 현재 랭킹
+
+
+ );
+ }
+
+ if (error) {
+ return (
+ 선물 테마
+테마 로딩 중...
+
+
+ );
+ }
+
+ return (
+ 선물 테마
+오류 발생: {error}
+
+
+ );
+};
diff --git a/src/components/OrderComponent/Cards/InputCard.tsx b/src/components/OrderComponent/Cards/InputCard.tsx
new file mode 100644
index 00000000..357ca37e
--- /dev/null
+++ b/src/components/OrderComponent/Cards/InputCard.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+interface InputCardProps {
+ title?: string;
+ label: string;
+ category?: string;
+ type?: React.HTMLInputTypeAttribute;
+ isTextArea?: boolean;
+ id?: string;
+ value: string;
+ onChange: (
+ e: React.ChangeEvent선물 테마
+
+ {themes.map((theme) => (
+ handleThemeClick(theme.themeId)}
+ />
+ ))}
+
+
+ {title && (
+
+ );
+};
+
+export default InputCard;
diff --git a/src/components/OrderComponent/Cards/ProductDetailCard.tsx b/src/components/OrderComponent/Cards/ProductDetailCard.tsx
new file mode 100644
index 00000000..4e813128
--- /dev/null
+++ b/src/components/OrderComponent/Cards/ProductDetailCard.tsx
@@ -0,0 +1,38 @@
+interface ProductDetailProps {
+ imageUrl: string;
+ productName: string;
+ brand: string;
+ price: number;
+}
+
+const ProductDetailCard = ({
+ imageUrl,
+ productName,
+ brand,
+ price,
+}: ProductDetailProps) => {
+ return (
+ {title}
+ )} +
+ {showCategoryText && (
+
+ {category}
+ )} +
+ {isTextArea ? (
+
+ ) : (
+
+ )}
+ {displayError && (
+
+ {displayError}
+ )} +
+
+ );
+};
+
+export default ProductDetailCard;
diff --git a/src/components/OrderComponent/Cards/ThankCard.tsx b/src/components/OrderComponent/Cards/ThankCard.tsx
new file mode 100644
index 00000000..c9fb2335
--- /dev/null
+++ b/src/components/OrderComponent/Cards/ThankCard.tsx
@@ -0,0 +1,31 @@
+interface ThanksCardProps {
+ id: number;
+ thumbUrl: string;
+ defaultMessage: string;
+ isSelected: boolean;
+ onSelect: (id: number) => void;
+}
+
+const ThanksCard = ({
+ id,
+ thumbUrl,
+ isSelected,
+ onSelect,
+}: ThanksCardProps) => {
+ return (
+
+ 
+
+
+
+
+ + {productName} +
+{brand}
++ 상품가 + {price.toLocaleString()}원 +
+ onSelect(id)}
+ >
+ 
+
+ );
+};
+
+export default ThanksCard;
diff --git a/src/components/OrderComponent/OrderConfirmComponent/OrderButton.tsx b/src/components/OrderComponent/OrderConfirmComponent/OrderButton.tsx
new file mode 100644
index 00000000..d2215d97
--- /dev/null
+++ b/src/components/OrderComponent/OrderConfirmComponent/OrderButton.tsx
@@ -0,0 +1,49 @@
+interface OrderButtonProps {
+ quantity: string;
+ totalPrice: number;
+ productName: string;
+ sender: string;
+ message: string;
+}
+
+const OrderButton = ({
+ quantity,
+ totalPrice,
+ productName,
+ sender,
+ message,
+}: OrderButtonProps) => {
+ const numericQuantity = parseInt(quantity, 10);
+
+ const isButtonDisabled = numericQuantity <= 0 || isNaN(numericQuantity);
+
+ const handleOrderClick = () => {
+ if (isButtonDisabled) {
+ return;
+ }
+ alert(
+ `주문이 완료 되었습니다. \n 상품명: ${productName} \n 구매 수량: ${quantity}\n 발신자 이름 ${sender}\n 메시지:${message}`
+ );
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default OrderButton;
diff --git a/src/components/OrderComponent/OrderConfirmSection.tsx b/src/components/OrderComponent/OrderConfirmSection.tsx
new file mode 100644
index 00000000..ce13bd2e
--- /dev/null
+++ b/src/components/OrderComponent/OrderConfirmSection.tsx
@@ -0,0 +1,29 @@
+import Order from "./OrderConfirmComponent/OrderButton";
+
+interface OrderProps {
+ quantity: string;
+ totalPrice: number;
+ productName: string;
+ sender: string;
+ message: string;
+}
+
+const OrderConfirmSection = ({
+ quantity,
+ totalPrice,
+ productName,
+ sender,
+ message,
+}: OrderProps) => {
+ return (
+
+ {fieldsLength === 0 && (
+
+ );
+};
+
+export default ReceiverAddSection;
diff --git a/src/components/OrderComponent/ReceiverComponent/ReceiverDisplayTable.tsx b/src/components/OrderComponent/ReceiverComponent/ReceiverDisplayTable.tsx
new file mode 100644
index 00000000..1923281c
--- /dev/null
+++ b/src/components/OrderComponent/ReceiverComponent/ReceiverDisplayTable.tsx
@@ -0,0 +1,51 @@
+import { type ReceiverField } from "../../../schemas/receiverSchema";
+
+interface ReceiverDisplayTableProps {
+ savedReceivers: ReceiverField[];
+}
+
+const ReceiverDisplayTable = ({
+ savedReceivers,
+}: ReceiverDisplayTableProps) => {
+ if (savedReceivers.length === 0) {
+ return (
+
+
+ )}
+
+ 받는 사람이 없습니다.
+
+ 받는 사람을 추가해주세요.
+
* 최대 10명까지 추가 할 수 있어요.
++ * 받는 사람의 전화번호를 중복으로 입력할 수 없어요. +
+ +
+
+ );
+ }
+
+ return (
+
+ 등록된 받는 사람이 없습니다.
+
+ 수정 버튼을 눌러 추가해주세요.
+
+
+
+
+
+ );
+};
+
+export default ReceiverDisplayTable;
diff --git a/src/components/OrderComponent/ReceiverComponent/ReceiverFieldItem.tsx b/src/components/OrderComponent/ReceiverComponent/ReceiverFieldItem.tsx
new file mode 100644
index 00000000..338c95ac
--- /dev/null
+++ b/src/components/OrderComponent/ReceiverComponent/ReceiverFieldItem.tsx
@@ -0,0 +1,110 @@
+import { type UseFormRegister, type FieldErrors } from "react-hook-form";
+import { type ReceiversFormValues } from "../../../schemas/receiverSchema";
+
+interface ReceiverFieldItemProps {
+ index: number;
+ register: UseFormRegister| 이름 | +전화번호 | +수량 | +
|---|---|---|
| + {receiver.name} + | +{receiver.phone} | +{receiver.quantity} | +
+
+
+ );
+};
+
+export default ReceiverFieldItem;
diff --git a/src/components/OrderComponent/ReceiverComponent/ReceiverFormActions.tsx b/src/components/OrderComponent/ReceiverComponent/ReceiverFormActions.tsx
new file mode 100644
index 00000000..a4b6f339
--- /dev/null
+++ b/src/components/OrderComponent/ReceiverComponent/ReceiverFormActions.tsx
@@ -0,0 +1,20 @@
+interface ReceiverFormActionsProps {
+ watchAllFieldsLength: number;
+}
+
+const ReceiverFormActions = ({
+ watchAllFieldsLength,
+}: ReceiverFormActionsProps) => {
+ return (
+ 받는 사람 {index + 1}
+ +
+
+
+ {errors.receivers?.[index]?.name && (
+
+
+ + {errors.receivers[index]?.name?.message} +
+ )} +
+
+
+ {errors.receivers?.[index]?.phone && (
+
+
+ + {errors.receivers[index]?.phone?.message} +
+ )} +
+
+
+ {errors.receivers?.[index]?.quantity && (
+
+ + {errors.receivers[index]?.quantity?.message} +
+ )} +
+
+
+ );
+};
+
+export default ReceiverFormActions;
diff --git a/src/components/OrderComponent/ReceiverComponent/ReceiverFormHeader.tsx b/src/components/OrderComponent/ReceiverComponent/ReceiverFormHeader.tsx
new file mode 100644
index 00000000..8c68dd7f
--- /dev/null
+++ b/src/components/OrderComponent/ReceiverComponent/ReceiverFormHeader.tsx
@@ -0,0 +1,38 @@
+// src/components/OrderComponent/ReceiverFormHeader.tsx
+
+interface ReceiverFormHeaderProps {
+ isEditing: boolean;
+ onCancelForm: () => void;
+ onEditMode: () => void;
+}
+
+const ReceiverFormHeader = ({
+ isEditing,
+ onCancelForm,
+ onEditMode,
+}: ReceiverFormHeaderProps) => {
+ return (
+
+
+ );
+};
+
+export default ReceiverFormHeader;
diff --git a/src/components/OrderComponent/ReceiverSection.tsx b/src/components/OrderComponent/ReceiverSection.tsx
new file mode 100644
index 00000000..71f8fd9b
--- /dev/null
+++ b/src/components/OrderComponent/ReceiverSection.tsx
@@ -0,0 +1,126 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useFieldArray, useForm, type SubmitHandler } from "react-hook-form";
+import {
+ receiversFormSchema,
+ type ReceiverField,
+ type ReceiversFormValues,
+} from "../../schemas/receiverSchema";
+
+import ReceiverAddSection from "./ReceiverComponent/ReceiverAddField";
+import ReceiverDisplayTable from "./ReceiverComponent/ReceiverDisplayTable";
+import ReceiverFieldItem from "./ReceiverComponent/ReceiverFieldItem";
+import ReceiverFormActions from "./ReceiverComponent/ReceiverFormActions";
+import ReceiverFormHeader from "./ReceiverComponent/ReceiverFormHeader";
+
+interface ReceiverProps {
+ initialReceivers?: ReceiverField[];
+ onReceiversUpdate: (receivers: ReceiverField[]) => void;
+ onCancel: () => void;
+}
+
+const Receiver = ({
+ initialReceivers = [],
+ onReceiversUpdate,
+ onCancel,
+}: ReceiverProps) => {
+ const [isEditing, setIsEditing] = useState(initialReceivers.length === 0);
+ const [savedReceivers, setSavedReceivers] =
+ useState받는 사람
+ {isEditing ? ( + + ) : ( + + )} +
+
+ );
+};
+
+export default Receiver;
diff --git a/src/components/OrderComponent/SenderSection.tsx b/src/components/OrderComponent/SenderSection.tsx
new file mode 100644
index 00000000..187c0815
--- /dev/null
+++ b/src/components/OrderComponent/SenderSection.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+interface SenderProps {
+ onSenderNameChange: (name: string) => void;
+}
+
+const Sender = ({ onSenderNameChange }: SenderProps) => {
+ const [senderName, setSenderName] = useState
+
+ );
+};
+
+export default Sender;
diff --git a/src/components/OrderComponent/ThanksCardSlideSection.tsx b/src/components/OrderComponent/ThanksCardSlideSection.tsx
new file mode 100644
index 00000000..7352e82a
--- /dev/null
+++ b/src/components/OrderComponent/ThanksCardSlideSection.tsx
@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from "react";
+import giftOrderThanksData from "../../data/giftOrderThanksData";
+import { useInput } from "../../hooks/useInput";
+
+import { ERROR_MESSAGES } from "../../constants/message";
+import InputCard from "./Cards/InputCard";
+import ThanksCard from "./Cards/ThankCard";
+
+const validateThankMessage = (value: string): string => {
+ if (!value.trim()) {
+ return ERROR_MESSAGES.REQUIRED_MESSAGE;
+ }
+ return "";
+};
+
+interface ThanksCardSlideProps {
+ onMessageChange: (message: string) => void;
+}
+
+const ThanksCardSlide = ({ onMessageChange }: ThanksCardSlideProps) => {
+ const [selectedId, setSelectedId] = useState보내는 사람
+
+
+
+
+ + * 실제 선물 발송 시 발신자이름으로 반영되는 정보입니다. +
+
+
+ );
+};
+
+export default ThanksCardSlide;
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
new file mode 100644
index 00000000..97ed0cc6
--- /dev/null
+++ b/src/components/common/Header.tsx
@@ -0,0 +1,91 @@
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../contexts/useAuth";
+
+export const Header = () => {
+ const navigate = useNavigate();
+ const { isLoggedIn } = useAuth();
+
+ const handleBackClick = () => {
+ navigate(-1);
+ };
+
+ const handleHomeClick = () => {
+ navigate("/");
+ };
+
+ const handleRightButtonClick = () => {
+ if (isLoggedIn) {
+ navigate("/mypage");
+ } else {
+ navigate("/login");
+ }
+ };
+
+ return (
+
+ {giftOrderThanksData.map(({ id, thumbUrl, defaultTextMessage }) => (
+
+
+ {selectedId && (
+
+ 
card.id === selectedId)
+ ?.imageUrl
+ }
+ alt="선택된 카드"
+ className="w-1/2 h-1/4 rounded-lg shadow-lg mb-6 mt-4"
+ />
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/common/ImgBox.tsx b/src/components/common/ImgBox.tsx
new file mode 100644
index 00000000..a5bcef35
--- /dev/null
+++ b/src/components/common/ImgBox.tsx
@@ -0,0 +1,43 @@
+interface ImgBoxProps {
+ category: string;
+ img: string;
+ isActive?: boolean;
+ onClick?: () => void;
+}
+
+export const ImgBox = ({ category, img, isActive, onClick }: ImgBoxProps) => {
+ const activeBgClass = isActive ? "bg-blue-500" : "bg-gray-100";
+ const activeTextClass = isActive ? "text-blue-500" : "text-gray-700";
+
+ const isImageUrl = img.startsWith("/") || img.startsWith("http");
+
+ return (
+
+
+ );
+};
diff --git a/src/components/common/NumberBox.tsx b/src/components/common/NumberBox.tsx
new file mode 100644
index 00000000..de2cde1a
--- /dev/null
+++ b/src/components/common/NumberBox.tsx
@@ -0,0 +1,25 @@
+interface NumberBoxProps {
+ ranking: number;
+ isVisible: boolean;
+}
+
+const NumberBox = ({ ranking, isVisible }: NumberBoxProps) => {
+ if (!isVisible) {
+ return null;
+ }
+
+ const backgroundColorType =
+ ranking === 1 || ranking === 2 || ranking === 3
+ ? "bg-red-500"
+ : "bg-gray-300";
+
+ return (
+
+ {isImageUrl ? (
+
+ ) : (
+
+ {img}
+
+ )}
+
+ + {category} +
+
+
+ );
+};
+
+export default NumberBox;
diff --git a/src/components/common/ProductCard.tsx b/src/components/common/ProductCard.tsx
new file mode 100644
index 00000000..bb7aa33f
--- /dev/null
+++ b/src/components/common/ProductCard.tsx
@@ -0,0 +1,42 @@
+import NumberBox from "./NumberBox";
+import { type Product } from "../../api/product";
+
+interface ProductCardProps {
+ ranking: number;
+ product: Product;
+ isNumVisible: boolean;
+ onClick: (productId: number) => void;
+}
+
+const ProductCard = ({
+ ranking,
+ product,
+ onClick,
+ isNumVisible,
+}: ProductCardProps) => {
+ return (
+
+
+ {ranking}
{" "} + onClick(product.id)}
+ >
+
+ );
+};
+
+export default ProductCard;
diff --git a/src/components/common/SmallButton.tsx b/src/components/common/SmallButton.tsx
new file mode 100644
index 00000000..e15d7ee6
--- /dev/null
+++ b/src/components/common/SmallButton.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { BUTTON_TYPES } from "../../constants/buttontypes";
+import type { ButtonConfig } from "../../types/button";
+
+interface SmallButtonProps {
+ type?: keyof typeof BUTTON_TYPES;
+ onClick?: (event: React.MouseEvent
+ 
+
+
+
+ + {product.name} +
++ {product.price.sellingPrice.toLocaleString()}원 +
+
+ {showSmallButton && (
+
+ );
+};
+
+export default TextBox;
diff --git a/src/constants/buttontypes.ts b/src/constants/buttontypes.ts
new file mode 100644
index 00000000..c02a953e
--- /dev/null
+++ b/src/constants/buttontypes.ts
@@ -0,0 +1,17 @@
+import { type ButtonTypes } from "../types/button";
+
+export const BUTTON_TYPES: ButtonTypes = {
+ PRIMARY: {
+ text: "확인",
+ className:
+ "bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md",
+ },
+ GIFT_FRIENDS: {
+ text: "+",
+ className: "bg-yellow-300 rounded-xl text-black w-10 h-10 text-xl",
+ },
+ NONE: {
+ text: "",
+ className: "hidden",
+ },
+};
diff --git a/src/contexts/AuthContext.ts b/src/contexts/AuthContext.ts
new file mode 100644
index 00000000..4ba9b564
--- /dev/null
+++ b/src/contexts/AuthContext.ts
@@ -0,0 +1,17 @@
+import { createContext } from "react";
+
+export interface User {
+ email: string;
+ name: string;
+}
+
+export interface AuthContextType {
+ user: User | null;
+ authToken: string | null;
+ login: (email: string, password: string) => Promise
+
+ {smallButtonChildren}
+
+
+ )}
+
+
+ {primaryText}
+ {secondaryText &&{secondaryText}
} +
+ 상품 정보를 불러오는 중...
+
+ );
+ }
- if (!productDetailData) {
+ if (error) {
+ return (
+
+ 오류: {error}
+
+ );
+ }
+
+ if (!productInfo) {
return (
- 상품 정보를 불러올 수 없습니다.
+ 상품 정보를 찾을 수 없습니다.
);
}
const handleReceiversUpdate = (receivers: ReceiverField[]) => {
setFinalReceivers(receivers);
-
console.log("최종 받는 사람 목록 업데이트됨:", receivers);
};
@@ -52,21 +111,28 @@ const GiftOrderPage = () => {
return (
-
);
};
+
export default GiftOrderPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 1d6c4a8e..3a5e7319 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,19 +1,16 @@
-import GiftThemes from "../components/GiftThemes";
-import RealtimeRanking from "../components/RealtimeRanking";
-import SelectFriends from "../components/SelectFriends";
-import Entertainment from "../components/EnterTainment";
+import Entertainment from "../components/HomeComponent/EntertainmentSection";
+import FriendSelectSection from "../components/HomeComponent/FriendSelectSection";
+import { SortOptionSection } from "../components/HomeComponent/SortOptionSection";
+import { ThemeSection } from "../components/HomeComponent/ThemeSection";
+
const HomePage = () => {
return (
-
- ({
+ mode: "onChange",
+ defaultValues: {
+ email: "",
+ password: "",
+ },
+ });
+
+ const [loginError, setLoginError] = useState(null);
useEffect(() => {
if (isLoggedIn) {
- const from = location.state?.from?.pathname || PATHS.MY_GIFTS;
- navigate(from, { replace: true });
+ navigate("/");
}
- }, [isLoggedIn, navigate, location.state]);
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- handleEmailBlur();
- handlePasswordBlur();
-
- if (isFormValid) {
- const isEmailFormatValid = !emailError;
- const isPasswordLengthValid = password.length >= 8;
+ }, [isLoggedIn, navigate]);
- const simulateLoginSuccess = isEmailFormatValid && isPasswordLengthValid;
+ const onSubmit: SubmitHandler = async (data) => {
+ setLoginError(null);
- if (simulateLoginSuccess) {
- alert(`로그인 성공! 이메일: ${email}`);
- console.log("로그인 성공!");
- login(email ?? "");
+ try {
+ await login(data.email, data.password);
+ navigate("/");
+ } catch (err) {
+ if (err instanceof Error) {
+ setLoginError(err.message);
} else {
- alert(
- "로그인 실패: 이메일 형식을 확인하거나 비밀번호를 8자리 이상 입력해주세요."
- );
- console.log("로그인 실패: 테스트 조건 불충족.");
+ setLoginError("로그인 중 알 수 없는 오류가 발생했습니다.");
}
- } else {
- console.log("유효성 검사 실패. 모든 필드를 올바르게 입력해주세요.");
-
- alert("입력 양식을 올바르게 작성해주세요.");
}
};
- if (isLoggedIn) {
- return null;
- }
-
return (
+
);
};
-
export default HomePage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 335eb44c..b81b5d2e 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,116 +1,124 @@
-import React, { useEffect } from "react";
-import useLoginForm from "../hooks/useLoginForm";
-import { useAuth } from "../context/AuthContext";
-import { useNavigate, useLocation } from "react-router-dom";
-import { PATHS } from "../constants/paths";
+import { useState, useEffect } from "react";
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { useAuth } from "../contexts/useAuth";
+import { useNavigate } from "react-router-dom";
+
+interface LoginFormInputs {
+ email: string;
+ password: string;
+}
const LoginPage = () => {
const { login, isLoggedIn } = useAuth();
const navigate = useNavigate();
- const location = useLocation();
const {
- email,
- password,
- emailError,
- passwordError,
- handleEmailChange,
- handleEmailBlur,
- handlePasswordChange,
- handlePasswordBlur,
- isFormValid,
- } = useLoginForm();
+ register,
+ handleSubmit,
+ formState: { errors, isValid, isSubmitting },
+ } = useForm