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}
+
+
+ 에
+
+
+
+ 다녀오셨네요!
+
-
-
+ {isPlaceFocus || 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 };
+};