From d6e87d3c7e283971058de557f2b1e5acf639037d Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Fri, 9 May 2025 15:43:19 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EB=AA=A8=EB=8B=AC=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/support/consumer/Ic_Alert.svg | 9 ++++ src/pages/support/SupportPage.jsx | 2 +- .../support/components/HaveToLoginModal.jsx | 54 +++++++++++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 public/svgs/support/consumer/Ic_Alert.svg create mode 100644 src/pages/support/components/HaveToLoginModal.jsx diff --git a/public/svgs/support/consumer/Ic_Alert.svg b/public/svgs/support/consumer/Ic_Alert.svg new file mode 100644 index 0000000..e8dfb3b --- /dev/null +++ b/public/svgs/support/consumer/Ic_Alert.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/support/SupportPage.jsx b/src/pages/support/SupportPage.jsx index 872524b..5b83f60 100644 --- a/src/pages/support/SupportPage.jsx +++ b/src/pages/support/SupportPage.jsx @@ -2,8 +2,8 @@ import { useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; import CompanyTab from "@/pages/support/components/CompanyTab"; import ConsumerTab from "@/pages/support/components/ConsumerTab"; -import HaveToLoginModal from "@components/common/HaveToLoginModal"; import { getMyProfile } from "@apis/member/auth"; +import HaveToLoginModal from "./components/HaveToLoginModal"; const SupportPage = () => { const [searchParams, setSearchParams] = useSearchParams(); diff --git a/src/pages/support/components/HaveToLoginModal.jsx b/src/pages/support/components/HaveToLoginModal.jsx new file mode 100644 index 0000000..83089fb --- /dev/null +++ b/src/pages/support/components/HaveToLoginModal.jsx @@ -0,0 +1,54 @@ +import { useNavigate } from "react-router-dom"; + +const HaveToLoginModal = ({ + message, + subMessage, + onClose, + showButton = true, + showClose = true, +}) => { + const navigate = useNavigate(); + + const handleLogin = () => { + onClose(); + navigate("/auth"); + }; + + return ( +
+
e.stopPropagation()} + > + {showClose && ( + + )} + + 에러 + +

{message}

+ {subMessage &&

{subMessage}

} + + {showButton && ( + + )} +
+
+ ); +}; + +export default HaveToLoginModal; From 5efa73e48a03beb517704901cb4a556cb47ec2d1 Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Fri, 9 May 2025 16:11:07 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Rename:=20=EB=82=B4=EC=9A=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/support/components/HaveToLoginModal.jsx | 2 +- src/pages/support/constants/consumerMap.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/support/components/HaveToLoginModal.jsx b/src/pages/support/components/HaveToLoginModal.jsx index 83089fb..19b6025 100644 --- a/src/pages/support/components/HaveToLoginModal.jsx +++ b/src/pages/support/components/HaveToLoginModal.jsx @@ -32,7 +32,7 @@ const HaveToLoginModal = ({ 에러

{message}

diff --git a/src/pages/support/constants/consumerMap.js b/src/pages/support/constants/consumerMap.js index b92a8b4..f4348c7 100644 --- a/src/pages/support/constants/consumerMap.js +++ b/src/pages/support/constants/consumerMap.js @@ -12,7 +12,7 @@ export const SPEECH_BUBBLE_MAP = { 사회서비스제공형: "돌봄과 배려가 필요한 곳에,\n당신의 소비가 닿았어요.", 혼합형: "다양한 사회문제를 동시에 돕는\n멋진 소비를 하셨네요!", "기타(창의ㆍ혁신)형": "사회에 선한 영향을 준\n당신의 소비, 함께 기억할게요.", - 예비: "예비 사회적 기업에\n 선한 영향을 준\n 당신의 소비, 함께 기억할게요.", + 예비형: "예비 사회적 기업에\n 선한 영향을 준\n 당신의 소비, 함께 기억할게요.", }; export const KOR_TO_ENUM_MAP = { @@ -21,7 +21,7 @@ export const KOR_TO_ENUM_MAP = { 혼합형: "MIXED", "기타(창의ㆍ혁신)형": "ETC", 지역사회공헌형: "COMPANY_CONTRIBUTION", - 예비: "PRE", + 예비형: "PRE", }; export const ENUM_TO_KOR_MAP = { @@ -30,5 +30,5 @@ export const ENUM_TO_KOR_MAP = { MIXED: "혼합형", ETC: "기타(창의ㆍ혁신)형", COMPANY_CONTRIBUTION: "지역사회공헌형", - PRE: "예비", + PRE: "예비형", }; From 6cf2ca412783e07d457e535499cd7bd61025508e Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Fri, 9 May 2025 16:11:25 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20=EA=B8=88=EC=9C=B5=EC=83=81?= =?UTF-8?q?=ED=92=88=20=EC=B6=94=EC=B2=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../support/FinancialProductDetailPage.jsx | 20 ++++++++++++++----- .../support/FinancialProductListPage.jsx | 2 ++ src/pages/support/components/ConsumerTab.jsx | 20 ++++++++++++++++--- .../support/components/ConsumptionChart.jsx | 8 ++++++-- .../support/components/RecommendationCard.jsx | 19 +++++++++++++----- 5 files changed, 54 insertions(+), 15 deletions(-) diff --git a/src/pages/support/FinancialProductDetailPage.jsx b/src/pages/support/FinancialProductDetailPage.jsx index d7dc829..8897655 100644 --- a/src/pages/support/FinancialProductDetailPage.jsx +++ b/src/pages/support/FinancialProductDetailPage.jsx @@ -60,11 +60,21 @@ const FinancialProductDetailPage = () => {
- {data.productType && ( - - {data.productType} - - )} + {data.productType && + data.recommendedCategory && + data.defaultCategory && ( + <> + + {data.productType} + + + {data.recommendedCategory} + + + {data.defaultCategory} + + + )}

{data.productName}

diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index 1af984b..0f4dca6 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -39,6 +39,8 @@ const FinancialProductList = () => { showDescription={false} productType={item.productType} benefit={item.benefit} + recommendedCategory={item.recommendedCategory} + defaultCategory={item.defaultCategory} /> ))}
diff --git a/src/pages/support/components/ConsumerTab.jsx b/src/pages/support/components/ConsumerTab.jsx index 979046c..9415b72 100644 --- a/src/pages/support/components/ConsumerTab.jsx +++ b/src/pages/support/components/ConsumerTab.jsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { useNavigate } from "react-router-dom"; import ConsumptionChart from "./ConsumptionChart"; import RecommendationCard from "./RecommendationCard"; @@ -5,8 +6,10 @@ import Spinner from "@components/common/Spinner"; import { useConsumptionData } from "../hooks/useConsumptionData"; import { useFinancialProducts } from "../hooks/useFinancialProducts"; import { companyTypeNameMap } from "@constants/categoryMap"; +import { ENUM_TO_KOR_MAP } from "../constants/consumerMap"; const ConsumerTab = () => { + const [topCategory, setTopCategory] = useState(null); const navigate = useNavigate(); const { data: consumptionData, isLoading, error } = useConsumptionData(); @@ -16,6 +19,16 @@ const ConsumerTab = () => { error: productsError, } = useFinancialProducts(); + const safeProducts = Array.isArray(consumerProducts) ? consumerProducts : []; + + const filteredProducts = topCategory + ? safeProducts.filter( + (item) => + item.recommendedCategory === ENUM_TO_KOR_MAP[topCategory] || + item.defaultCategory === ENUM_TO_KOR_MAP[topCategory] + ) + : safeProducts; + if (isLoading || isProductsLoading) return ; if (error || productsError) return

데이터를 불러오지 못했습니다.

; @@ -25,8 +38,6 @@ const ConsumerTab = () => { value: item.totalPrice, })) || []; - const safeProducts = Array.isArray(consumerProducts) ? consumerProducts : []; - return (
@@ -36,6 +47,7 @@ const ConsumerTab = () => {
@@ -52,7 +64,7 @@ const ConsumerTab = () => {
- {safeProducts.map((item, _) => ( + {filteredProducts.map((item, _) => (
{ description={item.productDescription} productType={item.productType} benefit={item.benefit} + recommendedCategory={item.recommendedCategory} + defaultCategory={item.defaultCategory} />
))} diff --git a/src/pages/support/components/ConsumptionChart.jsx b/src/pages/support/components/ConsumptionChart.jsx index 199bad8..c1ea9d5 100644 --- a/src/pages/support/components/ConsumptionChart.jsx +++ b/src/pages/support/components/ConsumptionChart.jsx @@ -9,7 +9,7 @@ import { import { getConsumptionDetail } from "@apis/consumer/getConsumptionDetail"; import CustomTooltip from "./CustomTooltip"; -const ConsumptionChart = ({ data, reviewCount }) => { +const ConsumptionChart = ({ data, reviewCount, onTopCategory }) => { const [topReviewSpeech, setTopReviewSpeech] = useState(""); const [topTwo, setTopTwo] = useState([]); const [chartData, setChartData] = useState([]); @@ -51,6 +51,7 @@ const ConsumptionChart = ({ data, reviewCount }) => { reviewCount: typeReviewCount, reviewRatio: typeReviewCount / reviewCount, speech: SPEECH_BUBBLE_MAP[korTypeName], + companyType: consumption?.companyType?.trim(), }; }) ); @@ -64,6 +65,9 @@ const ConsumptionChart = ({ data, reviewCount }) => { ); setTopTwo(ranked.slice(0, 2)); setChartData(ranked.slice(0, 6)); + if (ranked[0]?.companyType && onTopCategory) { + onTopCategory(ranked[0].companyType); + } } } catch (err) { console.error("전체 오류:", err); @@ -78,7 +82,7 @@ const ConsumptionChart = ({ data, reviewCount }) => { return () => { isMounted = false; }; - }, [reviewCount, sortedData]); + }, [reviewCount, sortedData, onTopCategory]); return (
diff --git a/src/pages/support/components/RecommendationCard.jsx b/src/pages/support/components/RecommendationCard.jsx index 309bc59..e496eb9 100644 --- a/src/pages/support/components/RecommendationCard.jsx +++ b/src/pages/support/components/RecommendationCard.jsx @@ -6,7 +6,8 @@ const RecommendationCard = ({ title, description, productType, - benefit, + recommendedCategory, + defaultCategory, showDescription = true, }) => { const navigate = useNavigate(); @@ -30,10 +31,18 @@ const RecommendationCard = ({ />
- {productType && ( - - {productType} - + {productType && recommendedCategory && defaultCategory && ( + <> + + {productType} + + + {recommendedCategory} + + + {defaultCategory} + + )}
From b28c6b7098b7954ac5d075a11daebaea27c0d42e Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Fri, 9 May 2025 16:52:36 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Feat:=20=EB=A6=AC=EB=B7=B0=20=EB=A7=8E?= =?UTF-8?q?=EC=9D=80=20=EC=88=9C=EC=9C=BC=EB=A1=9C=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EA=B8=88=EC=9C=B5=20=EC=83=81=ED=92=88=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../support/FinancialProductListPage.jsx | 56 ++++++++++++++++++- 1 file changed, 53 insertions(+), 3 deletions(-) diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index 0f4dca6..eaaf234 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -1,13 +1,63 @@ +import { useEffect, useState } from "react"; import RecommendationCard from "@/pages/support/components/RecommendationCard"; import { useNavigate } from "react-router-dom"; import { useFinancialProducts } from "@/pages/support/hooks/useFinancialProducts"; import Spinner from "@components/common/Spinner"; +import { getConsumptionDetail } from "@apis/consumer/getConsumptionDetail"; +import { KOR_TO_ENUM_MAP } from "@pages/support/constants/consumerMap"; const FinancialProductList = () => { const navigate = useNavigate(); const { data: products, isLoading, error } = useFinancialProducts(); - const safeProducts = Array.isArray(products) ? products : []; + const [sortedProducts, setSortedProducts] = useState([]); + + useEffect(() => { + const sortProductsByReviewCount = async () => { + if (!products || products.length === 0) return; + + const uniqueCategories = new Set(); + products.forEach((item) => { + if (item.recommendedCategory) + uniqueCategories.add(item.recommendedCategory); + if (item.defaultCategory) uniqueCategories.add(item.defaultCategory); + }); + + const reviewCountMap = new Map(); + + await Promise.all( + [...uniqueCategories].map(async (korName) => { + const enumKey = KOR_TO_ENUM_MAP[korName]; + if (!enumKey) return; + + try { + const res = await getConsumptionDetail(enumKey); + reviewCountMap.set(korName, res?.reviewCount || 0); + } catch { + reviewCountMap.set(korName, 0); + } + }) + ); + + const sorted = [...products].sort((a, b) => { + const aCount = + reviewCountMap.get(a.recommendedCategory) || + reviewCountMap.get(a.defaultCategory) || + 0; + const bCount = + reviewCountMap.get(b.recommendedCategory) || + reviewCountMap.get(b.defaultCategory) || + 0; + return bCount - aCount; + }); + + setSortedProducts(sorted); + }; + + sortProductsByReviewCount(); + }, [products]); + + const safeProducts = Array.isArray(sortedProducts) ? sortedProducts : []; return (
@@ -25,11 +75,11 @@ const FinancialProductList = () => {

총 {safeProducts.length}개

- {isLoading && } + {(isLoading || safeProducts.length === 0) && } {error &&

데이터를 불러오지 못했습니다.

}
- {safeProducts.map((item, _) => ( + {safeProducts.map((item) => ( Date: Fri, 9 May 2025 16:58:40 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Design:=20=EC=A0=95=EB=A0=AC=20=EC=88=9C?= =?UTF-8?q?=EC=84=9C=20=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/support/FinancialProductListPage.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index eaaf234..1ca2a53 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -71,8 +71,9 @@ const FinancialProductList = () => { />
-
+

총 {safeProducts.length}개

+

리뷰 건수가 많은 순으로 정렬되어 있습니다.

{(isLoading || safeProducts.length === 0) && } From ba4eb52bbecb29792e600fb20c2e75e976def682 Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Wed, 14 May 2025 18:41:04 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Design:=20=EA=B8=88=EC=9C=B5=EC=83=81?= =?UTF-8?q?=ED=92=88=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20Swiper=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20UI=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/support/components/ConsumerTab.jsx | 58 ++++++++++++++----- .../support/components/RecommendationCard.jsx | 2 +- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/pages/support/components/ConsumerTab.jsx b/src/pages/support/components/ConsumerTab.jsx index 9415b72..b1bfa19 100644 --- a/src/pages/support/components/ConsumerTab.jsx +++ b/src/pages/support/components/ConsumerTab.jsx @@ -8,6 +8,12 @@ import { useFinancialProducts } from "../hooks/useFinancialProducts"; import { companyTypeNameMap } from "@constants/categoryMap"; import { ENUM_TO_KOR_MAP } from "../constants/consumerMap"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { Autoplay, Pagination } from "swiper/modules"; +import "swiper/css"; +import "swiper/css/pagination"; +import "@/styles/swiper.css"; + const ConsumerTab = () => { const [topCategory, setTopCategory] = useState(null); const navigate = useNavigate(); @@ -63,23 +69,43 @@ const ConsumerTab = () => {
-
- {filteredProducts.map((item, _) => ( -
- -
+ + {filteredProducts.map((item) => ( + +
+ +
+ ))} -
+ + +
); diff --git a/src/pages/support/components/RecommendationCard.jsx b/src/pages/support/components/RecommendationCard.jsx index e496eb9..203221d 100644 --- a/src/pages/support/components/RecommendationCard.jsx +++ b/src/pages/support/components/RecommendationCard.jsx @@ -33,7 +33,7 @@ const RecommendationCard = ({
{productType && recommendedCategory && defaultCategory && ( <> - + {productType} From 8dd74c16800f9050c6ccebf61d404a03a4271689 Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Wed, 14 May 2025 19:27:29 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Feat:=20=EA=B8=88=EC=9C=B5=20=EC=83=81?= =?UTF-8?q?=ED=92=88=20=EC=95=8C=EB=A6=BC=20=EB=AC=B8=EA=B5=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../support/consumer/Ic_SupportMessage.svg | 9 +++++++ .../support/FinancialProductListPage.jsx | 22 +++++++++++++-- src/pages/support/components/ConsumerTab.jsx | 27 ++++++++++++++++--- .../support/components/RecommendationCard.jsx | 10 +++---- src/pages/support/constants/consumerMap.js | 9 +++++++ tailwind.config.js | 3 +++ 6 files changed, 70 insertions(+), 10 deletions(-) create mode 100644 public/svgs/support/consumer/Ic_SupportMessage.svg diff --git a/public/svgs/support/consumer/Ic_SupportMessage.svg b/public/svgs/support/consumer/Ic_SupportMessage.svg new file mode 100644 index 0000000..e2bc0a4 --- /dev/null +++ b/public/svgs/support/consumer/Ic_SupportMessage.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index 1ca2a53..b4e52c0 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -1,14 +1,29 @@ import { useEffect, useState } from "react"; import RecommendationCard from "@/pages/support/components/RecommendationCard"; import { useNavigate } from "react-router-dom"; -import { useFinancialProducts } from "@/pages/support/hooks/useFinancialProducts"; import Spinner from "@components/common/Spinner"; +import { useFinancialProducts } from "@/pages/support/hooks/useFinancialProducts"; import { getConsumptionDetail } from "@apis/consumer/getConsumptionDetail"; +import { getMyProfile } from "@apis/member/auth"; import { KOR_TO_ENUM_MAP } from "@pages/support/constants/consumerMap"; const FinancialProductList = () => { const navigate = useNavigate(); const { data: products, isLoading, error } = useFinancialProducts(); + const [userName, setUserName] = useState(""); + + useEffect(() => { + const fetchProfile = async () => { + try { + const res = await getMyProfile(); + setUserName(res?.name || "사용자"); + } catch (e) { + console.error("프로필 로딩 실패:", e); + } + }; + + fetchProfile(); + }, []); const [sortedProducts, setSortedProducts] = useState([]); @@ -73,7 +88,10 @@ const FinancialProductList = () => {

총 {safeProducts.length}개

-

리뷰 건수가 많은 순으로 정렬되어 있습니다.

+

+ {userName}님이 리뷰를 남긴 기업 특성과 연관된 금융상품 순으로 + 보여드려요! +

{(isLoading || safeProducts.length === 0) && } diff --git a/src/pages/support/components/ConsumerTab.jsx b/src/pages/support/components/ConsumerTab.jsx index b1bfa19..f633d3d 100644 --- a/src/pages/support/components/ConsumerTab.jsx +++ b/src/pages/support/components/ConsumerTab.jsx @@ -6,7 +6,10 @@ import Spinner from "@components/common/Spinner"; import { useConsumptionData } from "../hooks/useConsumptionData"; import { useFinancialProducts } from "../hooks/useFinancialProducts"; import { companyTypeNameMap } from "@constants/categoryMap"; -import { ENUM_TO_KOR_MAP } from "../constants/consumerMap"; +import { + ENUM_TO_KOR_MAP, + RECOMMEND_MESSAGE_MAP, +} from "../constants/consumerMap"; import { Swiper, SwiperSlide } from "swiper/react"; import { Autoplay, Pagination } from "swiper/modules"; @@ -45,7 +48,7 @@ const ConsumerTab = () => { })) || []; return ( -
+

{consumptionData?.name || "모락 사용자"}님의 소비 가치 @@ -59,7 +62,7 @@ const ConsumerTab = () => {
-

소비 가치에 맞는 금융상품

+

추천

navigate("/consumer/list")} @@ -68,6 +71,24 @@ const ConsumerTab = () => { 전체 보기
+ {topCategory && ( +
+ 추천 금융상품 안내 아이콘 +

+ {RECOMMEND_MESSAGE_MAP[ENUM_TO_KOR_MAP[topCategory]]} +

+
+ )} {productType && recommendedCategory && defaultCategory && ( <> - + {productType} - + {recommendedCategory} - + {defaultCategory} diff --git a/src/pages/support/constants/consumerMap.js b/src/pages/support/constants/consumerMap.js index f4348c7..1769d88 100644 --- a/src/pages/support/constants/consumerMap.js +++ b/src/pages/support/constants/consumerMap.js @@ -15,6 +15,15 @@ export const SPEECH_BUBBLE_MAP = { 예비형: "예비 사회적 기업에\n 선한 영향을 준\n 당신의 소비, 함께 기억할게요.", }; +export const RECOMMEND_MESSAGE_MAP = { + 일자리제공형: "고용을 살린 소비, 이 금융상품과 잘 맞아요", + 지역사회공헌형: "지역을 밝힌 소비, 이 금융상품이 닮았어요", + 사회서비스제공형: "돌봄을 실천한 소비, 이 금융과 함께 이어가보세요", + 혼합형: "다방면의 가치소비, 금융에서도 이어집니다", + "기타(창의ㆍ혁신)형": "특별한 소비, 특별한 금융 제안이에요", + 예비형: "예비 사회적기업까지 알아본 소비, 아래 금융상품을 추천해요", +}; + export const KOR_TO_ENUM_MAP = { 일자리제공형: "JOB_PROVISION", 사회서비스제공형: "SOCIAL_SERVICE", diff --git a/tailwind.config.js b/tailwind.config.js index 1c5152a..24236fb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,6 +11,9 @@ export default { pre: "rgba(152, 44, 128, 1)", error: "rgba(232, 58, 58, 1)", errorContainer: "rgba(255, 232, 232, 1)", + supportMessage: + "linear-gradient(90deg, rgba(255, 111, 49, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), #FFF", + gray: { 0: "rgba(255, 255, 255, 1)", 1: "rgba(253, 253, 253, 1)", From d0f8f27248e54c590176d24a9d05be8a917d3a01 Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Wed, 14 May 2025 19:36:22 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Design:=20font=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/support/FinancialProductListPage.jsx | 12 +++++++----- src/pages/support/components/ConsumerTab.jsx | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index b4e52c0..5a89692 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -77,7 +77,7 @@ const FinancialProductList = () => { return (
-

소비한 가치에 맞는 금융상품

+

소비한 가치에 맞는 금융상품

{
-

총 {safeProducts.length}개

-

- {userName}님이 리뷰를 남긴 기업 특성과 연관된 금융상품 순으로 - 보여드려요! +

+ 총 {safeProducts.length}개 +

+

+ {userName}님이 리뷰를 남긴 기업 특성과 +
연관된 금융상품 순으로 보여드려요!

diff --git a/src/pages/support/components/ConsumerTab.jsx b/src/pages/support/components/ConsumerTab.jsx index f633d3d..8e6957c 100644 --- a/src/pages/support/components/ConsumerTab.jsx +++ b/src/pages/support/components/ConsumerTab.jsx @@ -67,7 +67,7 @@ const ConsumerTab = () => { className="flex items-center gap-1 cursor-pointer" onClick={() => navigate("/consumer/list")} > -

전체 보기

+

전체 보기

전체 보기
From 56770e0cdf259f9b2aea6c05ede1571b348edb9c Mon Sep 17 00:00:00 2001 From: syddl0 <137189866+shroqkf@users.noreply.github.com> Date: Wed, 14 May 2025 19:58:36 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Chore:=20font=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/join/components/GoHome.jsx | 4 +- src/pages/join/components/LocationStep.jsx | 16 ++++---- src/pages/join/components/NameStep.jsx | 8 ++-- src/pages/join/components/OwnerStep.jsx | 2 +- .../join/components/ProfileImageStep.jsx | 2 +- src/pages/kakaoAuth/kakaoAuth.jsx | 2 +- src/pages/map/MapPage.jsx | 2 +- src/pages/map/components/CategoryBar.jsx | 2 +- src/pages/map/components/IntroModal.jsx | 6 +-- src/pages/map/components/PlaceContent.jsx | 18 ++++----- src/pages/search/SearchPage.jsx | 2 +- src/pages/search/components/PlaceCard.jsx | 6 +-- .../search/components/SearchPlaceList.jsx | 2 +- .../components/carousel/StoryCarousel.jsx | 4 +- .../support/FinancialProductDetailPage.jsx | 40 +++++++++---------- .../support/FinancialProductListPage.jsx | 6 +-- src/pages/support/components/ConsumerTab.jsx | 8 ++-- .../support/components/ConsumptionChart.jsx | 10 ++--- .../support/components/RecommendationCard.jsx | 12 +++--- 19 files changed, 74 insertions(+), 78 deletions(-) diff --git a/src/pages/join/components/GoHome.jsx b/src/pages/join/components/GoHome.jsx index 135a733..6e5d7e1 100644 --- a/src/pages/join/components/GoHome.jsx +++ b/src/pages/join/components/GoHome.jsx @@ -21,7 +21,7 @@ const GoHome = ({ onNext, onBack }) => {
-

+

가치있는 동네여행,
시작해볼까요? @@ -30,7 +30,7 @@ const GoHome = ({ onNext, onBack }) => { diff --git a/src/pages/join/components/LocationStep.jsx b/src/pages/join/components/LocationStep.jsx index 102a8a7..b467ea8 100644 --- a/src/pages/join/components/LocationStep.jsx +++ b/src/pages/join/components/LocationStep.jsx @@ -44,14 +44,14 @@ const LocationStep = ({ onNext, onBack }) => { 뒤로가기 버튼 -

어느 동네에 사세요?

-

+

어느 동네에 사세요?

+

가까운 사회적 기업을 추천해드릴게요.

@@ -62,7 +62,7 @@ const LocationStep = ({ onNext, onBack }) => { } py-2`} > {!checked && ( - + 서울특별시  )} @@ -75,7 +75,7 @@ const LocationStep = ({ onNext, onBack }) => { value={location} onChange={handleChange} readOnly={checked} - className={`flex-1 bg-transparent text-h2 font-semibold focus:outline-none placeholder-gray-6 ${ + className={`flex-1 bg-transparent h2 focus:outline-none placeholder-gray-6 ${ checked ? "bg-gray-6 cursor-not-allowed" : "" }`} /> @@ -92,7 +92,7 @@ const LocationStep = ({ onNext, onBack }) => {
{(showWarningForSeoul || showNotSeoulMessage) && ( -

+

현재는 서울에 한해 사회적 기업들을 소개하고 있습니다.

)} @@ -106,7 +106,7 @@ const LocationStep = ({ onNext, onBack }) => { ) : ( )} - + 현재 서울에 살고 있지 않습니다. @@ -122,7 +122,7 @@ const LocationStep = ({ onNext, onBack }) => {
-

이름을 입력해주세요.

-

투명한 리뷰에 사용됩니다.

+

이름을 입력해주세요.

+

투명한 리뷰에 사용됩니다.

@@ -78,7 +78,7 @@ const NameStep = ({ onNext, onBack }) => { -

+

사회적기업의 사장님이신가요?

diff --git a/src/pages/join/components/ProfileImageStep.jsx b/src/pages/join/components/ProfileImageStep.jsx index 92ad3d4..9a724d1 100644 --- a/src/pages/join/components/ProfileImageStep.jsx +++ b/src/pages/join/components/ProfileImageStep.jsx @@ -33,7 +33,7 @@ const ProfileImageStep = ({ onNext, onBack }) => { 뒤로가기 -

+

프로필사진을 설정해주세요.

diff --git a/src/pages/kakaoAuth/kakaoAuth.jsx b/src/pages/kakaoAuth/kakaoAuth.jsx index 6f073eb..70a0d4e 100644 --- a/src/pages/kakaoAuth/kakaoAuth.jsx +++ b/src/pages/kakaoAuth/kakaoAuth.jsx @@ -67,7 +67,7 @@ const KakaoAuth = () => { ) : ( -
카카오 로그인 처리 중입니다...
+
카카오 로그인 처리 중입니다...
)}
); diff --git a/src/pages/map/MapPage.jsx b/src/pages/map/MapPage.jsx index 465e50e..145be80 100644 --- a/src/pages/map/MapPage.jsx +++ b/src/pages/map/MapPage.jsx @@ -170,7 +170,7 @@ const MapPage = () => { onClick={handleSearchClick} className="absolute top-20 sm:top-24 left-1/2 -translate-x-1/2 z-50 w-[90%] max-w-[33.5rem] h-14 sm:h-16 px-4 sm:px-6 flex items-center justify-between bg-white rounded-2xl shadow cursor-pointer" > - 내 주변 가치가게 찾기 + 내 주변 가치가게 찾기 검색 아이콘 { const engValue = reverseBusinessNameMap[cate.name]; onSelect(engValue); }} - className="flex shrink-0 gap-2 items-center pl-3 pr-5 py-1.5 sm:pl-4 sm:pr-6 rounded-full text-b5 sm:text-b3 font-medium text-gray-12 whitespace-nowrap bg-white shadow cursor-pointer" + className="flex shrink-0 gap-2 items-center pl-3 pr-5 py-1.5 sm:pl-4 sm:pr-6 rounded-full b5 sm:b3 text-gray-12 whitespace-nowrap bg-white shadow cursor-pointer" > {
-

+

우리 동네 사회적기업 찾아보기

-

+

사회적기업은, 판매 수익을 사회문제 해결이나 {"\n"}이웃 돕기에 쓰는 특별한 기업들이에요. {"\n"}우리 동네 사회적기업을 찾아보고, 함께 참여해보세요! diff --git a/src/pages/map/components/PlaceContent.jsx b/src/pages/map/components/PlaceContent.jsx index fbf057e..8fd00ea 100644 --- a/src/pages/map/components/PlaceContent.jsx +++ b/src/pages/map/components/PlaceContent.jsx @@ -70,21 +70,21 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {

-

-
+

+
{companyName} - + {businessTypeNameMap[companyCategory] ?? companyCategory}

-

+

{temperature}도 - + 방문자 리뷰 {reviewCount}

@@ -93,7 +93,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => { {business && (
-
+

{business}

{companyType && ( @@ -103,7 +103,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => { alt={companyType} className="w-5 h-5" /> - + {companyTypeNameMap[companyType]}
@@ -145,7 +145,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
{companyLocation && ( -
+
기업 주소 {
)} {companyTelNum && ( -
+
기업 전화번호 { )} {step === 1 && ( -
+
검색기록 없음 { className="w-6 h-6 mt-1" />
-

+

{place.name}

-

{place.address}

+

{place.address}

@@ -43,7 +43,7 @@ const PlaceCard = ({ place, onClick }) => { /> )}
- {place.formattedDistance} + {place.formattedDistance}
); diff --git a/src/pages/search/components/SearchPlaceList.jsx b/src/pages/search/components/SearchPlaceList.jsx index 6b3a9d5..881058e 100644 --- a/src/pages/search/components/SearchPlaceList.jsx +++ b/src/pages/search/components/SearchPlaceList.jsx @@ -3,7 +3,7 @@ import PlaceCard from "./PlaceCard"; const PlaceList = ({ places, onSelect, showEmptyMessage }) => { if (!places.length) { return showEmptyMessage ? ( -
+
최근 검색 결과 없음 { alt="fire" className="w-4 h-4" /> - + {story.storyLikes || 0}
-

+

{story.storyTitle}

diff --git a/src/pages/support/FinancialProductDetailPage.jsx b/src/pages/support/FinancialProductDetailPage.jsx index 8897655..7757887 100644 --- a/src/pages/support/FinancialProductDetailPage.jsx +++ b/src/pages/support/FinancialProductDetailPage.jsx @@ -23,7 +23,7 @@ const FinancialProductDetailPage = () => { if (error) { return (
-

데이터를 불러오지 못했습니다.

+

데이터를 불러오지 못했습니다.

); } @@ -31,7 +31,7 @@ const FinancialProductDetailPage = () => { if (!data) { return (
-

+

해당 상품 정보를 찾을 수 없습니다.

@@ -64,56 +64,52 @@ const FinancialProductDetailPage = () => { data.recommendedCategory && data.defaultCategory && ( <> - + {data.productType} - + {data.recommendedCategory} - + {data.defaultCategory} )}
-

{data.productName}

-

{data.bankName}

+

{data.productName}

+

{data.bankName}

-

- 기본 정보 -

+

기본 정보

-

가입 기간

-

- {data.period || "-"} -

+

가입 기간

+

{data.period || "-"}

-

방식

-

+

방식

+

{data.method || "-"}

-

기본 금리

-

+

기본 금리

+

{data.benefit || "-"}

-

+

금융상품 소개

-

+

{data.productDescription || "상품 설명이 없습니다."}

-
+

• 본 서비스에서 제공하는 상품 정보는 각 기관의 공고를 바탕으로 수집·정리한 참고용 자료입니다. @@ -135,7 +131,7 @@ const FinancialProductDetailPage = () => { className="w-6 h-6" alt="바로가기" /> -

+

바로가기

diff --git a/src/pages/support/FinancialProductListPage.jsx b/src/pages/support/FinancialProductListPage.jsx index 5a89692..74f988f 100644 --- a/src/pages/support/FinancialProductListPage.jsx +++ b/src/pages/support/FinancialProductListPage.jsx @@ -77,7 +77,7 @@ const FinancialProductList = () => { return (
-

소비한 가치에 맞는 금융상품

+

소비한 가치에 맞는 금융상품

{
-

+

총 {safeProducts.length}개

-

+

{userName}님이 리뷰를 남긴 기업 특성과
연관된 금융상품 순으로 보여드려요!

diff --git a/src/pages/support/components/ConsumerTab.jsx b/src/pages/support/components/ConsumerTab.jsx index 8e6957c..fd57efa 100644 --- a/src/pages/support/components/ConsumerTab.jsx +++ b/src/pages/support/components/ConsumerTab.jsx @@ -50,7 +50,7 @@ const ConsumerTab = () => { return (
-

+

{consumptionData?.name || "모락 사용자"}님의 소비 가치

{
-

추천

+

추천

navigate("/consumer/list")} > -

전체 보기

+

전체 보기

전체 보기
@@ -84,7 +84,7 @@ const ConsumerTab = () => { alt="추천 금융상품 안내 아이콘" className="w-4 h-4" /> -

+

{RECOMMEND_MESSAGE_MAP[ENUM_TO_KOR_MAP[topCategory]]}

diff --git a/src/pages/support/components/ConsumptionChart.jsx b/src/pages/support/components/ConsumptionChart.jsx index c1ea9d5..2a74171 100644 --- a/src/pages/support/components/ConsumptionChart.jsx +++ b/src/pages/support/components/ConsumptionChart.jsx @@ -110,16 +110,16 @@ const ConsumptionChart = ({ data, reviewCount, onTopCategory }) => {
-

- +

+ 총 {reviewCount} - + 건

-

기반

+

기반

@@ -135,7 +135,7 @@ const ConsumptionChart = ({ data, reviewCount, onTopCategory }) => {

-
+
{topTwo.map((item, index) => (
{productType && recommendedCategory && defaultCategory && ( <> - + {productType} - + {recommendedCategory} - + {defaultCategory} @@ -47,12 +47,12 @@ const RecommendationCard = ({
-

{title}

-

{bank}

+

{title}

+

{bank}

{showDescription && ( -

+

{description}

)}