Merge pull request #81 from SWM-FIRE/FIRE-395-fe-방-카드-디자인-변경

Fire 395 fe 방 카드 디자인 변경

src/components/main/Block.tsx

@@ -3,13 +3,18 @@ import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import blockInterface from '../../interface/block.interface';
 import MyAvatar from '../../assets/avatar/MyAvatar';
+import Theme from './Theme';
+import { ReactComponent as Bar } from '../../assets/svg/Room/Bar.svg';
 
 export default function Block({
   itemId,
   moderator,
   title,
   details,
   tags,
+  current,
+  total,
+  theme,
 }: blockInterface) {
   const navigate = useNavigate();
   const enterRoom = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -20,34 +25,45 @@ export default function Block({
     <Container>
       <AvatarContainer>
         <MyAvatar num={Number(moderator.avatar)} />
-        <Nickname>{moderator.nickname}</Nickname>
+        <Moderator>
+          방장<Nickname>{moderator.nickname}</Nickname>
+        </Moderator>
       </AvatarContainer>
       <DetailContainer>
         <Title>{title}</Title>
-        <Detail>{details}</Detail>
+        <Description>{details}</Description>
         <Tags>
           {tags.map((myTag) => (
             <Tag key={myTag}>#{myTag}</Tag>
           ))}
         </Tags>
+        <Detail>
+          <Theme theme={theme} />
+          <Bar />
+          <Attend>
+            {total}중 {current}명 참여중
+          </Attend>
+        </Detail>
       </DetailContainer>
       <Enter onClick={enterRoom}>입장하기 →</Enter>
     </Container>
   );
 }
 
 const Tags = styled.div`
-  position: absolute;
-  bottom: 0;
   display: flex;
   gap: 1rem;
   justify-content: center;
   align-items: center;
+  overflow-y: auto;
+  width: 100%;
+  white-space: nowrap;
+  ::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const Enter = styled.button`
-  position: absolute;
-  bottom: 6.4rem;
   width: 12.6rem;
   height: 4.8rem;
   font-size: 1.6rem;
@@ -73,52 +89,70 @@ const Tag = styled.div`
 `;
 
 const DetailContainer = styled.div`
-  position: relative;
-  margin-top: 3.2rem;
-  width: 29.3rem;
-  height: 14.7rem;
+  height: 18.8rem;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-around;
+  gap: 2rem;
 `;
 
-const Detail = styled.div`
-  margin-top: 1.6rem;
+const Description = styled.div`
   color: #777e90;
   font-size: 1.4rem;
 `;
 
 const AvatarContainer = styled.div`
-  margin-top: 6.4rem;
   width: 8rem;
   height: 11.4rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 1.6rem;
 `;
 
 const Title = styled.div`
   color: #fcfcfd;
   font-size: 2.4rem;
 `;
 
-const Nickname = styled.div`
-  color: white;
-  text-align: center;
-  margin-top: 0.8rem;
+const Moderator = styled.span`
+  color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
   font-size: 1.2rem;
   font-family: IBMPlexMonoRegular;
 `;
 
+const Nickname = styled.span`
+  color: white;
+  text-align: center;
+`;
+
+const Detail = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+
+const Attend = styled.div`
+  color: white;
+  font-size: 1.4rem;
+`;
+
 const Container = styled.div`
   background-color: #23262f;
   margin-right: 2.4rem;
   border-radius: 2rem;
-  width: 34rem;
+  width: 22.5%;
   height: 50rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
+  justify-content: space-between;
+  padding: 4.3rem 1rem;
+  min-width: 29.4rem;
 `;

src/components/main/CreateRoom.tsx

@@ -14,8 +14,6 @@ export default function CreateRoom() {
 }
 
 const Enter = styled.button`
-  position: absolute;
-  bottom: 6.4rem;
   width: 12.6rem;
   height: 4.8rem;
   font-size: 1.6rem;
@@ -27,13 +25,20 @@ const Enter = styled.button`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    transform: scale(1.05, 1.05);
+    -ms-transform: scale(1.05, 1.05);
+    -webkit-transform: scale(1.05, 1.05);
+  }
 `;
 
 const DetailContainer = styled.div`
   position: relative;
   margin-top: 3.2rem;
   width: 29.3rem;
-  height: 14.7rem;
+  height: 9.6rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -48,16 +53,21 @@ const Detail = styled.div`
 const Title = styled.div`
   color: #fcfcfd;
   font-size: 2.4rem;
+  font-weight: 600;
 `;
 
 const Container = styled.div`
   background-color: #23262f;
   margin-right: 2.4rem;
   border-radius: 2rem;
-  width: 34rem;
+  /* width: 34rem; */
+  width: 22.5%;
   height: 50rem;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   position: relative;
+  border: 1px dashed rgba(107, 114, 128, 1);
+  min-width: 29.4rem;
 `;

src/components/main/Header.tsx

@@ -28,8 +28,6 @@ export default function Header({ modalHandler }: { modalHandler: () => void }) {
 }
 
 const Login = styled.button`
-  position: absolute;
-  right: 5rem;
   width: 9.1rem;
   height: 4.8rem;
   border: 2px solid #494e5b;
@@ -43,13 +41,10 @@ const Login = styled.button`
 
 const Logo = styled.div`
   cursor: pointer;
-  font-size: 2.4rem;
-  position: absolute;
-  width: 9.2rem;
-  height: 2.2rem;
-  font-family: PretendardRegular, Arial;
+  font-size: 3.2rem;
+  font-family: IBMPlexSansKRRegular, Arial;
   color: white;
-  left: 4rem;
+  font-weight: 700;
 `;
 
 const AvatarContainer = styled.div`
@@ -60,9 +55,6 @@ const AvatarContainer = styled.div`
 `;
 
 const Profile = styled.div`
-  right: 4rem;
-  position: absolute;
-  height: 4rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -76,7 +68,8 @@ const Container = styled.div`
   width: 100vw;
   height: 10rem;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   border-bottom: solid #2b2e41 0.1rem;
+  padding: 0 4.4rem;
 `;

src/components/main/RoomCards.tsx

@@ -25,29 +25,42 @@ export default function RoomCards() {
             ? block
             : null,
         )
-        .map(({ moderator, title, details, tags, itemId }: blockInterface) => {
-          return (
-            <Block
-              itemId={itemId}
-              key={moderator.nickname}
-              moderator={moderator}
-              title={title}
-              details={details}
-              tags={tags}
-              current={0}
-              total={0}
-            />
-          );
-        })}
+        .map(
+          ({
+            moderator,
+            title,
+            details,
+            tags,
+            itemId,
+            current,
+            total,
+            theme,
+          }: blockInterface) => {
+            return (
+              <Block
+                itemId={itemId}
+                key={moderator.nickname}
+                moderator={moderator}
+                title={title}
+                details={details}
+                tags={tags}
+                current={current}
+                total={total}
+                theme={theme}
+              />
+            );
+          },
+        )}
     </Container>
   );
 }
 
 const Container = styled.div`
-  width: calc(100% - 10rem);
+  /* width: calc(100% - 10rem); */
+  width: 80%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  margin: 10rem 10rem 14.4rem 10rem;
+  justify-content: flex-start;
+  margin: 10rem auto;
   row-gap: 7.6rem;
 `;

src/components/main/Scrolls.tsx

@@ -27,7 +27,14 @@ export default function Scrolls() {
               : null,
           )
           .map(
-            ({ moderator, title, details, tags, itemId }: blockInterface) => {
+            ({
+              moderator,
+              title,
+              details,
+              tags,
+              itemId,
+              theme,
+            }: blockInterface) => {
               return (
                 <Block
                   itemId={itemId}
@@ -38,6 +45,7 @@ export default function Scrolls() {
                   tags={tags}
                   current={0}
                   total={0}
+                  theme={theme}
                 />
               );
             },