diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.scss b/src/components/ReceiptEdit/ReceiptEdit.module.scss index 89af27b..43f03b1 100644 --- a/src/components/ReceiptEdit/ReceiptEdit.module.scss +++ b/src/components/ReceiptEdit/ReceiptEdit.module.scss @@ -27,9 +27,10 @@ .Top { z-index: 1; - & > h1 { + .TitleBox { + display: flex; + justify-content: center; margin-top: 2.5rem; - white-space: pre-line; } } diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx index 7b0b9e6..b40792b 100644 --- a/src/components/ReceiptEdit/ReceiptEdit.tsx +++ b/src/components/ReceiptEdit/ReceiptEdit.tsx @@ -1,28 +1,73 @@ +import { useState } from "react"; + import styles from "@/components/ReceiptEdit/ReceiptEdit.module.scss"; import Button from "@/components/ui/Button/Button"; import Input from "@/components/ui/Input/Input"; import Text from "@/components/ui/Text/Text"; +import { useFocus } from "@/hooks/common/useFocus"; + const ReceiptEdit = () => { - const placeName = "청담커피 앤 토스트"; + const [placeName, setPlaceName] = useState("청담커피 앤 토스트"); + const [foodName, setFoodName] = useState("카야토스트+음료세트"); + + const { isFocus: isPlaceFocus, onFocus: handlePlaceFocus, onBlur: handlePlaceBlur } = useFocus(); + const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus(); return (
- - {`${placeName}에\n다녀오셨네요!`} +
+ + {placeName} + + + 에 + +
+ + 다녀오셨네요! +
-

가게명

- + + 가게명 + + setPlaceName(e.target.value)} + onFocus={handlePlaceFocus} + onBlur={handlePlaceBlur} + isFocus={isPlaceFocus} + /> +
+
+ + 음식명 + + setFoodName(e.target.value)} + onFocus={handleFoodFocus} + onBlur={handleFoodBlur} + isFocus={isFoodFocus} + />
-
); diff --git a/src/components/ui/Input/Input.tsx b/src/components/ui/Input/Input.tsx index ada5aed..5d04c14 100644 --- a/src/components/ui/Input/Input.tsx +++ b/src/components/ui/Input/Input.tsx @@ -1,4 +1,4 @@ -import { useState, forwardRef } from "react"; +import { forwardRef } from "react"; import classNames from "classnames"; @@ -6,26 +6,14 @@ import styles from "@/components/ui/Input/Input.module.scss"; import type { InputProps } from "@/components/ui/Input/Input.types"; const Input = forwardRef( - ({ className, type, variant = "primary", ...props }, ref) => { - const [isFocused, setIsFocused] = useState(false); - - const handleFocus = () => setIsFocused(true); - const handleBlur = () => setIsFocused(false); - + ({ className, type, variant = "primary", isFocus, ...props }, ref) => { return (
- + {variant === "primary" && }
); diff --git a/src/components/ui/Input/Input.types.ts b/src/components/ui/Input/Input.types.ts index b60af66..bd0bd8b 100644 --- a/src/components/ui/Input/Input.types.ts +++ b/src/components/ui/Input/Input.types.ts @@ -2,4 +2,5 @@ type InputFieldVariant = "primary" | "secondary"; export interface InputProps extends React.InputHTMLAttributes { variant?: InputFieldVariant; + isFocus?: boolean; } diff --git a/src/hooks/common/useFocus.ts b/src/hooks/common/useFocus.ts new file mode 100644 index 0000000..c72405c --- /dev/null +++ b/src/hooks/common/useFocus.ts @@ -0,0 +1,15 @@ +import { useState } from "react"; + +export const useFocus = () => { + const [isFocus, setIsFocus] = useState(false); + + const onFocus = () => { + setIsFocus(true); + }; + + const onBlur = () => { + setIsFocus(false); + }; + + return { isFocus, onFocus, onBlur }; +};