From 988ee275e7ba541a3f4685aa1b434b1aafb002b2 Mon Sep 17 00:00:00 2001
From: HopeFullee <john_lee0607@naver.com>
Date: Fri, 5 Dec 2025 17:02:23 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EC=9E=84=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B8=B0=EB=B3=B8=20=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=EC=97=85=20=EC=9E=91=EC=97=85=20(=ED=8F=BC=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99X)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/icon-tag.svg                     |  4 ++
 public/sprite.svg                             | 38 ++++++++++++++++++-
 src/app/post-meetup/page.tsx                  | 26 ++++++++++++-
 .../fields/address-field/index.tsx            | 29 ++++++++++++++
 .../post-meetup/fields/cap-field/index.tsx    | 29 ++++++++++++++
 .../post-meetup/fields/date-field/index.tsx   | 29 ++++++++++++++
 .../post-meetup/fields/detail-feild/index.tsx | 21 ++++++++++
 .../pages/post-meetup/fields/index.ts         |  0
 .../post-meetup/fields/tags-field/index.tsx   | 33 ++++++++++++++++
 .../post-meetup/fields/title-field/index.tsx  | 29 ++++++++++++++
 src/components/pages/post-meetup/index.ts     |  7 ++++
 .../pages/post-meetup/post-button/index.tsx   |  9 +++++
 src/types/icons/index.ts                      |  3 ++
 13 files changed, 254 insertions(+), 3 deletions(-)
 create mode 100644 public/icons/icon-tag.svg
 delete mode 100644 src/components/pages/post-meetup/fields/index.ts

diff --git a/public/icons/icon-tag.svg b/public/icons/icon-tag.svg
new file mode 100644
index 00000000..542c527d
--- /dev/null
+++ b/public/icons/icon-tag.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1584 11.1753L11.1834 17.1503C11.0286 17.3053 10.8448 17.4282 10.6425 17.5121C10.4402 17.596 10.2233 17.6391 10.0042 17.6391C9.78522 17.6391 9.56834 17.596 9.36601 17.5121C9.16368 17.4282 8.97987 17.3053 8.82508 17.1503L1.66675 10.0003V1.66699H10.0001L17.1584 8.82533C17.4688 9.1376 17.6431 9.56002 17.6431 10.0003C17.6431 10.4406 17.4688 10.8631 17.1584 11.1753Z" stroke="#A5AFB6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.83325 5.83301H5.84159" stroke="#A5AFB6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/sprite.svg b/public/sprite.svg
index bce1dc42..458f9f56 100644
--- a/public/sprite.svg
+++ b/public/sprite.svg
@@ -70,6 +70,15 @@
     />
     <circle cx="17" cy="4" r="4" fill="#00c9ec" />
   </symbol>
+  <symbol fill="none" viewBox="0 0 20 20" id="edit" xmlns="http://www.w3.org/2000/svg">
+    <path
+      stroke="#7c868f"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.33"
+      d="M15 4.268a1.768 1.768 0 0 1 2.5 2.5L7.083 17.184l-3.333.834.833-3.334z"
+    />
+  </symbol>
   <symbol fill="none" viewBox="0 0 24 24" id="home" xmlns="http://www.w3.org/2000/svg">
     <path
       stroke="currentColor"
@@ -121,7 +130,7 @@
     />
   </symbol>
   <symbol fill="none" viewBox="0 0 24 24" id="plus-circle" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#ia)">
+    <g clip-path="url(#ja)">
       <path
         fill="#00c9ec"
         d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12"
@@ -135,7 +144,7 @@
       />
     </g>
     <defs>
-      <clipPath id="ia"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
+      <clipPath id="ja"><path fill="#fff" d="M0 0h24v24H0z" /></clipPath>
     </defs>
   </symbol>
   <symbol fill="none" viewBox="0 0 24 24" id="search" xmlns="http://www.w3.org/2000/svg">
@@ -147,12 +156,37 @@
       d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16M21 21l-4.35-4.35"
     />
   </symbol>
+<<<<<<< Updated upstream
+<<<<<<< Updated upstream
   <symbol fill="none" viewBox="0 0 8 8" id="small-x" xmlns="http://www.w3.org/2000/svg">
     <path
       stroke="currentColor"
       stroke-linecap="round"
       stroke-width="1.4"
       d="m.7.7 6 6M6.7.7l-6 6"
+=======
+=======
+>>>>>>> Stashed changes
+  <symbol fill="none" viewBox="0 0 20 20" id="tag" xmlns="http://www.w3.org/2000/svg">
+    <path
+      stroke="#a5afb6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="m17.158 11.175-5.975 5.975a1.667 1.667 0 0 1-2.358 0L1.667 10V1.667H10l7.158 7.158a1.667 1.667 0 0 1 0 2.35M5.833 5.833h.009"
+    />
+  </symbol>
+  <symbol fill="none" viewBox="0 0 20 20" id="title" xmlns="http://www.w3.org/2000/svg">
+    <path
+      stroke="#a5afb6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M9 16.667h8.5M13.75 2.917a1.768 1.768 0 0 1 2.5 2.5L5.833 15.833l-3.333.834.833-3.334z"
+<<<<<<< Updated upstream
+>>>>>>> Stashed changes
+=======
+>>>>>>> Stashed changes
     />
   </symbol>
   <symbol fill="none" viewBox="0 0 24 24" id="unread-false" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/app/post-meetup/page.tsx b/src/app/post-meetup/page.tsx
index 8dd82f1c..fa5d72e8 100644
--- a/src/app/post-meetup/page.tsx
+++ b/src/app/post-meetup/page.tsx
@@ -1,5 +1,29 @@
+'use client';
+
+import {
+  MeetupAddressField,
+  MeetupCapField,
+  MeetupDateField,
+  MeetupDetailField,
+  MeetupSubmitButton,
+  MeetupTagsField,
+  MeetupTitleField,
+} from '@/components/pages/post-meetup';
+
 const PostMeetupPage = () => {
-  return <div></div>;
+  return (
+    <div>
+      <section className='px-4'>
+        <MeetupTitleField />
+        <MeetupAddressField />
+        <MeetupDateField />
+        <MeetupCapField />
+        <MeetupDetailField />
+        <MeetupTagsField />
+      </section>
+      <MeetupSubmitButton />
+    </div>
+  );
 };
 
 export default PostMeetupPage;
diff --git a/src/components/pages/post-meetup/fields/address-field/index.tsx b/src/components/pages/post-meetup/fields/address-field/index.tsx
index e69de29b..f00b1279 100644
--- a/src/components/pages/post-meetup/fields/address-field/index.tsx
+++ b/src/components/pages/post-meetup/fields/address-field/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Icon } from '@/components/icon';
+import { Input, Label } from '@/components/ui';
+
+export const MeetupAddressField = () => {
+  return (
+    <div className='mt-3 flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-address' required>
+        모임 장소
+      </Label>
+      <Input
+        id='post-meetup-address'
+        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
+        frontIcon={
+          <Icon
+            id='map-pin'
+            width={20}
+            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+            height={20}
+          />
+        }
+        placeholder='모임 주소를 입력해주세요'
+        required
+        type='text'
+      />
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/fields/cap-field/index.tsx b/src/components/pages/post-meetup/fields/cap-field/index.tsx
index e69de29b..28111a65 100644
--- a/src/components/pages/post-meetup/fields/cap-field/index.tsx
+++ b/src/components/pages/post-meetup/fields/cap-field/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Icon } from '@/components/icon';
+import { Input, Label } from '@/components/ui';
+
+export const MeetupCapField = () => {
+  return (
+    <div className='mt-3 flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-cap' required>
+        최대 인원
+      </Label>
+      <Input
+        id='post-meetup-cap'
+        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
+        frontIcon={
+          <Icon
+            id='users'
+            width={20}
+            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+            height={20}
+          />
+        }
+        placeholder='최대 인원을 선택해주세요'
+        required
+        type='text'
+      />
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/fields/date-field/index.tsx b/src/components/pages/post-meetup/fields/date-field/index.tsx
index e69de29b..92fba16a 100644
--- a/src/components/pages/post-meetup/fields/date-field/index.tsx
+++ b/src/components/pages/post-meetup/fields/date-field/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Icon } from '@/components/icon';
+import { Input, Label } from '@/components/ui';
+
+export const MeetupDateField = () => {
+  return (
+    <div className='mt-6 flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-date' required>
+        모임 날짜
+      </Label>
+      <Input
+        id='post-meetup-date'
+        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
+        frontIcon={
+          <Icon
+            id='calendar'
+            width={20}
+            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+            height={20}
+          />
+        }
+        placeholder='날짜와 시간을 선택해주세요'
+        required
+        type='text'
+      />
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/fields/detail-feild/index.tsx b/src/components/pages/post-meetup/fields/detail-feild/index.tsx
index e69de29b..07a16aa4 100644
--- a/src/components/pages/post-meetup/fields/detail-feild/index.tsx
+++ b/src/components/pages/post-meetup/fields/detail-feild/index.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Label } from '@/components/ui';
+
+export const MeetupDetailField = () => {
+  return (
+    <div className='mt-3 flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-detail' required>
+        모임 날짜
+      </Label>
+      <textarea
+        id='post-meetup-detail'
+        className='bg-mono-white focus:border-mint-500 text-text-md-medium h-40 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
+        maxLength={300}
+        placeholder='모임에 대해 설명해주세요'
+        required
+      />
+      <div className='text-text-sm-medium text-right text-gray-500'>0/300</div>
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/fields/index.ts b/src/components/pages/post-meetup/fields/index.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/pages/post-meetup/fields/tags-field/index.tsx b/src/components/pages/post-meetup/fields/tags-field/index.tsx
index e69de29b..5a226e77 100644
--- a/src/components/pages/post-meetup/fields/tags-field/index.tsx
+++ b/src/components/pages/post-meetup/fields/tags-field/index.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { Icon } from '@/components/icon';
+import { Input, Label } from '@/components/ui';
+
+export const MeetupTagsField = () => {
+  return (
+    <div className='flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-tags'>태그</Label>
+      <Input
+        id='post-meetup-tags'
+        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
+        frontIcon={
+          <Icon
+            id='tag'
+            width={20}
+            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+            height={20}
+          />
+        }
+        placeholder='입력 후 Enter'
+        required
+        type='text'
+      />
+      <ul className='mt-0.5 flex flex-wrap px-2'>
+        <li className='bg-mint-100 text-mint-700 flex-center gap-0.5 rounded-full px-2 py-0.5'>
+          <p className='text-text-xs-medium'>#태그</p>
+          <Icon id='small-x' width={10} height={10} />
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/fields/title-field/index.tsx b/src/components/pages/post-meetup/fields/title-field/index.tsx
index e69de29b..08f57be8 100644
--- a/src/components/pages/post-meetup/fields/title-field/index.tsx
+++ b/src/components/pages/post-meetup/fields/title-field/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Icon } from '@/components/icon';
+import { Input, Label } from '@/components/ui';
+
+export const MeetupTitleField = () => {
+  return (
+    <div className='mt-4 flex w-full flex-col gap-1'>
+      <Label htmlFor='post-meetup-title' required>
+        모임 제목
+      </Label>
+      <Input
+        id='post-meetup-title'
+        className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
+        frontIcon={
+          <Icon
+            id='title'
+            width={20}
+            className='pointer-events-none absolute top-0 left-4 flex h-full items-center text-gray-500'
+            height={20}
+          />
+        }
+        placeholder='모임 제목을 입력해주세요'
+        required
+        type='text'
+      />
+    </div>
+  );
+};
diff --git a/src/components/pages/post-meetup/index.ts b/src/components/pages/post-meetup/index.ts
index e69de29b..a3ff5b9e 100644
--- a/src/components/pages/post-meetup/index.ts
+++ b/src/components/pages/post-meetup/index.ts
@@ -0,0 +1,7 @@
+export { MeetupAddressField } from './fields/address-field';
+export { MeetupCapField } from './fields/cap-field';
+export { MeetupDateField } from './fields/date-field';
+export { MeetupDetailField } from './fields/detail-feild';
+export { MeetupTagsField } from './fields/tags-field';
+export { MeetupTitleField } from './fields/title-field';
+export { MeetupSubmitButton } from './post-button';
diff --git a/src/components/pages/post-meetup/post-button/index.tsx b/src/components/pages/post-meetup/post-button/index.tsx
index e69de29b..65cfb007 100644
--- a/src/components/pages/post-meetup/post-button/index.tsx
+++ b/src/components/pages/post-meetup/post-button/index.tsx
@@ -0,0 +1,9 @@
+import { Button } from '@/components/ui';
+
+export const MeetupSubmitButton = () => {
+  return (
+    <div className='mt-6 border-t-1 border-gray-200 px-4 py-3'>
+      <Button>모임 생성</Button>
+    </div>
+  );
+};
diff --git a/src/types/icons/index.ts b/src/types/icons/index.ts
index 1c1b12aa..808c17f8 100644
--- a/src/types/icons/index.ts
+++ b/src/types/icons/index.ts
@@ -6,6 +6,7 @@ export const ICONS = [
   { id: 'chevron-up', enableChangeColor: true },
   { id: 'congratulate', enableChangeColor: false },
   { id: 'cowbell', enableChangeColor: false },
+  { id: 'edit', enableChangeColor: false },
   { id: 'home', enableChangeColor: true },
   { id: 'map-pin', enableChangeColor: true },
   { id: 'message', enableChangeColor: true },
@@ -13,6 +14,8 @@ export const ICONS = [
   { id: 'plus-circle', enableChangeColor: false },
   { id: 'search', enableChangeColor: true },
   { id: 'small-x', enableChangeColor: true },
+  { id: 'tag', enableChangeColor: false },
+  { id: 'title', enableChangeColor: false },
   { id: 'unread-false', enableChangeColor: true },
   { id: 'unread-true', enableChangeColor: true },
   { id: 'user', enableChangeColor: true },