부림이 0.4.3v 배포

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/@types/modals.ts

@@ -1,8 +1,5 @@
-import { modals } from '@hooks/useModals';
-
 export type Modals =
   | Array<{
-      Component: (typeof modals)[keyof typeof modals];
-      props: object;
+      Component: React.ReactElement<{ chidren: React.ReactNode }>;
     }>
   | [];

src/@types/styles/icon.ts

@@ -5,6 +5,9 @@ export type IconKind =
   | 'menu'
   | 'notification'
   | 'school'
+  | 'schoolBuilding'
+  | 'arrowRight'
+  | 'arrowDown'
   | 'arrowBack'
   | 'plus'
   | 'edit'
@@ -22,4 +25,6 @@ export type IconKind =
   | 'checkedRadio'
   | 'uncheckedRadio'
   | 'location'
-  | 'warning';
+  | 'warning'
+  | 'account'
+  | 'language';

src/App.tsx

@@ -1,34 +1,34 @@
+import BodyLayout from '@components/BodyLayout';
 import FooterTab from '@components/FooterTab';
 import Header from '@components/Header';
 import Announcement from '@pages/Announcement';
-import BodyLayout from '@pages/BodyLayout';
+import FAQPage from '@pages/FAQ';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
-import Map from '@pages/Map';
-import MapProvider from '@pages/Map/Provider';
+import MapPage from '@pages/Map';
 import My from '@pages/My';
+import SuggestionPage from '@pages/Suggestion';
 import Tip from '@pages/Tip';
 import RouteChangeTracker from '@utils/routeChangeTracker';
-import { Routes, Route, useLocation } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 const App = () => {
-  const location = useLocation();
   RouteChangeTracker();
 
   return (
     <>
-      {location.pathname !== '/map' && <Header />}
+      <Header />
       <Routes>
         <Route element={<BodyLayout />}>
           <Route path="/" element={<Home />} />
           <Route path="/announcement/*" element={<Announcement />} />
           <Route path="/major-decision/*" element={<MajorDecision />} />
           <Route path="/my" element={<My />} />
-          <Route path="/tip" element={<Tip />} />
-        </Route>
-        <Route element={<MapProvider />}>
-          <Route path="/map" element={<Map />} />
+          <Route path="/tip/:type" element={<Tip />} />
+          <Route path="/FAQ" element={<FAQPage />} />
+          <Route path="/suggestion" element={<SuggestionPage />} />
         </Route>
+        <Route path="/map" element={<MapPage />} />
       </Routes>
       <FooterTab />
     </>

src/apis/Suspense/fetch-announce-list.ts

@@ -1,12 +1,11 @@
-import Major from '@type/major';
 import { AxiosResponse } from 'axios';
 
 import wrapPromise from './wrap-promise';
 import http from '../http';
 
-const fetchAnnounceList = <T>(major: Major) => {
+const fetchAnnounceList = <T>(endPoint: string) => {
   const promise: Promise<AxiosResponse<T>> = http
-    .get(major ? `/api/announcement?major=${major}` : `/api/announcement`)
+    .get(`/api/announcement` + endPoint)
     .then((res) => res.data);
 
   return wrapPromise<T>(promise);

src/apis/suggestion/post-suggestion.ts

@@ -0,0 +1,18 @@
+import http from '@apis/http';
+import { SERVER_URL } from '@config/index';
+
+const postSuggestion = async (value: string | undefined) => {
+  await http.post(
+    `${SERVER_URL}/api/suggestion`,
+    {
+      content: value,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+};
+
+export default postSuggestion;

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

@@ -1,4 +1,5 @@
 import http from '@apis/http';
+import MajorProvider from '@components/Providers/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;
 `;