Merge pull request #102 from DKU54PLAY/develop

Release : 1.0.1

src/components/boards/petition/Board.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { PagingProps } from 'components/global/PageControl';
 import { PostProps } from './PostProps';
-import { PagingProps } from './PageControl';
 
 const Container = styled.div`
   width: 100%;

src/components/boards/suggestion/Board.tsx

@@ -4,11 +4,11 @@ import { Desktop, Mobile, Tablet } from 'hooks/MediaQueries';
 import styled from 'styled-components';
 import { FiEye } from 'react-icons/fi';
 
+import { PagingProps } from 'components/global/PageControl';
 import TopBar from './top-bar/TopBar';
 import MobileTopBar from './top-bar/MobileTopBar';
 
 import { PostProps } from './PostProps';
-import { PagingProps } from './PageControl';
 
 const Container = styled.div`
   width: 100%;

src/components/boards/suggestion/PageControl.tsx → src/components/global/PageControl.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
 import qs from 'qs';
 import styled from 'styled-components';
 
@@ -14,18 +14,6 @@ const Arrow = styled.svg``;
 
 const Indexes = styled.ol`
   display: flex;
-  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1) inset;
-  ${({ theme }) => theme.media.desktop} {
-    max-width: 400px;
-  }
-  ${({ theme }) => theme.media.tablet} {
-    max-width: 200px;
-  }
-  ${({ theme }) => theme.media.mobile} {
-    max-width: 200px;
-  }
-  overflow-x: scroll;
-  padding: 15px 0;
 `;
 
 const Index = styled.li<{ cur: boolean }>`
@@ -50,8 +38,13 @@ function PageControl({
   currentPage: number;
   pagingInfo: PagingProps;
 }) {
-  const [pageCount, setPageCount] = useState(0);
+  const [info, setInfo] = useState({
+    startIdx: 0,
+    endIdx: 0,
+    total: 0,
+  });
   const params = useSearchParams();
+  const location = useLocation();
 
   const generateParams = (page: number) => {
     let { filter } = qs.parse(params[0].toString());
@@ -61,19 +54,34 @@ function PageControl({
     if (!query) query = '';
 
     if (filter === '' && query === '') {
-      return `/board-suggestion/boards?page=${page}`;
+      return `${location.pathname}?page=${page}`;
     }
-    return `/board-suggestion/boards?page=${page}&filter=${filter}&query=${query}`;
+    return `${location.pathname}?page=${page}&filter=${filter}&query=${query}`;
   };
 
   useEffect(() => {
-    setPageCount(Math.ceil(pagingInfo.totalElements / pagingInfo.size));
-  }, [pagingInfo.totalElements]);
+    const total = Math.ceil(pagingInfo.totalElements / pagingInfo.size);
+    const startIdx =
+      currentPage % 10 === 0
+        ? currentPage - (currentPage % 10) - 9
+        : currentPage - (currentPage % 10) + 1;
+    let endIdx =
+      currentPage % 10 === 0
+        ? currentPage - (currentPage % 10)
+        : currentPage - (currentPage % 10) + 10;
+
+    if (endIdx > pagingInfo.totalPages) endIdx = pagingInfo.totalPages;
+    setInfo({
+      startIdx,
+      endIdx,
+      total,
+    });
+  }, [pagingInfo.totalElements, currentPage]);
 
   return (
     <Container>
-      {currentPage !== 1 && (
-        <Link to={generateParams(currentPage - 1)}>
+      {info.startIdx !== 1 && (
+        <Link to={generateParams(info.startIdx - 1)}>
           <Arrow
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 48 48"
@@ -85,14 +93,14 @@ function PageControl({
         </Link>
       )}
       <Indexes>
-        {Array.from({ length: pageCount }, (_, i) => (
-          <Index cur={i + 1 === currentPage} key={i}>
-            <Link to={generateParams(i + 1)}>{i + 1}</Link>
+        {Array.from({ length: info.endIdx - info.startIdx + 1 }, (_, i) => (
+          <Index cur={info.startIdx + i === currentPage} key={i}>
+            <Link to={generateParams(i + 1)}>{info.startIdx + i}</Link>
           </Index>
         ))}
       </Indexes>
-      {currentPage !== pageCount && (
-        <Link to={generateParams(currentPage + 1)}>
+      {info.endIdx !== pagingInfo.totalPages && (
+        <Link to={generateParams(info.startIdx + 10)}>
           <Arrow
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 48 48"

src/components/global/nav/NavItems.ts

@@ -67,7 +67,7 @@ export const NavItems: NavigationProps[] = [
         id: 2,
       },
       {
-        title: '문의게시판',
+        title: '소통 창구',
         path: '/board-inquiry',
         id: 3,
       },

src/components/home/carousel/Carousel.tsx

@@ -1,7 +1,6 @@
 // 훅스, 라이브러리 import
-import axios from 'axios';
 import { useInterval } from 'hooks/UseInterval';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 // static 이미지 import
@@ -20,7 +19,7 @@ import Slide from './Slide';
 const Wrapper = styled.div`
   width: 100%;
   ${({ theme }) => theme.media.desktop} {
-    height: 530px;
+    height: 28.125vw;
   }
   ${({ theme }) => theme.media.tablet} {
     height: 300px;
@@ -37,7 +36,7 @@ const Wrapper = styled.div`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  overflow: hidden;
+  overflow: hidden; ;
 `;
 
 const ControlsWrapper = styled.div`
@@ -47,7 +46,6 @@ const ControlsWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  z-index: 10;
 `;
 
 const DotNavContainer = styled.div`
@@ -95,6 +93,17 @@ function Carousel({ images }: { images: Array<ImageProps> }): JSX.Element {
     <Wrapper>
       {images.length > 0 && (
         <>
+          {images.map((obj: ImageProps, index: number) => (
+            <Slide
+              key={obj.id}
+              url={obj.url}
+              index={index}
+              cur={currentSlide}
+              size={images.length}
+              alt={obj.alt}
+              redirectUrl={obj.redirectUrl}
+            />
+          ))}
           {images.length > 1 && (
             <ControlsWrapper>
               <Chevron onClick={prevSlide} direction="left" />
@@ -114,16 +123,6 @@ function Carousel({ images }: { images: Array<ImageProps> }): JSX.Element {
               <Chevron onClick={nextSlide} direction="right" />
             </ControlsWrapper>
           )}
-          {images.map((obj: ImageProps, index: number) => (
-            <Slide
-              key={obj.id}
-              url={obj.url}
-              index={index}
-              cur={currentSlide}
-              size={images.length}
-              alt={obj.alt}
-            />
-          ))}
         </>
       )}
     </Wrapper>

src/components/home/carousel/CarouselProps.ts

@@ -2,6 +2,7 @@ export interface ImageProps {
   url: string;
   id: string;
   alt: string;
+  redirectUrl?: string;
 }
 
 export interface SlideProps {
@@ -10,6 +11,7 @@ export interface SlideProps {
   cur: number;
   size: number;
   alt?: string;
+  redirectUrl?: string;
 }
 
 export interface ChevronProps {

src/components/home/carousel/Chevron.tsx

@@ -10,6 +10,7 @@ const Wrapper = styled.div<{ direction: string }>`
   justify-content: center;
   cursor: pointer;
   transition: box-shadow 0.25s ease-in-out;
+  z-index: 1;
 `;
 
 function Chevron({

src/components/home/carousel/DotNav.tsx

@@ -12,6 +12,7 @@ const Dot = styled.div<{ active: boolean }>`
   margin: 0 5px;
   transition: all 0.25s ease-in-out;
   cursor: ${(props) => (props.active ? 'default' : 'pointer')};
+  z-index: 1;
 `;
 
 function DotNav({ active, onClick }: DotNavProps): JSX.Element {

src/components/home/carousel/Slide.tsx

@@ -15,11 +15,31 @@ const Wrapper = styled.div<SlideProps>`
   transform: ${(props) =>
     `translateX(${(props.index - (props.cur % props.size)) * 100}%)`};
   transition: transform 0.25s ease-in-out;
+  cursor: ${(props) => (props.redirectUrl ? 'pointer' : 'default')};
 `;
 
-function Slide({ url, index, cur, size, alt }: SlideProps): JSX.Element {
+function Slide({
+  url,
+  index,
+  cur,
+  size,
+  alt,
+  redirectUrl,
+}: SlideProps): JSX.Element {
+  const handleClick = () => {
+    if (redirectUrl) {
+      window.location.href = `${redirectUrl}`;
+    }
+  };
   return (
-    <Wrapper url={url} index={index} cur={cur} size={size}>
+    <Wrapper
+      onClick={handleClick}
+      url={url}
+      index={index}
+      cur={cur}
+      size={size}
+      redirectUrl={redirectUrl}
+    >
       {!url && alt}
     </Wrapper>
   );