기본 UI 추가

hmu332233 · Mar 12, 2022 · ca6696e · ca6696e · vercel · Mar 12, 2022
1 parent 8a6a1e6
commit ca6696e
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 18 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+function Footer() {
+  return (
+    <footer className="mt-16 border-t">
+      <div className="container flex py-4 text-sm">
+        <div>
+          © 2022{' '}
+          <a
+            className="link link-hover"
+            href="https://github.com/hmu332233"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Minung Han
+          </a>
+        </div>
+        <div className="ml-auto">
+          <a
+            href="https://github.com/hmu332233/moon.svg"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <svg
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+
+export default Footer;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Header() {
+  return (
+    <header className="flex justify-center py-4">
+      <h1 className="text-4xl font-bold text-base-content mx-auto">Moon.<span className="text-info">svg</span></h1>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,22 +1,45 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import { useState } from 'react';
+import Head from 'next/head';
+
+import Header from 'components/Header';
+import Footer from 'components/Footer';
+
+function Home() {
+  const [moonUrl, setMoonUrl] = useState('/moon.svg');
+  const [dateString, setDateString] = useState('');
+
+
+  const handleDateStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { currentTarget: { value }} = e;
+    setDateString(value);
+  };
 
-const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>Moon.svg</title>
+        <meta name="description" content="SVG showing the phase of real-time moon" />
       </Head>
-
-      <main className={styles.main}>
-        <img src="/moon.svg?date=2022-05-01" />
-      </main>
-    </div>
+      <div className="flex flex-col min-h-screen">
+        <Header />
+        <main className="container grow flex flex-col items-center">
+          <p>SVG showing the phase of real-time moon</p>
+          <a>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={`/moon.svg?date=${dateString}`} alt="moon.svg" />
+          </a>
+          <div className="form-control w-full max-w-xs">
+            <label className="label">
+              <span className="label-text">Date</span>
+            </label>
+            <input type="text" placeholder="Type here" className="input input-bordered w-full max-w-xs" value={dateString} onChange={handleDateStringChange} />
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </>
+
   )
-}
+};
 
 export default Home
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+
+.container {
+  min-width: 360px;
+  max-width: 576px;
+  width: 100%;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  corePlugins: {
+    container: false,
+  },
   content: [
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
@@ -8,6 +11,6 @@ module.exports = {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: ["bumblebee"],
+    themes: ["cupcake"],
   },
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -13,7 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "components/*": ["components/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]