From 26bf7d8dfbd7f1ac3754e8874e257fec8e0d5860 Mon Sep 17 00:00:00 2001 From: Minjee Son <104430030+iammminzzy@users.noreply.github.com> Date: Wed, 4 Sep 2024 19:41:50 +0100 Subject: [PATCH] add: basic setting & logo components, error component --- .env.example | 7 -- app/error.tsx | 13 +++- app/globals.css | 5 ++ app/layout.tsx | 13 +--- app/page.tsx | 52 ++++++++++++-- components/icons/logo.tsx | 105 +++++++++++++++++++++++++++-- components/layout/navbar/index.tsx | 69 +++++++------------ components/price-boxes.tsx | 29 ++++++++ package.json | 3 + pnpm-lock.yaml | 70 +++++++++++++++++++ tailwind.config.js | 6 +- 11 files changed, 295 insertions(+), 77 deletions(-) delete mode 100644 .env.example create mode 100644 components/price-boxes.tsx diff --git a/.env.example b/.env.example deleted file mode 100644 index 9ff0463db..000000000 --- a/.env.example +++ /dev/null @@ -1,7 +0,0 @@ -COMPANY_NAME="Vercel Inc." -TWITTER_CREATOR="@vercel" -TWITTER_SITE="https://nextjs.org/commerce" -SITE_NAME="Next.js Commerce" -SHOPIFY_REVALIDATION_SECRET="" -SHOPIFY_STOREFRONT_ACCESS_TOKEN="" -SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com" diff --git a/app/error.tsx b/app/error.tsx index 80b32a42a..f36ec80d7 100644 --- a/app/error.tsx +++ b/app/error.tsx @@ -1,6 +1,15 @@ 'use client'; -export default function Error({ reset }: { reset: () => void }) { +import { useRouter } from 'next/navigation'; + +export default function Error({ resetAction }: { resetAction?: () => void }) { + const router = useRouter(); + + // '/'로 이동하는 defaultReset 함수 + const defaultReset = () => { + router.push('/'); // 메인 페이지로 이동 + }; + return (

Oh no!

@@ -10,7 +19,7 @@ export default function Error({ reset }: { reset: () => void }) {

diff --git a/app/globals.css b/app/globals.css index 0a6d36768..5a18d5ade 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; @@ -14,6 +15,10 @@ } } +body { + @apply font-baskerville; +} + a, input, button { diff --git a/app/layout.tsx b/app/layout.tsx index 3b09ab7e4..048087f9f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,8 @@ -import { CartProvider } from 'components/cart/cart-context'; -import { Navbar } from 'components/layout/navbar'; -import { WelcomeToast } from 'components/welcome-toast'; import { GeistSans } from 'geist/font/sans'; import { getCart } from 'lib/shopify'; import { ensureStartsWith } from 'lib/utils'; import { cookies } from 'next/headers'; import { ReactNode } from 'react'; -import { Toaster } from 'sonner'; import './globals.css'; const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env; @@ -44,14 +40,7 @@ export default async function RootLayout({ children }: { children: ReactNode }) return ( - - -
- {children} - - -
- +
{children}
); diff --git a/app/page.tsx b/app/page.tsx index 7d407ede8..2008ab9bc 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,12 @@ -import { Carousel } from 'components/carousel'; -import { ThreeItemGrid } from 'components/grid/three-items'; +import Error from 'app/error'; import Footer from 'components/layout/footer'; +import { Navbar } from 'components/layout/navbar'; +import Search from 'components/layout/navbar/search'; +import PriceBoxes from 'components/price-boxes'; +import { getCollectionProducts } from 'lib/shopify'; +import Image from 'next/image'; +//Todo: change to proper metadata export const metadata = { description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.', openGraph: { @@ -9,11 +14,48 @@ export const metadata = { } }; -export default function HomePage() { +export default async function HomePage() { + const products = await getCollectionProducts({ collection: 'landing' }); + + //Todo: change to proper error handling + if (!products[0]) return ; + return ( <> - - +
+ +
+ {products[0].featuredImage.altText +
+
+

{products[0].title}

+ Read more + +
+
+
+ +
+ Filter by + + +
+