= 10 ? "bg-gray-100" : "bg-transparent"} h-[3.3125rem] w-full rounded-3xl border-[0.0625rem] py-2 pl-5 text-sm font-medium outline-none hover:border-b-[0.0625rem] hover:border-main focus:border-main`}
- type="text"
- name="hashtag"
placeholder="#해시태그로 키워드를 써보세요!"
- value={hashtag}
disabled={editorStore.hashtags.length >= 10}
- onChange={(e) => {
- setHashtag(e.target.value.slice(0, 15));
- }}
+ onKeyUp={onChangeHashTagHandler}
onKeyDown={(e) => {
if (e.key === "#") {
e.preventDefault();
e.persist();
- } else if (e.key === "Enter") {
+ } else if (
+ e.key !== "Backspace" &&
+ inputTagRef.current !== null &&
+ inputTagRef.current.value.length >= 15
+ ) {
e.preventDefault();
e.persist();
- editorStore.addHashtag(hashtag);
- setHashtag("");
+ inputTagRef.current.value = inputTagRef.current.value.slice(
+ 0,
+ 15,
+ );
}
}}
+ ref={inputTagRef}
/>
{
+ const hashtag = inputTagRef.current?.value ?? "";
+ if (hashtag === "") {
+ return;
+ }
editorStore.addHashtag(hashtag);
- setHashtag("");
+ (inputTagRef.current as HTMLInputElement).value = "";
}}
>
+
diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
index e890db58..1d2f94a4 100644
--- a/src/containers/informations/write/InformationEditorContainer.tsx
+++ b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -8,7 +8,7 @@ import useAuthStore from "@/store/authStore";
import useEditorStore from "@/store/editorStore";
import { InformationRegisterResponseDto } from "@/types/InformationDto";
import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import sanitizeHtml from "sanitize-html";
const InformationEditorContainer = () => {
@@ -17,7 +17,7 @@ const InformationEditorContainer = () => {
const { id } = useAuthStore();
const editorStore = useEditorStore();
const initialize = editorStore.initialize;
- const [hashtag, setHashtag] = useState("");
+ const inputTagRef = useRef(null);
const router = useRouter();
const [loading, setLoading] = useState(false);
@@ -45,6 +45,18 @@ const InformationEditorContainer = () => {
setCategoryModal(false);
};
+ const onChangeHashTagHandler = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter") {
+ const hashtag = inputTagRef.current?.value ?? "";
+ if (hashtag === "") {
+ return;
+ }
+
+ editorStore.addHashtag(hashtag);
+ (inputTagRef.current as HTMLInputElement).value = "";
+ }
+ };
+
const onSubmit = async () => {
// Validate from fields using Zod
const validatedFields = InformationCreateFormSchema.safeParse({
@@ -150,7 +162,7 @@ const InformationEditorContainer = () => {
editorStore={editorStore}
locationModal={locationModal}
categoryModal={categoryModal}
- hashtag={hashtag}
+ inputTagRef={inputTagRef}
imagesHook={imagesHook}
hashtagsHook={hashtagsHook}
loading={loading}
@@ -159,7 +171,7 @@ const InformationEditorContainer = () => {
closeLocationModal={closeLocationModal}
showCategoryModal={showCategoryModal}
closeCategoryModal={closeCategoryModal}
- setHashtag={setHashtag}
+ onChangeHashTagHandler={onChangeHashTagHandler}
/>
);
};