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,