+ 
+
+ {category}
+
+ );
+};
diff --git a/frontend/src/components/HomeComponent/EntertainmentSection.tsx b/frontend/src/components/HomeComponent/EntertainmentSection.tsx
new file mode 100644
index 00000000..1ee4036a
--- /dev/null
+++ b/frontend/src/components/HomeComponent/EntertainmentSection.tsx
@@ -0,0 +1,18 @@
+import { TextBox } from "../common/TextBox";
+
+const Entertainment = () => {
+ return (
+
+
+ );
+};
+
+export default Entertainment;
diff --git a/frontend/src/components/HomeComponent/FriendSelectSection.tsx b/frontend/src/components/HomeComponent/FriendSelectSection.tsx
new file mode 100644
index 00000000..051bc10c
--- /dev/null
+++ b/frontend/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/frontend/src/components/HomeComponent/RankingProductList.tsx b/frontend/src/components/HomeComponent/RankingProductList.tsx
new file mode 100644
index 00000000..b64a3a2d
--- /dev/null
+++ b/frontend/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/frontend/src/components/HomeComponent/SortOptionSection.tsx b/frontend/src/components/HomeComponent/SortOptionSection.tsx
new file mode 100644
index 00000000..e086e4d8
--- /dev/null
+++ b/frontend/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/frontend/src/components/HomeComponent/ThemeSection.tsx b/frontend/src/components/HomeComponent/ThemeSection.tsx
new file mode 100644
index 00000000..02bf77a2
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/Cards/InputCard.tsx b/frontend/src/components/OrderComponent/Cards/InputCard.tsx
new file mode 100644
index 00000000..357ca37e
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/Cards/ProductDetailCard.tsx b/frontend/src/components/OrderComponent/Cards/ProductDetailCard.tsx
new file mode 100644
index 00000000..4e813128
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/Cards/ThankCard.tsx b/frontend/src/components/OrderComponent/Cards/ThankCard.tsx
new file mode 100644
index 00000000..c9fb2335
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/OrderConfirmComponent/OrderButton.tsx b/frontend/src/components/OrderComponent/OrderConfirmComponent/OrderButton.tsx
new file mode 100644
index 00000000..d2215d97
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/OrderConfirmSection.tsx b/frontend/src/components/OrderComponent/OrderConfirmSection.tsx
new file mode 100644
index 00000000..ce13bd2e
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverDisplayTable.tsx b/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverDisplayTable.tsx
new file mode 100644
index 00000000..1923281c
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFieldItem.tsx b/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFieldItem.tsx
new file mode 100644
index 00000000..338c95ac
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFormActions.tsx b/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFormActions.tsx
new file mode 100644
index 00000000..a4b6f339
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFormHeader.tsx b/frontend/src/components/OrderComponent/ReceiverComponent/ReceiverFormHeader.tsx
new file mode 100644
index 00000000..8c68dd7f
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ReceiverSection.tsx b/frontend/src/components/OrderComponent/ReceiverSection.tsx
new file mode 100644
index 00000000..71f8fd9b
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/SenderSection.tsx b/frontend/src/components/OrderComponent/SenderSection.tsx
new file mode 100644
index 00000000..187c0815
--- /dev/null
+++ b/frontend/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/frontend/src/components/OrderComponent/ThanksCardSlideSection.tsx b/frontend/src/components/OrderComponent/ThanksCardSlideSection.tsx
new file mode 100644
index 00000000..7352e82a
--- /dev/null
+++ b/frontend/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/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx
new file mode 100644
index 00000000..97ed0cc6
--- /dev/null
+++ b/frontend/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/frontend/src/components/common/ImgBox.tsx b/frontend/src/components/common/ImgBox.tsx
new file mode 100644
index 00000000..a5bcef35
--- /dev/null
+++ b/frontend/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/frontend/src/components/common/NumberBox.tsx b/frontend/src/components/common/NumberBox.tsx
new file mode 100644
index 00000000..de2cde1a
--- /dev/null
+++ b/frontend/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/frontend/src/components/common/ProductCard.tsx b/frontend/src/components/common/ProductCard.tsx
new file mode 100644
index 00000000..bb7aa33f
--- /dev/null
+++ b/frontend/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/frontend/src/components/common/SmallButton.tsx b/frontend/src/components/common/SmallButton.tsx
new file mode 100644
index 00000000..e15d7ee6
--- /dev/null
+++ b/frontend/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/frontend/src/constants/buttontypes.ts b/frontend/src/constants/buttontypes.ts
new file mode 100644
index 00000000..c02a953e
--- /dev/null
+++ b/frontend/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/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
new file mode 100644
index 00000000..40adbd6f
--- /dev/null
+++ b/frontend/src/constants/message.ts
@@ -0,0 +1,7 @@
+export const ERROR_MESSAGES = {
+ REQUIRED_MESSAGE: "메시지를 입력해주세요.",
+ REQUIRED_NAME: "이름을 입력해주세요.",
+ INVALID_PHONE_NUMBER: "올바른 전화번호 형식이 아닙니다.",
+ MIN_QUANTITY: "구매 수량은 1개 이상이어야 합니다.",
+ DEFAULT_THANKS_MESSAGE: "감사 메시지를 입력하세요",
+};
diff --git a/frontend/src/constants/paths.ts b/frontend/src/constants/paths.ts
new file mode 100644
index 00000000..34a86329
--- /dev/null
+++ b/frontend/src/constants/paths.ts
@@ -0,0 +1,9 @@
+export const PATHS = {
+ HOME: "/",
+ RANKING: "/ranking",
+ MY_GIFTS: "/my-gifts",
+ NOT_FOUND: "*",
+ LOGIN: "/login",
+ PROFILE: "/profile",
+ ORDER: "/order/:id",
+};
diff --git a/frontend/src/constants/sortoptions.ts b/frontend/src/constants/sortoptions.ts
new file mode 100644
index 00000000..871d2d30
--- /dev/null
+++ b/frontend/src/constants/sortoptions.ts
@@ -0,0 +1,3 @@
+export const SORTOPTIONS = ["받고 싶어한", "선물 받은", "선물 보낸"] as const;
+
+export type SortOptionType = (typeof SORTOPTIONS)[number];
diff --git a/frontend/src/constants/tabs.ts b/frontend/src/constants/tabs.ts
new file mode 100644
index 00000000..74a5e927
--- /dev/null
+++ b/frontend/src/constants/tabs.ts
@@ -0,0 +1,15 @@
+export const tabs = [
+ "전체",
+ "디지털/가전",
+ "패션/잡화",
+ "뷰티/향수",
+ "상품권",
+ "가구/인테리어",
+ "스포츠/레저",
+ "도서/음악/문구",
+ "유아동",
+ "반려동물용품",
+ "꽃/식물",
+] as const;
+
+export type TabType = (typeof tabs)[number];
diff --git a/frontend/src/contexts/AuthContext.ts b/frontend/src/contexts/AuthContext.ts
new file mode 100644
index 00000000..4ba9b564
--- /dev/null
+++ b/frontend/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 (error) {
+ return (
+
+ 오류: {error}
+
+ );
+ }
+
+ if (!productInfo) {
+ return (
+
+ 상품 정보를 찾을 수 없습니다.
+
+ );
+ }
+
+ const handleReceiversUpdate = (receivers: ReceiverField[]) => {
+ setFinalReceivers(receivers);
+ console.log("최종 받는 사람 목록 업데이트됨:", receivers);
+ };
+
+ const handleReceiverCancel = () => {
+ console.log("Receiver 컴포넌트에서 취소되었습니다.");
+ };
+
+ return (
+
+
+ );
+};
+
+export default GiftOrderPage;
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
new file mode 100644
index 00000000..3a5e7319
--- /dev/null
+++ b/frontend/src/pages/HomePage.tsx
@@ -0,0 +1,16 @@
+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 (
+
+
+ );
+};
+export default HomePage;
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..b81b5d2e
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,128 @@
+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 {
+ register,
+ handleSubmit,
+ formState: { errors, isValid, isSubmitting },
+ } = useForm
+
+ );
+};
+
+export default LoginPage;
diff --git a/frontend/src/pages/MyPage.tsx b/frontend/src/pages/MyPage.tsx
new file mode 100644
index 00000000..9639aecc
--- /dev/null
+++ b/frontend/src/pages/MyPage.tsx
@@ -0,0 +1,56 @@
+// src/pages/MyPage.tsx
+import { useEffect } from "react";
+import { useAuth } from "../contexts/useAuth"; // useAuth 훅 임포트
+import { useNavigate } from "react-router-dom"; // 리다이렉션을 위해
+
+export const MyPage = () => {
+ const { user, logout, isLoggedIn } = useAuth(); // useAuth 훅에서 user, logout, isLoggedIn 가져오기
+ const navigate = useNavigate();
+
+ // 로그인 상태가 아니라면 로그인 페이지로 리다이렉트
+ useEffect(() => {
+ if (!isLoggedIn) {
+ navigate("/login");
+ }
+ }, [isLoggedIn, navigate]);
+
+ // 이메일에서 @kakao.com 전의 닉네임 추출
+ const nickname = user?.email ? user.email.split("@")[0] : "사용자";
+
+ // 로그아웃 버튼 클릭 핸들러
+ const handleLogout = () => {
+ logout(); // AuthContext의 logout 함수 호출
+ navigate("/login"); // 로그아웃 후 로그인 페이지로 리다이렉트
+ };
+
+ // 로그인되지 않은 상태이거나 user 정보가 아직 로드되지 않았다면 아무것도 렌더링하지 않음 (또는 로딩 스피너)
+ if (!isLoggedIn || !user) {
+ return (
+ + kakao +
+ + +
+
+ );
+ }
+
+ return (
+ 로그인 정보 로딩 중...
+
+
+ );
+};
+
+export default MyPage;
diff --git a/frontend/src/pages/ThemeProductPage.tsx b/frontend/src/pages/ThemeProductPage.tsx
new file mode 100644
index 00000000..c5267ee1
--- /dev/null
+++ b/frontend/src/pages/ThemeProductPage.tsx
@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+ getThemeInfo,
+ getThemeProducts,
+ type ThemeDetail,
+ type ThemeProduct,
+} from "../api/theme";
+import ProductCard from "../components/common/ProductCard";
+
+export const ThemeProductsPage = () => {
+ const { themeId } = useParams<{ themeId: string }>();
+ const navigate = useNavigate();
+
+ const [themeDetail, setThemeDetail] = useState마이 페이지
+
+
+ {nickname}님 안녕하세요!
+ ++ 이메일 주소는 {user.email}입니다. +
+ + +테마 및 상품 정보를 불러오는 중...
+ );
+ }
+
+ if (error) {
+ return 오류: {error}
;
+ }
+
+ if (!themeDetail) {
+ return (
+ 테마 정보를 찾을 수 없습니다.
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/frontend/src/schemas/receiverSchema.ts b/frontend/src/schemas/receiverSchema.ts
new file mode 100644
index 00000000..92f1f879
--- /dev/null
+++ b/frontend/src/schemas/receiverSchema.ts
@@ -0,0 +1,20 @@
+import { z } from "zod";
+
+export const receiverSchema = z.object({
+ name: z.string().trim().min(1, { message: "이름을 입력해주세요." }),
+ phone: z
+ .string()
+ .trim()
+ .regex(/^\d{10,11}$/, { message: "올바른 전화번호 형식이 아니에요." }),
+ quantity: z.number().min(1).int().nonnegative(),
+});
+
+export const receiversFormSchema = z.object({
+ receivers: z
+ .array(receiverSchema)
+ .min(1, { message: "받는 사람을 추가해주세요." })
+ .max(10, { message: "최대 10명까지 추가할 수 있습니다." }),
+});
+
+export type ReceiverField = z.infer
+
+
+ + {themeDetail.title || themeDetail.name} +
+{themeDetail.description}
++ "{themeDetail.name}" 테마 상품 +
+ {products.length === 0 && !loading && ( ++ 이 테마에는 현재 상품이 없습니다. +
+ )} +
+ {products.map((product) => (
+ handleProductClick(product.id)}
+ isNumVisible={isNumVisible}
+ />
+ ))}
+
+
+ {hasMore && (
+
+
+
+ )}
+ Vite + React
-
-
-
-
- Edit src/App.tsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
- - ) -} - -export default App diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 08a3ac9e..00000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index 8b0f57b9..00000000 --- a/vite.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' - -// https://vite.dev/config/ -export default defineConfig({ - plugins: [react()], -})