style: 슬라이드 현재 페이지 표기

play3step · Mar 6, 2024 · ac42f4e · ac42f4e
1 parent 1616191
commit ac42f4e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/ProjectPage/ProjectSlide.jsx b/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} />

diff --git a/src/components/ProjectPage/SlideComponents/atom/AddSlide.js b/src/components/ProjectPage/SlideComponents/atom/AddSlide.js
@@ -20,5 +20,5 @@ const AddSlideBox = styled.button`
   border: 1px dashed;
   border-radius: 25px;
   background-color: #d9d9d9;
-  flex-shrink: 0; // 크기 조절 비활성화
+  flex-shrink: 0;
 `;
diff --git a/src/components/ProjectPage/SlideComponents/atom/SlideList.js b/src/components/ProjectPage/SlideComponents/atom/SlideList.js
@@ -1,15 +1,15 @@
 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; // 크기 조절 비활성화