feat: Achievements 컴포넌트 레이아웃 1차 완성

- react-slick 라이브러리 사용하여 좌우슬라이딩 구현

Author: dewbeeny

package-lock.json

@@ -15,13 +15,16 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.1.5",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-slick": "^0.23.13",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",

package.json

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const ItemContainer = styled.div`
+  width: 400px;
+  height: 400px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  text-align: center;
+`;
+
+export const Image = styled.img`
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+`;
+
+export const Content = styled.div`
+  padding: 20px;
+`;
+
+export const Title = styled.h3`
+  font-size: 20px;
+  font-weight: bold;
+  color: #191919;
+`;
+
+export const Description = styled.p`
+  font-size: 16px;
+  color: #555555;
+  line-height: 1.5;
+`;

src/pages/Main/Achievements/AchievementItem.styles.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as S from './AchievementItem.styles';
+
+interface AchievementItemProps {
+  title: string;
+  description: string;
+  imageUrl: string;
+}
+
+const AchievementItem: React.FC<AchievementItemProps> = ({ title, description, imageUrl }) => {
+  return (
+    <S.ItemContainer>
+      <S.Image src={imageUrl} alt={title} />
+      <S.Content>
+        <S.Title>{title}</S.Title>
+        <S.Description>{description}</S.Description>
+      </S.Content>
+    </S.ItemContainer>
+  );
+};
+
+export default AchievementItem;

src/pages/Main/Achievements/AchievementItem.tsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+export const AchievementsContainer = styled.div`
+  width: 100vw; 
+  min-width: 100%; 
+  background-color: #fcfcfc;
+  padding: 60px 0;
+  text-align: center;
+  overflow-x: hidden; 
+`;
+export const Title = styled.h2`
+  font-size: 48px;
+  color: #191919;
+  font-weight: bold;
+  margin-bottom: 40px;
+  margin-right:670px;
+  margin-left: 90px;
+  text-align: left;
+`;
+
+export const Highlight = styled.span`
+  color: #28723f;
+`;
+
+export const SliderWrapper = styled.div`
+  width: 100vw;
+  overflow: visible; 
+  
+  .slick-list {
+    width: 100vw;
+    margin: 0;
+    padding: 20px 0; 
+    min-height: auto; /* 높이를 자동으로 조절 -> QA 후 일부 조정 필요요 */
+  }
+
+  .slick-track {
+    display: flex;
+    align-items: stretch; 
+  }
+
+  .slick-slide {
+    display: flex;
+    justify-content: center;
+    overflow: visible; 
+  }
+`;
+
+export const StatsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 60px;
+  flex-wrap: wrap;
+`;
+
+export const StatBox = styled.div`
+  width: 270px;
+  height: 250px;
+  border-radius: 20px;
+  background-color: #62de88;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StatNumber = styled.div`
+  font-size: 48px;
+  font-weight: bold;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+`;
+
+export const StatLabel = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+`;