Style: 공지사항 제목 1줄, 고정과 일반 구분하는 css 추가

GDSC-PKNU-Official · Aug 26, 2023 · e2fa3d6 · e2fa3d6
1 parent f9a8efb
commit e2fa3d6
Showing 1 changed file with 42 additions and 25 deletions.
diff --git a/src/components/Card/AnnounceCard/index.tsx b/src/components/Card/AnnounceCard/index.tsx
@@ -17,50 +17,67 @@ const AnnounceCard = ({
   const onClick = () => {
     window.open(link, '_blank');
   };
+
+  uploadDate = uploadDate.slice(2);
+
   return (
     <Card onClick={onClick} data-testid="card">
-      <div
-        css={css`
-          display: flex;
-          align-items: center;
-        `}
-      >
+      <ContentContainer>
         {pinned && <Icon kind="speaker" color={THEME.PRIMARY} />}
-        <span>{title}</span>
-        <div
+        <AnnounceTitle pinned={pinned}>{title}</AnnounceTitle>
+        <VertialSeparator
           css={css`
             border-left: 1px solid gray;
             height: 12px;
-            margin: 0 10px;
+            margin: 0 5px;
           `}
         />
-        <span>{uploadDate}</span>
-      </div>
+        <AnnounceDate>{uploadDate}</AnnounceDate>
+      </ContentContainer>
     </Card>
   );
 };
 
 export default AnnounceCard;
 
 const Card = styled.div`
+  height: 28px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
-
-  padding: 10px;
-  cursor: pointer;
+  justify-content: center;
 
   color: ${THEME.TEXT.BLACK};
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const AnnounceTitle = styled.span<{ pinned: boolean }>`
+  flex: 9;
+  font-size: 15px;
+  font-weight: ${({ pinned }) => (pinned ? 'bold' : 500)};
+  margin-left: ${({ pinned }) => (pinned ? '' : '28px')};
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const VertialSeparator = styled.div`
+  border-left: 1px solid gray;
+  height: 12px;
+  margin: 0 5px;
+`;
 
-  & > div > span:first-of-type {
-    font-size: 18px;
-    font-weight: bold;
-    flex: 9;
-    text-align: center;
-  }
+const AnnounceDate = styled.span`
+  flex: 1;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: end;
+  white-space: nowrap;
 
-  & > div > span:nth-of-type(2) {
-    font-size: 12px;
-    flex: 1;
-    text-align: center;
-  }
+  color: ${THEME.TEXT.GRAY};
 `;