design/#26 유저 성취도 페이지, 다른유저 성취도 페이지

src/App.jsx

@@ -5,6 +5,7 @@ import SignUp from './pages/SignUp';
 import { theme } from './theme';
 import { ThemeProvider } from 'styled-components';
 import CheckPointRecordPage from './pages/CheckPointRecordPage';
+import AnotherCheckPointRecordPage from './pages/AnotherCheckPointRecordPage';
 
 function App() {
   return (
@@ -16,6 +17,10 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="/signUp" element={<SignUp />} />
           <Route path="/checkPointRecord" element={<CheckPointRecordPage />} />
+          <Route
+            path="/anothercheckPointRecord"
+            element={<AnotherCheckPointRecordPage />}
+          />
         </Routes>
       </BrowserRouter>
     </ThemeProvider>

src/animations/animations.jsx

@@ -62,3 +62,12 @@ export const slideOut = keyframes`
     transform: translateY(100%);
   }
 `;
+
+export const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;

src/components/makingGroupComponents/GroupCards.jsx

@@ -1,58 +1,24 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import Img1 from '../../assets/images/makingGroup1.png';
-import Img2 from '../../assets/images/makingGroup2.png';
-import Img3 from '../../assets/images/makingGroup3.png';
-import Img4 from '../../assets/images/makingGroup4.png';
+
 import MakingGroupPopup from '../popup/makingGroupPopup';
+import { cardData } from '../../data/cardData';
+import {
+  ListBigContainer,
+  ListContainer,
+  CardContent,
+  CardTitle,
+} from '../../styled_components/makingGroupPageStyle';
+import useCardSelection from '../../hooks/useCardSelection';
 
 const GroupCards = () => {
-  // 카드 정보를 배열로 저장
-  const cardData = [
-    {
-      imgPath: Img1,
-      title: '일정 페이지마다\n읽고 싶어요',
-      content:
-        '"나의 일정 페이지마다 기록을 남기고 싶어요!" "페이지별로 소중한 순간들을 간직해보세요. 기억을 더 선명하게, 하루를 더 특별하게."',
-    },
-    {
-      imgPath: Img2,
-      title: '챕터별로\n읽고 싶어요',
-      content:
-        '"일정 챕터마다 다채로운 이야기를 남겨보세요!" "여기에서 당신의 스토리가 한 장 한 장 더해집니다. 작은 챕터들이 모여 커다란 하루를 만들어가죠."',
-    },
-    {
-      imgPath: Img3,
-      title: '횟수를 정해놓고\n읽고 싶어요',
-      content:
-        '"횟수를 정해두고 나의 기록을 쌓아가요!" "기록한 만큼 나의 성장이 보입니다. 오늘의 나는 어제보다 더 나아졌을까요?"',
-    },
-    {
-      imgPath: Img4,
-      title: '나만의 속도별로\n읽고 싶어요',
-      content:
-        '"나의 일정 페이지마다 기록을 남기고 싶어요!" "페이지별로 소중한 순간들을 간직해보세요. 기억을 더 선명하게, 하루를 더 특별하게."',
-    },
-  ];
-
-  const [selectedImgPath, setSelectedImgPath] = useState(null);
-  const [selectedTitle, setSelectedTitle] = useState(null);
-  const [selectedContent, setSelectedContent] = useState(null);
-  const [selectedImgNum, setSelectedImgNum] = useState(0);
-
-  const handleCardClick = (card, imgNum) => {
-    setSelectedImgPath(card.imgPath);
-    setSelectedTitle(card.title);
-    setSelectedContent(card.content);
-    setSelectedImgNum(imgNum);
-  };
-
-  const handleClosePopup = () => {
-    setSelectedImgPath(null);
-    setSelectedTitle(null);
-    setSelectedContent(null);
-    setSelectedImgNum(0);
-  };
+  const {
+    selectedImgPath,
+    selectedTitle,
+    selectedContent,
+    selectedImgNum,
+    handleCardClick,
+    handleClosePopup,
+  } = useCardSelection();
 
   return (
     <>
@@ -91,100 +57,4 @@ const GroupCards = () => {
   );
 };
 
-const ListBigContainer = styled.div`
-  margin-top: 5%;
-  width: 75%;
-  height: 60%;
-  display: grid;
-  padding: 1rem;
-
-  @media (min-width: 0px) {
-    grid-gap: 6%;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (min-width: 1200px) {
-    grid-gap: 4%;
-    grid-template-columns: repeat(4, 1fr);
-  }
-`;
-
-const ListContainer = styled.div`
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  padding: 1rem;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px 10px 26px;
-  gap: 15px;
-  height: 90%;
-  overflow: hidden;
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
-  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
-
-  background: #ffffff;
-  border-radius: 20px;
-  &:hover {
-    box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
-    transform: scale(1.1, 1.1);
-  }
-  .card__img {
-    background-image: ${({ imgNum }) => {
-      switch (imgNum) {
-        case 1:
-          return `url(${Img1})`;
-        case 2:
-          return `url('${Img2}')`;
-        case 3:
-          return `url('${Img3}')`;
-        case 4:
-          return `url('${Img4}')`;
-        default:
-          return 'none';
-      }
-    }};
-    @media (max-width: 1200px) {
-      background-image: none; /* 1500px 미만에서 이미지 제거 */
-    }
-    width: 95%;
-    height: 30%;
-    border-radius: 20px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-  .card__info {
-    background-color: #fff;
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-    padding: 16px 24px 24px 24px;
-  }
-`;
-
-const CardTitle = styled.div`
-  text-align: center;
-  font-style: normal;
-  font-weight: 700;
-  font-size: 1.5rem;
-  line-height: 35px;
-  color: #111111;
-  font-family: 'Noto Sans KR';
-`;
-
-const CardContent = styled.div`
-  font-style: normal;
-  font-weight: 400;
-  font-size: 0.8rem;
-  line-height: 140%;
-  /* or 17px */
-  text-align: center;
-
-  color: #565656;
-  margin-top: 15%;
-  font-family: 'Inter';
-`;
-
 export default GroupCards;

src/data/cardData.jsx

@@ -0,0 +1,31 @@
+import Img1 from '../assets/images/makingGroup1.png';
+import Img2 from '../assets/images/makingGroup2.png';
+import Img3 from '../assets/images/makingGroup3.png';
+import Img4 from '../assets/images/makingGroup4.png';
+
+export const cardData = [
+  {
+    imgPath: Img1,
+    title: '일정 페이지마다\n읽고 싶어요',
+    content:
+      '"나의 일정 페이지마다 기록을 남기고 싶어요!" "페이지별로 소중한 순간들을 간직해보세요. 기억을 더 선명하게, 하루를 더 특별하게."',
+  },
+  {
+    imgPath: Img2,
+    title: '챕터별로\n읽고 싶어요',
+    content:
+      '"일정 챕터마다 다채로운 이야기를 남겨보세요!" "여기에서 당신의 스토리가 한 장 한 장 더해집니다. 작은 챕터들이 모여 커다란 하루를 만들어가죠."',
+  },
+  {
+    imgPath: Img3,
+    title: '횟수를 정해놓고\n읽고 싶어요',
+    content:
+      '"횟수를 정해두고 나의 기록을 쌓아가요!" "기록한 만큼 나의 성장이 보입니다. 오늘의 나는 어제보다 더 나아졌을까요?"',
+  },
+  {
+    imgPath: Img4,
+    title: '나만의 속도별로\n읽고 싶어요',
+    content:
+      '"나의 일정 페이지마다 기록을 남기고 싶어요!" "페이지별로 소중한 순간들을 간직해보세요. 기억을 더 선명하게, 하루를 더 특별하게."',
+  },
+];

src/data/checkPoint.jsx

@@ -0,0 +1,80 @@
+export const checkPoints = [
+  {
+    date: '2024.10.04',
+    title: 'CHECK POINT 1',
+    description:
+      "안녕하세요. 저희는 2024 학기 사회공헌 프로젝트에 참여한 팀 '그린리프'입니다. 즐거운 캠프 생활을 하면서 맛있는 음식을 많이 드시 텐데요, 남은 음식물이나 국물을 버릴 장소가 없어 곤란했던 경험이 다들 한 번쯤 있으실 거라 생각합니다.",
+  },
+  {
+    date: '2024.10.08',
+    title: 'CHECK POINT 2',
+    description:
+      '저희는 환경을 위해 노력하고 있으며 음식물 쓰레기 문제 해결을 위해 여러 아이디어를 준비하고 있습니다.',
+  },
+  {
+    date: '2024.10.15',
+    title: 'CHECK POINT 3',
+    description:
+      '참가자분들의 불편함을 최소화하고 음식물 쓰레기를 보다 효과적으로 처리하기 위해 다양한 방안을 논의 중입니다.',
+  },
+  {
+    date: '2024.10.22',
+    title: 'CHECK POINT 4',
+    description:
+      '첫 번째 프로토타입 제작을 완료했습니다. 음식물 쓰레기 처리 장치의 기본 구조와 작동 방식을 테스트하고 있습니다.',
+  },
+  {
+    date: '2024.10.29',
+    title: 'CHECK POINT 5',
+    description:
+      '사용자 피드백을 수집하여 개선점을 파악했습니다. 장치의 크기와 사용 편의성에 대한 의견을 반영하여 설계를 수정하고 있습니다.',
+  },
+  {
+    date: '2024.11.05',
+    title: 'CHECK POINT 6',
+    description:
+      '개선된 두 번째 프로토타입 제작이 진행 중입니다. 더 컴팩트한 사이즈와 향상된 처리 능력을 목표로 하고 있습니다.',
+  },
+  {
+    date: '2024.11.12',
+    title: 'CHECK POINT 7',
+    description:
+      '현장 테스트를 위한 준비를 마쳤습니다. 실제 캠핑장에서의 성능 검증을 위한 계획을 수립했습니다.',
+  },
+  {
+    date: '2024.11.19',
+    title: 'CHECK POINT 8',
+    description:
+      '첫 현장 테스트를 성공적으로 완료했습니다. 예상보다 높은 처리 효율을 보여주었으며, 사용자들의 반응도 긍정적이었습니다.',
+  },
+  {
+    date: '2024.11.26',
+    title: 'CHECK POINT 9',
+    description:
+      '최종 제품의 디자인을 확정했습니다. 환경 친화적인 재료 선택과 에너지 효율성을 고려한 설계를 완료했습니다.',
+  },
+  {
+    date: '2024.12.03',
+    title: 'CHECK POINT 10',
+    description:
+      '대량 생산을 위한 준비 단계에 돌입했습니다. 생산 파트너십 구축과 품질 관리 시스템을 정비하고 있습니다.',
+  },
+  {
+    date: '2024.12.10',
+    title: 'CHECK POINT 11',
+    description:
+      '마케팅 전략을 수립하고 있습니다. 환경 보호의 가치를 강조하면서 제품의 실용성을 효과적으로 전달할 계획입니다.',
+  },
+  {
+    date: '2024.12.17',
+    title: 'CHECK POINT 12',
+    description:
+      '최종 테스트와 인증 절차를 진행 중입니다. 안전성과 환경 영향 평가를 통과하기 위한 준비를 하고 있습니다.',
+  },
+  {
+    date: '2024.12.24',
+    title: 'CHECK POINT 13',
+    description:
+      '출시 준비가 거의 완료되었습니다. 초기 판매 전략과 고객 지원 시스템을 구축했으며, 론칭 이벤트를 계획하고 있습니다.',
+  },
+];

src/hooks/useCardSelection.jsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const useCardSelection = () => {
+  const [selectedImgPath, setSelectedImgPath] = useState(null);
+  const [selectedTitle, setSelectedTitle] = useState(null);
+  const [selectedContent, setSelectedContent] = useState(null);
+  const [selectedImgNum, setSelectedImgNum] = useState(0);
+
+  const handleCardClick = (card, imgNum) => {
+    setSelectedImgPath(card.imgPath);
+    setSelectedTitle(card.title);
+    setSelectedContent(card.content);
+    setSelectedImgNum(imgNum);
+  };
+
+  const handleClosePopup = () => {
+    setSelectedImgPath(null);
+    setSelectedTitle(null);
+    setSelectedContent(null);
+    setSelectedImgNum(0);
+  };
+
+  return {
+    selectedImgPath,
+    selectedTitle,
+    selectedContent,
+    selectedImgNum,
+    handleCardClick,
+    handleClosePopup,
+  };
+};
+
+export default useCardSelection;

src/hooks/useInterserctionObserver.jsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+const useIntersectionObserver = (
+  selector,
+  className,
+  options = { threshold: 0 },
+) => {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add(className);
+          //observer.unobserve(entry.target); // 한번 나타나면 관찰 중지
+        } else {
+          entry.target.classList.remove(className);
+        }
+      });
+    }, options);
+
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, [selector, className, options]);
+};
+
+export default useIntersectionObserver;

src/index.css

@@ -26,6 +26,8 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
+  align-items: center;
+  justify-content: center;
   min-width: 320px;
   min-height: 100vh;
 }