feat: add [addTag] button for creating room

SWM-FIRE · Jun 2, 2024 · 1cc9a6c · 1cc9a6c
1 parent ebcdd99
commit 1cc9a6c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,