Merge pull request #277 from devpalsPlus/feat/#276

공지사항 ui, api 연결 (#isuue 276)

Author: YouD0313

src/App.tsx

@@ -4,6 +4,8 @@ import { GlobalStyle } from './style/global';
 import { defaultTheme } from './style/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SearchFilteringProvider } from './context/SearchFilteringContext';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -21,6 +23,7 @@ function App() {
         <GlobalStyle />
         <QueryClientProvider client={queryClient}>
           <AppRoutes />
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </SearchFilteringProvider>
     </ThemeProvider>

src/api/customerService.api.ts

@@ -1,4 +1,10 @@
-import type { ApiFAQ, SearchKeyword } from '../models/customerService';
+import type {
+  ApiFAQ,
+  ApiNotice,
+  ApiNoticeDetail,
+  NoticeSearch,
+  SearchKeyword,
+} from '../models/customerService';
 import { httpClient } from './http.api';
 
 export const getFAQ = async (params: SearchKeyword) => {
@@ -11,3 +17,25 @@ export const getFAQ = async (params: SearchKeyword) => {
     throw e;
   }
 };
+
+export const getNotice = async (params: NoticeSearch) => {
+  try {
+    const response = await httpClient.get<ApiNotice>(`/notice`, { params });
+
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};
+
+export const getNoticeDetail = async (id: string) => {
+  try {
+    const response = await httpClient.get<ApiNoticeDetail>(`/notice/${id}`);
+
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/components/common/contentBorder/ContentBorder.styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ContentBorder = styled.div`
+  width: 100%;
+  height: 0.5px;
+  background: ${({ theme }) => theme.color.placeholder};
+`;

src/components/common/contentBorder/ContentBorder.tsx

@@ -0,0 +1,5 @@
+import * as S from './ContentBorder.styled';
+
+export default function ContentBorder() {
+  return <S.ContentBorder></S.ContentBorder>;
+}

…ardLists/pagination/Pagination.styled.ts …s/common/pagination/Pagination.styled.tssrc/components/home/projectCardLists/pagination/Pagination.styled.ts renamed to src/components/common/pagination/Pagination.styled.ts src/components/home/projectCardLists/pagination/Pagination.styled.ts renamed to src/components/common/pagination/Pagination.styled.ts

@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { useProjectCardListData } from '../../../../hooks/useProjectCardListData';
-import { useSaveSearchFiltering } from '../../../../hooks/useSaveSearchFiltering';
 import * as S from './Pagination.styled';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   EllipsisHorizontalIcon,
 } from '@heroicons/react/24/outline';
 
-export default function Pagination() {
-  const { projectListsData } = useProjectCardListData();
-  const { searchFilters, handleUpdateFilters } = useSaveSearchFiltering();
-  const lastPage = projectListsData?.lastPage;
-  const currentPage = searchFilters.page;
+interface PaginationProps {
+  page: number;
+  getLastPage: number;
+  onChangePagination: (page: number) => void;
+}
+
+export default function Pagination({
+  page,
+  getLastPage,
+  onChangePagination,
+}: PaginationProps) {
+  const lastPage = getLastPage;
+  const currentPage = page;
 
   const calculatePageRange = () => {
     if (!lastPage) return;
@@ -39,22 +45,19 @@ export default function Pagination() {
     const target = e.target as HTMLElement;
     const dataId = target.dataset.id;
     if (!dataId) return;
-    handleUpdateFilters('page', Number(dataId));
+    onChangePagination(Number(dataId));
   };
-
   return (
     <S.Container>
       <S.Wrapper onClick={handleMovePaginationClick}>
         {currentPage !== 1 && (
           <>
             <S.PaginationButton
-              onClick={() => handleUpdateFilters('page', currentPage - 1)}
+              onClick={() => onChangePagination(currentPage - 1)}
             >
               <ChevronLeftIcon />
             </S.PaginationButton>
-            <S.PaginationDoubleButton
-              onClick={() => handleUpdateFilters('page', 1)}
-            >
+            <S.PaginationDoubleButton onClick={() => onChangePagination(1)}>
               1
             </S.PaginationDoubleButton>
             <EllipsisHorizontalIcon />
@@ -74,12 +77,12 @@ export default function Pagination() {
           <>
             <EllipsisHorizontalIcon />
             <S.PaginationDoubleButton
-              onClick={() => handleUpdateFilters('page', lastPage)}
+              onClick={() => onChangePagination(lastPage)}
             >
               {lastPage}
             </S.PaginationDoubleButton>
             <S.PaginationButton
-              onClick={() => handleUpdateFilters('page', currentPage + 1)}
+              onClick={() => onChangePagination(currentPage + 1)}
             >
               <ChevronRightIcon />
             </S.PaginationButton>

…ojectCardLists/pagination/Pagination.tsx …ponents/common/pagination/Pagination.tsxsrc/components/home/projectCardLists/pagination/Pagination.tsx renamed to src/components/common/pagination/Pagination.tsx src/components/home/projectCardLists/pagination/Pagination.tsx renamed to src/components/common/pagination/Pagination.tsx

@@ -9,11 +9,11 @@ export const ListWrapper = styled.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 0;
+  padding: 1.2rem 0;
 `;
 
 export const ListTitle = styled.div`
-  font-size: 1.3rem;
+  font-size: 1.2rem;
   padding-left: 1.5rem;
   font-weight: bold;
 `;

src/components/customerService/faq/FAQContent.styled.ts

@@ -50,8 +50,8 @@ export const CategorySelect = styled.button<{ $isCategoryOpen: boolean }>`
     height: 1.3rem;
     transition: transform 300ms ease-in-out;
     transform: rotate(0deg);
-    ${({ $isOpen }) =>
-      $isOpen &&
+    ${({ $isCategoryOpen }) =>
+      $isCategoryOpen &&
       css`
         transform: rotate(180deg);
       `}

src/components/customerService/inquiry/Inquiry.styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const Container = styled.nav`
+  width: 100%;
+`;
+
+export const Wrapper = styled.button`
+  width: 100%;
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background: ${({ theme }) => theme.color.lightgrey};
+  }
+`;
+
+export const Title = styled.span`
+  font-size: 1.2rem;
+  font-weight: 700;
+`;
+
+export const NoticeDate = styled.span`
+  font-size: 1.1rem;
+  color: ${({ theme }) => theme.color.placeholder};
+`;

src/components/customerService/notice/NoticeList.styled.ts

@@ -0,0 +1,18 @@
+import type { NoticeList as TNoticeList } from '../../../models/customerService';
+import { formatDate } from '../../../util/format';
+import * as S from './NoticeList.styled';
+
+interface NoticeProps {
+  notice: TNoticeList;
+}
+
+export default function NoticeList({ notice }: NoticeProps) {
+  return (
+    <S.Container>
+      <S.Wrapper type='button' aria-label='공지사항 상세보기'>
+        <S.Title>{notice.title}</S.Title>
+        <S.NoticeDate>{formatDate(notice.createdAt)}</S.NoticeDate>
+      </S.Wrapper>
+    </S.Container>
+  );
+}