feat(demo): add responsive design into demo app

apps/demo/src/app/layout.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
 import localFont from 'next/font/local';
 
-import './globals.css';
+import '../styles/globals.css';
 
 const NotoSansKR = Noto_Sans_KR({
   subsets: ['latin'],

apps/demo/src/app/page.tsx

@@ -11,7 +11,7 @@ import { Header } from '@/components/Header';
 import { Inspector } from '@/components/Inspector';
 
 const rollerContainer = tv({
-  base: 'relative w-full px-3 text-5xl leading-[1.1]',
+  base: 'relative w-full px-3 text-4xl leading-[1.1] md:text-5xl',
   variants: {
     align: {
       left: 'translate-x-[calc(50%-180px)]',

apps/demo/src/components/Footer/ValueField.tsx

@@ -41,20 +41,43 @@ export const ValueField = ({ value, onValueChange }: Props) => {
   };
 
   return (
-    <div className="flex items-center gap-2">
-      <button className={stepButton({ icon: false })} onClick={() => onValueChange(0)}>
-        0
-      </button>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) * -1)}
-      >
-        <IconWrapper>
-          <PiPlusMinusBold />
-        </IconWrapper>
-      </button>
+    <div className="flex flex-col items-center gap-4 md:flex-row md:gap-2">
+      <div className="order-2 flex items-center gap-2 md:contents">
+        <div className="flex items-center gap-2 md:order-1">
+          <button className={stepButton({ icon: false })} onClick={() => onValueChange(0)}>
+            0
+          </button>
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) * -1)}
+          >
+            <IconWrapper>
+              <PiPlusMinusBold />
+            </IconWrapper>
+          </button>
+        </div>
 
-      <div className="relative">
+        <div className="flex items-center gap-2 md:order-3">
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) + 1)}
+          >
+            <IconWrapper>
+              <MdAdd />
+            </IconWrapper>
+          </button>
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) - 1)}
+          >
+            <IconWrapper>
+              <LuMinus />
+            </IconWrapper>
+          </button>
+        </div>
+      </div>
+
+      <div className="relative order-1 md:order-2">
         <NumberInput
           className="bg-layerBackground min-w-[320px] rounded-full px-6 py-4 text-center text-lg font-medium tracking-widest"
           onChange={onValueChange}
@@ -67,22 +90,6 @@ export const ValueField = ({ value, onValueChange }: Props) => {
           <MdRefresh />
         </button>
       </div>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) + 1)}
-      >
-        <IconWrapper>
-          <MdAdd />
-        </IconWrapper>
-      </button>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) - 1)}
-      >
-        <IconWrapper>
-          <LuMinus />
-        </IconWrapper>
-      </button>
     </div>
   );
 };

apps/demo/src/components/Footer/index.tsx

@@ -13,7 +13,7 @@ export const Footer = ({ value, onValueChange }: Props) => {
   return (
     <footer className="text-neutralSubtle flex flex-col items-center">
       <ValueField onValueChange={onValueChange} value={value} />
-      <div className="mt-5 text-[13px]">
+      <div className="mt-5 hidden text-[13px] lg:block">
         MIT License. {new Date().getFullYear()}{' '}
         <Link href="https://github.com/fecapark" rel="noopener noreferrer" target="_blank">
           Sanghyeok Park.

apps/demo/src/components/Header/PackageHelper.tsx

@@ -22,7 +22,7 @@ export const PackageHelper = () => {
   };
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:gap-0">
       <div className="bg-layerBackground text-neutralSubtle relative flex h-[42px] min-w-[320px] items-center justify-center rounded-md">
         <div className="text-sm font-medium">
           <span>{selectedManager.name} </span>
@@ -47,7 +47,7 @@ export const PackageHelper = () => {
         />
       </div>
 
-      <div className="bg-layerBackground ml-4 flex h-9 items-center overflow-hidden rounded-md">
+      <div className="bg-layerBackground flex h-9 items-center overflow-hidden rounded-md lg:ml-4">
         {packageManagers.map(({ name, color, icon, withBackground }) => {
           const selected = name === selectedManagerName;
 

apps/demo/src/components/Header/index.tsx

@@ -6,17 +6,19 @@ import { IconWrapper } from '@/components/IconWrapper';
 
 export const Header = () => {
   return (
-    <header className="items-cetner flex w-full justify-center">
-      <Link
-        className="text-neutralMuted hover:bg-hoverBackgroundAccent ease-materialBase mr-1.5 flex rounded-full px-4 py-1 text-2xl transition-colors duration-200"
-        href="https://github.com/fecapark/react-rolling-number"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <IconWrapper>
-          <FaGithub />
-        </IconWrapper>
-      </Link>
+    <header className="items-cetner flex w-full justify-center pt-4 xl:pt-0">
+      <div className="hidden items-center lg:flex">
+        <Link
+          className="text-neutralMuted hover:bg-hoverBackgroundAccent ease-materialBase mr-1.5 flex rounded-full px-4 py-1 text-2xl transition-colors duration-200"
+          href="https://github.com/fecapark/react-rolling-number"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <IconWrapper>
+            <FaGithub />
+          </IconWrapper>
+        </Link>
+      </div>
       <PackageHelper />
     </header>
   );