feature: css-module 예제

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

@@ -1,19 +1,15 @@
 'use client'
 
 import Hero from '@/components/Hero'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableColumn,
-  TableHeader,
-  TableRow,
-} from '@nextui-org/react'
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import styles from './changelog.module.css'
+import QSelect from '@/components/ui/QSelect'
 
 export default function changelogPage() {
   return (
     <>
       <Hero title="Change log" />
+      <div className={styles.test}>이 영역은 테스트입니다.</div>
       <div>
         <Table isStriped>
           <TableHeader>
@@ -35,6 +31,9 @@ export default function changelogPage() {
           </TableBody>
         </Table>
       </div>
+      <div className="px-2 py-4">
+        <QSelect />
+      </div>
     </>
   )
 }

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;
+}