[Feature/BAR-6] WriteInput 작성

pages/index.tsx

@@ -1,5 +1,23 @@
-const HomePage = () => {
-  return <div>바로</div>;
+import type { NextPage } from 'next';
+
+import TextArea from '@/src/components/Input/TextArea/TextArea';
+import { useInput } from '@/src/hooks/useInput';
+
+const HomePage: NextPage = () => {
+  const testInputProps = useInput({
+    id: 'test',
+    defaultValue: '',
+  });
+
+  return (
+    <TextArea
+      inputProps={testInputProps}
+      placeholder="메모를 끄적여보세요"
+      alertType={'error'}
+      alertMsg="에러 메시지"
+      showPostFix
+    />
+  );
 };
 
 export default HomePage;

plopfile.mjs

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-anonymous-default-export */
 export default function (plop) {
   const getComponentName = {
     type: 'input',

src/components/Input/TextArea/TextArea.tsx

@@ -0,0 +1,122 @@
+import Image from 'next/image';
+import type { HTMLAttributes } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import { MAIN_INPUT_MAX_LENGTH } from '@/src/constants/config';
+import type { UseInputReturn } from '@/src/hooks/useInput';
+
+import * as style from './style.css';
+import { inputHeight } from './style.css';
+
+type AlertType = 'error' | 'warn';
+
+interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
+  inputProps: UseInputReturn;
+  placeholder?: string;
+  maxLength?: number;
+  alertType?: AlertType;
+  alertMsg?: string;
+  showPostFix?: boolean;
+}
+
+const TextArea = ({
+  inputProps,
+  placeholder,
+  maxLength = MAIN_INPUT_MAX_LENGTH,
+  alertType,
+  alertMsg,
+  showPostFix = false,
+}: TextAreaProps) => {
+  const { id, value } = inputProps;
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [height, setHeight] = useState(27);
+
+  const alertIconUrl = useMemo(
+    () => (type: AlertType) => {
+      if (type === 'error') {
+        return '/icons/error.svg';
+      }
+
+      return '/icons/warn.svg';
+    },
+    [],
+  );
+
+  const submitButton = useMemo(() => {
+    if (value.length > 0) {
+      return '/icons/submit-active.svg';
+    }
+    return '/icons/submit.svg';
+  }, [value.length]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      setHeight(inputRef.current.scrollHeight);
+    }
+
+    // TODO: scroll height로 높이를 줄이기 때문에 이미 스크롤된 값에 대해 인지하는 방법을 확인해야 함. @원진
+    if (value.length === 0) {
+      setHeight(27);
+    }
+  }, [height, value]);
+
+  return (
+    <Fragment>
+      <div className={style.conatiner({ error: alertType === 'error' })}>
+        <div
+          className={style.contentWrapper}
+          style={assignInlineVars({ [inputHeight]: `${height}px` })}
+        >
+          <label htmlFor={id} className={style.label}>
+            <textarea
+              {...inputProps}
+              ref={inputRef}
+              style={assignInlineVars({ [inputHeight]: `${height}px` })}
+              className={style.input}
+              placeholder={placeholder}
+              maxLength={maxLength}
+            />
+          </label>
+
+          {showPostFix && (
+            <div className={style.submitWrapper({ hasValue: height > 27 })}>
+              <div className={style.submit}>
+                <span className={style.textCount}>
+                  <span className={style.currentTextCount}>{value.length}</span>
+                  &nbsp;/&nbsp;500자
+                </span>
+                <button disabled={value.length < 1}>
+                  {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
+                  <Image
+                    src={submitButton}
+                    alt={'제출 버튼'}
+                    width={48}
+                    height={48}
+                  />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {alertMsg && (
+        <div className={style.alert}>
+          {/* TODO: Svg 공용 아이콘 제작 후 변경 @원진 */}
+          {alertType && (
+            <Image
+              src={alertIconUrl(alertType)}
+              alt="alert 메시지 타입 아이콘"
+              width={20}
+              height={20}
+            />
+          )}
+          <p className={style.alertMsg}>{alertMsg}</p>
+        </div>
+      )}
+    </Fragment>
+  );
+};
+
+export default TextArea;

src/components/Input/TextArea/style.css.ts

@@ -0,0 +1,104 @@
+import { createVar, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { COLORS } from '@/src/styles/tokens';
+
+export const conatiner = recipe({
+  base: [
+    {
+      display: 'flex',
+      justifyContent: 'space-between',
+      borderRadius: '16px',
+      width: '100%',
+      padding: '22px 12px 22px 24px',
+    },
+  ],
+  variants: {
+    type: {
+      primary: { border: `2px solid ${COLORS['Blue/Gradient']}` },
+    },
+    error: {
+      true: {
+        border: `1.5px solid ${COLORS['Red']}`,
+      },
+    },
+  },
+});
+
+export const inputHeight = createVar();
+export const contentWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: inputHeight,
+  maxHeight: '260px',
+});
+
+export const label = style({
+  width: '100%',
+});
+
+export const input = style({
+  padding: '0',
+  width: '100%',
+  height: inputHeight,
+  maxHeight: '216px',
+  resize: 'none',
+  color: COLORS['Grey/900'],
+  fontSize: '17px',
+  lineHeight: '27px',
+  '::placeholder': {
+    color: COLORS['Grey/250'],
+  },
+});
+
+export const submitWrapper = recipe({
+  base: [
+    {
+      display: 'flex',
+      alignItems: 'flex-end',
+      paddingLeft: '20px',
+    },
+  ],
+  variants: {
+    hasValue: {
+      true: {
+        height: '100%',
+      },
+    },
+  },
+});
+
+export const submit = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '16px',
+  height: '48px',
+});
+
+export const textCount = style({
+  color: COLORS['Grey/400'],
+  fontSize: '14px',
+  fontWeight: '400',
+  whiteSpace: 'nowrap',
+});
+
+export const currentTextCount = style({
+  color: COLORS['Blue/Default'],
+  fontSize: '14px',
+  fontWeight: '700',
+});
+
+export const alert = style({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '12px',
+});
+
+export const alertMsg = style({
+  marginLeft: '6px',
+  color: COLORS['Grey/600'],
+  fontSize: '13px',
+  fontWeight: '600',
+  lineHeight: '17px',
+});

src/constants/config.ts

@@ -0,0 +1,4 @@
+/**
+ * "끄적끄적" 최대 입력 글자 수
+ */
+export const MAIN_INPUT_MAX_LENGTH = 500;

src/hooks/useInput.ts

@@ -0,0 +1,19 @@
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+
+interface UseInputArgs {
+  id: string;
+  defaultValue?: string;
+}
+
+export const useInput = ({ id, defaultValue = '' }: UseInputArgs) => {
+  const [value, setValue] = useState<string>(defaultValue);
+
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setValue(e.currentTarget.value);
+  };
+
+  return { id, value, onChange };
+};
+
+export type UseInputReturn = ReturnType<typeof useInput>;