[Feat] input supportingText 구현

src/common/component/Header/Header.tsx

@@ -20,11 +20,11 @@ export const UserHeader = ({ isLogin = false }: HeaderProps) => {
     <header css={headerStyle}>
       <SmallLogo />
       {isLogin ? (
-        <Button variant="secondary" size="xxSmall">
+        <Button variant="secondary" size="small">
           로그아웃
         </Button>
       ) : (
-        <Button variant="secondary" size="xxSmall">
+        <Button variant="secondary" size="small">
           로그인
         </Button>
       )}

src/common/component/Input/Input.style.ts

@@ -3,14 +3,23 @@ import { css } from '@emotion/react';
 import { InputProps } from '@/common/component/Input/Input';
 import { theme } from '@/common/style/theme/theme';
 
-export const inputContainerStyle = css({
+export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column',
 
   gap: '1.2rem',
+
+  width: '100%',
+});
+
+export const inputSupportStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+
+  gap: '0.8rem',
 });
 
-export const inputWarpperStyle = css({
+export const warpperStyle = css({
   display: 'flex',
   alignItems: 'center',
 
@@ -28,17 +37,20 @@ export const inputStyle = css({
 
   '::placeholder': {
     color: theme.colors.gray_500,
+    ...theme.text.body03,
   },
 });
 
-export const variantStyle = (variant: Required<InputProps>['variant']) => {
+export const variantStyle = ({ variant, isError }: { variant: Required<InputProps>['variant']; isError: boolean }) => {
+  const borderColor = isError ? `${theme.colors.red}` : `${theme.colors.gray_400}`;
+
   const style = {
     outline: {
-      boxShadow: ` 0px 0px 0px 1px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 0px 0px 1px ${borderColor}`,
       borderRadius: '8px',
     },
     underline: {
-      boxShadow: ` 0px 1px 0px ${theme.colors.gray_400}`,
+      boxShadow: ` 0px 1px 0px ${borderColor}`,
     },
     colored: {
       borderRadius: '100px',
@@ -51,9 +63,9 @@ export const variantStyle = (variant: Required<InputProps>['variant']) => {
 
 export const sizeStyle = (size: Required<InputProps>['size']) => {
   const style = {
-    small: { padding: '0.8rem 1.2rem', ...theme.text.body04 },
-    medium: { padding: '1.2rem 1.2rem', ...theme.text.body02 },
-    large: { padding: '1.2rem 1.6rem', ...theme.text.body02 },
+    small: { padding: '0.8rem 1.2rem' },
+    medium: { padding: '1.2rem 1.2rem' },
+    large: { padding: '1.2rem 1.6rem' },
   };
 
   return style[size];

src/common/component/Input/Input.tsx

@@ -1,13 +1,15 @@
 import React, { InputHTMLAttributes } from 'react';
 
 import {
-  inputContainerStyle,
+  containerStyle,
   inputStyle,
-  inputWarpperStyle,
+  inputSupportStyle,
   sizeStyle,
   variantStyle,
+  warpperStyle,
 } from '@/common/component/Input/Input.style';
 import Label from '@/common/component/Label/Label';
+import SupportingText from '@/common/component/SupportingText/SupportingText';
 
 type InputSize = 'small' | 'medium' | 'large';
 type InputVariant = 'outline' | 'underline' | 'colored';
@@ -18,15 +20,29 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   label?: string;
   LeftIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; //svg 컴포넌트
   isError?: boolean;
+  isNotice?: boolean;
+  supportingText?: string;
 }
 
-const Input = ({ variant, size = 'medium', label, LeftIcon, ...props }: InputProps) => {
+const Input = ({
+  variant,
+  size = 'medium',
+  label,
+  LeftIcon,
+  isError = false,
+  isNotice = false,
+  supportingText,
+  ...props
+}: InputProps) => {
   return (
-    <article css={inputContainerStyle}>
+    <article css={containerStyle}>
       {label && <Label id={label}>{label}</Label>}
-      <div css={[inputWarpperStyle, variantStyle(variant), sizeStyle(size)]}>
-        {LeftIcon && <LeftIcon />}
-        <input css={[inputStyle]} {...props} />
+      <div css={inputSupportStyle}>
+        <div css={[warpperStyle, variantStyle({ variant, isError }), sizeStyle(size)]}>
+          {LeftIcon && <LeftIcon />}
+          <input css={inputStyle} {...props} />
+        </div>
+        {supportingText && <SupportingText text={supportingText} isError={isError} isNotice={isNotice} />}
       </div>
     </article>
   );

src/common/component/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useRef } from 'react';
+import { ReactElement, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 
 import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style';

src/common/component/Select/Select.style.ts

@@ -20,6 +20,6 @@ export const itemStyle = css({
   lineHeight: theme.text.body04.lineHeight,
 
   '&:hover, &:focus': {
-    backgroundColor: theme.colors.blue_10,
+    backgroundColor: theme.colors.blue_100,
   },
 });

src/common/component/SupportingText/SupportingText.style.ts

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const textStyle = (textColor: string) =>
+  css({ color: textColor, wordBreak: 'break-word', ...theme.text.body04 });

src/common/component/SupportingText/SupportingText.tsx

@@ -0,0 +1,15 @@
+import { textStyle } from '@/common/component/SupportingText/SupportingText.style';
+import { theme } from '@/common/style/theme/theme';
+
+interface SupportingTextProps {
+  text: string;
+  isError?: boolean; //red
+  isNotice?: boolean; //blue
+}
+
+const SupportingText = ({ text, isError = false, isNotice = false }: SupportingTextProps) => {
+  const textColor = isError ? theme.colors.red : isNotice ? theme.colors.blue_900 : theme.colors.gray_400;
+  return <p css={textStyle(textColor)}>{text}</p>;
+};
+
+export default SupportingText;

src/story/common/Modal.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Modal from '@/common/component/Modal/Modal';
-import { useOutsideClick } from '@/common/hook';
 import useModal from '@/common/hook/Modal/useModal';
 
 const meta: Meta<typeof Modal> = {

src/story/page/MonthHeader.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    onMonthClick: (month: string) => {},
+    onMonthClick: () => {},
   },
   argTypes: {},
 } satisfies Meta<typeof MonthHeader>;