관리자 페이지 공지사항 (#issue 323)

src/api/admin/customerService/Notice.api.ts

@@ -0,0 +1,37 @@
+import type { ApiCommonBasicType } from '../../../models/apiCommon';
+import { httpClient } from '../../http.api';
+
+export const postNotice = async (formData: FormData) => {
+  try {
+    await httpClient.post<ApiCommonBasicType>(`/notice`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const putNotice = async (id: number, formData: FormData) => {
+  try {
+    await httpClient.put<ApiCommonBasicType>(`/notice/${id}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const deleteNotice = async (id: number) => {
+  try {
+    await httpClient.delete<ApiCommonBasicType>(`/notice/${id}`);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/alarm.api.ts

@@ -1,4 +1,5 @@
 import type { ApiAlarmList } from '../models/alarm';
+import useAuthStore from '../store/authStore';
 import { httpClient } from './http.api';
 
 export const getAlarmList = async () => {
@@ -36,14 +37,19 @@ export const patchAlarm = async (id: number) => {
 };
 
 export const testLiveAlarm = async () => {
-  try {
-    const response = await httpClient.get<ApiAlarmList>(
-      `/user/send-alarm?alarmFilter=0`
-    );
+  const { accessToken } = useAuthStore.getState();
+  if (accessToken) {
+    try {
+      const response = await httpClient.get<ApiAlarmList>(
+        '/user/send-alarm?alarmFilter=0'
+      );
 
-    return response;
-  } catch (e) {
-    console.error(e);
-    throw e;
+      return response;
+    } catch (e) {
+      console.error(e);
+      throw e;
+    }
+  } else {
+    return;
   }
 };

src/components/admin/searchBar/SearchBar.styled.ts

@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const AdminSearchBarContainer = styled.form`
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  margin-bottom: 2rem;
+`;
+
+export const AdminSearchBarWrapper = styled.div`
+  display: flex;
+  width: 60%;
+`;
+
+export const AdminSearchBarInputWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border: 1px solid ${({ theme }) => theme.color.deepGrey};
+  border-radius: ${({ theme }) => theme.borderRadius.large} 0 0
+    ${({ theme }) => theme.borderRadius.large};
+`;
+
+export const AdminSearchBarInput = styled.input`
+  width: 100%;
+  font-size: 1.3rem;
+`;
+
+export const AdminSearchBarBackIcon = styled.button`
+  svg {
+    width: 1.5rem;
+  }
+`;
+
+export const AdminSearchBarButton = styled.button`
+  width: 15%;
+  border: 1px solid ${({ theme }) => theme.color.navy};
+  background: ${({ theme }) => theme.color.navy};
+  border-radius: 0 ${({ theme }) => theme.borderRadius.large}
+    ${({ theme }) => theme.borderRadius.large} 0;
+  font-size: 1.3rem;
+  color: ${({ theme }) => theme.color.white};
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
+`;
+
+export const WriteLink = styled(Link)`
+  border: 1px solid ${({ theme }) => theme.color.navy};
+  background: ${({ theme }) => theme.color.navy};
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  font-size: 1rem;
+  color: ${({ theme }) => theme.color.white};
+  padding: 0.5rem 1rem;
+  transition: all 300ms ease-in-out;
+
+  &:hover {
+    background: ${({ theme }) => theme.color.white};
+    color: ${({ theme }) => theme.color.navy};
+  }
+`;

src/components/admin/searchBar/SearchBar.tsx

@@ -0,0 +1,82 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../constants/user/customerService';
+import * as S from './SearchBar.styled';
+import { useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { useModal } from '../../../hooks/useModal';
+import Modal from '../../common/modal/Modal';
+import { ADMIN_ROUTE } from '../../../constants/routes';
+
+interface SearchBarProps {
+  onGetKeyword: (value: string) => void;
+  value: string;
+}
+
+export default function SearchBar({ onGetKeyword, value }: SearchBarProps) {
+  const [keyword, setKeyword] = useState<string>('');
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+
+  const handleKeyword = (inputValue: string) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    if (inputValue === '') {
+      newSearchParams.delete('keyword');
+    } else {
+      newSearchParams.set('keyword', inputValue);
+    }
+    setSearchParams(newSearchParams);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (keyword.trim() === '') {
+      return handleModalOpen(MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword);
+    } else {
+      onGetKeyword(keyword);
+      handleKeyword(keyword);
+      return;
+    }
+  };
+
+  const handleChangeKeyword = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setKeyword(value);
+  };
+
+  const handleClickSearchDefault = () => {
+    setKeyword('');
+    onGetKeyword('');
+    handleKeyword('');
+  };
+
+  return (
+    <S.AdminSearchBarContainer onSubmit={handleSubmit}>
+      <S.AdminSearchBarWrapper>
+        <S.AdminSearchBarInputWrapper>
+          <S.AdminSearchBarInput
+            placeholder={MODAL_MESSAGE_CUSTOMER_SERVICE.noKeyword}
+            value={keyword ? keyword : value}
+            onChange={handleChangeKeyword}
+          />
+          {value && (
+            <S.AdminSearchBarBackIcon
+              type='button'
+              onClick={handleClickSearchDefault}
+            >
+              <XMarkIcon />
+            </S.AdminSearchBarBackIcon>
+          )}
+        </S.AdminSearchBarInputWrapper>
+        <S.AdminSearchBarButton>검색</S.AdminSearchBarButton>
+      </S.AdminSearchBarWrapper>
+      <S.WriteLink to={ADMIN_ROUTE.write} state={{ form: location.pathname }}>
+        작성하기
+      </S.WriteLink>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    </S.AdminSearchBarContainer>
+  );
+}

src/components/common/admin/sidebar/AdminSidebar.styled.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 export const LayoutContainer = styled.div`
+  max-width: 1440px;
   height: 100vh;
   display: flex;
 `;

src/components/common/admin/title/AdminTitle.styled.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const TitleContainer = styled.header``;
+export const TitleContainer = styled.header`
+  margin-bottom: 1rem;
+`;
 
 export const TitleWrapper = styled.div`
   margin-bottom: 2rem;

src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts

@@ -3,8 +3,8 @@ import { SpinnerWrapperStyled } from '../../mypage/Spinner.styled';
 
 export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
-export const Container = styled.section`
-  width: 75%;
+export const Container = styled.section<{ $width: string }>`
+  width: ${({ $width }) => $width};
   margin: 0 auto;
   margin-bottom: 2rem;
 `;

src/components/user/customerService/noticeDetail/NoticeDetailBundle.tsx

@@ -7,11 +7,18 @@ import NoticeDetailHeader from './header/NoticeDetailHeader';
 import Spinner from '../../mypage/Spinner';
 import ListButton from './bottom/button/ListButton';
 
-export default function NoticeDetailBundle() {
+interface NoticeDetailBundleProps {
+  $width: string;
+}
+
+export default function NoticeDetailBundle({
+  $width,
+}: NoticeDetailBundleProps) {
   const location = useLocation();
   const { noticeId } = useParams();
   const id = noticeId || String(location.state.id);
   const keyword = location.state?.keyword ?? '';
+  const includesAdmin = location.pathname.includes('admin') ?? false;
 
   const { noticeDetail: noticeDetailData, isLoading } = useGetNoticeDetail(id);
 
@@ -25,7 +32,7 @@ export default function NoticeDetailBundle() {
 
   if (!noticeDetailData) {
     return (
-      <S.Container>
+      <S.Container $width={$width}>
         <NoticeDetailContent
           id={0}
           title='해당 공지사항을 찾을 수 없습니다.'
@@ -49,8 +56,8 @@ export default function NoticeDetailBundle() {
   } = noticeDetailData;
 
   return (
-    <S.Container>
-      <NoticeDetailHeader />
+    <S.Container $width={$width}>
+      {!includesAdmin && <NoticeDetailHeader />}
       <NoticeDetailContent
         id={detailId}
         title={title}

src/components/user/customerService/noticeDetail/bottom/button/ListButton.tsx

@@ -1,4 +1,5 @@
-import { ROUTES } from '../../../../../../constants/routes';
+import { useLocation } from 'react-router-dom';
+import { ADMIN_ROUTE, ROUTES } from '../../../../../../constants/routes';
 import ContentBorder from '../../../../../common/contentBorder/ContentBorder';
 import * as S from './ListButton.styled';
 
@@ -7,14 +8,20 @@ interface ListButtonProps {
 }
 
 export default function ListButton({ keyword }: ListButtonProps) {
+  const location = useLocation();
+  const includesAdmin = location.pathname.includes('admin') ?? false;
   const isKeyword = keyword ? `?keyword=${keyword}` : ``;
 
   return (
     <>
       <ContentBorder />
       <S.ListWrapper>
         <S.ListLink
-          to={`${ROUTES.customerService}/${ROUTES.notice}${isKeyword}`}
+          to={
+            includesAdmin
+              ? `${ADMIN_ROUTE.admin}/${ADMIN_ROUTE.notice}${isKeyword}`
+              : `${ROUTES.customerService}/${ROUTES.notice}${isKeyword}`
+          }
         >
           <S.ListTitle>목록</S.ListTitle>
         </S.ListLink>

src/constants/admin/adminModal.ts

@@ -0,0 +1,7 @@
+export const ADMIN_MODAL_MESSAGE = {
+  writeSuccess: '성공적으로 작성되었습니다.',
+  writeFail: '작성이 실패하였습니다.',
+  writeDeleteSuccess: '삭제되었습니다.',
+  writeDeleteFail: '삭제가 실패하였습니다.',
+  writeError: '알수없는 에러가 발생했습니다.',
+};

src/constants/routes.ts

@@ -41,4 +41,6 @@ export const ADMIN_ROUTE = {
   reports: 'reports',
   inquiries: 'inquiries',
   manage: 'manage',
+  detail: 'detail',
+  write: 'write',
 };