Dev -> main (#416)

second-hand-team-01 · Jan 10, 2024 · ad4aeb3 · ad4aeb3
2 parents 41facd5 + 7ab5560
commit ad4aeb3
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 51 deletions.
diff --git a/fe/public/index.html b/fe/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/teamLogo.ico" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

diff --git a/fe/public/teamLogo.ico b/fe/public/teamLogo.ico
diff --git a/fe/src/assets/icons/index.ts b/fe/src/assets/icons/index.ts
@@ -18,6 +18,8 @@ import { ReactComponent as list } from './newspaper.svg';
 import { ReactComponent as person } from './person.svg';
 import { ReactComponent as plus } from './plus.svg';
 import { ReactComponent as search } from './search.svg';
+import { ReactComponent as chevronLeft } from './chevronLeft.svg';
+import { ReactComponent as chevronRight } from './chevronRight.svg';
 
 export default {
   upload,
@@ -40,4 +42,6 @@ export default {
   more,
   circleFill,
   list,
+  chevronRight,
+  chevronLeft,
 };
diff --git a/fe/src/components/commons/Carousel/Carousel.tsx b/fe/src/components/commons/Carousel/Carousel.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import * as S from './CarouselStyle';
+import { SLIDER_HEIGHT } from '@constants/style';
+import { getFileNameFromUrl } from '@services/slide/slide';
+import { Icon } from '@commons/index';
+import { CarouselPageIndicator } from './CarouselPageIndicator/CarouselPageIndicator';
+
+interface CarouselProps {
+  urls: string[];
+  height?: number;
+  width?: number;
+}
+
+export const Carousel = ({
+  urls,
+  height = SLIDER_HEIGHT,
+  width = 393,
+}: CarouselProps) => {
+  const [currentCarousel, setCurrentCarousel] = useState(0);
+
+  const moveCarousel = (direction: 'next' | 'previous') => {
+    console.log(1);
+    const totalCarousel = urls.length;
+    setCurrentCarousel((prevSlide) => {
+      if (direction === 'previous') {
+        return prevSlide === 0 ? totalCarousel - 1 : prevSlide - 1;
+      }
+      return prevSlide === totalCarousel - 1 ? 0 : prevSlide + 1;
+    });
+  };
+
+  return (
+    <S.Carousel height={height} width={width}>
+      <S.CarouselContainer
+        height={height}
+        width={width}
+        currentCarousel={currentCarousel}
+        imagesCounts={urls.length}
+      >
+        {urls.map((url) => {
+          const fileName = getFileNameFromUrl(url);
+          return (
+            <S.CarouselImage
+              src={url}
+              key={fileName}
+              alt={fileName}
+              height={height}
+              width={width}
+            />
+          );
+        })}
+      </S.CarouselContainer>
+      <CarouselPageIndicator
+        imageCounts={urls.length}
+        currentIndex={currentCarousel}
+      />
+      {urls.length >= 2 && (
+        <S.CarouselButton
+          direction="previous"
+          onClick={() => moveCarousel('previous')}
+        >
+          <Icon size={48} name="chevronLeft" color="systemBackgroundWeak" />
+        </S.CarouselButton>
+      )}
+      {urls.length >= 2 && (
+        <S.CarouselButton direction="next" onClick={() => moveCarousel('next')}>
+          <Icon size={48} name="chevronRight" color="systemBackgroundWeak" />
+        </S.CarouselButton>
+      )}
+    </S.Carousel>
+  );
+};
diff --git a/fe/src/components/commons/Carousel/CarouselPageIndicator/CarouselPageIndicator.tsx b/fe/src/components/commons/Carousel/CarouselPageIndicator/CarouselPageIndicator.tsx
@@ -0,0 +1,26 @@
+import * as S from './CarouselPageIndicatorStyle';
+
+interface CarouselPageIndicatorProps {
+  imageCounts: number;
+  currentIndex: number;
+}
+
+export const CarouselPageIndicator = ({
+  imageCounts,
+  currentIndex,
+}: CarouselPageIndicatorProps) => {
+  const elements = Array.from({ length: imageCounts }).map((_, i) => {
+    return { id: i };
+  });
+
+  return (
+    <S.CarouselPageIndicator>
+      {elements.map((element) => (
+        <S.Element
+          key={element.id}
+          className={currentIndex === element.id ? 'active' : ''}
+        />
+      ))}
+    </S.CarouselPageIndicator>
+  );
+};
diff --git a/fe/src/components/commons/Carousel/CarouselPageIndicator/CarouselPageIndicatorStyle.ts b/fe/src/components/commons/Carousel/CarouselPageIndicator/CarouselPageIndicatorStyle.ts
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const CarouselPageIndicator = styled.div`
+  display: flex;
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(
+    rgba(60, 60, 67, 0) 0%,
+    rgba(60, 60, 67, 0.3) 100%
+  );
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 44px;
+`;
+
+export const Element = styled.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: 10px;
+  background-color: rgba(255, 255, 255, 0.3);
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &.active {
+    background-color: ${({ theme }) => theme.palette.white};
+  }
+`;
diff --git a/fe/src/components/commons/Carousel/CarouselStyle.ts b/fe/src/components/commons/Carousel/CarouselStyle.ts
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export interface CarouselStyleProps {
+  width?: number;
+  height?: number;
+}
+
+export interface CarouselContainerStyleProps {
+  imagesCounts: number;
+  currentCarousel: number;
+  width: number;
+  height: number;
+}
+
+export interface CarouselButtonStyleProps {
+  direction: 'previous' | 'next';
+}
+
+export const Carousel = styled.div<CarouselStyleProps>`
+  width: ${({ width }) => width}px;
+  height: ${({ height }) => height}px;
+  overflow-x: hidden;
+  position: relative;
+`;
+
+export const CarouselContainer = styled.div<CarouselContainerStyleProps>`
+  display: flex;
+  width: ${({ width, imagesCounts }) => imagesCounts * width}px;
+  transform: translateX(
+    ${({ currentCarousel, width }) => currentCarousel * width * -1}px
+  );
+  height: ${({ height }) => height}px;
+`;
+
+export const CarouselImage = styled.img`
+  object-fit: cover;
+`;
+
+export const CarouselButton = styled.div<CarouselButtonStyleProps>`
+  position: absolute;
+  top: 40%;
+  ${({ direction }) => (direction === 'previous' ? 'left: 0;' : 'right: 0;')}
+  cursor: pointer;
+`;
diff --git a/fe/src/components/commons/ListItem/ListItem.tsx b/fe/src/components/commons/ListItem/ListItem.tsx
@@ -8,10 +8,8 @@ import {
   convertNumToPrice,
 } from '@utils/common/common';
 import { useNavigate } from 'react-router-dom';
-import { changeStatusItemsAPI } from '@services/items/items';
 import { MenuButtonProps } from '../Menu/MenuStyle';
 import { deleteItemsAPI } from '@services/items/items';
-import { URL } from '@constants/apis';
 
 export interface IconProps {
   name: keyof typeof icons;
@@ -32,6 +30,7 @@ export interface ListItemProps {
   moreBtn: boolean;
   interestChecked: boolean;
   onClick?: () => void;
+  listItemDataRefetch?: () => void;
 }
 
 const moreBtnIcon: IconProps = {
@@ -69,15 +68,13 @@ export const ListItem = ({
   moreBtn,
   interestChecked,
   onClick,
+  listItemDataRefetch,
 }: ListItemProps) => {
   const navigate = useNavigate();
   const listItemRef = useRef<HTMLLIElement>(null);
 
   const moreBtnRef = useRef<HTMLButtonElement>(null);
 
-  // const [interestChecked, setInterestChecked] = useState(
-  //   initialInterestChecked
-  // );
   const [menuOpen, setMenuOpen] = useState(false);
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isErrorDialogOpen, setErrorDialogOpen] = useState(false);
@@ -108,56 +105,14 @@ export const ListItem = ({
     onClick && onClick();
   };
 
-  const menuOptions: { [key: string]: MenuButtonProps } = {
-    ['판매중']: {
-      shape: 'large',
-      state: 'default',
-      color: 'systemDefault',
-      name: '판매중 상태로 전환',
-      onClick: () => {
-        changeStatusItemsAPI(itemIdx, '판매중');
-        setMenuOpen(false);
-        window.location.assign(URL + '/sales-history');
-      },
-    },
-    ['판매완료']: {
-      shape: 'large',
-      state: 'default',
-      color: 'systemDefault',
-      name: '판매 완료 상태로 전환',
-      onClick: () => {
-        changeStatusItemsAPI(itemIdx, '판매완료');
-        setMenuOpen(false);
-        window.location.assign(URL + '/sales-history');
-      },
-    },
-    ['예약중']: {
-      shape: 'large',
-      state: 'default',
-      color: 'systemDefault',
-      name: '예약중 상태로 전환',
-      onClick: () => {
-        changeStatusItemsAPI(itemIdx, '예약중');
-        setMenuOpen(false);
-        window.location.assign(URL + '/sales-history');
-      },
-    },
-  };
-
-  const duplicatedMenuOptions = { ...menuOptions };
-  if (state) {
-    delete duplicatedMenuOptions[state];
-  }
-
   const menuButtonPropsList: MenuButtonProps[] = [
     {
       shape: 'large',
       state: 'default',
       color: 'systemDefault',
       name: '게시글 수정',
-      onClick: () => navigate(`/edit/${itemIdx}`),
+      onClick: () => navigate(`/edit/${itemIdx}`, { state: '/sales-history' }),
     },
-    ...Object.values(duplicatedMenuOptions),
     {
       shape: 'large',
       state: 'default',
@@ -167,6 +122,7 @@ export const ListItem = ({
         const { error } = await deleteItemsAPI(Number(itemIdx));
         if (error) return setErrorDialogOpen(true);
         setMenuOpen(false);
+        listItemDataRefetch && listItemDataRefetch();
       },
     },
   ];

diff --git a/fe/src/components/commons/Menu/Menu.tsx b/fe/src/components/commons/Menu/Menu.tsx
@@ -52,6 +52,7 @@ export const Menu = ({
         {location === 'bottom' && (
           <S.ButtonContainer>
             <S.MenuButton
+              className="menu-button"
               shape="large"
               state="default"
               fontWeight="semibold"

diff --git a/fe/src/components/commons/index.ts b/fe/src/components/commons/index.ts
@@ -26,6 +26,7 @@ import { Error } from './Error/Error';
 import { Loading } from './Loading/Loading';
 import { LocationSelector } from './LocationSelector/LocationSelector';
 import { LocationPopup } from './LocationPopup/LocationPopup';
+import { Carousel } from './Carousel/Carousel';
 
 export {
   Icon,
@@ -56,4 +57,5 @@ export {
   Loading,
   LocationSelector,
   LocationPopup,
+  Carousel,
 };
diff --git a/fe/src/pages/DetailsPage/DetailsPage.tsx b/fe/src/pages/DetailsPage/DetailsPage.tsx
@@ -12,6 +12,7 @@ import {
   Button,
   Menu,
   Dialog,
+  Carousel,
 } from '@commons/index';
 import {
   getItemDetailAPI,
@@ -45,6 +46,11 @@ export const DetailsPage = () => {
     MenuButtonProps[]
   >([]);
 
+  const isMobileDevice =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      window.navigator.userAgent
+    );
+
   useEffect(() => {
     (async () => {
       !loading && setLoading(true);
@@ -216,7 +222,8 @@ export const DetailsPage = () => {
       ) : (
         <S.DetailsPages className="detail">
           <S.ImageContainer>
-            <Slide urls={details?.images ?? []}></Slide>
+            {isMobileDevice && <Slide urls={details?.images ?? []} />}
+            {!isMobileDevice && <Carousel urls={details?.images ?? []} />}
           </S.ImageContainer>
           <S.Contents>
             <S.WriterSection>
@@ -288,7 +295,7 @@ export const DetailsPage = () => {
               const { error } = await deleteItemsAPI(Number(itemIdxStr));
               if (error) return setErrorDialogOpen(true);
               setMenuOpen(false);
-              navigate('/');
+              navigate(prevPathname);
             },
             color: 'systemWarning',
           },

diff --git a/fe/src/pages/SalesHistoryPage/SalesHistoryPage.tsx b/fe/src/pages/SalesHistoryPage/SalesHistoryPage.tsx
@@ -54,6 +54,7 @@ export const SalesHistoryPage = () => {
         onClick={() => {
           navigate(`/item/${item.itemIdx}`, { state: pathname });
         }}
+        listItemDataRefetch={fetch}
       ></ListItem>
     ));
   };