fix(global): components, minor style fixes, font apply trial

juunie-roh · Dec 14, 2023 · a6ffff6 · a6ffff6
1 parent 5100951
commit a6ffff6
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "setting-up-next",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/NextLinkBox.tsx b/src/components/NextLinkBox.tsx
@@ -0,0 +1,26 @@
+type INextLinkBoxProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+const NextLinkBox = (props: INextLinkBoxProps) => {
+  return (
+    <a
+      href={props.href}
+      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <h2 className="mb-3 text-2xl font-semibold">
+        {`${props.title} `}
+        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+          -&gt;
+        </span>
+      </h2>
+      <p className="m-0 max-w-[30ch] text-sm opacity-50">{props.description}</p>
+    </a>
+  );
+};
+
+export { NextLinkBox };
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1,3 @@
+import { NextLinkBox } from './NextLinkBox';
+
+export { NextLinkBox };
diff --git a/src/layouts/Meta.tsx b/src/layouts/Meta.tsx
@@ -19,6 +19,9 @@ const Meta = (props: IMetaProps) => (
         key="viewport"
       />
       <link rel="icon" href="/favicon.ico" key="favicon" />
+      {/* <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='' />
+      <link href="https://fonts.googleapis.com/css2?family=Antonio:wght@700&display=swap" rel="stylesheet" /> */}
     </Head>
     <NextSeo
       title={props.title}

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,8 +1,33 @@
 import Image from 'next/image';
 
+import { NextLinkBox } from '@/components';
 import { Meta } from '@/layouts/Meta';
 import { DefaultPage, Main } from '@/templates';
 
+const linkBoxData = [
+  {
+    href: 'https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app',
+    title: 'Docs',
+    description: 'Find in-depth information about Next.js features and API.',
+  },
+  {
+    href: 'https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app',
+    title: 'Learn',
+    description: 'Learn about Next.js in an interactive course with quizzes!',
+  },
+  {
+    href: 'https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app',
+    title: 'Templates',
+    description: 'Explore starter templates for Next.js.',
+  },
+  {
+    href: 'https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app',
+    title: 'Deploy',
+    description:
+      'Instantly deploy your Next.js site to a shareable URL with Vercel.',
+  },
+];
+
 const About = () => (
   <Main
     meta={
@@ -25,70 +50,16 @@ const About = () => (
         />
       </div>
       <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+        {linkBoxData.map((data) => {
+          return (
+            <NextLinkBox
+              href={data.href}
+              title={data.title}
+              description={data.description}
+              key={data.title}
+            />
+          );
+        })}
       </div>
     </DefaultPage>
   </Main>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -30,6 +30,9 @@ const Index = () => (
         ratione.
       </p>
     </DefaultPage>
+    <DefaultPage>
+      <p>Testing Div</p>
+    </DefaultPage>
   </Main>
 );
 

diff --git a/src/templates/DefaultPage.tsx b/src/templates/DefaultPage.tsx
@@ -6,7 +6,7 @@ type IDefaultPageProps = {
 
 const DefaultPage = (props: IDefaultPageProps) => {
   return (
-    <div className="flex w-full flex-col items-center justify-between">
+    <div className="flex w-full flex-col items-center justify-between pb-8 lg:pb-12">
       {props.children}
     </div>
   );

diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -24,7 +24,7 @@ const Main = (props: IMainProps) => {
       {props.meta}
 
       <div className="mx-auto">
-        <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 p-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:p-8">
+        <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 px-8 py-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:px-12 lg:py-8">
           <div className="flex items-baseline gap-4">
             <h1 className="text-xl font-bold text-gray-900 lg:text-3xl">
               <Link href="/">{AppConfig.title}</Link>
@@ -66,7 +66,7 @@ const Main = (props: IMainProps) => {
             />
           </a>
         </header>
-        <main className="flex min-h-screen p-8 pt-32 lg:p-12 lg:pt-48">
+        <main className="flex min-h-screen flex-col p-8 pt-32 lg:p-12 lg:pt-48">
           {props.children}
         </main>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,6 +17,11 @@ module.exports = {
     },
     extend: {
       colors: {
+        backgroundImage: {
+          'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+          'gradient-conic':
+            'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        },
         gray: {
           100: '#f7fafc',
           200: '#edf2f7',
@@ -40,11 +45,9 @@ module.exports = {
           900: '#2a4365',
         },
       },
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
+      // fontFamily: {
+      //   'antonio': ['Antonio', 'sans-serif'],
+      // },
     },
   },
   plugins: [],