Merge pull request #14 from DguFarmSystem/feature/10-achievements-layout

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

package.json

@@ -17,13 +17,16 @@
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",
     "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",

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const ItemContainer = styled.div`
+  width: 400px;
+  height: 400px;
+  background-color:#175321;
+  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: 14px;
+  color: #fcfcfc;
+`;
+
+export const Description = styled.p`
+ font-size: 20px;
+  font-weight: bold;
+  color: #fcfcfc;
+  line-height: 1.5;
+`;

src/pages/Main/Achievements/AchievementItem.tsx

@@ -0,0 +1,21 @@
+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/Achievements.styles.ts

@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+
+export const AchievementsContainer = styled.div`
+  width: 100vw; 
+  min-width: 100%; 
+  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;
+  position: relative; /* 블러 효과 위치 */
+  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; 
+  }
+
+  /* 블러 효과 */
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 400px; /* 블러 영역 너비 -> 뷰 포인트에 따라 조절 필요*/
+    height: 100%;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
+  }
+`;
+
+
+export const StatsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 60px;
+  flex-wrap: wrap;
+`;
+
+const statColors = ["#62de88", "#5ccc7e", "#50b46f", "#48a164"];
+
+export const StatBox = styled.div<{ index: number }>`
+  width: 270px;
+  height: 250px;
+  border-radius: 20px;
+  background-color: ${({ index }) => statColors[index]}; /* 각 박스마다 다른 색상 적용 */
+  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);
+  color: #fff;
+`;
+
+export const StatLabel = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  color: #fff;
+`;