From 1cc9a6c8b462ece3665c52baa7edf6ab7eed4bd5 Mon Sep 17 00:00:00 2001
From: 071yoon <yeonggilol@gmail.com>
Date: Sun, 2 Jun 2024 15:35:50 +0900
Subject: [PATCH] feat: add [addTag] button for creating room

---
 .../main/createRoomModal/CreateRoomForm.tsx   |  2 ++
 .../main/createRoomModal/CreateRoomModal.tsx  |  2 ++
 src/components/main/createRoomModal/Tag.tsx   | 24 +++++++++++++++++++
 src/hooks/useCreateRoom.ts                    |  2 +-
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/main/createRoomModal/CreateRoomForm.tsx b/src/components/main/createRoomModal/CreateRoomForm.tsx
index 515e81c6..10ae6b93 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}
         />
       </Section>
       <Total total={total} onClickTotal={onClickTotal} />
diff --git a/src/components/main/createRoomModal/CreateRoomModal.tsx b/src/components/main/createRoomModal/CreateRoomModal.tsx
index 0ab3a270..89666c61 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}
         />
       </ModalBox>
     </ModalBackground>
diff --git a/src/components/main/createRoomModal/Tag.tsx b/src/components/main/createRoomModal/Tag.tsx
index f16e5d6e..43bf0228 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="태그 입력 후 엔터"
         />
+        <AddTagButton type="button" onClick={onAddTag}>
+          태그 등록
+        </AddTagButton>
       </TagComponent>
     </>
   );
@@ -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 337d0e4e..f714d393 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,