[Style] 모임생성 페이지 기본 마크업 작업 (폼연동X)

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;

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

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

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

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

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

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

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';

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

src/types/icons/index.ts

@@ -6,13 +6,16 @@ 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 },
   { id: 'plus', enableChangeColor: true },
   { 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 },