prettier 일괄 적용

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+yarn lint-staged

components/CodeBox.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
 
 type Props = {
-  contents: string,
+  contents: string;
 };
 
 function CodeBox({ contents }: Props) {
-
   const handleClick = () => {
     navigator.clipboard.writeText(contents);
     // TODO: 다른 UI로 대체
-    alert('Copied!')
+    alert('Copied!');
   };
 
   return (
-    <div className="mockup-code bg-base-300 text-base-content cursor-pointer before:hidden my-4" onClick={handleClick}>
+    <div
+      className="mockup-code bg-base-300 text-base-content cursor-pointer before:hidden my-4"
+      onClick={handleClick}
+    >
       <pre>
-        <code>
-          {contents}
-        </code>
+        <code>{contents}</code>
       </pre>
     </div>
   );
 }
 
-export default CodeBox;
+export default CodeBox;

components/CopyModal.tsx

@@ -3,22 +3,24 @@ import React from 'react';
 import CodeBox from 'components/CodeBox';
 
 type ButtonProps = {
-  id: string,
+  id: string;
 };
 
 function Button({ id }: ButtonProps) {
   return (
-    <label className="btn btn-wide modal-button" htmlFor={id}>Copy</label>
+    <label className="btn btn-wide modal-button" htmlFor={id}>
+      Copy
+    </label>
   );
 }
 
 type ModalProps = {
-  id: string,
-  text: string,
+  id: string;
+  text: string;
 };
 
 function Modal({ id, text }: ModalProps) {
-return (
+  return (
     <>
       <input type="checkbox" id={id} className="modal-toggle" />
       <label htmlFor={id} className="modal cursor-pointer">
@@ -42,6 +44,6 @@ return (
 const CopyModal = {
   Modal,
   Button,
-}
+};
 
-export default CopyModal;
+export default CopyModal;

components/Footer.tsx

@@ -37,5 +37,4 @@ function Footer() {
   );
 }
 
-
-export default Footer;
+export default Footer;

components/Header.tsx

@@ -3,9 +3,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-primary">svg</span></h1>
+      <h1 className="text-4xl font-bold text-base-content mx-auto">
+        Moon.<span className="text-primary">svg</span>
+      </h1>
     </header>
   );
 }
 
-export default Header;
+export default Header;

components/Hits.tsx

@@ -2,9 +2,14 @@ import React from 'react';
 
 function Hits() {
   return (
-    // eslint-disable-next-line @next/next/no-img-element 
-    <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fmoon-phase.vercel.app&count_bg=%2365C3C8&title_bg=%23291334&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false" alt="hits" /></a>
+    // eslint-disable-next-line @next/next/no-img-element
+    <a href="https://hits.seeyoufarm.com">
+      <img
+        src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fmoon-phase.vercel.app&count_bg=%2365C3C8&title_bg=%23291334&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"
+        alt="hits"
+      />
+    </a>
   );
 }
 
-export default Hits;
+export default Hits;

components/Layout.tsx

@@ -4,7 +4,7 @@ import Header from 'components/Header';
 import Footer from 'components/Footer';
 
 type Props = {
-  children: JSX.Element[] | JSX.Element,
+  children: JSX.Element[] | JSX.Element;
 };
 
 function Layout({ children }: Props) {
@@ -19,4 +19,4 @@ function Layout({ children }: Props) {
   );
 }
 
-export default Layout;
+export default Layout;

hooks/useDebounce.ts

@@ -18,9 +18,9 @@ function useDebounce(value: any, delay: number) {
         clearTimeout(handler);
       };
     },
-    [value, delay] // Only re-call effect if value or delay changes
+    [value, delay], // Only re-call effect if value or delay changes
   );
   return debouncedValue;
 }
 
-export default useDebounce;
+export default useDebounce;

pages/_app.tsx

@@ -1,8 +1,8 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

pages/_document.tsx

@@ -29,4 +29,4 @@ function Document() {
   );
 }
 
-export default Document;
+export default Document;

pages/api/moon.svg/[...params].tsx

@@ -1,9 +1,9 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   const { params } = req.query;
   const [day, month, year] = params as string[];

pages/api/moon.svg/index.ts

@@ -1,24 +1,22 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { getMoonPhases } from '../../../server/utils/moon';
 import { createMoon } from '../../../server/utils/svg';
 
-
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   const { date, size = '100' } = req.query;
 
-  const { k, isWaxing } = await getMoonPhases(date ? new Date(date as string) : undefined);
+  const { k, isWaxing } = await getMoonPhases(
+    date ? new Date(date as string) : undefined,
+  );
   const moonSvg = createMoon(k, isWaxing, size as string);
 
   res.setHeader('Content-Type', 'image/svg+xml');
-  res.setHeader(
-    "Cache-Control",
-    "s-maxage=3600, max-age=3600"
-  );
+  res.setHeader('Cache-Control', 's-maxage=3600, max-age=3600');
 
   res.status(200).end(moonSvg);
 }

pages/index.tsx

@@ -11,15 +11,22 @@ import { objectToQueryString } from 'utils/string';
 function Home() {
   const [dateString, setDateString] = useState('');
   const [size, setSize] = useState('');
-  const queryString = useDebounce(objectToQueryString({ date: dateString, size }), 300);
-
+  const queryString = useDebounce(
+    objectToQueryString({ date: dateString, size }),
+    300,
+  );
+
   const handleDateStringChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { currentTarget: { value }} = e;
+    const {
+      currentTarget: { value },
+    } = e;
     setDateString(value);
   };
 
   const handleSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { currentTarget: { value }} = e;
+    const {
+      currentTarget: { value },
+    } = e;
     setSize(value);
   };
 
@@ -29,7 +36,10 @@ function Home() {
     <>
       <Head>
         <title>Moon.svg</title>
-        <meta name="description" content="SVG showing the phase of real-time moon" />
+        <meta
+          name="description"
+          content="SVG showing the phase of real-time moon"
+        />
       </Head>
       <Layout>
         <p>SVG showing the phase of real-time moon</p>
@@ -42,19 +52,33 @@ function Home() {
           <label className="label">
             <span className="label-text">Date</span>
           </label>
-          <input type="date" className="input input-bordered w-full max-w-xs" value={dateString} onChange={handleDateStringChange} />
+          <input
+            type="date"
+            className="input input-bordered w-full max-w-xs"
+            value={dateString}
+            onChange={handleDateStringChange}
+          />
         </div>
         <div className="form-control w-full max-w-xs">
           <label className="label">
             <span className="label-text">Size</span>
           </label>
-          <input type="number" placeholder="100 (default)" className="input input-bordered w-full max-w-xs" value={size} onChange={handleSizeChange} />
+          <input
+            type="number"
+            placeholder="100 (default)"
+            className="input input-bordered w-full max-w-xs"
+            value={size}
+            onChange={handleSizeChange}
+          />
         </div>
         <CopyModal.Button id="copy-modal" />
       </Layout>
-      <CopyModal.Modal id="copy-modal" text={`https://moon-phase.vercel.app${svgUrl}`} />
+      <CopyModal.Modal
+        id="copy-modal"
+        text={`https://moon-phase.vercel.app${svgUrl}`}
+      />
     </>
-  )
-};
+  );
+}
 
 export default Home;

server/utils/moon.ts

@@ -1,12 +1,12 @@
-import {createTimeOfInterest} from 'astronomy-bundle/time';
-import {createMoon} from 'astronomy-bundle/moon';
+import { createTimeOfInterest } from 'astronomy-bundle/time';
+import { createMoon } from 'astronomy-bundle/moon';
 
 export const getMoonPhases = async (date: Date = new Date()) => {
   const toi = createTimeOfInterest.fromDate(date);
   const moon = createMoon(toi);
-  
+
   const k = await moon.getIlluminatedFraction();
   const isWaxing = await moon.isWaxing();
-  
+
   return { k, isWaxing };
-}
+};

server/utils/svg.ts

@@ -2,33 +2,33 @@ export const createMoon = (k: number, isWaxing: boolean, size: string) => {
   let percent = k * 100;
 
   if (percent < 1) {
-    const path = `<path d="m 160 10 a 20 20 0 1 1 0 300 a 20 20 0 1 1 0 -300" style="fill: #000; stroke:black; stroke-width:2" />`
+    const path = `<path d="m 160 10 a 20 20 0 1 1 0 300 a 20 20 0 1 1 0 -300" style="fill: #000; stroke:black; stroke-width:2" />`;
     return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${size}" height="${size}" viewBox="0 0 320 320">${path}</svg>`;
   }
 
   if (percent < 5) {
     percent = 5;
-  } 
+  }
 
   let rx1;
   let ry1;
   let flag1;
   let rx2;
   let ry2;
   let flag2;
-  
+
   if (isWaxing) {
     rx1 = 20;
     ry1 = 20;
-    rx2 = Math.abs((percent - 50) / 5 * 2);
-    ry2 =  20;
+    rx2 = Math.abs(((percent - 50) / 5) * 2);
+    ry2 = 20;
     flag1 = 1;
     flag2 = percent < 50 ? 0 : 1;
   } else {
-    rx1 = Math.abs((percent - 50) / 5 * 2);
+    rx1 = Math.abs(((percent - 50) / 5) * 2);
     ry1 = 20;
     rx2 = 20;
-    ry2 =  20;
+    ry2 = 20;
     flag1 = percent < 50 ? 0 : 1;
     flag2 = 1;
   }
@@ -45,4 +45,4 @@ export const createMoon = (k: number, isWaxing: boolean, size: string) => {
 // !isWaxing percent < 50
 // a20 -> 0 / a20 / 0 / 1
 // !isWaxing percent > 50
-// a0 -> 20 / a20 / 1 / 1
+// a0 -> 20 / a20 / 1 / 1

utils/string.ts

@@ -1,13 +1,10 @@
 type QueryParameters = { [key: string]: any };
 export const objectToQueryString = (queryParameters: QueryParameters) => {
   return queryParameters
-    ? Object.entries(queryParameters).reduce(
-        (queryString, [key, value]) => {
-          const symbol = queryString.length === 0 ? '?' : '&';
-          queryString += value ? `${symbol}${key}=${value}` : '';
-          return queryString;
-        },
-        ''
-      )
+    ? Object.entries(queryParameters).reduce((queryString, [key, value]) => {
+        const symbol = queryString.length === 0 ? '?' : '&';
+        queryString += value ? `${symbol}${key}=${value}` : '';
+        return queryString;
+      }, '')
     : '';
-};
+};