From 2d9cc30ad4ebfe0182d1ad68a23d306d7b999a2e Mon Sep 17 00:00:00 2001
From: aube-dev <rufflain918@gmail.com>
Date: Fri, 27 Sep 2024 19:12:49 +0900
Subject: [PATCH] feat: add `FormItem`

---
 .../FormInput/FormImageInput.stories.tsx      |  23 ++-
 app/components/common/FormInput/FormInput.tsx |  13 +-
 app/components/common/FormInput/index.ts      |   4 +-
 .../common/FormItem/FormImageItem.stories.tsx |  40 +++++
 .../common/FormItem/FormItem.css.ts           |  48 ++++++
 app/components/common/FormItem/FormItem.tsx   |  88 +++++++++++
 .../common/FormItem/FormTextItem.stories.tsx  |  41 ++++++
 app/components/common/FormItem/index.ts       |   1 +
 app/constants/style.ts                        | 135 +++++++++++++++++
 app/styles/text.css.ts                        | 137 +-----------------
 10 files changed, 383 insertions(+), 147 deletions(-)
 create mode 100644 app/components/common/FormItem/FormImageItem.stories.tsx
 create mode 100644 app/components/common/FormItem/FormItem.css.ts
 create mode 100644 app/components/common/FormItem/FormItem.tsx
 create mode 100644 app/components/common/FormItem/FormTextItem.stories.tsx
 create mode 100644 app/components/common/FormItem/index.ts

diff --git a/app/components/common/FormInput/FormImageInput.stories.tsx b/app/components/common/FormInput/FormImageInput.stories.tsx
index 2c0ae34..f0cac66 100644
--- a/app/components/common/FormInput/FormImageInput.stories.tsx
+++ b/app/components/common/FormInput/FormImageInput.stories.tsx
@@ -1,10 +1,29 @@
+import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import { useState } from 'react';
 
 import FormInput from './FormInput';
 
 const meta: Meta<typeof FormInput.Image> = {
   component: FormInput.Image,
+  decorators: [
+    function Decorator(Story, ctx) {
+      const [previewImageUrl, setPreviewImageUrl] = useState('');
+
+      return (
+        <Story
+          args={{
+            ...ctx.args,
+            previewImageUrl,
+            onImageChange: (imageUrl) => {
+              action('onImageChange')(imageUrl);
+              setPreviewImageUrl(imageUrl);
+            },
+          }}
+        />
+      );
+    },
+  ],
 };
 
 export default meta;
@@ -14,7 +33,5 @@ type Story = StoryObj<typeof FormInput.Image>;
 export const Main: Story = {
   args: {
     isError: false,
-    multiple: false,
-    onImageChange: fn(),
   },
 };
diff --git a/app/components/common/FormInput/FormInput.tsx b/app/components/common/FormInput/FormInput.tsx
index eb9591c..400b8f4 100644
--- a/app/components/common/FormInput/FormInput.tsx
+++ b/app/components/common/FormInput/FormInput.tsx
@@ -1,6 +1,5 @@
 import {
   useRef,
-  useState,
   type DetailedHTMLProps,
   type InputHTMLAttributes,
 } from 'react';
@@ -16,7 +15,7 @@ interface FormInputPropsBase
   isError?: boolean;
 }
 
-interface FormTextInputProps extends FormInputPropsBase {
+export interface FormTextInputProps extends FormInputPropsBase {
   Icon?: (props: { className?: string }) => JSX.Element;
   onTextChange?: (newText: string) => void;
 }
@@ -47,19 +46,20 @@ const FormTextInput = ({
   </div>
 );
 
-interface FormImageInputProps extends FormInputPropsBase {
+export interface FormImageInputProps extends FormInputPropsBase {
   multiple?: false;
+  previewImageUrl?: string;
   onImageChange?: (imageUrl: string) => void;
 }
 
 const FormImageInput = ({
   isError,
   multiple = false,
+  previewImageUrl,
   onImageChange,
   ...inputProps
 }: FormImageInputProps) => {
   const inputElement = useRef<HTMLInputElement>(null);
-  const [previewImageUrl, setPreviewImageUrl] = useState('');
 
   return (
     <button
@@ -71,7 +71,7 @@ const FormImageInput = ({
         inputElement.current?.click();
       }}
     >
-      {previewImageUrl.length === 0 && (
+      {previewImageUrl?.length === 0 && (
         <svg
           width="24"
           height="24"
@@ -107,13 +107,12 @@ const FormImageInput = ({
           if (files && files[0]) {
             const urls = await getDataURLFromFiles(files[0]);
             onImageChange?.(urls[0]);
-            setPreviewImageUrl(urls[0]);
           }
 
           e.currentTarget.value = '';
         }}
       />
-      {previewImageUrl.length > 0 && (
+      {previewImageUrl && previewImageUrl.length > 0 && (
         <img
           src={previewImageUrl}
           alt="preview before upload"
diff --git a/app/components/common/FormInput/index.ts b/app/components/common/FormInput/index.ts
index 1c62ac4..21b984e 100644
--- a/app/components/common/FormInput/index.ts
+++ b/app/components/common/FormInput/index.ts
@@ -1 +1,3 @@
-export { default as FormInput } from './FormInput';
+export { default } from './FormInput';
+
+export type { FormTextInputProps, FormImageInputProps } from './FormInput';
diff --git a/app/components/common/FormItem/FormImageItem.stories.tsx b/app/components/common/FormItem/FormImageItem.stories.tsx
new file mode 100644
index 0000000..59701c6
--- /dev/null
+++ b/app/components/common/FormItem/FormImageItem.stories.tsx
@@ -0,0 +1,40 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import FormItem from './FormItem';
+
+const meta: Meta<typeof FormItem.Image> = {
+  component: FormItem.Image,
+  decorators: [
+    function Decorator(Story, ctx) {
+      const [previewImageUrl, setPreviewImageUrl] = useState('');
+
+      return (
+        <Story
+          args={{
+            ...ctx.args,
+            previewImageUrl,
+            onImageChange: (imageUrl) => {
+              action('onImageChange')(imageUrl);
+              setPreviewImageUrl(imageUrl);
+            },
+          }}
+        />
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormItem.Image>;
+
+export const Main: Story = {
+  args: {
+    label: '이름',
+    optional: false,
+    errorMessage: '',
+    caption: '',
+  },
+};
diff --git a/app/components/common/FormItem/FormItem.css.ts b/app/components/common/FormItem/FormItem.css.ts
new file mode 100644
index 0000000..43dfc13
--- /dev/null
+++ b/app/components/common/FormItem/FormItem.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+import { Breakpoint, textStyleInfo } from '@/constants/style';
+import { textStyle } from '@/styles/text.css';
+import { themeVars } from '@/styles/theme.css';
+import { getMediaQuery } from '@/utils/style';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+});
+
+export const titleArea = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+export const optionalText = style([
+  textStyle.body2SB,
+  {
+    color: themeVars.color.grayscale.gray5.hex,
+  },
+]);
+
+export const inputArea = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
+
+export const caption = style([
+  textStyle.body2R,
+  {
+    display: 'block',
+    minHeight: `${textStyleInfo.body2R.pc.lineHeight}px`,
+    '@media': {
+      [getMediaQuery([Breakpoint.MOBILE2, Breakpoint.MOBILE1])]: {
+        minHeight: `${textStyleInfo.body2R.mobile.lineHeight}px`,
+      },
+    },
+  },
+]);
+
+export const errorText = style({
+  color: themeVars.color.system.caution.hex,
+});
diff --git a/app/components/common/FormItem/FormItem.tsx b/app/components/common/FormItem/FormItem.tsx
new file mode 100644
index 0000000..3a4e9c3
--- /dev/null
+++ b/app/components/common/FormItem/FormItem.tsx
@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import * as styles from './FormItem.css';
+import FormInput, {
+  type FormImageInputProps,
+  type FormTextInputProps,
+} from '@/components/common/FormInput';
+import { textStyle } from '@/styles/text.css';
+import { className } from '@/utils/style';
+
+interface FormItemPropsBase {
+  label: string;
+  optional?: boolean;
+  caption?: string;
+  errorMessage?: string;
+}
+
+interface FormTextItemProps
+  extends FormItemPropsBase,
+    Omit<FormTextInputProps, 'isError'> {}
+
+interface FormImageItemProps
+  extends FormItemPropsBase,
+    Omit<FormImageInputProps, 'isError'> {}
+
+const FormItemLayout = ({
+  label,
+  optional,
+  caption,
+  errorMessage,
+  children,
+}: FormItemPropsBase & { children: ReactNode }) => (
+  <div className={styles.container}>
+    <div className={styles.titleArea}>
+      <span className={textStyle.subtitle2SB}>{label}</span>
+      {optional && <span className={styles.optionalText}>(선택)</span>}
+    </div>
+    {children}
+    <span
+      className={className(
+        styles.caption,
+        errorMessage ? styles.errorText : undefined,
+      )}
+    >
+      {errorMessage ? errorMessage : caption}
+    </span>
+  </div>
+);
+
+const FormTextItem = ({
+  label,
+  optional,
+  caption,
+  errorMessage,
+  ...inputProps
+}: FormTextItemProps) => (
+  <FormItemLayout
+    label={label}
+    optional={optional}
+    caption={caption}
+    errorMessage={errorMessage}
+  >
+    <FormInput.Text {...inputProps} isError={!!errorMessage} />
+  </FormItemLayout>
+);
+
+const FormImageItem = ({
+  label,
+  optional,
+  caption,
+  errorMessage,
+  ...inputProps
+}: FormImageItemProps) => (
+  <FormItemLayout
+    label={label}
+    optional={optional}
+    caption={caption}
+    errorMessage={errorMessage}
+  >
+    <FormInput.Image {...inputProps} isError={!!errorMessage} />
+  </FormItemLayout>
+);
+
+const FormItem = {
+  Text: FormTextItem,
+  Image: FormImageItem,
+};
+
+export default FormItem;
diff --git a/app/components/common/FormItem/FormTextItem.stories.tsx b/app/components/common/FormItem/FormTextItem.stories.tsx
new file mode 100644
index 0000000..a1594b1
--- /dev/null
+++ b/app/components/common/FormItem/FormTextItem.stories.tsx
@@ -0,0 +1,41 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import FormItem from './FormItem';
+
+const meta: Meta<typeof FormItem.Text> = {
+  component: FormItem.Text,
+  decorators: [
+    function Decorator(Story, ctx) {
+      const [value, setValue] = useState('');
+
+      return (
+        <Story
+          args={{
+            ...ctx.args,
+            value,
+            onTextChange: (newText) => {
+              action('onTextChange')(newText);
+              setValue(newText);
+            },
+          }}
+        />
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormItem.Text>;
+
+export const Main: Story = {
+  args: {
+    label: '이름',
+    optional: false,
+    placeholder: '텍스트를 입력해주세요.',
+    errorMessage: '',
+    caption: '',
+  },
+};
diff --git a/app/components/common/FormItem/index.ts b/app/components/common/FormItem/index.ts
new file mode 100644
index 0000000..7f5740d
--- /dev/null
+++ b/app/components/common/FormItem/index.ts
@@ -0,0 +1 @@
+export { default } from './FormItem';
diff --git a/app/constants/style.ts b/app/constants/style.ts
index 257718f..0bebc8f 100644
--- a/app/constants/style.ts
+++ b/app/constants/style.ts
@@ -6,3 +6,138 @@ export const Breakpoint = {
   MOBILE2: [580, 727],
   MOBILE1: [0, 579],
 } as const;
+
+export const FontWeight = {
+  HEAVY: 900,
+  EXTRA_BOLD: 800,
+  BOLD: 700,
+  SEMI_BOLD: 600,
+  MEDIUM: 500,
+  REGULAR: 400,
+  LIGHT: 300,
+  EXTRA_LIGHT: 200,
+  THIN: 100,
+} as const;
+
+interface TextStyleInfo {
+  [styleName: string]: {
+    [device in 'pc' | 'mobile']: {
+      /** px 단위 */
+      fontSize: number;
+      /** px 단위 */
+      lineHeight: number;
+      fontWeight: number;
+    };
+  };
+}
+
+export const textStyleInfo = {
+  headline1B: {
+    pc: {
+      fontSize: 32,
+      lineHeight: 40,
+      fontWeight: FontWeight.BOLD,
+    },
+    mobile: {
+      fontSize: 26,
+      lineHeight: 32,
+      fontWeight: FontWeight.BOLD,
+    },
+  },
+  headline2B: {
+    pc: {
+      fontSize: 24,
+      lineHeight: 30,
+      fontWeight: FontWeight.BOLD,
+    },
+    mobile: {
+      fontSize: 20,
+      lineHeight: 25,
+      fontWeight: FontWeight.BOLD,
+    },
+  },
+  subtitle1B: {
+    pc: {
+      fontSize: 20,
+      lineHeight: 25,
+      fontWeight: FontWeight.BOLD,
+    },
+    mobile: {
+      fontSize: 16,
+      lineHeight: 20,
+      fontWeight: FontWeight.BOLD,
+    },
+  },
+  subtitle2B: {
+    pc: {
+      fontSize: 16,
+      lineHeight: 20,
+      fontWeight: FontWeight.BOLD,
+    },
+    mobile: {
+      fontSize: 14,
+      lineHeight: 17,
+      fontWeight: FontWeight.BOLD,
+    },
+  },
+  subtitle2SB: {
+    pc: {
+      fontSize: 16,
+      lineHeight: 20,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+    mobile: {
+      fontSize: 14,
+      lineHeight: 17,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+  },
+  body1SB: {
+    pc: {
+      fontSize: 14,
+      lineHeight: 17,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+    mobile: {
+      fontSize: 12,
+      lineHeight: 15,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+  },
+  body1R: {
+    pc: {
+      fontSize: 14,
+      lineHeight: 17,
+      fontWeight: FontWeight.REGULAR,
+    },
+    mobile: {
+      fontSize: 12,
+      lineHeight: 15,
+      fontWeight: FontWeight.REGULAR,
+    },
+  },
+  body2SB: {
+    pc: {
+      fontSize: 12,
+      lineHeight: 15,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+    mobile: {
+      fontSize: 10,
+      lineHeight: 12,
+      fontWeight: FontWeight.SEMI_BOLD,
+    },
+  },
+  body2R: {
+    pc: {
+      fontSize: 12,
+      lineHeight: 15,
+      fontWeight: FontWeight.REGULAR,
+    },
+    mobile: {
+      fontSize: 10,
+      lineHeight: 12,
+      fontWeight: FontWeight.REGULAR,
+    },
+  },
+} as const satisfies TextStyleInfo;
diff --git a/app/styles/text.css.ts b/app/styles/text.css.ts
index be3b9bb..d522a84 100644
--- a/app/styles/text.css.ts
+++ b/app/styles/text.css.ts
@@ -1,142 +1,7 @@
 import { type ComplexStyleRule, styleVariants } from '@vanilla-extract/css';
-import { Breakpoint } from '@/constants/style';
+import { Breakpoint, textStyleInfo } from '@/constants/style';
 import { getMediaQuery } from '@/utils/style';
 
-const FontWeight = {
-  HEAVY: 900,
-  EXTRA_BOLD: 800,
-  BOLD: 700,
-  SEMI_BOLD: 600,
-  MEDIUM: 500,
-  REGULAR: 400,
-  LIGHT: 300,
-  EXTRA_LIGHT: 200,
-  THIN: 100,
-} as const;
-
-interface TextStyleInfo {
-  [styleName: string]: {
-    [device in 'pc' | 'mobile']: {
-      /** px 단위 */
-      fontSize: number;
-      /** px 단위 */
-      lineHeight: number;
-      fontWeight: number;
-    };
-  };
-}
-
-const textStyleInfo = {
-  headline1B: {
-    pc: {
-      fontSize: 32,
-      lineHeight: 40,
-      fontWeight: FontWeight.BOLD,
-    },
-    mobile: {
-      fontSize: 26,
-      lineHeight: 32,
-      fontWeight: FontWeight.BOLD,
-    },
-  },
-  headline2B: {
-    pc: {
-      fontSize: 24,
-      lineHeight: 30,
-      fontWeight: FontWeight.BOLD,
-    },
-    mobile: {
-      fontSize: 20,
-      lineHeight: 25,
-      fontWeight: FontWeight.BOLD,
-    },
-  },
-  subtitle1B: {
-    pc: {
-      fontSize: 20,
-      lineHeight: 25,
-      fontWeight: FontWeight.BOLD,
-    },
-    mobile: {
-      fontSize: 16,
-      lineHeight: 20,
-      fontWeight: FontWeight.BOLD,
-    },
-  },
-  subtitle2B: {
-    pc: {
-      fontSize: 16,
-      lineHeight: 20,
-      fontWeight: FontWeight.BOLD,
-    },
-    mobile: {
-      fontSize: 14,
-      lineHeight: 17,
-      fontWeight: FontWeight.BOLD,
-    },
-  },
-  subtitle2SB: {
-    pc: {
-      fontSize: 16,
-      lineHeight: 20,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-    mobile: {
-      fontSize: 14,
-      lineHeight: 17,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-  },
-  body1SB: {
-    pc: {
-      fontSize: 14,
-      lineHeight: 17,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-    mobile: {
-      fontSize: 12,
-      lineHeight: 15,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-  },
-  body1R: {
-    pc: {
-      fontSize: 14,
-      lineHeight: 17,
-      fontWeight: FontWeight.REGULAR,
-    },
-    mobile: {
-      fontSize: 12,
-      lineHeight: 15,
-      fontWeight: FontWeight.REGULAR,
-    },
-  },
-  body2SB: {
-    pc: {
-      fontSize: 12,
-      lineHeight: 15,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-    mobile: {
-      fontSize: 10,
-      lineHeight: 12,
-      fontWeight: FontWeight.SEMI_BOLD,
-    },
-  },
-  body2R: {
-    pc: {
-      fontSize: 12,
-      lineHeight: 15,
-      fontWeight: FontWeight.REGULAR,
-    },
-    mobile: {
-      fontSize: 10,
-      lineHeight: 12,
-      fontWeight: FontWeight.REGULAR,
-    },
-  },
-} as const satisfies TextStyleInfo;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getTypedKeysFromObject = <T extends Record<string, any>>(
   object: T,