From 88ac8c502fd36d01dd8e96dee990a7fa35437756 Mon Sep 17 00:00:00 2001 From: dewbeeny Date: Wed, 12 Feb 2025 20:25:30 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Achievements=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=201?= =?UTF-8?q?=EC=B0=A8=20=EC=99=84=EC=84=B1=20-=20react-slick=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=A2=8C=EC=9A=B0=EC=8A=AC=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=94=A9=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 85 +++++++++++++++ package.json | 3 + .../Achievements/AchievementItem.styles.ts | 33 ++++++ .../Main/Achievements/AchievementItem.tsx | 22 ++++ .../Main/Achievements/Achievements.styles.ts | 76 +++++++++++++ src/pages/Main/Achievements/Achievements.tsx | 102 +++++++++++++++++- 6 files changed, 316 insertions(+), 5 deletions(-) create mode 100644 src/pages/Main/Achievements/AchievementItem.styles.ts create mode 100644 src/pages/Main/Achievements/AchievementItem.tsx create mode 100644 src/pages/Main/Achievements/Achievements.styles.ts diff --git a/package-lock.json b/package-lock.json index 8a5ccf7..b94bacd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "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" }, @@ -19,6 +21,7 @@ "@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", @@ -1428,6 +1431,16 @@ "@types/react": "^18.0.0" } }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/stylis": { "version": "4.2.5", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", @@ -1874,6 +1887,12 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2011,6 +2030,12 @@ "dev": true, "license": "ISC" }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==", + "license": "MIT" + }, "node_modules/esbuild": { "version": "0.24.2", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz", @@ -2556,6 +2581,13 @@ "dev": true, "license": "ISC" }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", + "license": "MIT", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2609,6 +2641,15 @@ "dev": true, "license": "MIT" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "license": "MIT", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -2662,6 +2703,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3031,6 +3078,29 @@ } } }, + "node_modules/react-slick": { + "version": "0.30.3", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz", + "integrity": "sha512-B4x0L9GhkEWUMApeHxr/Ezp2NncpGc+5174R02j+zFiWuYboaq98vmxwlpafZfMjZic1bjdIqqmwLDcQY0QaFA==", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "license": "MIT" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3169,6 +3239,15 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "license": "MIT", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -3178,6 +3257,12 @@ "node": ">=0.10.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==", + "license": "MIT" + }, "node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", diff --git a/package.json b/package.json index 6ee0811..dce83e2 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "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" }, @@ -22,6 +24,7 @@ "@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", diff --git a/src/pages/Main/Achievements/AchievementItem.styles.ts b/src/pages/Main/Achievements/AchievementItem.styles.ts new file mode 100644 index 0000000..4a97097 --- /dev/null +++ b/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: #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; +`; diff --git a/src/pages/Main/Achievements/AchievementItem.tsx b/src/pages/Main/Achievements/AchievementItem.tsx new file mode 100644 index 0000000..7cc3f13 --- /dev/null +++ b/src/pages/Main/Achievements/AchievementItem.tsx @@ -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 = ({ title, description, imageUrl }) => { + return ( + + + + {title} + {description} + + + ); +}; + +export default AchievementItem; diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts new file mode 100644 index 0000000..42c2431 --- /dev/null +++ b/src/pages/Main/Achievements/Achievements.styles.ts @@ -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; +`; diff --git a/src/pages/Main/Achievements/Achievements.tsx b/src/pages/Main/Achievements/Achievements.tsx index 3cb02c7..2ecbe02 100644 --- a/src/pages/Main/Achievements/Achievements.tsx +++ b/src/pages/Main/Achievements/Achievements.tsx @@ -1,7 +1,99 @@ -export default function Achievements() { +import React from 'react'; +import AchievementItem from './AchievementItem'; +import Slider from 'react-slick'; +import * as S from './Achievements.styles'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; + +const achievementsData = [ + { + id: 1, + title: '2024 사회보장정보와 공공•민간 빅데이터 활용 국민행복서비스', + description: '한국사회보장정보원 표창장', + imageUrl: 'path/to/image1.jpg', + }, + { + id: 2, + title: '2024 창업 아이디어 경진대회', + description: '동국대학교 총장상(대상)', + imageUrl: 'path/to/image2.jpg', + }, + { + id: 3, + title: '2024 동국대학교 AI융합대학 해커톤', + description: 'AI융합대학장상(대상)', + imageUrl: 'path/to/image3.jpg', + }, +]; + +const settings = { + infinite: true, + speed: 1000, + slidesToShow: 3, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 4000, + pauseOnHover: true, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 768, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 480, + settings: { + slidesToShow: 1, + }, + }, + ], +}; + +const Achievements = () => { return ( -
-

Achievements Section

-
+ + + 2024년 Farm System 3기에서 함께 성장하고 이루어낸 성과입니다. + + + + {achievementsData.map((achievement) => ( + + ))} + + + + + 1,200명 + 활동 멤버 + + + 140개 + 프로젝트 + + + 80개 + 스터디 + + + 20회 + 수상 경험 + + + ); -} +}; + +export default Achievements; From 6202137aee662e69d6014ed1e13418ac72212e09 Mon Sep 17 00:00:00 2001 From: dewbeeny Date: Fri, 14 Feb 2025 01:29:46 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80?= =?UTF-8?q?=20=EC=95=8A=EB=8A=94=20import=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F?= =?UTF-8?q?=20=EC=9D=BC=EB=B6=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Achievements/AchievementItem.styles.ts | 12 ++--- .../Main/Achievements/AchievementItem.tsx | 1 - .../Main/Achievements/Achievements.styles.ts | 37 +++++++++++++--- src/pages/Main/Achievements/Achievements.tsx | 44 +++++++++++-------- 4 files changed, 64 insertions(+), 30 deletions(-) diff --git a/src/pages/Main/Achievements/AchievementItem.styles.ts b/src/pages/Main/Achievements/AchievementItem.styles.ts index 4a97097..0449eef 100644 --- a/src/pages/Main/Achievements/AchievementItem.styles.ts +++ b/src/pages/Main/Achievements/AchievementItem.styles.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const ItemContainer = styled.div` width: 400px; height: 400px; - background-color: #ffffff; + background-color:#175321; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; @@ -21,13 +21,13 @@ export const Content = styled.div` `; export const Title = styled.h3` - font-size: 20px; - font-weight: bold; - color: #191919; + font-size: 14px; + color: #fcfcfc; `; export const Description = styled.p` - font-size: 16px; - color: #555555; + font-size: 20px; + font-weight: bold; + color: #fcfcfc; line-height: 1.5; `; diff --git a/src/pages/Main/Achievements/AchievementItem.tsx b/src/pages/Main/Achievements/AchievementItem.tsx index 7cc3f13..efd41b1 100644 --- a/src/pages/Main/Achievements/AchievementItem.tsx +++ b/src/pages/Main/Achievements/AchievementItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import * as S from './AchievementItem.styles'; interface AchievementItemProps { diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts index 42c2431..d601f54 100644 --- a/src/pages/Main/Achievements/Achievements.styles.ts +++ b/src/pages/Main/Achievements/Achievements.styles.ts @@ -3,7 +3,6 @@ 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; @@ -24,13 +23,14 @@ export const Highlight = styled.span` export const SliderWrapper = styled.div` width: 100vw; + position: relative; /* 블러 효과 위치 */ overflow: visible; - + .slick-list { width: 100vw; margin: 0; padding: 20px 0; - min-height: auto; /* 높이를 자동으로 조절 -> QA 후 일부 조정 필요요 */ + min-height: auto; /* 높이를 자동으로 조절 -> QA 후 일부 조정 필요 */ } .slick-track { @@ -43,8 +43,31 @@ export const SliderWrapper = styled.div` 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; @@ -53,11 +76,13 @@ export const StatsContainer = styled.div` flex-wrap: wrap; `; -export const StatBox = styled.div` +const statColors = ["#62de88", "#5ccc7e", "#50b46f", "#48a164"]; + +export const StatBox = styled.div<{ index: number }>` width: 270px; height: 250px; border-radius: 20px; - background-color: #62de88; + background-color: ${({ index }) => statColors[index]}; /* 각 박스마다 다른 색상 적용 */ display: flex; flex-direction: column; align-items: center; @@ -68,9 +93,11 @@ 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; `; diff --git a/src/pages/Main/Achievements/Achievements.tsx b/src/pages/Main/Achievements/Achievements.tsx index 2ecbe02..811d950 100644 --- a/src/pages/Main/Achievements/Achievements.tsx +++ b/src/pages/Main/Achievements/Achievements.tsx @@ -1,10 +1,10 @@ -import React from 'react'; import AchievementItem from './AchievementItem'; import Slider from 'react-slick'; import * as S from './Achievements.styles'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; +// 이미지 url은 s3에 이미지 담기면 url 받아서 넣으면 됩니다. const achievementsData = [ { id: 1, @@ -24,6 +24,18 @@ const achievementsData = [ description: 'AI융합대학장상(대상)', imageUrl: 'path/to/image3.jpg', }, + { + id: 4, + title: '2024 DPG AI Challenge', + description: '디지털플랫폼정부위원장상(최우수상)', + imageUrl: 'path/to/image4.jpg', + }, + { + id: 5, + title: '22024 E2GEE Lab(이지랩) 메이커톤', + description: '동국대학교 총장상(대상)', + imageUrl: 'path/to/image4.jpg', + }, ]; const settings = { @@ -75,23 +87,19 @@ const Achievements = () => { - - 1,200명 - 활동 멤버 - - - 140개 - 프로젝트 - - - 80개 - 스터디 - - - 20회 - 수상 경험 - - + {[ + { number: "1,200명", label: "활동 멤버" }, + { number: "140개", label: "프로젝트" }, + { number: "80개", label: "스터디" }, + { number: "20회", label: "수상 경험" } + ].map((stat, index) => ( + + {stat.number} + {stat.label} + + ))} + + ); };