feat: 태그 시트 input 기능 추가

Author: sikkzz

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -11,8 +11,12 @@ const ReceiptEdit = () => {
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
 
-  const { isFocus: isPlaceFocus, onFocus: handlePlaceFocus, onBlur: handlePlaceBlur } = useFocus();
-  const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus();
+  const {
+    isFocus: isPlaceFocus,
+    onFocus: handlePlaceFocus,
+    onBlur: handlePlaceBlur,
+  } = useFocus({});
+  const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus({});
 
   return (
     <div className={styles.ReceiptEdit}>

src/components/SelectTag/TagSheet/TagSheet.tsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import * as Dialog from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import classNames from "classnames";
@@ -8,12 +10,25 @@ import Icon from "@/components/ui/Icon/Icon";
 import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
+import { useFocus } from "@/hooks/common/useFocus";
+
 interface TagSheetProps {
   isOpen: boolean;
   handleClose: () => void;
 }
 
 const TagSheet = ({ isOpen, handleClose }: TagSheetProps) => {
+  const { isFocus, onFocus, onBlur } = useFocus({ defaultFocus: true });
+
+  const [newTag, setNewTag] = useState("");
+
+  const isInputError = newTag.length > 20;
+  const isInputEmpty = newTag.length === 0;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewTag(e.target.value);
+  };
+
   return (
     <Dialog.Root open={isOpen}>
       <Dialog.Portal>
@@ -36,19 +51,38 @@ const TagSheet = ({ isOpen, handleClose }: TagSheetProps) => {
           <Text variant="titleM" color="primary">
             더 넣고 싶은 내용이 있나요?
           </Text>
-          <Input variant="secondary" placeholder="의견을 입력해주세요." className={styles.Input} />
+          <Input
+            variant="secondary"
+            placeholder="의견을 입력해주세요."
+            className={styles.Input}
+            value={newTag}
+            onChange={handleInputChange}
+            isFocus={isFocus}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            isError={isInputError}
+          />
           <div className={styles.LengthText}>
-            <Text variant="bodyXsm" color="tertiary">
-              *
-            </Text>
-            <Text variant="bodyXsm" color="secondary">
-              0
-            </Text>
-            <Text variant="bodyXsm" color="tertiary">
-              /20
-            </Text>
+            {isInputError ? (
+              <Text variant="bodyXsm" color="error">
+                *20글자 이내로 입력할 수 있어요.
+              </Text>
+            ) : (
+              <>
+                <Text variant="bodyXsm" color="tertiary">
+                  *
+                </Text>
+                <Text variant="bodyXsm" color="secondary">
+                  {newTag.length}
+                </Text>
+                <Text variant="bodyXsm" color="tertiary">
+                  /20
+                </Text>
+              </>
+            )}
           </div>
-          <Button text="추가하기" />
+
+          <Button text="추가하기" disabled={isInputError || isInputEmpty} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

src/components/ui/Input/Input.module.scss

@@ -31,6 +31,10 @@
     border-color: var(--color-primary-purple);
   }
 
+  &.Error {
+    border-color: var(--color-text-error);
+  }
+
   .Input {
     @include bodyM;
     color: var(--color-text-primary);

src/components/ui/Input/Input.tsx

@@ -6,14 +6,15 @@ import styles from "@/components/ui/Input/Input.module.scss";
 import type { InputProps } from "@/components/ui/Input/Input.types";
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, variant = "primary", isFocus, ...props }, ref) => {
+  ({ className, type, variant = "primary", isFocus, isError, ...props }, ref) => {
     return (
       <div
         className={classNames(
           styles.InputWrapper,
           styles[`style-${variant}`],
           {
             [styles.Focused]: isFocus,
+            [styles.Error]: isError,
           },
           className,
         )}

src/components/ui/Input/Input.types.ts

@@ -3,4 +3,5 @@ type InputFieldVariant = "primary" | "secondary";
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   variant?: InputFieldVariant;
   isFocus?: boolean;
+  isError?: boolean;
 }

src/components/ui/Text/Text.module.scss

@@ -4,7 +4,7 @@
   line-height: 1.5;
 
   @each $color-name
-    in ("white", "black", "primary", "secondary", "tertiary", "quarternary", "gradient")
+    in ("white", "black", "primary", "secondary", "tertiary", "quarternary", "gradient", "error")
   {
     @if $color-name == "gradient" {
       &.color-#{$color-name} {

src/components/ui/Text/Text.types.ts

@@ -19,7 +19,8 @@ type TextColor =
   | "secondary"
   | "tertiary"
   | "quarternary"
-  | "gradient";
+  | "gradient"
+  | "error";
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   as?: React.ElementType;

src/hooks/common/useFocus.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-export const useFocus = () => {
-  const [isFocus, setIsFocus] = useState(false);
+export const useFocus = ({ defaultFocus }: { defaultFocus?: boolean }) => {
+  const [isFocus, setIsFocus] = useState(defaultFocus);
 
   const onFocus = () => {
     setIsFocus(true);

src/styles/_variables.scss

@@ -23,6 +23,7 @@
     var(--color-primary-pink),
     var(--color-primary-purple)
   );
+  --color-text-error: #d45085;
 
   --color-white: #ffffff;
   --color-black: #000000;
@@ -35,7 +36,6 @@
   --color-gray600: #363642;
   --color-gray700: #161636;
   --color-bg-gradient: linear-gradient(180deg, #ffffff, #dcdce8);
-  --color-bg-error: #d45085;
   --color-primary-purple: #443fb6;
   --color-primary-pink: #d444ba;
 }