From bc71c7df9aa868410032d9de2e90c57da82a3f11 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 2 Aug 2024 10:09:40 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20css-module=20=EC=98=88=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 postcss.config.mjs                     |  4 ++--
 src/app/changelog/changelog.module.css |  4 ++++
 src/app/changelog/page.jsx             | 15 ++++++------
 src/app/globals.css                    |  3 ++-
 src/components/ui/QSelect.jsx          | 33 ++++++++++++++++++++++++++
 src/components/ui/QSelect.module.css   |  3 +++
 6 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 src/app/changelog/changelog.module.css
 create mode 100644 src/components/ui/QSelect.jsx
 create mode 100644 src/components/ui/QSelect.module.css

diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2a..0dc456ad 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -3,6 +3,6 @@ const config = {
   plugins: {
     tailwindcss: {},
   },
-};
+}
 
-export default config;
+export default config
diff --git a/src/app/changelog/changelog.module.css b/src/app/changelog/changelog.module.css
new file mode 100644
index 00000000..273a4a34
--- /dev/null
+++ b/src/app/changelog/changelog.module.css
@@ -0,0 +1,4 @@
+.test {
+  @apply bg-red-500;
+  @apply text-2xl;
+}
diff --git a/src/app/changelog/page.jsx b/src/app/changelog/page.jsx
index 821254ec..79f8df19 100644
--- a/src/app/changelog/page.jsx
+++ b/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>
     </>
   )
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 1c95a542..33e09403 100644
--- a/src/app/globals.css
+++ b/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;
 }
+*/
diff --git a/src/components/ui/QSelect.jsx b/src/components/ui/QSelect.jsx
new file mode 100644
index 00000000..6ebf2bd6
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/src/components/ui/QSelect.module.css b/src/components/ui/QSelect.module.css
new file mode 100644
index 00000000..c0802771
--- /dev/null
+++ b/src/components/ui/QSelect.module.css
@@ -0,0 +1,3 @@
+.test {
+  @apply bg-blue-500;
+}