diff --git a/src/components/main/createRoomModal/CreateRoomForm.tsx b/src/components/main/createRoomModal/CreateRoomForm.tsx index 515e81c..10ae6b9 100644 --- a/src/components/main/createRoomModal/CreateRoomForm.tsx +++ b/src/components/main/createRoomModal/CreateRoomForm.tsx @@ -16,6 +16,7 @@ export default function CreateRoomForm({ onClickTheme, onClickTotal, isDisable, + onAddTag, }) { const { title, details, total, newTag, tags, isPublic, password } = inputs; @@ -34,6 +35,7 @@ export default function CreateRoomForm({ onChange={onChange} onKeyPress={onKeyPress} onDeleteTag={onDeleteTag} + onAddTag={onAddTag} /> diff --git a/src/components/main/createRoomModal/CreateRoomModal.tsx b/src/components/main/createRoomModal/CreateRoomModal.tsx index 0ab3a27..89666c6 100644 --- a/src/components/main/createRoomModal/CreateRoomModal.tsx +++ b/src/components/main/createRoomModal/CreateRoomModal.tsx @@ -18,6 +18,7 @@ export default function CreateRoomModal({ onClickTheme, onClickTotal, isDisable, + onAddTag, } = useCreateRoom({ closeCreateRoom }); const { isLoading, mutate } = useRoomCreator(); @@ -49,6 +50,7 @@ export default function CreateRoomModal({ onClickTheme={onClickTheme} onClickTotal={onClickTotal} isDisable={isDisable} + onAddTag={onAddTag} /> diff --git a/src/components/main/createRoomModal/Tag.tsx b/src/components/main/createRoomModal/Tag.tsx index f16e5d6..43bf022 100644 --- a/src/components/main/createRoomModal/Tag.tsx +++ b/src/components/main/createRoomModal/Tag.tsx @@ -7,6 +7,7 @@ export default function TagsComponent({ onChange, onKeyPress, onDeleteTag, + onAddTag, }) { return ( <> @@ -32,6 +33,9 @@ export default function TagsComponent({ onKeyPress={onKeyPress} placeholder="태그 입력 후 엔터" /> + + 태그 등록 + ); @@ -89,3 +93,23 @@ const TagName = styled.div` color: rgba(69, 178, 107, 1); font-family: IBMPlexSansKRRegular, Arial; `; + +const AddTagButton = styled.button` + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 8rem; + height: 4rem; + font-size: 1.4rem; + align-items: center; + border-radius: 0.6rem; + background-color: rgb(51, 55, 69); + color: #bdbdbd; + padding: 0.5rem 1rem; + + cursor: pointer; + &:hover { + background-color: rgb(72, 77, 96); + } +`; diff --git a/src/hooks/useCreateRoom.ts b/src/hooks/useCreateRoom.ts index 337d0e4..f714d39 100644 --- a/src/hooks/useCreateRoom.ts +++ b/src/hooks/useCreateRoom.ts @@ -140,12 +140,12 @@ export default function useCreateRoom({ const onSubmit = () => { if (isDisable()) return; const { mutate } = useRoomCreator(); - console.log(inputs); mutate(); }; return { inputs, + onAddTag, onChange, onKeyPress, onDeleteTag,