Style/#273: 공지사항 리스트 UI 변경

src/@types/announcement.ts

@@ -1,3 +1,8 @@
+import {
+  ANNOUNCEMENT_CATEGORY,
+  ANNOUNCEMENT_TYPE,
+} from '@constants/announcement';
+
 type AnnounceItemType = '고정' | '일반';
 
 export interface AnnounceItem {
@@ -11,3 +16,9 @@ export interface AnnounceItem {
 export type AnnounceItemList = {
   [key in AnnounceItemType]: AnnounceItem[];
 };
+
+export type AnnouncementCategory =
+  (typeof ANNOUNCEMENT_CATEGORY)[keyof typeof ANNOUNCEMENT_CATEGORY];
+
+export type AnnouncementType =
+  (typeof ANNOUNCEMENT_TYPE)[keyof typeof ANNOUNCEMENT_TYPE];

src/components/Card/AnnounceCard/AnnounceList/index.tsx

@@ -1,5 +1,10 @@
-import { AnnounceItemList } from '@type/announcement';
+import { ANNOUNCEMENT_TYPE } from '@constants/announcement';
+import styled from '@emotion/styled';
+import { AnnounceSearchList } from '@pages/Announcement/components';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { AnnounceItemList, AnnouncementType } from '@type/announcement';
 import { AxiosError, AxiosResponse } from 'axios';
+import { Fragment } from 'react';
 
 import AnnounceCard from '..';
 
@@ -13,30 +18,44 @@ interface AnnounceListProps {
   resource: {
     read: () => Resource;
   };
+  type: AnnouncementType;
 }
 
-const AnnounceList = ({ resource }: AnnounceListProps) => {
+const AnnounceList = ({ resource, type }: AnnounceListProps) => {
   const announceList: Resource = resource.read();
-
   if (announceList === null || announceList instanceof Error) {
-    return null;
+    return <></>;
   }
-  const { 고정: pinned, 일반: normal } = announceList as AnnounceItemList;
+
+  const { 고정: pinnedAnnouncement, 일반: normalAnnouncemnet } =
+    announceList as AnnounceItemList;
 
   return (
     <>
-      {pinned.map((announce, idx) => (
-        <div key={idx}>
-          <AnnounceCard {...announce} pinned={true} />
-        </div>
-      ))}
-      {normal.map((announce, idx) => (
-        <div key={idx}>
-          <AnnounceCard {...announce} />
-        </div>
-      ))}
+      <BoundaryLine />
+      {type === ANNOUNCEMENT_TYPE.NORMAL &&
+        normalAnnouncemnet.map((announce, idx) => (
+          <Fragment key={idx}>
+            <AnnounceCard {...announce} />
+          </Fragment>
+        ))}
+      {type === ANNOUNCEMENT_TYPE.PINNED &&
+        pinnedAnnouncement.map((announce, idx) => (
+          <Fragment key={idx}>
+            <AnnounceCard {...announce} />
+          </Fragment>
+        ))}
+      {type === ANNOUNCEMENT_TYPE.SEARCH && (
+        <AnnounceSearchList
+          announceList={[...pinnedAnnouncement, ...normalAnnouncemnet]}
+        />
+      )}
     </>
   );
 };
 
 export default AnnounceList;
+
+const BoundaryLine = styled.div`
+  border-bottom: 1px solid ${THEME.TEXT.BLACK};
+`;

src/components/Card/AnnounceCard/index.test.tsx

@@ -1,4 +1,5 @@
 import http from '@apis/http';
+import MajorProvider from '@components/MajorProvider';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AnnounceItemList } from '@type/announcement';
@@ -34,7 +35,12 @@ describe('공지사항 카드 컴포넌트 테스트', () => {
     const { 고정, 일반 } = announceList;
 
     일반.forEach(async (annouce) => {
-      render(<AnnounceCard {...annouce} />, { wrapper: MemoryRouter });
+      render(
+        <MajorProvider>
+          <AnnounceCard {...annouce} />
+        </MajorProvider>,
+        { wrapper: MemoryRouter },
+      );
     });
 
     const annouceCards = screen.getAllByTestId('card');

src/components/Card/AnnounceCard/index.tsx

@@ -1,93 +1,96 @@
-import Icon from '@components/Icon';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import useMajor from '@hooks/useMajor';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { AnnounceItem } from '@type/announcement';
+import openLink from '@utils/router/openLink';
 
 interface AnnounceCardProps extends AnnounceItem {
-  pinned?: boolean;
+  author?: string;
 }
 
 const AnnounceCard = ({
   title,
   link,
   uploadDate,
-  pinned = false,
+  author,
 }: AnnounceCardProps) => {
-  const onClick = () => {
-    window.open(link, '_blank');
-  };
+  const { major } = useMajor();
 
   uploadDate = uploadDate.slice(2);
 
   return (
-    <Card onClick={onClick} data-testid="card">
+    <Card onClick={() => openLink(link)} data-testid="card">
       <ContentContainer>
-        {pinned && <Icon kind="speaker" color={THEME.PRIMARY} />}
-        <AnnounceTitle pinned={pinned}>{title}</AnnounceTitle>
-        <VertialSeparator
-          css={css`
-            border-left: 1px solid gray;
-            height: 12px;
-            margin: 0 5px;
-          `}
-        />
-        <AnnounceDate>{uploadDate}</AnnounceDate>
+        <AnnounceTitle>{title}</AnnounceTitle>
+        <SubContent>
+          <AnnounceDate>20{uploadDate}</AnnounceDate>
+          <VertialBoundaryLine />
+          <Source>{author ? author : major}</Source>
+        </SubContent>
       </ContentContainer>
+      <HorizonBoundaryLine />
     </Card>
   );
 };
 
 export default AnnounceCard;
 
 const Card = styled.div`
-  height: 28px;
-  padding: 10px;
+  min-height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-
   color: ${THEME.TEXT.BLACK};
+
+  transition: 0.3s;
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.6;
+  }
 `;
 
 const ContentContainer = styled.div`
+  padding: 20px 0 20px 0;
   display: flex;
-  align-items: center;
+  line-height: 1.5;
+  flex-direction: column;
+
+  gap: 10px;
 `;
 
-const AnnounceTitle = styled.span<{ pinned: boolean }>`
+const AnnounceTitle = styled.span`
+  display: flex;
+  align-items: center;
   flex: 9;
-  font-size: 15px;
-  font-weight: ${({ pinned }) => (pinned ? 'bold' : 500)};
-  margin-left: ${({ pinned }) => (pinned ? '' : '28px')};
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &: hover {
-    cursor: pointer;
-  }
-
-  transition: 0.3s;
-  &:active {
-    transform: scale(0.95);
-    opacity: 0.6;
-  }
+  font-size: 16px;
+  font-weight: 500;
 `;
 
-const VertialSeparator = styled.div`
+const VertialBoundaryLine = styled.div`
   border-left: 1px solid gray;
   height: 12px;
   margin: 0 5px;
 `;
 
 const AnnounceDate = styled.span`
-  flex: 1;
-  font-size: 10px;
-  font-weight: bold;
-  text-align: end;
+  font-size: 13px;
   white-space: nowrap;
 
   color: ${THEME.TEXT.GRAY};
+  padding-right: 5px;
+`;
+
+const HorizonBoundaryLine = styled.div`
+  border-bottom: 1px solid ${THEME.BACKGROUND};
+`;
+
+const SubContent = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Source = styled.div`
+  font-size: 13px;
+  color: gray;
+  padding-left: 5px;
 `;

src/components/Card/InformCard/index.test.tsx

@@ -43,12 +43,13 @@ const setMajorMock = (isRender: boolean) => {
 
   jest.mock('react', () => ({
     ...jest.requireActual('react'),
-    useState: () => [mockMajor, mockSetMajor],
+    useState: () => [mockMajor, mockSetMajor, graduationLink],
   }));
 
   return {
     major: mockMajor,
     setMajor: mockSetMajor,
+    graduationLink,
   };
 };
 

src/components/Card/InformCard/index.tsx

@@ -23,9 +23,10 @@ const InformCard = ({
 }: InformCardProps) => {
   const { major } = useMajor();
   const { routerTo } = useRouter();
-  const routerToMajorDecision = () => routerTo('/major-decision');
   const { openModal, closeModal } = useModals();
 
+  const routeToMajorDecisionPage = () => routerTo('/major-decision');
+
   const handleMajorModal = () => {
     if (!majorRequired || major) {
       onClick();
@@ -38,48 +39,21 @@ const InformCard = ({
       onClose: () => closeModal(modals.alert),
       routerTo: () => {
         closeModal(modals.alert);
-        routerToMajorDecision();
+        routeToMajorDecisionPage();
       },
     });
   };
 
   return (
     <>
       <Card data-testid="card" onClick={handleMajorModal}>
-        <Wrapper>
-          <div
-            css={css`
-              display: flex;
-              border-radius: 50%;
-              background-color: ${THEME.PRIMARY};
-              height: 45px;
-              width: 45px;
-              justify-content: center;
-              align-items: center;
-            `}
-          >
-            <Icon kind={icon} color={THEME.TEXT.WHITE} />
-          </div>
-        </Wrapper>
-        <Wrapper>
-          <span
-            css={css`
-              font-size: 13px;
-            `}
-          >
-            {title}
-          </span>
-          <span
-            css={css`
-              font-size: 15px;
-              margin: auto 0;
-              font-weight: bold;
-              color: ${THEME.TEXT.BLACK};
-            `}
-          >
-            {title} 보러가기
-          </span>
-        </Wrapper>
+        <IconContainer>
+          <Icon kind={icon} color={THEME.TEXT.WHITE} />
+        </IconContainer>
+        <TextContainer>
+          <span>{title}</span>
+          <span>{title} 보러가기</span>
+        </TextContainer>
       </Card>
     </>
   );
@@ -89,33 +63,38 @@ export default InformCard;
 
 const Card = styled.div`
   display: flex;
-  flex-direction: row;
+  align-items: center;
   padding: 3% 1% 2% 0;
-  color: ${THEME.TEXT.GRAY};
-  height: 70px;
-
-  & > svg {
-    margin: 10px 0;
-  }
-  cursor: pointer;
+  height: 4rem;
 
   transition: all 0.2s ease-in-out;
 
-  &:active {
-    transform: scale(0.95);
-    opacity: 0.6;
+  span:nth-of-type(1) {
+    font-size: 12px;
+    color: ${THEME.TEXT.GRAY};
   }
-`;
 
-const Wrapper = styled.div`
-  &:first-of-type {
-    display: flex;
-    align-items: center;
+  span:nth-of-type(2) {
+    font-size: 16px;
+    font-weight: bold;
+    color: ${THEME.TEXT.BLACK};
   }
+`;
 
-  &:nth-of-type(2) {
-    display: flex;
-    flex-direction: column;
-    padding: 4% 0 3% 3%;
-  }
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const IconContainer = styled.div`
+  height: 45px;
+  width: 45px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+
+  border-radius: 50%;
+  background-color: ${THEME.PRIMARY};
 `;