feature: css module test

postcss.config.mjs

@@ -3,6 +3,6 @@ const config = {
   plugins: {
     tailwindcss: {},
   },
-};
+}
 
-export default config;
+export default config

src/app/changelog/changelog.module.css

@@ -0,0 +1,4 @@
+.test {
+  @apply bg-red-500;
+  @apply text-2xl;
+}

src/app/changelog/page.jsx

@@ -10,6 +10,7 @@ export default function changelogPage() {
   return (
     <>
       <Hero title="Change log" />
+      <div className={styles.test}>이 영역은 테스트입니다.</div>
       <div>
         <Table isStriped>
           <TableHeader>

src/app/globals.css

@@ -30,10 +30,11 @@ body {
   .text-balance {
     text-wrap: balance;
   }
-} */
+}
 
 .archivo-black-regular {
   font-family: 'Archivo Black', sans-serif;
   font-weight: 400;
   font-style: normal;
 }
+*/

src/components/ui/QSelect.jsx

@@ -0,0 +1,33 @@
+import { Select, SelectItem } from '@nextui-org/react'
+import styles from './QSelect.module.css'
+
+const animals = [
+  { key: 'cat', label: 'Cat' },
+  { key: 'dog', label: 'Dog' },
+  { key: 'elephant', label: 'Elephant' },
+  { key: 'lion', label: 'Lion' },
+  { key: 'tiger', label: 'Tiger' },
+  { key: 'giraffe', label: 'Giraffe' },
+  { key: 'dolphin', label: 'Dolphin' },
+  { key: 'penguin', label: 'Penguin' },
+  { key: 'zebra', label: 'Zebra' },
+  { key: 'shark', label: 'Shark' },
+  { key: 'whale', label: 'Whale' },
+  { key: 'otter', label: 'Otter' },
+  { key: 'crocodile', label: 'Crocodile' },
+]
+
+export default function QSelect() {
+  return (
+    <>
+      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+        <Select label="Select an animal" className="max-w-xs">
+          {animals.map((animal) => (
+            <SelectItem key={animal.key}>{animal.label}</SelectItem>
+          ))}
+        </Select>
+      </div>
+      <div className={styles.test}>test</div>
+    </>
+  )
+}

src/components/ui/QSelect.module.css

@@ -0,0 +1,3 @@
+.test {
+  @apply bg-blue-500;
+}