+
+ );
+};
+
+export default GiftRanking;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 000000000..a5ac3f587
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,30 @@
+import './styles/Header.css';
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { useAuth } from '@/context/AuthContext';
+
+
+
+const Header: React.FC = () => {
+ const {isLoggedIn} = useAuth();
+ return (
+
+
+ 실시간 급상승 선물랭킹
+
+ {Object.keys(CATEGORY_LABELS).map((category) => (
+
+ handleFilterChange(category as Category)}>
+
+ {CATEGORY_NAMES[category as Category]}
+
+ ))}
+
+ {Object.keys(SUBCATEGORY_LABELS).map((subCategory) => (
+
+ ))}
+
+
+ {displayedGifts.map((gift, index) => (
+
+
+
+ 
+
+ ))}
+ {index + 1}
+ BBQ
+{gift.name}
+{gift.price}
+
+
+ );
+};
+
+export default AccountPage;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 000000000..e6be85822
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,46 @@
+import './../styles/Home.css';
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import GiftRanking from '../components/GiftRanking';
+
+const Home: React.FC = () => {
+ const handleSelectFriend = () => {
+ alert('선물 받을 친구 선택하기');
+ };
+
+ const toUrlFriendly = (name: string) => {
+ return encodeURIComponent(name.toLowerCase().replace(/ /g, '-'));
+ };
+
+ const categories = ['생일', '졸업선물', '스몰럭셔리', '명품선물', '결혼/집들이', '따뜻한 선물', '가벼운선물', '팬심저격', '교환권', '건강/비타민', '과일/한우', '출산/키즈'];
+
+ return (
+ {username}님 안녕하세요!
+ +
+
+
+
+ {categories.map(category => (
+
+ 
+
+
+
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
new file mode 100644
index 000000000..3a1686871
--- /dev/null
+++ b/src/pages/LoginPage.tsx
@@ -0,0 +1,56 @@
+import './../styles/Login.css';
+
+import React, {useState } from 'react';
+import { useLocation,useNavigate } from 'react-router-dom';
+
+import { useAuth } from '@/context/AuthContext';
+
+interface Credentials {
+ id: string;
+ pw: string;
+}
+
+const LoginPage: React.FC = () => {
+ const [credentials, setCredentials] = useState
+ 
+
+
+ 선물 받을 친구를 선택해주세요.
+
+ {category}
+ + ))} +
+
+ AI가 추천하는 선물
+ 선물을 추천받고 싶은 친구를 선택해주세요.
+
+ 
+
+ );
+};
+
+export default LoginPage;
diff --git a/src/pages/ThemeHeader.tsx b/src/pages/ThemeHeader.tsx
new file mode 100644
index 000000000..775f3e639
--- /dev/null
+++ b/src/pages/ThemeHeader.tsx
@@ -0,0 +1,108 @@
+import '../styles/ThemeHeader.css';
+
+import React from 'react';
+
+interface ThemeInfo {
+ label: string;
+ title: string;
+ description: string;
+ backgroundColor: string;
+}
+
+const themeSettings: { [key: string]: ThemeInfo } = {
+ 생일: {
+ label: "생일",
+ title: "특별한 날, 특별한 선물",
+ description: "다양한 생일 선물 추천",
+ backgroundColor: "#fdd7e4",
+ },
+ 졸업선물: {
+ label: "졸업선물",
+ title: "새로운 시작을 축하해",
+ description: "졸업을 축하하는 완벽한 선물",
+ backgroundColor: "#e0e4cc",
+ },
+ 스몰럭셔리: {
+ label: "스몰럭셔리",
+ title: "당신을 위한 작은 사치",
+ description: "조금 더 특별한 순간을 선물하세요",
+ backgroundColor: "#ffefd5",
+ },
+ 명품선물: {
+ label: "명품선물",
+ title: "진정한 사치, 명품 선물",
+ description: "눈부신 아이템으로 특별한 마음을 전하세요",
+ backgroundColor: "#ffe4e1",
+ },
+ "결혼/집들이": {
+ label: "결혼/집들이",
+ title: "새로운 시작, 새 집의 행복",
+ description: "결혼과 집들이 선물로 딱 맞는 아이템",
+ backgroundColor: "#faf0e6",
+ },
+ "따뜻한-선물": {
+ label: "따뜻한 선물",
+ title: "마음까지 따뜻해지는 선물",
+ description: "추운 겨울, 마음까지 따뜻하게 할 선물을 찾아보세요",
+ backgroundColor: "#fdf5e6",
+ },
+ 가벼운선물: {
+ label: "가벼운선물",
+ title: "일상에서 즐기는 작은 즐거움",
+ description: "가볍게 즐길 수 있는 선물을 소개합니다",
+ backgroundColor: "#b0e0e6",
+ },
+ 팬심저격: {
+ label: "팬심저격",
+ title: "팬심을 저격할 선물",
+ description: "좋아하는 스타를 위한 최고의 선물",
+ backgroundColor: "#db7093",
+ },
+ 교환권: {
+ label: "교환권",
+ title: "다양한 선택의 기회",
+ description: "선물받은 이가 원하는 것을 직접 고를 수 있는 기회를 제공하세요",
+ backgroundColor: "#98fb98",
+ },
+ "건강/비타민": {
+ label: "건강/비타민",
+ title: "건강을 선물하세요",
+ description: "건강과 웰빙을 위한 최적의 선물",
+ backgroundColor: "#3cb371",
+ },
+ "과일/한우": {
+ label: "과일/한우",
+ title: "신선한 맛의 선물",
+ description: "질 좋은 과일과 한우를 선물하세요",
+ backgroundColor: "#ff6347",
+ },
+ "출산/키즈": {
+ label: "출산/키즈",
+ title: "아이들을 위한 선물",
+ description: "아이들의 성장에 도움을 주는 선물",
+ backgroundColor: "#ff69b4",
+ }
+};
+interface ThemeHeaderProps {
+ themeKey: string;
+ }
+ const ThemeHeader: React.FC
+
+
+
+
+
+ );
+ };
+
+ export default ThemeHeader;
\ No newline at end of file
diff --git a/src/pages/ThemePage.tsx b/src/pages/ThemePage.tsx
new file mode 100644
index 000000000..61e4d51e4
--- /dev/null
+++ b/src/pages/ThemePage.tsx
@@ -0,0 +1,48 @@
+import '../styles/ThemePage.css';
+
+import React from 'react';
+import { Navigate, useParams } from 'react-router-dom';
+
+import ThemeHeader from './ThemeHeader';
+
+interface Item {
+ id: number;
+ name: string;
+ image: string;
+ price: string;
+}
+
+const items: Item[] = Array.from({ length: 12 }, (_, i) => ({
+ id: i + 1,
+ name: 'BBQ 양념치킨+크림치즈볼+콜라 1.25L',
+ image: 'https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg',
+ price: '29000원'
+}));
+
+const ThemePage: React.FC = () => {
+ const { themeKey } = useParams<{ themeKey?: string }>();
+
+ if (!themeKey) {
+ return
+
+ {theme.label}
+{theme.title}
+{theme.description}
+
+
+ );
+};
+
+export default ThemePage;
diff --git a/src/styles/Account.css b/src/styles/Account.css
new file mode 100644
index 000000000..d83ecdd22
--- /dev/null
+++ b/src/styles/Account.css
@@ -0,0 +1,17 @@
+.account-container {
+ margin : 80px auto;
+ text-align: center;
+}
+.account-container h1 {
+ font : 36px "Malgun Gothic";
+ font-weight: bold;
+ margin-bottom: 64px;
+}
+.account-container button {
+ width : 200px;
+ height : 40px;
+ background-color: #444444;
+ color : #ffffff;
+ font : 15px "Malgun Gothic";
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/styles/Home.css b/src/styles/Home.css
new file mode 100644
index 000000000..b6bd290f8
--- /dev/null
+++ b/src/styles/Home.css
@@ -0,0 +1,77 @@
+.home-container {
+ width: 100%;
+ margin: 0 auto;
+ box-sizing: border-box;
+ }
+ .select-section {
+ background-color: #fafafa;
+ height : 76px;
+ width : 100%;
+ padding : 40px 0px;
+ }
+ .sub {
+ display : flex;
+ align-items: center;
+ max-width: 1024px;
+ margin:0 auto;
+ }
+
+ .select-section img {
+ width: 70px;
+ height : 70px;
+ border-radius: 40%;
+ cursor: pointer;
+ }
+
+ .select-section h2 {
+ color: #333333;
+ font: 28px "Malgun Gothic";
+ padding : 0px 0px 0px 16px;
+ }
+
+ .category-section {
+ display: flex;
+ max-width: 1024px;
+ margin : 0 auto;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ margin-bottom: 20px;
+ padding : 45px 52px 23px;
+ }
+
+ .category-item {
+ text-decoration: none;
+ color : black;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding : 25px 35px 24px;
+ text-align: center;
+ }
+ .category-item img {
+ border-radius: 40%;
+ width : 90px;
+ }
+
+ .banner {
+ background-color: #FFeb00;
+ padding: 16px;
+ font-size: 24px;
+ font-weight: bold;
+ width : 1024px;
+ margin : 0 auto;
+ text-align: center;
+ border-radius: 10px;
+ }
+ .sub-banner {
+ color : #00000066;
+ font : 13px "Malgun Gothic";
+ padding : 0px 0px 3px;
+ }
+ .main-banner {
+ color : #000000;
+ font : 18px "Malgun Gothic";
+ font-weight: bold;
+ }
+
+
\ No newline at end of file
diff --git a/src/styles/Login.css b/src/styles/Login.css
new file mode 100644
index 000000000..fac0f783a
--- /dev/null
+++ b/src/styles/Login.css
@@ -0,0 +1,63 @@
+.login-container {
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ width: 580px;
+ margin: 150px auto;
+ }
+ .login-container img {
+ width: 88px;
+ }
+
+ .login-sub-container {
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ width: 400px;
+ height: auto;
+ border: 1px solid #00000033;
+ padding: 60px 52px;
+ }
+
+ .login-form {
+ width: 100%;
+ }
+
+ .input-container {
+ position: relative;
+ margin-bottom: 20px;
+ width: 100%;
+ }
+
+ .input-container input {
+ width: 100%;
+ border: none;
+ border-bottom: 1px solid #ccc;
+ padding: 10px 0;
+ font-size: 16px;
+ background: none;
+ outline: none;
+ transition: border-color 0.3s;
+ }
+
+ .input-container input:focus {
+ border-bottom: 2px solid #000;
+ }
+
+ .login-button {
+ width: 100%;
+ padding: 15px;
+ background-color: #f7e600;
+ border: none;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 16px;
+ margin-top: 20px;
+ transition: background-color 0.3s;
+ }
+
+ .login-button:hover {
+ background-color: #ffd633;
+ }
+
\ No newline at end of file
diff --git a/src/styles/ThemeHeader.css b/src/styles/ThemeHeader.css
new file mode 100644
index 000000000..268986bc6
--- /dev/null
+++ b/src/styles/ThemeHeader.css
@@ -0,0 +1,25 @@
+.container {
+ color: #333;
+}
+.sub-container {
+ max-width: 1024px;
+ margin: 0 auto;
+ padding : 50px 20px;
+ text-align: left;
+}
+.label {
+ color : #ffffffb3;
+ font : 20px "Malgun Gothic";
+ font-weight: bold;
+}
+.title {
+ color : #ffffff;
+ font : 30px "Malgun Gothic";
+ padding : 12px 0px 0px;
+ font-weight: bold;
+}
+.description {
+ color : #ffffff8c;
+ font : 24px "Malgun Gothic";
+ padding : 12px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/styles/ThemePage.css b/src/styles/ThemePage.css
new file mode 100644
index 000000000..6d580e0e4
--- /dev/null
+++ b/src/styles/ThemePage.css
@@ -0,0 +1,57 @@
+.container {
+ width: 100%;
+}
+
+.header {
+ color: white;
+ text-align: center;
+ width: 100%;
+}
+
+.items-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ padding: 20px 0;
+ max-width: 1024px;
+ margin: 0 auto;
+}
+
+.item-card {
+ width: 23%;
+ margin: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.item-image {
+ width: 100%;
+ height: auto;
+ max-height: 300px;
+ object-fit: cover;
+}
+
+.item-info {
+ padding: 15px;
+ text-align: left;
+ width: 100%;
+}
+
+.item-store {
+ color : #999999;
+ font : 14px "Malgun Gothic";
+ margin : 0px 0px 4px;
+}
+
+.item-title {
+ font : 14px "Malgun Gothic";
+ color: #333333;
+}
+
+.item-price {
+ color: #222222;
+ font : 20px "Malgun Gothic";
+ padding : 8px 0px 0px;
+ font-weight: bold;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 08acda01d..76dbbe313 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,9 +21,10 @@
"incremental": true,
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["./src/*"],
+ "react-router-dom": ["node_modules/@types/react-router-dom"]
}
},
- "include": ["src"],
+ "include": ["src/**/*"],
"exclude": ["node_modules", "build", "public"]
}
+ {items.map((item, index) => (
+
+
+ 
+
+ ))}
+
+
+ BBQ
+{item.name}
+{item.price}
+