From 73c1b2adac30c32db125ec115b0eb2a7b48c95a7 Mon Sep 17 00:00:00 2001 From: seoinah Date: Fri, 6 Jun 2025 22:42:16 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20support=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 +- package.json | 2 +- src/assets/img/support/support_banner.png | Bin 0 -> 18094 bytes .../img/support/support_process_group1.svg | 10 ++ .../img/support/support_process_group2.svg | 6 + src/components/Header/Header.tsx | 3 +- src/components/SupportCards/SupportCards.tsx | 111 +++++++++++++ src/components/Timeline/Timeline.tsx | 155 ++++++++++++++++++ src/pages/gallery/$id.tsx | 19 +-- src/pages/gallery/index.tsx | 4 +- src/pages/support/index.tsx | 41 +++++ src/quries/useGetGalleryItem.ts | 10 ++ src/service/galleryService.ts | 6 + 13 files changed, 356 insertions(+), 19 deletions(-) create mode 100644 src/assets/img/support/support_banner.png create mode 100644 src/assets/img/support/support_process_group1.svg create mode 100644 src/assets/img/support/support_process_group2.svg create mode 100644 src/components/SupportCards/SupportCards.tsx create mode 100644 src/components/Timeline/Timeline.tsx create mode 100644 src/pages/support/index.tsx create mode 100644 src/quries/useGetGalleryItem.ts diff --git a/package-lock.json b/package-lock.json index aae2d1b..788f8d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "lucide-react": "^0.344.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-icons": "^5.4.0", + "react-icons": "^5.5.0", "react-query": "^3.39.3", "react-quill": "^2.0.0", "react-router-dom": "^6.22.1" @@ -6078,9 +6078,9 @@ } }, "node_modules/react-icons": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", - "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", "license": "MIT", "peerDependencies": { "react": "*" diff --git a/package.json b/package.json index 6ffd55e..6a99eaa 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "lucide-react": "^0.344.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-icons": "^5.4.0", + "react-icons": "^5.5.0", "react-query": "^3.39.3", "react-quill": "^2.0.0", "react-router-dom": "^6.22.1" diff --git a/src/assets/img/support/support_banner.png b/src/assets/img/support/support_banner.png new file mode 100644 index 0000000000000000000000000000000000000000..b1936e27b26b61a4c6dfe6dc4530579ccad1aea5 GIT binary patch literal 18094 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 + + + + + + + + + diff --git a/src/assets/img/support/support_process_group2.svg b/src/assets/img/support/support_process_group2.svg new file mode 100644 index 0000000..3a2a4df --- /dev/null +++ b/src/assets/img/support/support_process_group2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 4d28d35..400c2a7 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -35,7 +35,8 @@ const menuItems = [ label: "GALLERY", hasDropdown: false, path: "/gallery", - } + }, + { label: "SUPPORT", path: "/support", hasDropdown: false }, /* { label: "NEWS", hasDropdown: false }, { label: "SUPPORT", hasDropdown: false }, { label: "COC", hasDropdown: false },*/ diff --git a/src/components/SupportCards/SupportCards.tsx b/src/components/SupportCards/SupportCards.tsx new file mode 100644 index 0000000..8215dd7 --- /dev/null +++ b/src/components/SupportCards/SupportCards.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { IoIosArrowForward } from 'react-icons/io'; +import financialIcon from '@/assets/img/support/support_process_group1.svg'; +import materialIcon from '@/assets/img/support/support_process_group2.svg'; + +interface SupportCardProps { + subtitle: string; + title: string; + description: string[]; + icon: string; +} + +const SupportCard: React.FC = ({ subtitle, title, description, icon }) => ( +
+
+
+
+
+
+ {subtitle} +
+
+ {title} +
+
+
+ {description.map((line, index) => ( + + {line} + {index < description.length - 1 &&
} + + ))} +
+
+
+ {`${title} +
+
+
+); + +const SupportCards = () => { + const supportCards = [ + { + subtitle: "작은 나눔 큰 변화", + title: "금전적 후원", + description: [ + "계좌이체를 통해 후원금을 입금하실 수 있습니다.", + "여러분의 소중한 후원은 큰 힘이 됩니다." + ], + icon: financialIcon + }, + { + subtitle: "나누는 기쁨", + title: "물품 기부", + description: [ + "도서 및 이벤트 상품 등 다양한 물품 기부를 받습니다.", + "기부 물품을 구체적으로 작성해주시면,", + "이메일로 절차를 안내해 드리겠습니다." + ], + icon: materialIcon + } + ]; + + const handleApplicationClick = () => { + window.open('https://forms.gle/your-google-form-id', '_blank'); + }; + + return ( +
+ {/* Cards Container */} +
+ {supportCards.map((card, index) => ( + + ))} +
+ + {/* Application Card */} +
+
+
+
+ 후원 신청하기 +
+
+ 아래 구글폼을 통해 후원에 필요한 정보를 입력해 주세요. +
+ 제출하신 정보는 내부 검토 후, 후원 방법에 대해 안내드리겠습니다. +
+
+
+ +
+
+
+ ); +}; + +export default SupportCards; \ No newline at end of file diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx new file mode 100644 index 0000000..a6c1e7a --- /dev/null +++ b/src/components/Timeline/Timeline.tsx @@ -0,0 +1,155 @@ +import React, { useState, useEffect } from 'react'; +import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io'; +import { AboutSectionTitle } from '../AboutSection'; + +const Timeline = () => { + const [currentSlide, setCurrentSlide] = useState(0); + const [slidesToShow, setSlidesToShow] = useState(1); + + const events = [ + { + year: 24, + month: 'SEP', + title: 'HelloPY 탄생', + description: '파이몬 생일\nDiscord, Instagram, Youtube 개설', + position: 'right' + }, + + { + year: 24, + month: 'OCT', + title: '컨퍼런스 & 파이콘', + description: 'HelloPY 컨퍼런스 VOL.1\n파이콘 한국 2024 부스 운영\nDiscord User 100명 달성', + position: 'left' + }, + { + year: 24, + month: 'NOV', + title: '제1회 OnOFF 모각클', + description: "'모여서 각자 작업하는 모임'\n매주 2회 대면/비대면 활동 개최", + position: 'right' + }, + { + year: 24, + month: 'DEC', + title: '파이콘 공유회', + description: '월드와이드 파이콘 공유회\nLinkedIn 개설', + position: 'left' + }, + { + year: 25, + month: 'MAR', + title: '홈페이지 리뉴얼', + description: 'HelloPY 공식 홈페이지 제작', + position: 'right' + }, + ]; + + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 1024) { // lg breakpoint + setSlidesToShow(3); + } else if (window.innerWidth >= 768) { // md breakpoint + setSlidesToShow(2); + } else { + setSlidesToShow(1); + } + }; + + handleResize(); // 초기 설정 + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + const handlePrevSlide = () => { + setCurrentSlide((prev) => (prev > 0 ? prev - 1 : events.length - slidesToShow)); + }; + + const handleNextSlide = () => { + setCurrentSlide((prev) => (prev < events.length - slidesToShow ? prev + 1 : 0)); + }; + + const isFirstSlide = currentSlide === 0; + const isLastSlide = currentSlide >= events.length - slidesToShow; + + return ( +
+
+
+ + + {/* Timeline Events Container */} +
+
+
+ {events.map((event, index) => ( +
+
+
+
+
+
+ {event.year}.{event.month} +
+
+ {event.title} +
+
+
+ {event.description} +
+
+
+
+ ))} +
+
+ + {/* Navigation Buttons */} +
+ + +
+
+
+
+ ); +}; + +export default Timeline; \ No newline at end of file diff --git a/src/pages/gallery/$id.tsx b/src/pages/gallery/$id.tsx index cf8cc58..f03de9b 100644 --- a/src/pages/gallery/$id.tsx +++ b/src/pages/gallery/$id.tsx @@ -1,37 +1,34 @@ import * as React from "react"; import { Container } from "@/components/Container"; -import { useGetNotice } from "@/quries/useGetNotice.ts"; import { useNavigate, useParams } from "react-router-dom"; +import { useGetGalleryItem } from "@/quries/useGetGalleryItem"; export const NoticeDetail: React.FC = () => { const { id } = useParams(); const nav = useNavigate(); - const { data } = useGetNotice(id); + const { data } = useGetGalleryItem(id ? Number(id) : undefined); const goToList = () => { - nav("/board/notice"); + nav("/gallery"); }; - const notice = data?.data ?? undefined; + const galleryItem = data?.data ?? undefined; return ( - notice && ( + galleryItem && (

공지사항

- {notice.title} + {galleryItem.title}

-

- {new Date(notice.created_at).toLocaleDateString()} -

{/* REVIEW: 해시태그 컴포넌트는 없나? todo: hashtag*/} - {/*
#컨퍼런스
*/} + {galleryItem?.tags?.map((tag:{id: number, name: string}) =>
{tag.name}
)}
-

+

diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index e28dcc7..5034543 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -1,4 +1,3 @@ - import BgImg from "@/assets/img/gallery/banner_gallery.png"; import { HeaderBanner } from "@/components/HeaderBanner"; @@ -10,6 +9,7 @@ import { useEffect, useState } from "react"; import { Gallery, SelectValue } from "@/types/common.ts"; import { useGetGallery } from "@/quries/useGetGallery"; import { Pagination } from "@/components/Pagination"; +import Timeline from '@/components/Timeline/Timeline'; const selectedOptions = [ { label: "2024년", value: "2024" }, @@ -84,7 +84,7 @@ const ActivityGallery = () => {
- +
diff --git a/src/pages/support/index.tsx b/src/pages/support/index.tsx new file mode 100644 index 0000000..63bd6c6 --- /dev/null +++ b/src/pages/support/index.tsx @@ -0,0 +1,41 @@ +import BgImg from "@/assets/img/support/support_banner.png"; + +import { HeaderBanner } from "@/components/HeaderBanner"; +import { Breadcrumb } from "@/components/Breadcrumb"; +import { AboutSection, AboutSectionTitle } from "@/components/AboutSection"; +import SupportCards from '../../components/SupportCards/SupportCards'; + + +const Support = () => { + + return ( +
+ 많은 관심과 참여부탁드립니다.`} + > + Home, + SUPPORT + ]} + /> + + + + + + +
+ ); +}; + +export default Support; diff --git a/src/quries/useGetGalleryItem.ts b/src/quries/useGetGalleryItem.ts new file mode 100644 index 0000000..ba469ac --- /dev/null +++ b/src/quries/useGetGalleryItem.ts @@ -0,0 +1,10 @@ +import { useQuery } from "react-query"; +import { GalleryService } from "@/service/galleryService"; + +export const useGetGalleryItem = (id?: number) => { + return useQuery({ + enabled: !!id, + queryKey: [GalleryService.QueryKey.getGallery, id], + queryFn: () => GalleryService.getGallery(id!), + }); +}; diff --git a/src/service/galleryService.ts b/src/service/galleryService.ts index b548336..f8baaba 100644 --- a/src/service/galleryService.ts +++ b/src/service/galleryService.ts @@ -3,12 +3,18 @@ import instance from "@/hooks/useAxios.ts"; export const GalleryService = { QueryKey: { getGallery: "getGallery", + getGalleryItem: "getGalleryItem", }, getGallery: async (page: number) => { const { data } = await instance.get(`/activity-gallery/?page_size=10&page=${page}`); + return data; + }, + getGalleryItem: async (id: number) => { + const { data } = await instance.get(`/activity-gallery${id}`); + return data; }, };