[Feature/BAR-6] WriteInput 작성

pages/index.tsx

@@ -1,5 +1,17 @@
-const HomePage = () => {
-  return <>Hello World</>;
+import type { NextPage } from 'next';
+
+import WriteInput from '@/src/components/Input/WriteInput';
+import { useInput } from '@/src/hooks/useInput';
+
+const HomePage: NextPage = () => {
+  const testInputProps = useInput({
+    id: 'test',
+    defaultValue: '',
+  });
+
+  return (
+    <WriteInput inputProps={testInputProps} placeholder="메모를 끄적여보세요" />
+  );
 };
 
 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/WriteInput/WriteInput.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta } from '@storybook/react';
+
+import WriteInput from '.';
+
+const meta: Meta<typeof WriteInput> = {
+  title: 'WriteInput',
+  component: WriteInput,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;

src/components/Input/WriteInput/index.tsx

@@ -0,0 +1,122 @@
+import Image from 'next/image';
+import type { HTMLAttributes } from 'react';
+import { 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';
+
+interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
+  inputProps: UseInputReturn;
+  placeholder?: string;
+  maxLength?: number;
+}
+
+const WriteInput = ({
+  inputProps,
+  placeholder,
+  maxLength = MAIN_INPUT_MAX_LENGTH,
+}: WriteInputProps) => {
+  const { id, value } = inputProps;
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [textareaHeight, setTextareaHeight] = useState({
+    row: 1,
+    lineBreak: {},
+  });
+
+  const handleResize = (e) => {
+    const { scrollHeight, clientHeight, value } = e.target;
+
+    if (value.length === 0) {
+      setTextareaHeight((prev) => ({
+        row: 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: false },
+      }));
+    }
+
+    // 줄바꿈이 일어날 때
+    if (scrollHeight > clientHeight) {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [value.length - 1]: true },
+      }));
+    }
+
+    // 텍스트 지워서 줄바꿈 지점에 도달했을 때
+    if (textareaHeight.lineBreak[value.length]) {
+      setTextareaHeight((prev) => ({
+        row: prev.row - 1,
+        lineBreak: { ...prev.lineBreak, [value.length]: false },
+      }));
+    }
+  };
+
+  const onKeyEnter = (e) => {
+    if (e.code === 'Enter') {
+      setTextareaHeight((prev) => ({
+        row: prev.row + 1,
+        lineBreak: { ...prev.lineBreak, [e.target.value.length]: true },
+      }));
+    }
+  };
+
+  const submitButton = useMemo(() => {
+    if (value.length > 0) {
+      return '/icons/submit-active.svg';
+    }
+    return '/icons/submit.svg';
+  }, [value.length]);
+
+  return (
+    <div className={style.conatiner}>
+      <div
+        className={style.contentWrapper}
+        style={assignInlineVars({
+          [inputHeight]: `${textareaHeight.row * 27}px`,
+        })}
+      >
+        <label htmlFor={id} className={style.label}>
+          <textarea
+            {...inputProps}
+            ref={inputRef}
+            autoComplete="off"
+            rows={textareaHeight.row}
+            className={style.input}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onInput={handleResize}
+            onKeyDown={onKeyEnter}
+          />
+        </label>
+
+        <div
+          className={style.submitWrapper({
+            multirow: textareaHeight.row > 1,
+          })}
+        >
+          <div className={style.submit}>
+            {value.length > 0 && (
+              <span className={style.textCount}>
+                <span className={style.currentTextCount}>{value.length}</span>
+                &nbsp;/&nbsp;500자
+              </span>
+            )}
+            <button disabled={value.length < 1}>
+              <Image
+                src={submitButton}
+                alt={'제출 버튼'}
+                width={48}
+                height={48}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WriteInput;

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

@@ -0,0 +1,92 @@
+import { createVar, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { COLORS } from '@/src/styles/tokens';
+
+export const conatiner = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderRadius: '16px',
+  width: '100%',
+  padding: '22px 12px 22px 24px',
+  border: `2px solid ${COLORS['Blue/Gradient']}`,
+});
+
+export const inputHeight = createVar();
+export const contentWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: inputHeight,
+  minHeight: '27px',
+  maxHeight: '260px',
+});
+
+export const label = style({
+  width: '100%',
+});
+
+export const input = style({
+  padding: '0',
+  width: '100%',
+  maxHeight: '216px',
+  resize: 'none',
+  color: COLORS['Grey/900'],
+  fontSize: '17px',
+  lineHeight: '27px',
+  overflowWrap: 'break-word',
+  '::placeholder': {
+    color: COLORS['Grey/250'],
+  },
+});
+
+export const submitWrapper = recipe({
+  base: [
+    {
+      display: 'flex',
+      alignItems: 'flex-end',
+      paddingLeft: '20px',
+    },
+  ],
+  variants: {
+    multirow: {
+      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>;