add state, update form styling

@@ -19,8 +19,18 @@ const Wrapper = styled.div`
   }
   }
 `;
 `;
 
 
+const HideWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  background-color: #535c68;
+  opacity: 0.6;
+`;
+
 const FormContainer = styled.div`
 const FormContainer = styled.div`
-  visibility: hidden;
   display: flex;
   display: flex;
   position: fixed;
   position: fixed;
   background-color: #f5f6fa;
   background-color: #f5f6fa;
@@ -143,35 +153,42 @@ const StyledLink = styled(Link)`
   }
   }
 `;
 `;
 
 
-export default ({ roomArray, action }) => {
+export default ({ roomArray, action, setAction }) => {
   return (
   return (
     <Wrapper>
     <Wrapper>
       <Header text={"KhuChat"}></Header>
       <Header text={"KhuChat"}></Header>
-      <RoomWrapper>
-        <RoomContainer>
-          <RoomUL>
-            {roomArray &&
-              roomArray.map((e) => (
-                <StyledLink to={e.name} key={e.id}>
-                  <RoomItem>{e.name}</RoomItem>
-                  <FontAwesomeIcon icon={faArrowRight} />
-                </StyledLink>
-              ))}
-          </RoomUL>
-        </RoomContainer>
-        <CreateContainer>
-          <StyledLink to="/">
-            <span>Create New Room</span>
-          </StyledLink>
-        </CreateContainer>
-      </RoomWrapper>
-      <FormContainer>
-        <Form>
-          <FormText>Room Name</FormText>
-          <Input placeholder="Enter new Room name" />
-          <Button text="Submit" />
-        </Form>
-      </FormContainer>
+      {action === "showList" ? (
+        <>
+          <RoomWrapper>
+            <RoomContainer>
+              <RoomUL>
+                {roomArray &&
+                  roomArray.map((e) => (
+                    <StyledLink to={e.name} key={e.id}>
+                      <RoomItem>{e.name}</RoomItem>
+                      <FontAwesomeIcon icon={faArrowRight} />
+                    </StyledLink>
+                  ))}
+              </RoomUL>
+            </RoomContainer>
+            <CreateContainer>
+              <StyledLink to="/" onClick={() => setAction("makeList")}>
+                <span>Create New Room</span>
+              </StyledLink>
+            </CreateContainer>
+          </RoomWrapper>
+        </>
+      ) : (
+        <HideWrapper className="hideWrapper">
+          <FormContainer>
+            <Form>
+              <FormText>Room Name</FormText>
+              <Input placeholder="Enter new Room name" />
+              <Button text="Submit" />
+            </Form>
+          </FormContainer>
+        </HideWrapper>
+      )}
     </Wrapper>
     </Wrapper>
   );
   );
 };
 };