diff --git a/public/banner-image.png b/public/banner-image.png index a9efcf13..5e4396dd 100644 Binary files a/public/banner-image.png and b/public/banner-image.png differ diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx index 97f91b64..1848d7b6 100644 --- a/src/components/common/Banner.tsx +++ b/src/components/common/Banner.tsx @@ -33,52 +33,18 @@ const Banner = ({ content, buttonText, category }: Props) => { {buttonText} -
+ {category === "정보" && (
- {category === "정보" && ( -
-
-
- banner-image1 -
-
-
- banner-image2 -
-
-
- banner-image3 -
-
-
- )} + banner-image
-
+ )} ); diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx index ddaa101f..e6983469 100644 --- a/src/components/informations/write/InformationEditor.tsx +++ b/src/components/informations/write/InformationEditor.tsx @@ -15,7 +15,7 @@ interface Props { editorStore: useEditorStoreType; locationModal: boolean; categoryModal: boolean; - hashtag: string; + inputTagRef: React.RefObject; imagesHook: useDragScrollType; hashtagsHook: useDragScrollType; loading: boolean; @@ -24,7 +24,7 @@ interface Props { closeLocationModal: () => void; showCategoryModal: () => void; closeCategoryModal: () => void; - setHashtag: Dispatch>; + onChangeHashTagHandler: (e: React.KeyboardEvent) => void; } const InformationEditor = ({ @@ -32,7 +32,7 @@ const InformationEditor = ({ editorStore, locationModal, categoryModal, - hashtag, + inputTagRef, imagesHook, hashtagsHook, loading, @@ -41,7 +41,7 @@ const InformationEditor = ({ closeLocationModal, showCategoryModal, closeCategoryModal, - setHashtag, + onChangeHashTagHandler, }: Props) => { return (
@@ -136,25 +136,27 @@ const InformationEditor = ({
= 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} /> ); };