Merge pull request #54 from themoment-team/develop

Release v1.2.1

src/components/MainContainer/index.tsx

@@ -2,19 +2,17 @@
 
 import { Banner, TabletSlide, PCSlide, MobileSlide } from 'components';
 import { useWidthState } from 'stores';
+import { WindowSize } from 'utils/windowSize';
 
 import * as S from './style';
 
-const TABLET_SIZE = 1280;
-const MOBILE_SIZE = 620;
-
 const MainContainer = () => {
   const { width } = useWidthState();
 
   const getSlideByWidth = () => {
-    if (width > TABLET_SIZE) {
+    if (width > WindowSize.TABLET_SIZE) {
       return <PCSlide />;
-    } else if (width > MOBILE_SIZE) {
+    } else if (width > WindowSize.MOBILE_SIZE) {
       return <TabletSlide />;
     } else {
       return <MobileSlide />;

src/components/Nav/index.tsx

@@ -24,7 +24,13 @@ const Nav = () => {
   };
 
   useEffect(() => {
-    setIsDark(localStorage.getItem('dark') === 'false');
+    const initialIsDark = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches;
+    const localDark = localStorage.getItem('dark');
+
+    if (localDark) setIsDark(localStorage.getItem('dark') === 'false');
+    else setIsDark(initialIsDark);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/Slide/PC/index.tsx

@@ -1,53 +1,41 @@
 'use client';
 
-import { useState } from 'react';
-
-import { Vector } from 'assets';
-import { Card } from 'components';
-import { useFilterProjects } from 'hooks';
+import { Card, SlideController } from 'components';
+import { useFilterProjects, useHandleSlide } from 'hooks';
+import { Device } from 'utils';
+import { Direction } from 'utils';
 
 import * as S from './style';
 
 const CARDS_PER_PAGE = 3 as const;
 
 const PC = () => {
-  const [slideIndex, setSlideIndex] = useState<number>(0);
-
-  const projects = useFilterProjects({ setSlideIndex });
+  const projects = useFilterProjects();
 
   const maxIndex = Math.ceil(projects.length / CARDS_PER_PAGE) - 1;
 
-  const handlePrevSlide = () => {
-    if (slideIndex === 0) {
-      setSlideIndex(maxIndex);
-    } else {
-      setSlideIndex(curIndex => curIndex - 1);
-    }
-  };
-
-  const handleNextSlide = () => {
-    if (maxIndex === slideIndex) {
-      setSlideIndex(0);
-    } else {
-      setSlideIndex(curIndex => curIndex + 1);
-    }
-  };
+  const { slideIndex, handleNextSlide, handlePrevSlide } =
+    useHandleSlide(maxIndex);
 
   return (
     <S.CardContainer>
-      <S.PrevController type="button" onClick={handlePrevSlide}>
-        <Vector />
-      </S.PrevController>
+      <SlideController
+        view={Device.PC}
+        onClick={handlePrevSlide}
+        direction={Direction.LEFT}
+      />
       <S.Cards>
         <S.MoveContainer slideIndex={slideIndex}>
           {projects.map((data, slideIndex) => (
             <Card key={slideIndex + data.id} data={data} />
           ))}
         </S.MoveContainer>
       </S.Cards>
-      <S.NextController type="button" onClick={handleNextSlide}>
-        <Vector />
-      </S.NextController>
+      <SlideController
+        view={Device.PC}
+        onClick={handleNextSlide}
+        direction={Direction.RIGHT}
+      />
     </S.CardContainer>
   );
 };

src/components/Slide/Tablet/index.tsx

@@ -1,43 +1,29 @@
 'use client';
 
-import { useState } from 'react';
-
-import { Vector } from 'assets';
-import { Card } from 'components';
-import { useFilterProjects } from 'hooks';
+import { Card, SlideController } from 'components';
+import { useFilterProjects, useHandleSlide } from 'hooks';
+import { Device } from 'utils';
+import { Direction } from 'utils';
 
 import * as S from './style';
 
 const CARDS_PER_PAGE = 4 as const;
 
 const Tablet = () => {
-  const [slideIndex, setSlideIndex] = useState<number>(0);
-
-  const projects = useFilterProjects({ setSlideIndex });
+  const projects = useFilterProjects();
 
   const maxIndex = Math.ceil(projects.length / CARDS_PER_PAGE) - 1;
 
-  const handlePrevSlide = () => {
-    if (slideIndex === 0) {
-      setSlideIndex(maxIndex);
-    } else {
-      setSlideIndex(curIndex => curIndex - 1);
-    }
-  };
-
-  const handleNextSlide = () => {
-    if (maxIndex === slideIndex) {
-      setSlideIndex(0);
-    } else {
-      setSlideIndex(curIndex => curIndex + 1);
-    }
-  };
+  const { slideIndex, handleNextSlide, handlePrevSlide } =
+    useHandleSlide(maxIndex);
 
   return (
     <S.CardContainer>
-      <S.PrevController type="button" onClick={handlePrevSlide}>
-        <Vector />
-      </S.PrevController>
+      <SlideController
+        view={Device.TABLET}
+        onClick={handlePrevSlide}
+        direction={Direction.LEFT}
+      />
       <S.Cards>
         <S.Slider slideIndex={slideIndex}>
           <S.MoveContainer maxIndex={maxIndex}>
@@ -47,9 +33,11 @@ const Tablet = () => {
           </S.MoveContainer>
         </S.Slider>
       </S.Cards>
-      <S.NextController type="button" onClick={handleNextSlide}>
-        <Vector />
-      </S.NextController>
+      <SlideController
+        view={Device.TABLET}
+        onClick={handleNextSlide}
+        direction={Direction.RIGHT}
+      />
     </S.CardContainer>
   );
 };

src/components/Slide/Tablet/style.ts

@@ -45,23 +45,3 @@ export const MoveContainer = styled.div<{ maxIndex: number }>`
   grid-template-rows: repeat(2, 1fr);
   gap: 1.75rem;
 `;
-
-export const Controller = styled.button`
-  border: none;
-  z-index: 1;
-  cursor: pointer;
-  transition: background-color 0.3s ease-in-out;
-  background-color: ${({ theme }) => theme.gray[0]};
-`;
-
-export const PrevController = styled(Controller)`
-  margin-right: 1.875rem;
-`;
-
-export const NextController = styled(Controller)`
-  margin-left: 1.875rem;
-
-  svg {
-    transform: matrix(-1, 0, 0, 1, 0, 0);
-  }
-`;

src/components/SlideController/index.stories.tsx

@@ -0,0 +1,42 @@
+import { Device } from 'utils';
+import { Direction } from 'utils';
+
+import SlideController from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'SlideController',
+  component: SlideController,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+} as Meta<typeof SlideController>;
+
+type Story = StoryObj<typeof SlideController>;
+
+export const Left: Story = {
+  args: {
+    direction: Direction.LEFT,
+    onClick: () => {},
+    view: Device.TABLET,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    direction: Direction.RIGHT,
+    onClick: () => {},
+    view: Device.TABLET,
+  },
+};
+
+export const PC: Story = {
+  args: {
+    direction: Direction.RIGHT,
+    onClick: () => {},
+    view: Device.PC,
+  },
+};

src/components/SlideController/index.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Vector } from 'assets';
+
+import * as S from './style';
+
+import type { Direction } from 'utils';
+import type { Device } from 'utils';
+
+interface Props {
+  direction: Direction;
+  onClick: () => void;
+  view: Device;
+}
+
+const ControllerType = {
+  left: S.PrevController,
+  right: S.NextController,
+} as const;
+
+const SlideController: React.FC<Props> = ({ direction, onClick, view }) => {
+  const Controller = ControllerType[direction];
+
+  return (
+    <Controller type="button" onClick={onClick} view={view}>
+      <Vector />
+    </Controller>
+  );
+};
+
+export default SlideController;

src/components/SlideController/style.ts

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import type { Device } from 'utils';
+
+enum Margin {
+  PC = '3.125rem',
+  TABLET = '1.875rem',
+}
+
+export const Controller = styled.button<{ view: Device }>`
+  border: none;
+  z-index: 1;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  background-color: ${({ theme }) => theme.gray[0]};
+`;
+
+export const PrevController = styled(Controller)`
+  margin-right: ${({ view }) => Margin[view]};
+`;
+
+export const NextController = styled(Controller)`
+  margin-left: ${({ view }) => Margin[view]};
+
+  svg {
+    transform: matrix(-1, 0, 0, 1, 0, 0);
+  }
+`;

src/components/index.ts

@@ -10,4 +10,5 @@ export { default as Nav } from './Nav';
 export { default as NavigationEvents } from './NavigationEvents';
 export { default as PCSlide } from './Slide/PC';
 export { default as SearchBar } from './SearchBar';
+export { default as SlideController } from './SlideController';
 export { default as TabletSlide } from './Slide/Tablet';

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useFilterProjects } from './useFilterProjects';
+export { default as useHandleSlide } from './useHandleSlide';
 export { default as useWindowResizeEffect } from './useWindowResizeEffect';

src/hooks/useFilterProjects.ts

@@ -1,16 +1,11 @@
 'use client';
 
-import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 
 import project from 'constants/project.json';
 import { useSearchState } from 'stores';
 
-interface Props {
-  setSlideIndex: Dispatch<SetStateAction<number>>;
-}
-
-const useFilterProjects = ({ setSlideIndex }: Props) => {
+const useFilterProjects = () => {
   const { searchKeyword } = useSearchState();
 
   const [filteredProjects, setFilteredProjects] = useState(project);
@@ -30,8 +25,6 @@ const useFilterProjects = ({ setSlideIndex }: Props) => {
         );
       }),
     );
-
-    setSlideIndex(0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword]);
 

src/hooks/useHandleSlide.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+
+const useHandleSlide = (maxIndex: number) => {
+  const [slideIndex, setSlideIndex] = useState<number>(0);
+
+  const increaseIndex = (index: number) => index + 1;
+  const decreaseIndex = (index: number) => index - 1;
+
+  const handlePrevSlide = () => {
+    setSlideIndex(curIndex =>
+      curIndex === 0 ? maxIndex : decreaseIndex(curIndex),
+    );
+  };
+
+  const handleNextSlide = () => {
+    setSlideIndex(curIndex =>
+      curIndex === maxIndex ? 0 : increaseIndex(curIndex),
+    );
+  };
+
+  return {
+    slideIndex,
+    handlePrevSlide,
+    handleNextSlide,
+  };
+};
+
+export default useHandleSlide;

src/utils/device.ts

@@ -0,0 +1,4 @@
+export enum Device {
+  PC = 'PC',
+  TABLET = 'TABLET',
+}

src/utils/direction.ts

@@ -0,0 +1,4 @@
+export enum Direction {
+  LEFT = 'left',
+  RIGHT = 'right',
+}

src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './device';
+export * from './direction';
+export * from './windowSize';

src/utils/windowSize.ts

@@ -0,0 +1,4 @@
+export enum WindowSize {
+  TABLET_SIZE = 1280,
+  MOBILE_SIZE = 620,
+}