Merge pull request #309 from SWM-FIRE/dev

2024 bug fix
SWM-FIRE · Jun 2, 2024 · 8acd2dc · 8acd2dc
2 parents 0d84a3a + 1cc9a6c
commit 8acd2dc
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 32 deletions.
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/components/main/createRoomModal/Theme.tsx b/src/components/main/createRoomModal/Theme.tsx
@@ -39,18 +39,20 @@ export default function Theme({ onClickTheme }) {
         </SelectIcon>
       </SelectButton>
       {isDropDown && (
-        <DropDown data-cy="create-room-modal-theme-dropdown">
-          {themeJson.map((theme) => (
-            <Option
-              value={theme.value}
-              key={theme.value}
-              onClick={onClickOption}
-              type="button"
-            >
-              {theme.name}
-            </Option>
-          ))}
-        </DropDown>
+        <DropDownPosition>
+          <DropDown data-cy="create-room-modal-theme-dropdown">
+            {themeJson.map((theme) => (
+              <Option
+                value={theme.value}
+                key={theme.value}
+                onClick={onClickOption}
+                type="button"
+              >
+                {theme.name}
+              </Option>
+            ))}
+          </DropDown>
+        </DropDownPosition>
       )}
       {error && <Error />}
     </Component>
@@ -99,16 +101,21 @@ const SelectIcon = styled.div`
   width: 5%;
 `;
 
-const DropDown = styled.div`
+const DropDownPosition = styled.div`
   position: absolute;
+  top: 8.4rem;
+  left: 0;
   width: 100%;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+const DropDown = styled.div`
   background-color: #191f28;
   border-radius: 0.6rem;
-  top: 8.9rem;
-  z-index: 2;
   @keyframes dropdown {
     0% {
-      transform: translateY(-5%);
+      transform: translateY(-100%);
     }
     100% {
       transform: translateY(0);

diff --git a/src/components/main/createRoomModal/Total.tsx b/src/components/main/createRoomModal/Total.tsx
@@ -40,17 +40,19 @@ export default function Total({ total, onClickTotal }) {
         </SelectIcon>
       </SelectButton>
       {isDropDown && (
-        <DropDown data-cy="create-room-modal-total-dropdown">
-          <Option onClick={onClickOption} type="button">
-            2
-          </Option>
-          <Option onClick={onClickOption} type="button">
-            3
-          </Option>
-          <Option onClick={onClickOption} type="button">
-            4
-          </Option>
-        </DropDown>
+        <DropDownPosition>
+          <DropDown data-cy="create-room-modal-total-dropdown">
+            <Option onClick={onClickOption} type="button">
+              2
+            </Option>
+            <Option onClick={onClickOption} type="button">
+              3
+            </Option>
+            <Option onClick={onClickOption} type="button">
+              4
+            </Option>
+          </DropDown>
+        </DropDownPosition>
       )}
       {error && <Error />}
     </Component>
@@ -99,16 +101,21 @@ const SelectIcon = styled.div`
   width: 5%;
 `;
 
-const DropDown = styled.div`
+const DropDownPosition = styled.div`
   position: absolute;
+  top: 8.4rem;
+  left: 0;
   width: 100%;
+  overflow: hidden;
+  z-index: 1;
+`;
+
+const DropDown = styled.div`
   background-color: #191f28;
   border-radius: 0.6rem;
-  top: 8.9rem;
-  z-index: 2;
   @keyframes dropdown {
     0% {
-      transform: translateY(-5%);
+      transform: translateY(-100%);
     }
     100% {
       transform: translateY(0);

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,