[Feat] 모각코 게시글 작성 페이지 퍼블리싱

app/frontend/src/components/MogacoPost/index.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars, fontStyle } from '@/styles';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '24px',
+  maxWidth: '75rem',
+  margin: '0 auto',
+  padding: '1.5rem',
+});
+
+export const formContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+  width: '100%',
+});
+
+export const title = style([
+  fontStyle.sansBold24,
+  {
+    padding: '0.8rem',
+    height: '4rem',
+    color: vars.color.grayscale500,
+    borderBottom: '2px solid transparent',
+
+    selectors: {
+      '&:focus': {
+        outline: 'none',
+        borderBottom: `2px solid ${vars.color.morakGreen}`,
+      },
+      '&::placeholder': {
+        color: vars.color.grayscale200,
+      },
+    },
+  },
+]);

app/frontend/src/components/MogacoPost/index.tsx

@@ -0,0 +1,61 @@
+import dayjs from 'dayjs';
+
+import { Input, Button, Textarea } from '@/components';
+
+import * as styles from './index.css';
+
+export function MogacoPostPage() {
+  const date = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
+
+  return (
+    <form className={styles.container}>
+      <div className={styles.formContent}>
+        <input
+          type="text"
+          className={styles.title}
+          placeholder="모각코 함께해요"
+          required
+        />
+      </div>
+      <div className={styles.formContent}>
+        <Input
+          label="작성자"
+          maxLength={64}
+          required
+          disabled
+          defaultValue="user"
+        />
+        <Input label="그룹" placeholder="그룹을 선택해주세요" required />
+        <Input
+          label="최대 인원 수"
+          type="number"
+          placeholder="20"
+          min={1}
+          max={20}
+          required
+        />
+        <Input label="장소" placeholder="장소를 검색해주세요" required />
+        <Input
+          label="날짜 및 시간"
+          type="datetime-local"
+          required
+          defaultValue={date}
+          min={date}
+        />
+        <Textarea label="설명" maxLength={1000} rows={6} />
+      </div>
+      <div className={styles.formContent}>
+        <Button
+          type="submit"
+          theme="primary"
+          shape="fill"
+          size="large"
+          fullWidth
+          onClick={() => {}}
+        >
+          등록하기
+        </Button>
+      </div>
+    </form>
+  );
+}

app/frontend/src/components/commons/Input/Textarea.tsx

@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+
 import * as styles from './Textarea.css';
 
 type TextareaProps = {
@@ -8,6 +10,7 @@ type TextareaProps = {
   disabled?: boolean;
   required?: boolean;
   fullWidth?: boolean;
+  rows?: number;
 };
 
 export function Textarea({
@@ -18,7 +21,17 @@ export function Textarea({
   maxLength,
   required = false,
   fullWidth = false,
+  rows = 2,
 }: TextareaProps) {
+  const [textCount, setTextCount] = useState<number>(0);
+  const textRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleInput = () => {
+    if (textRef && textRef.current) {
+      setTextCount(textRef.current.value.length);
+    }
+  };
+
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -30,14 +43,19 @@ export function Textarea({
           {label}
           {required && <span className={styles.required}>*</span>}
         </span>
-        <span className={styles.count}>0/{maxLength}</span>
+        <span className={styles.count}>
+          {textCount}/{maxLength}
+        </span>
       </div>
       <textarea
+        rows={rows}
+        ref={textRef}
         className={styles.textarea}
         placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
         required={required}
+        onChange={handleInput}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>

app/frontend/src/components/commons/Input/index.css.ts

@@ -61,6 +61,11 @@ export const input = style([
         border: `2px solid ${vars.color.grayscale200}`,
         cursor: 'not-allowed',
       },
+      '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        MozAppearance: 'none',
+        WebkitAppearance: 'none',
+      },
     },
   },
 ]);

app/frontend/src/components/commons/Input/index.tsx

@@ -1,4 +1,4 @@
-import { HTMLInputTypeAttribute } from 'react';
+import { useState, useRef, HTMLInputTypeAttribute } from 'react';
 
 import * as styles from './index.css';
 
@@ -8,8 +8,11 @@ type InputProps = {
   errorMessage?: string;
   type?: HTMLInputTypeAttribute;
   disabled?: boolean;
-  maxLength: number;
+  maxLength?: number;
+  min?: number | string;
+  max?: number;
   required?: boolean;
+  defaultValue?: string;
 };
 
 export function Input({
@@ -19,8 +22,20 @@ export function Input({
   errorMessage = '',
   disabled = false,
   maxLength,
+  min,
+  max,
   required = false,
+  defaultValue,
 }: InputProps) {
+  const [inputCount, setInputCount] = useState<number>(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleInput = () => {
+    if (inputRef && inputRef.current) {
+      setInputCount(inputRef.current.value.length);
+    }
+  };
+
   return (
     <div
       className={`${styles.container} ${errorMessage && styles.error} ${
@@ -32,15 +47,24 @@ export function Input({
           {label}
           {required && <span className={styles.required}>*</span>}
         </span>
-        <span className={styles.count}>0/{maxLength}</span>
+        {maxLength && (
+          <span className={styles.count}>
+            {inputCount}/{maxLength}
+          </span>
+        )}
       </div>
       <input
+        ref={inputRef}
         className={styles.input}
         type={type}
         placeholder={placeholder}
         disabled={disabled}
         maxLength={maxLength}
+        min={min}
+        max={max}
         required={required}
+        defaultValue={defaultValue}
+        onChange={handleInput}
       />
       {!disabled && errorMessage && (
         <p className={styles.errorMessage}>{errorMessage}</p>

app/frontend/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './Mogaco';
 export * from './MogacoDetail';
+export * from './MogacoPost';
 export * from './commons/Button';
 export * from './commons/Chatting';
 export * from './commons/Header';

app/frontend/src/hooks/useRouter.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import { Layout } from '@/components';
-import { Main, Mogaco, MogacoDetail } from '@/pages';
+import { Main, Mogaco, MogacoDetail, MogacoPost } from '@/pages';
 
 export const useRouter = () =>
   createBrowserRouter([
@@ -18,6 +18,7 @@ export const useRouter = () =>
           path: 'mogaco/:id',
           element: <MogacoDetail />,
         },
+        { path: 'post', element: <MogacoPost /> },
         {
           path: 'calendar',
           element: <>캘린더</>,

app/frontend/src/pages/MogacoPost/index.tsx

@@ -0,0 +1,5 @@
+import { MogacoPostPage } from '@/components';
+
+export function MogacoPost() {
+  return <MogacoPostPage />;
+}

app/frontend/src/pages/index.ts

@@ -1,3 +1,4 @@
-export { Main } from './Main';
-export { Mogaco } from './Mogaco';
-export { MogacoDetail } from './MogacoDetail';
+export * from './Main';
+export * from './Mogaco';
+export * from './MogacoDetail';
+export * from './MogacoPost';