Merge pull request #25 from TUK-MoreView/feat/slide-page

Feat/slide page

src/components/ProjectPage/ProjectSlide.jsx

@@ -1,22 +1,24 @@
 import styled from 'styled-components';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import SlideClose from './SlideComponents/SlideClose';
 import SlideList from './SlideComponents/atom/SlideList';
 import { pageData, pageState } from '../../store/recoil';
 import AddSlide from './SlideComponents/atom/AddSlide';
 
 function ProjectSlide({ slideOpen, addSlide }) {
-  const setPage = useSetRecoilState(pageState);
+  const [pageRendering, setPageRendering] = useRecoilState(pageState);
   const pageValue = useRecoilValue(pageData);
+
   return (
     <SlideListContainer>
       <SlideClose slideOpen={slideOpen} />
       <SlideBoxContainer>
         {pageValue.map((page, index) => (
           <SlideList
             onClick={() => {
-              setPage(index);
+              setPageRendering(index);
             }}
+            select={index === pageRendering}
           />
         ))}
         <AddSlide onClick={addSlide} />
@@ -37,5 +39,6 @@ const SlideBoxContainer = styled.div`
   display: flex;
   padding: 2.8vh 2.7vw;
   align-items: center;
+  overflow-x: auto;
   gap: 30px;
 `;

src/components/ProjectPage/SlideComponents/atom/AddSlide.js

@@ -20,4 +20,5 @@ const AddSlideBox = styled.button`
   border: 1px dashed;
   border-radius: 25px;
   background-color: #d9d9d9;
+  flex-shrink: 0;
 `;

src/components/ProjectPage/SlideComponents/atom/SlideList.js

@@ -1,15 +1,16 @@
 import styled from 'styled-components';
 
-function SlideList({ onClick }) {
-  return <SlideListBox onClick={onClick} />;
+function SlideList({ onClick, select }) {
+  return <SlideListBox onClick={onClick} select={select} />;
 }
 
 export default SlideList;
 
 const SlideListBox = styled.button`
   width: 18.958vw;
   height: 16.11vh;
-  border: 1px solid;
+  border: 2px solid ${({ select }) => (select ? 'red' : 'black')};
   border-radius: 25px;
   background-color: #d9d9d9;
+  flex-shrink: 0; // 크기 조절 비활성화
 `;

src/pages/ProjectPage.jsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { Canvas } from '@react-three/fiber';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import {
   interactiveState,
@@ -24,7 +24,7 @@ import Prjoect2d from '../components/ProjectPage/PageData/Project2d';
 function ProjectPage() {
   const [selectedId, selectShape] = useState(null);
   const [isOpen, setIsOpen] = useState(false);
-  const pageRendering = useRecoilValue(pageState);
+  const [pageRendering, setPageRendering] = useRecoilState(pageState);
   const [shapeValue, setShapeValue] = useRecoilState(shapeList);
   const [textValue, setTextValue] = useRecoilState(textList);
   const [menu, setMenu] = useRecoilState(interactiveState);
@@ -85,6 +85,24 @@ function ProjectPage() {
     });
   };
 
+  useEffect(() => {
+    const handleKeyEvent = (e) => {
+      if (e.key === 'ArrowLeft' && pageRendering > 0) {
+        setPageRendering(pageRendering - 1);
+      } else if (
+        e.key === 'ArrowRight' &&
+        pageValue.length - 1 > pageRendering
+      ) {
+        setPageRendering(pageRendering + 1);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyEvent);
+    return () => {
+      window.removeEventListener('keydown', handleKeyEvent);
+    };
+  }, [pageRendering]);
+
   return (
     <ProjectContainer>
       <ProjectHeaer fullScreen={toggleFullScreen} />