From 9ff14c9fad242c12775fc63b6a2d4c182e87e8e5 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Sun, 16 Feb 2025 21:56:57 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=92=84=20UI:=20=EB=A7=A4=EA=B1=B0?= =?UTF-8?q?=EC=A7=84=20=EC=BA=90=EB=A6=AD=ED=84=B0=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80=20#82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/assets/character/magazine.png | Bin 0 -> 3902 bytes .../src/pages/magazine/components/mindMap.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 umc-master/src/assets/character/magazine.png diff --git a/umc-master/src/assets/character/magazine.png b/umc-master/src/assets/character/magazine.png new file mode 100644 index 0000000000000000000000000000000000000000..3871073ff73a0e87813579355512cceca5450a9b GIT binary patch literal 3902 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 literal 0 HcmV?d00001 diff --git a/umc-master/src/pages/magazine/components/mindMap.tsx b/umc-master/src/pages/magazine/components/mindMap.tsx index 50b38e5..aa3f073 100644 --- a/umc-master/src/pages/magazine/components/mindMap.tsx +++ b/umc-master/src/pages/magazine/components/mindMap.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import { motion } from 'framer-motion'; -import Img from '@assets/dummyImage/dummy.jpeg'; +import Img from '@assets/character/magazine.png'; import theme from '@styles/theme'; import Typography from '@components/common/typography'; From 403d78307fa6bb90e5bad33479ac9ba0485d3b26 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Mon, 17 Feb 2025 16:09:47 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=9D=B8=EA=B8=B0=20?= =?UTF-8?q?=ED=95=B4=EC=8B=9C=ED=85=8C=EA=B7=B8=20=EC=97=B0=EA=B2=B0=20#82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/apis/policyApi.ts | 13 ++++++++++++- umc-master/src/apis/queries/usePolicyQueries.ts | 9 ++++++++- .../src/pages/magazine/components/mindMap.tsx | 11 +++++++---- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/umc-master/src/apis/policyApi.ts b/umc-master/src/apis/policyApi.ts index 72ba0d3..365d1b8 100644 --- a/umc-master/src/apis/policyApi.ts +++ b/umc-master/src/apis/policyApi.ts @@ -1,5 +1,4 @@ import axiosInstance from '@apis/axios-instance'; -//TODO: api 연결시 구조 바뀔 수도 있음 interface GetPoliciesParams { locationId: number; } @@ -45,6 +44,12 @@ export interface PolicyMutationParams { data: CreatePolicyParams; } +export interface Hashtag { + hashtag_id: number; + name: string; + popularity: number; +} + export const getPolicies = async ({ locationId }: GetPoliciesParams): Promise => { const { data } = await axiosInstance.get(`/policies?location_id=${locationId}`); return data.result; @@ -69,3 +74,9 @@ export const deletePolicy = async ({ policyId }: { policyId: number }): Promise< const response = await axiosInstance.delete(`/policies/${policyId}`); return response.data.isSuccess; }; + +// 인기 관심사 조회 (기본값 6개) +export const getPopularHashtags = async ({ limit }: { limit: number }): Promise => { + const response = await axiosInstance.get(`/hashtags/popular?limit=${limit}`); + return response.data.result; +}; diff --git a/umc-master/src/apis/queries/usePolicyQueries.ts b/umc-master/src/apis/queries/usePolicyQueries.ts index e455009..979e87f 100644 --- a/umc-master/src/apis/queries/usePolicyQueries.ts +++ b/umc-master/src/apis/queries/usePolicyQueries.ts @@ -1,4 +1,4 @@ -import { getPolicies, getPolicyGuide } from '@apis/policyApi'; +import { getPolicies, getPolicyGuide, getPopularHashtags } from '@apis/policyApi'; import { keepPreviousData, useQuery } from '@tanstack/react-query'; interface PolicyListParams { @@ -24,3 +24,10 @@ export const usePolicyGuide = ({ policyId }: PolicyGuideParams) => { placeholderData: keepPreviousData, }); }; + +export const usePopularHashtags = ({ limit }: { limit: number }) => { + return useQuery({ + queryKey: ['hashtag'], + queryFn: () => getPopularHashtags({ limit }), + }); +}; diff --git a/umc-master/src/pages/magazine/components/mindMap.tsx b/umc-master/src/pages/magazine/components/mindMap.tsx index aa3f073..2ca30fd 100644 --- a/umc-master/src/pages/magazine/components/mindMap.tsx +++ b/umc-master/src/pages/magazine/components/mindMap.tsx @@ -3,6 +3,7 @@ import { motion } from 'framer-motion'; import Img from '@assets/character/magazine.png'; import theme from '@styles/theme'; import Typography from '@components/common/typography'; +import { usePopularHashtags } from '@apis/queries/usePolicyQueries'; const nodes = [ { label: '#재활용1', x: '70%', y: '15%', color: theme.colors.primary[400] }, @@ -14,6 +15,8 @@ const nodes = [ ]; const MindMap = () => { + const { data } = usePopularHashtags({ limit: 6 }); + console.log('인기 관심사 로그', data); return ( @@ -52,17 +55,17 @@ const MindMap = () => { transition={{ duration: 0.8 }} /> - {nodes.map((node, index) => ( + {data?.slice(0, nodes.length).map((hashtag, index) => ( - {node.label} + #{hashtag.name} ))} From 0dc6c7d39216e102d164cf6372ae9b17633616f1 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Mon, 17 Feb 2025 17:34:08 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A7=A4=EA=B1=B0?= =?UTF-8?q?=EC=A7=84=20=EC=83=81=EC=84=B8=20=EC=A0=95=EB=B3=B4=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20#82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/apis/policyApi.ts | 6 +- .../src/pages/magazine/MagazineDetailPage.tsx | 74 ++++++------------- 2 files changed, 24 insertions(+), 56 deletions(-) diff --git a/umc-master/src/apis/policyApi.ts b/umc-master/src/apis/policyApi.ts index 365d1b8..73d7319 100644 --- a/umc-master/src/apis/policyApi.ts +++ b/umc-master/src/apis/policyApi.ts @@ -10,15 +10,13 @@ export interface Policy { created_at: string; updated_at: string; policy_url: string; - magazine_image_url_list: { - image_name: string; - image_url: string; - }[]; + image_url_list: []; magazine_likes: number; magazine_bookmarks: number; organization: { id: number; name: string; + image: string; }; location: { id: number; diff --git a/umc-master/src/pages/magazine/MagazineDetailPage.tsx b/umc-master/src/pages/magazine/MagazineDetailPage.tsx index 4f8587f..8589e17 100644 --- a/umc-master/src/pages/magazine/MagazineDetailPage.tsx +++ b/umc-master/src/pages/magazine/MagazineDetailPage.tsx @@ -3,79 +3,47 @@ import { useParams } from 'react-router-dom'; import styled from 'styled-components'; import Typography from '@components/common/typography'; import Tag from '@components/Tag/Tag'; - -interface MagazineDetail { - id: string; - image: string; - title: string; - author: string; - date: string; - tags: string[]; - description: string; - externalLink: string; -} -const dummyDetails: MagazineDetail[] = [ - { - id: '1', - image: 'https://i.ibb.co/SXSyhmX6/image-11.png', - title: '서리풀 보디가드 [주거안전] - 홈방범 시스템', - author: '서초1인가구지원센터', - date: '2024.12.30', - tags: ['보안', '도어가드', '홈케어'], - description: `홈 방범 시스템 - -- 도어가드벨, 몰카안심 존 등 1인세 설치 -- 설치비: 무료 -- 연이용료: 9,900원 -- 대상: 인터넷(유선) 설치가 되어있는 서초구 거주 1인가구 -- 무인경비서비스 설치 주택 적용 불가 (신규 아파트, 신규 오피스텔, 청년주택 등) - -문의: 서초1인가구지원센터`, - externalLink: 'https://example.com', - }, -]; +import { usePolicyGuide } from '@apis/queries/usePolicyQueries'; const MagazineDetailPage: React.FC = () => { const { magazineId } = useParams<{ magazineId: string }>(); + const { data } = usePolicyGuide({ policyId: Number(magazineId) }); + console.log('매거진', data); + const formattedDescription = data?.description + .replace(/ {5,}/g, '\n\n') // 공백 5칸 이상 -> \n\n + .replace(/ {3,4}/g, '\n'); // 공백 3~4칸 -> \n useEffect(() => { window.scrollTo(0, 0); }, []); - // TODO: 추후 API 연동 시, 실제 데이터 불러오도록 수정 - const detail = dummyDetails.find((item) => item.id === magazineId); - - if (!detail) { - return 해당 매거진을 찾을 수 없습니다.; - } - return ( - {detail.title} + {data?.title} - <Typography variant="titleMedium">{detail.title}</Typography> + <Typography variant="titleMedium">{data?.title}</Typography>
- + - {detail.author} + {data?.organization.name}
- {detail.date} + {data?.updated_at.slice(0, 10)} - - {detail.tags.map((tag) => ( - - ))} - + {data?.hashtag.map((tag) => )} - {detail.description} + {formattedDescription} - @@ -110,11 +78,13 @@ const AuthorContainer = styled.div` margin-bottom: 32px; `; -const ProfileImage = styled.div` +const ProfileImage = styled.img<{ hasImage: boolean }>` width: 60px; height: 60px; border-radius: 50%; - background-color: ${({ theme }) => theme.colors.text.lightGray}; + object-fit: cover; + background-color: ${({ hasImage, theme }) => (hasImage ? theme.colors.text.white : theme.colors.text.lightGray)}; + box-shadow: ${({ hasImage }) => (hasImage ? '0px 4px 10px rgba(0, 0, 0, 0.15)' : 'none')}; `; const Author = styled.div` From 08d299c05da58499dbe2e763347f35e3b73b0434 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Mon, 17 Feb 2025 19:36:11 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=B3=B4=EA=B8=B0=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=B6=94=EA=B0=80=20#82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/components/Modal/image.tsx | 48 +++++++++++++++++++ .../src/pages/magazine/MagazineDetailPage.tsx | 34 ++++++++++--- 2 files changed, 75 insertions(+), 7 deletions(-) create mode 100644 umc-master/src/components/Modal/image.tsx diff --git a/umc-master/src/components/Modal/image.tsx b/umc-master/src/components/Modal/image.tsx new file mode 100644 index 0000000..e372ae8 --- /dev/null +++ b/umc-master/src/components/Modal/image.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; + +interface ImageModalProps { + imageUrl: string; + onClose: () => void; +} + +const ImageModal: React.FC = ({ imageUrl, onClose }) => { + return ( + + + 확대된 이미지 + + + ); +}; + +export default ImageModal; + +const Overlay = styled.div` + position: fixed; + top: 30px; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +`; + +const ModalContent = styled.div` + position: relative; + max-width: 70vh; + max-height: 70vh; + display: flex; + align-items: center; + justify-content: center; +`; + +const Image = styled.img` + max-width: 100%; + max-height: 100%; + border-radius: 8px; + object-fit: contain; +`; diff --git a/umc-master/src/pages/magazine/MagazineDetailPage.tsx b/umc-master/src/pages/magazine/MagazineDetailPage.tsx index 8589e17..a67a45b 100644 --- a/umc-master/src/pages/magazine/MagazineDetailPage.tsx +++ b/umc-master/src/pages/magazine/MagazineDetailPage.tsx @@ -1,25 +1,43 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import styled from 'styled-components'; import Typography from '@components/common/typography'; import Tag from '@components/Tag/Tag'; import { usePolicyGuide } from '@apis/queries/usePolicyQueries'; +import ImageModal from '@components/Modal/image'; const MagazineDetailPage: React.FC = () => { const { magazineId } = useParams<{ magazineId: string }>(); - const { data } = usePolicyGuide({ policyId: Number(magazineId) }); + const { data, isLoading } = usePolicyGuide({ policyId: Number(magazineId) }); console.log('매거진', data); + const formattedDescription = data?.description .replace(/ {5,}/g, '\n\n') // 공백 5칸 이상 -> \n\n .replace(/ {3,4}/g, '\n'); // 공백 3~4칸 -> \n + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedImage, setSelectedImage] = useState(null); + useEffect(() => { window.scrollTo(0, 0); }, []); + const handleImageClick = (imageUrl: string) => { + setSelectedImage(imageUrl); + setIsModalOpen(true); + }; + + if (isLoading) { + return; + } + return ( - {data?.title} + {data?.title} data?.image_url_list && handleImageClick(data?.image_url_list)} + /> <Typography variant="titleMedium">{data?.title}</Typography> @@ -38,7 +56,7 @@ const MagazineDetailPage: React.FC = () => { {data?.updated_at.slice(0, 10)} - {data?.hashtag.map((tag) => )} + {data?.hashtag?.map((tag) => ) ?? []} {formattedDescription} @@ -46,10 +64,13 @@ const MagazineDetailPage: React.FC = () => { + {isModalOpen && selectedImage && setIsModalOpen(false)} />} ); }; +export default MagazineDetailPage; + const Container = styled.div` max-width: 1280px; margin: 0 auto; @@ -58,10 +79,11 @@ const Container = styled.div` const Image = styled.img` width: 100%; - height: 200px; + height: 400px; object-fit: cover; border-radius: 20px; margin-bottom: 32px; + cursor: pointer; `; const Title = styled.div` @@ -132,5 +154,3 @@ const Button = styled.a` background-color: ${({ theme }) => theme.colors.primary[600]}; } `; - -export default MagazineDetailPage; From 9d4fff497dc305e49f976891d151ba155017b73e Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Thu, 20 Feb 2025 22:45:40 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=90=9B=20bug:=20=EC=A0=95=EC=B1=85=20?= =?UTF-8?q?api=20=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/apis/policyApi.ts | 5 ++-- .../src/pages/magazine/MagazinePage.tsx | 7 +++-- .../pages/magazine/components/cardGrid.tsx | 30 +++++++++++++++++-- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/umc-master/src/apis/policyApi.ts b/umc-master/src/apis/policyApi.ts index 73d7319..9078863 100644 --- a/umc-master/src/apis/policyApi.ts +++ b/umc-master/src/apis/policyApi.ts @@ -1,4 +1,5 @@ import axiosInstance from '@apis/axios-instance'; +import { PolicyData } from '@pages/magazine/components/cardGrid'; interface GetPoliciesParams { locationId: number; } @@ -48,9 +49,9 @@ export interface Hashtag { popularity: number; } -export const getPolicies = async ({ locationId }: GetPoliciesParams): Promise => { +export const getPolicies = async ({ locationId }: GetPoliciesParams): Promise => { const { data } = await axiosInstance.get(`/policies?location_id=${locationId}`); - return data.result; + return data.result.policy_list; }; export const getPolicyGuide = async ({ policyId }: { policyId: number }): Promise => { diff --git a/umc-master/src/pages/magazine/MagazinePage.tsx b/umc-master/src/pages/magazine/MagazinePage.tsx index f45b3ca..de4f0f2 100644 --- a/umc-master/src/pages/magazine/MagazinePage.tsx +++ b/umc-master/src/pages/magazine/MagazinePage.tsx @@ -4,6 +4,7 @@ import Typography from '@components/common/typography'; import MindMap from './components/mindMap'; import CardGrid, { CardGridData } from './components/cardGrid'; import dummyImg from '@assets/dummyImage/dummy.jpeg'; +import { usePolicies } from '@apis/queries/usePolicyQueries'; const generateDummyData = (): CardGridData[] => { return Array.from({ length: 9 }, (_, index) => ({ @@ -17,7 +18,7 @@ const generateDummyData = (): CardGridData[] => { }; const MagazinePage = () => { - const programData = generateDummyData(); + const { data: policiesData } = usePolicies({ locationId: 17 }); const influencerData = generateDummyData(); useEffect(() => { @@ -31,9 +32,9 @@ const MagazinePage = () => { - <Typography variant="headingXxSmall">서초구 지원 프로그램</Typography> + <Typography variant="headingXxSmall">종로구 지원 프로그램</Typography> - + <Typography variant="headingXxSmall">인플루언서 꿀팁</Typography> diff --git a/umc-master/src/pages/magazine/components/cardGrid.tsx b/umc-master/src/pages/magazine/components/cardGrid.tsx index 98d9de7..18c53e9 100644 --- a/umc-master/src/pages/magazine/components/cardGrid.tsx +++ b/umc-master/src/pages/magazine/components/cardGrid.tsx @@ -2,6 +2,16 @@ import React from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; import CardInfo from '@components/Card/CardInfo'; +import dummyImg from '@assets/dummyImage/dummy.jpeg'; + +export interface PolicyData { + id: number; + title: string; + imageUrl: string; + likeCount: number; + bookmarkCount: number; + createAt: string; +} export interface CardGridData { id: string; @@ -13,13 +23,25 @@ export interface CardGridData { } interface CardGridProps { - cards: CardGridData[]; + cards: PolicyData[] | undefined; } interface ProcessedCardData extends CardGridData { columnSpan: number; } +const transformPolicies = (policies: PolicyData[] | undefined): CardGridData[] => { + if (!policies) return []; + return policies.map((policy) => ({ + id: policy.id.toString(), + image: policy.imageUrl || dummyImg, // 이미지 없을 경우 기본값 + text: policy.title, + likes: policy.likeCount ?? 0, // undefined 방지 + bookmarks: policy.bookmarkCount ?? 0, // undefined 방지 + date: new Date(policy.createAt).toLocaleDateString('ko-KR'), + })); +}; + const generatePattern = (): number[] => { const patterns = [ [2, 1], // 큰 카드 - 작은 카드 @@ -46,7 +68,9 @@ const applyPatternToCards = (cards: CardGridData[]): ProcessedCardData[] => { const CardGrid: React.FC = ({ cards }) => { const navigate = useNavigate(); - const updatedCards = applyPatternToCards(cards); + + const transformedCards = transformPolicies(cards); + const updatedCards = applyPatternToCards(transformedCards); const handleClick = (id: string) => { navigate(`/magazine/${id}`); @@ -78,7 +102,7 @@ const GridContainer = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; - align-items: start; // 카드가 위쪽부터 정렬되도록 유지 + align-items: start; `; const GridItem = styled.div<{ columnSpan: number }>` From 7844360840ddd3657d9cdc0a1321e12b77c2a764 Mon Sep 17 00:00:00 2001 From: Minji Kim Date: Thu, 20 Feb 2025 23:14:15 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20bug:=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- umc-master/src/pages/magazine/MagazineDetailPage.tsx | 2 ++ umc-master/src/pages/magazine/MagazinePage.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/umc-master/src/pages/magazine/MagazineDetailPage.tsx b/umc-master/src/pages/magazine/MagazineDetailPage.tsx index a67a45b..3d2a36d 100644 --- a/umc-master/src/pages/magazine/MagazineDetailPage.tsx +++ b/umc-master/src/pages/magazine/MagazineDetailPage.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +// @ts-nocheck import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import styled from 'styled-components'; diff --git a/umc-master/src/pages/magazine/MagazinePage.tsx b/umc-master/src/pages/magazine/MagazinePage.tsx index de4f0f2..3f4983b 100644 --- a/umc-master/src/pages/magazine/MagazinePage.tsx +++ b/umc-master/src/pages/magazine/MagazinePage.tsx @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +// @ts-nocheck import { useEffect } from 'react'; import styled from 'styled-components'; import Typography from '@components/common/typography';