{name}
+{price}원
+ +
+
+
+ 일상의 모든 물건을{(isMobile || isDesktop) &&
+
+ 구경하러 가기
+
+
+ {children}
+ - {children}
{children}
+ -
+
- + + + {pages.map((page) => ( +
- + + + ))} +
- + + +
+
+ 간편 로그인하기
+
+ 
+ 
+
+ );
+}
diff --git a/src/components/submit-button.module.css b/src/components/submit-button.module.css
new file mode 100644
index 00000000..14db0396
--- /dev/null
+++ b/src/components/submit-button.module.css
@@ -0,0 +1,12 @@
+.submit-button {
+ width: 100%;
+ padding: 12px 124px;
+ background-color: var(--gray-400);
+ border: none;
+ border-radius: 40px;
+ color: var(--gray-100);
+}
+
+.submit-button:hover {
+ cursor: pointer;
+}
diff --git a/src/components/submit-button.tsx b/src/components/submit-button.tsx
new file mode 100644
index 00000000..d18472de
--- /dev/null
+++ b/src/components/submit-button.tsx
@@ -0,0 +1,16 @@
+import styles from "./submit-button.module.css";
+
+interface SubmitButtonProps {
+ children: string;
+}
+
+export default function SubmitButton({ children }: SubmitButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/svg-components/arrow-svg.tsx b/src/components/svg-components/arrow-svg.tsx
new file mode 100644
index 00000000..6dd7578d
--- /dev/null
+++ b/src/components/svg-components/arrow-svg.tsx
@@ -0,0 +1,40 @@
+interface ArrowSvgProps {
+ direction: "right" | "left";
+ disabled?: boolean;
+}
+
+export default function ArrowSvg({
+ direction,
+ disabled = false,
+}: ArrowSvgProps) {
+ const arrowColor = disabled ? "#9CA3AF" : "#4B5563";
+
+ const groupTransform =
+ direction === "right" ? "rotate(180 20 20)" : undefined;
+
+ return (
+
+ );
+}
diff --git a/src/constants/bannerData.ts b/src/constants/bannerData.ts
new file mode 100644
index 00000000..8eb4b210
--- /dev/null
+++ b/src/constants/bannerData.ts
@@ -0,0 +1,31 @@
+import bannerHome01 from "@assets/images/banner-home-01.png";
+import bannerHome02 from "@assets/images/banner-home-02.png";
+import bannerHome03 from "@assets/images/banner-home-03.png";
+
+export interface Banner {
+ image: string;
+ keyword: string;
+ title: string;
+ description: string;
+}
+
+export const bannerData: Banner[] = [
+ {
+ image: bannerHome01,
+ keyword: "Hot item",
+ title: "인기 상품을 확인해보세요",
+ description: "가장 HOT한 중고거래 물품을\n판다 마켓에서 확인해보세요",
+ },
+ {
+ image: bannerHome02,
+ keyword: "Search",
+ title: "구매를 원하는 상품을 검색하세요",
+ description: "구매하고 싶은 물품은 검색해서\n쉽게 찾아보세요",
+ },
+ {
+ image: bannerHome03,
+ keyword: "register",
+ title: "판매를 원하는 상품을 등록하세요",
+ description: "어떤 물건이든 판매하고 싶은 상품을\n쉽게 등록하세요",
+ },
+];
diff --git a/src/constants/server-url.ts b/src/constants/server-url.ts
new file mode 100644
index 00000000..551c3d80
--- /dev/null
+++ b/src/constants/server-url.ts
@@ -0,0 +1,3 @@
+const SERVER_URL = "https://panda-market-api.vercel.app";
+
+export default SERVER_URL;
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..82107cb1
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+const useMediaQuery = (query: string) => {
+ const [matches, setMatches] = useState(window.matchMedia(query).matches);
+
+ useEffect(() => {
+ const mediaQueryList = window.matchMedia(query);
+ const documentChangeHandler = () => setMatches(mediaQueryList.matches);
+ mediaQueryList.addEventListener("change", documentChangeHandler);
+ return () => {
+ mediaQueryList.removeEventListener("change", documentChangeHandler);
+ };
+ }, [query]);
+
+ return matches;
+};
+
+export default useMediaQuery;
diff --git a/src/hooks/useResponsivePageSize.ts b/src/hooks/useResponsivePageSize.ts
new file mode 100644
index 00000000..788bd00f
--- /dev/null
+++ b/src/hooks/useResponsivePageSize.ts
@@ -0,0 +1,49 @@
+import useMediaQuery from "@/hooks/useMediaQuery";
+import { useEffect, useState } from "react";
+
+export enum DefaultPageSize {
+ mobile = 1,
+ tablet = 2,
+ desktop = 4,
+}
+
+export interface PageSizeConfig {
+ mobile: number;
+ tablet: number;
+ desktop: number;
+}
+
+export default function useResponsivePageSize(
+ pageSizeConfig: PageSizeConfig = DefaultPageSize, // 기본값으로 DefaultPageSize 사용
+ defaultSizeKey: keyof PageSizeConfig = "desktop" // 초기 렌더링 시 사용할 키
+) {
+ const isMobile = useMediaQuery("(max-width: 767px)");
+ const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
+
+ // useMediaQuery가 안정화되었는지 확인하는 상태 (선택적)
+ const [isHydrated, setIsHydrated] = useState(false);
+
+ const [pageSize, setPageSize] = useState
+ 
+
+ );
+}
diff --git a/src/pages/home/home-footer/home-footer.tsx b/src/pages/home/home-footer/home-footer.tsx
new file mode 100644
index 00000000..126af024
--- /dev/null
+++ b/src/pages/home/home-footer/home-footer.tsx
@@ -0,0 +1,12 @@
+import styles from "../styles/home-footer.module.css";
+import HomeFooterTop from "./home-footer-top";
+import HomeFooterBottom from "./home-footer-bottom";
+
+export default function HomeFooter() {
+ return (
+
+ );
+}
diff --git a/src/pages/home/home-header/home-header.tsx b/src/pages/home/home-header/home-header.tsx
new file mode 100644
index 00000000..fcce11a2
--- /dev/null
+++ b/src/pages/home/home-header/home-header.tsx
@@ -0,0 +1,16 @@
+import Logo from "@/components/logo";
+import styles from "../styles/home-header.module.css";
+import HomeLoginButton from "./home-login-button";
+
+interface HomeHeaderProps {
+ isMobile: boolean;
+}
+
+export default function HomeHeader({ isMobile }: HomeHeaderProps) {
+ return (
+
+ 믿을 수 있는
+
+ 판다마켓 중고 거래
+
+
+ + {keyword} +
++ {title} +
++ {description} +
+베스트 상품
+-
+ {products.map((product) => (
+
-
+
+
+ ))}
+
+
+ 전체 상품
+ {!isMobile && ( +
+ 
+
+
+ )}
+
+ 상품 등록하기
+
+
+ {isMobile && (
+
+
+
+
+
+ )}
+ -
+ {products.map((product) => (
+
-
+
+
+ ))}
+