deploy : deploy merge modify

boostcampwm-2021 · Dec 2, 2021 · 650a47c · 650a47c
2 parents b4035ae + a0354c3
commit 650a47c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/.prettierrc b/.prettierrc
diff --git a/frontend/src/components/Room/PlayList/MusicSearch/MusicSearchItem.tsx b/frontend/src/components/Room/PlayList/MusicSearch/MusicSearchItem.tsx
@@ -26,20 +26,21 @@ const MusicSearchItem = ({ name, singer, thumbnail, description, selected, onCli
   };
 
   return (
-    <SearchResultItem selected={selected} length={name.length} isOverflow={isOverflow()} onClick={onClick}>
-      <Image src={thumbnail} alt="thumbnail" />
-      <TextWrapper>
-        <Title ref={item}>{name}</Title>
-        <Singer>{singer}</Singer>
-      </TextWrapper>
-      <DescriptionIcon onMouseEnter={onDetail} onMouseLeave={onDetailOut}>
-        {detail ? (
-          <Description>
-            <p>{description}</p>
-          </Description>
-        ) : null}
-      </DescriptionIcon>
-    </SearchResultItem>
+    <>
+      <SearchResultItem selected={selected} length={name.length} isOverflow={isOverflow()} onClick={onClick}>
+        <Image src={thumbnail} alt="thumbnail" />
+        <TextWrapper>
+          <Title ref={item}>{name}</Title>
+          <Singer>{singer}</Singer>
+        </TextWrapper>
+        <DescriptionIcon onMouseEnter={onDetail} onMouseLeave={onDetailOut} />
+      </SearchResultItem>
+      {detail ? (
+        <Description>
+          <p>{description}</p>
+        </Description>
+      ) : null}
+    </>
   );
 };
 
@@ -150,16 +151,15 @@ const DescriptionIcon = styled.div`
 `;
 
 const Description = styled.div`
-  position: fixed;
-  width: 8rem;
+  width: 14.5rem;
   font-size: 0.8rem;
   border: 1px solid #cacfd2;
-  background-color: #f7f9f9;
-  box-shadow: rgb(0 0 0 / 20%) 0px 10px 25px;
   color: #969696;
   border-radius: 0.5rem;
   padding: 0.8rem;
   text-align: justify;
+  display: flex;
+  justify-content: center;
 `;
 
 export default MusicSearchItem;
diff --git a/frontend/src/pages/Room.tsx b/frontend/src/pages/Room.tsx
@@ -43,7 +43,14 @@ const Room = ({ history }: { history: RouteComponentProps['history'] }) => {
   }, [userList]);
 
   if (userList[0] === 'bad') {
-    return <div>잘못된 요청입니다.</div>;
+    return (
+      <div className="main-wrap room-empty-notice">
+        <svg xmlns="http://www.w3.org/2000/svg" height="10rem" viewBox="0 0 24 24" width="10rem" fill="#beaee2">
+          <path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/>
+          <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
+        <h2 className="text-center">잘못된 요청입니다.</h2>
+      </div>
+    );
   }
 
   return (

diff --git a/frontend/src/stylesheets/main.scss b/frontend/src/stylesheets/main.scss
@@ -23,6 +23,10 @@
     text-align: start;
   }
 
+  .text-center {
+    text-align: center;
+  }
+
   .room-empty-notice {
     width: 100%;
     height: 100%;