Skip to content

[Feat] 소비자 소비 유형 기반 맞춤 금융상품 추천 필터링 로직 구현 #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dbstj0403 merged 10 commits into from
May 14, 2025
Merged

[Feat] 소비자 소비 유형 기반 맞춤 금융상품 추천 필터링 로직 구현 #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d6e87d3
Design: 로그인 알림 모달 아이콘 변경
shroqkf May 9, 2025
5efa73e
Rename: 내용 수정
shroqkf May 9, 2025
6cf2ca4
Feat: 금융상품 추천 기능 구현
shroqkf May 9, 2025
b28c6b7
Feat: 리뷰 많은 순으로 전체 금융 상품 리스트 정렬
shroqkf May 9, 2025
ae33c8e
Design: 정렬 순서 설명 추가
shroqkf May 9, 2025
ba4eb52
Design: 금융상품 리스트 Swiper 추가 및 UI 변경
shroqkf May 14, 2025
8dd74c1
Feat: 금융 상품 알림 문구 추가
shroqkf May 14, 2025
d0f8f27
Design: font 수정
shroqkf May 14, 2025
56770e0
Chore: font 통일
shroqkf May 14, 2025
bf23be4
Fix: merge 병합 충돌 해결
shroqkf May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions public/svgs/support/consumer/Ic_Alert.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/svgs/support/consumer/Ic_SupportMessage.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/pages/join/components/GoHome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const GoHome = ({ onNext, onBack }) => {
</button>

<div className="pt-24 px-1">
<h1 className="text-h1 text-gray-12">
<h1 className="h1 text-gray-12">
가치있는 동네여행,
<br />
시작해볼까요?
Expand All @@ -30,7 +30,7 @@ const GoHome = ({ onNext, onBack }) => {

<button
onClick={handleSubmit}
className="w-full h-12 rounded-xl bg-white text-primary-8 text-b1 shadow-sm"
className="w-full h-12 rounded-xl bg-white text-primary-8 b1 shadow-sm"
>
좋아요
</button>
Expand Down
16 changes: 8 additions & 8 deletions src/pages/join/components/LocationStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@ const LocationStep = ({ onNext, onBack }) => {
</button>
</div>

<h1 className="text-h1 font-semibold mb-2">어느 동네에 사세요?</h1>
<p className="text-b5 text-gray-500 mb-8">
<h1 className="h1 mb-2">어느 동네에 사세요?</h1>
<p className="b5 text-gray-500 mb-8">
가까운 사회적 기업을 추천해드릴게요.
</p>

<label
htmlFor="location"
className="text-b5 font-medium text-gray-8 mb-1"
className="b5 text-gray-8 mb-1"
>
주소
</label>
Expand All @@ -61,7 +61,7 @@ const LocationStep = ({ onNext, onBack }) => {
} py-2`}
>
{!checked && (
<span className="text-h2 font-semibold text-gray-12 whitespace-nowrap">
<span className="h2 text-gray-12 whitespace-nowrap">
서울특별시&nbsp;
</span>
)}
Expand All @@ -74,7 +74,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" : ""
}`}
/>
Expand All @@ -91,7 +91,7 @@ const LocationStep = ({ onNext, onBack }) => {
</div>

{(showWarningForSeoul || showNotSeoulMessage) && (
<p className="text-b5 text-primary-8 mt-2">
<p className="b5 text-primary-8 mt-2">
현재는 서울에 한해 사회적 기업들을 소개하고 있습니다.
</p>
)}
Expand All @@ -105,7 +105,7 @@ const LocationStep = ({ onNext, onBack }) => {
) : (
<IcNonCheck className="w-5 h-5 mr-2 text-gray-6" />
)}
<span className={`text-b5 ${checked ? "text-gray-12" : "text-gray-6"}`}>
<span className={`b5 ${checked ? "text-gray-12" : "text-gray-6"}`}>
현재 서울에 살고 있지 않습니다.
</span>
</button>
Expand All @@ -121,7 +121,7 @@ const LocationStep = ({ onNext, onBack }) => {
<button
disabled={!isActive}
onClick={() => isActive && onNext(fullLocation)}
className={`w-full h-12 mt-10 text-b1 font-semibold transition-colors ${
className={`w-full h-12 mt-10 b1 font-semibold transition-colors ${
isActive ? "bg-primary-8 text-white" : "bg-gray-4 text-white"
}`}
>
Expand Down
26 changes: 14 additions & 12 deletions src/pages/join/components/NameStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,23 @@ const NameStep = ({ onNext, onBack }) => {
onSubmit={handleSubmit}
className="flex flex-col justify-start mt-48 bg-white h-screen overflow-auto relative"
>
<div className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 sm:px-6 z-50">
<button onClick={onBack} aria-label="뒤로가기" className="w-8 h-8">
<img src={BackIcon} alt="뒤로가기 버튼" className="w-8 h-8" />
</button>
</div>
<button
onClick={onBack}
className="absolute top-6 left-4 sm:top-8 sm:left-6 z-10"
aria-label="뒤로가기"
>
<img src={BackIcon} alt="뒤로가기 버튼" className="w-6 h-6" />
</button>

<section className="px-8">
<h1 className="text-h1 font-semibold text-gray-12">
이름을 입력해주세요.
</h1>
<p className="text-b5 text-gray-9 mt-2">투명한 리뷰에 사용됩니다.</p>
<h1 className="h1 text-gray-12">이름을 입력해주세요.</h1>
<p className="b5 text-gray-9 mt-2">투명한 리뷰에 사용됩니다.</p>

<div className="mt-8">
<label
id="name-label"
htmlFor="name"
className="block text-b5 text-gray-8 mb-1.5"
className="block b5 text-gray-8 mb-1.5"
>
이름
</label>
Expand Down Expand Up @@ -78,8 +78,10 @@ const NameStep = ({ onNext, onBack }) => {
<button
type="submit"
disabled={!name.trim()}
className={`w-full py-6 text-center text-b1 font-semibold ${
name.trim() ? "bg-primary-8 text-white" : "bg-gray-4 text-white"
className={`w-full py-6 text-center b1 ${
name.trim()
? "bg-primary-8 text-white"
: "bg-gray-4 text-white"
}`}
>
확인
Expand Down
2 changes: 1 addition & 1 deletion src/pages/join/components/OwnerStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const OwnerStep = ({ onNext, onBack }) => {
</button>
</div>

<h1 className="text-h1 font-semibold mb-10">
<h1 className="h1 mb-10">
사회적기업의 사장님이신가요?
</h1>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/join/components/ProfileImageStep.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ProfileImageStep = ({ onNext, onBack }) => {
</button>
</div>

<h1 className="pt-24 sm:pt-32 text-h1 text-gray-12 sm:text-4xl font-semibold text-center">
<h1 className="pt-24 sm:pt-32 h1 text-gray-12 sm:text-4xl text-center">
프로필사진을 설정해주세요.
</h1>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/kakaoAuth/kakaoAuth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const KakaoAuth = () => {
</button>
</>
) : (
<div className="text-h3">카카오 로그인 처리 중입니다...</div>
<div className="h3">카카오 로그인 처리 중입니다...</div>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/map/MapPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,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"
>
<span className="text-gray-6 text-b2">내 주변 가치가게 찾기</span>
<span className="text-gray-6 b2">내 주변 가치가게 찾기</span>
<img
src="/svgs/map/Ic_Search.svg"
alt="검색 아이콘"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/map/components/CategoryBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const CategoryBar = ({ onSelect }) => {
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"
>
<img
src={cate.icon}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/map/components/IntroModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const IntroModal = ({ onClose }) => {
<div className="absolute bottom-28 left-1/2 -translate-x-1/2 z-[10001] w-[90%] max-w-[22rem] sm:max-w-[25rem] px-6 py-10 bg-white rounded-2xl shadow-lg flex flex-col gap-6">
<button
onClick={onClose}
className="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100 transition"
className="absolute top-3 right-4 p-2 rounded-full hover:bg-gray-100 transition"
aria-label="닫기"
>
<img
Expand All @@ -13,11 +13,11 @@ const IntroModal = ({ onClose }) => {
/>
</button>

<p className="text-h3 sm:text-h2 font-semibold text-gray-12 text-center">
<p className="h3 mt-2 sm:text-h2 text-gray-12 text-center">
우리 동네 <span className="text-primary-8">사회적기업</span> 찾아보기
</p>

<p className="text-b5 sm:text-b3 text-gray-11 text-center whitespace-pre-line">
<p className="b5 sm:text-b3 text-gray-11 text-center whitespace-pre-line">
사회적기업은, 판매 수익을 사회문제 해결이나
{"\n"}이웃 돕기에 쓰는 특별한 기업들이에요.
{"\n"}우리 동네 사회적기업을 찾아보고, 함께 참여해보세요!
Expand Down
18 changes: 9 additions & 9 deletions src/pages/map/components/PlaceContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,21 +115,21 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
<div className="flex flex-col gap-3 ">
<div className="flex justify-between items-start px-5 sm:px-6">
<div>
<h3 className="text-h3 font-bold break-words text-gray-12">
<div className="max-w-full text-h3 font-bold text-gray-12 break-keep whitespace-normal mt-6">
<h3 className="h3 break-words text-gray-12">
<div className="max-w-full h3 text-gray-12 break-keep whitespace-normal mt-6">
{companyName}
<span className="ml-2 text-b5 text-gray-6 font-medium">
<span className="ml-2 b5 text-gray-6">
{businessTypeNameMap[companyCategory] ?? companyCategory}
</span>
</div>
</h3>
Comment on lines +118 to 125
Copy link

@coderabbitai coderabbitai bot May 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

HTML 구조에 중복되는 h3 및 div 태그가 있습니다.

h3 태그 안에 동일한 h3 클래스를 가진 div를 중첩시킨 것은 HTML 구조상 문제가 될 수 있습니다. 이러한 중첩은 스타일 충돌이나 예기치 않은 렌더링 결과를 초래할 수 있습니다.

아래와 같이 구조를 수정하는 것이 좋습니다:

-          <h3 className="h3 break-words text-gray-12">
-            <div className="max-w-full h3 text-gray-12 break-keep whitespace-normal mt-6">
+          <h3 className="max-w-full h3 text-gray-12 break-keep whitespace-normal mt-6">
               {companyName}
               <span className="ml-2 b5 text-gray-6">
                 {businessTypeNameMap[companyCategory] ?? companyCategory}
               </span>
-            </div>
           </h3>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h3 className="h3 break-words text-gray-12">
<div className="max-w-full h3 text-gray-12 break-keep whitespace-normal mt-6">
{companyName}
<span className="ml-2 text-b5 text-gray-6 font-medium">
<span className="ml-2 b5 text-gray-6">
{businessTypeNameMap[companyCategory] ?? companyCategory}
</span>
</div>
</h3>
<h3 className="max-w-full h3 text-gray-12 break-keep whitespace-normal mt-6">
{companyName}
<span className="ml-2 b5 text-gray-6">
{businessTypeNameMap[companyCategory] ?? companyCategory}
</span>
</h3>


<p className="text-b4 flex items-center gap-2 mt-1">
<p className="b4 flex items-center gap-2 mt-1">
<span className="flex items-center text-primary-8 font-bold">
<FireIcon className="w-4 h-4 mr-1" />
{temperature}도
</span>
<span className="text-gray-12 text-b6">
<span className="text-gray-12 b6">
방문자 리뷰 {reviewCount}
</span>
</p>
Expand All @@ -138,7 +138,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {

{business && (
<section className="px-5 sm:px-6">
<div className="bg-secondaryBackground w-full px-4 py-3 rounded-lg text-b5 font-medium whitespace-pre-line text-secondaryText">
<div className="bg-secondaryBackground w-full px-4 py-3 rounded-lg b5 whitespace-pre-line text-secondaryText">
<p className="break-keep whitespace-pre-line">{business}</p>

{companyType && (
Expand All @@ -148,7 +148,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
alt={companyType}
className="w-5 h-5"
/>
<span className="text-caption2 text-secondaryText font-medium">
<span className="caption2 text-secondaryText">
{companyTypeNameMap[companyType]}
</span>
</div>
Expand Down Expand Up @@ -205,7 +205,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
</a>
)}
{companyLocation && (
<div className="flex items-center gap-2 text-b5 text-gray-11 break-keep">
<div className="flex items-center gap-2 b5 text-gray-11 break-keep">
<img
src="/svgs/map/Ic_Location.svg"
alt="기업 주소"
Expand All @@ -225,7 +225,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
</div>
)}
{companyTelNum && (
<div className="flex items-center gap-2 text-b5 text-gray-11">
<div className="flex items-center gap-2 b5 text-gray-11">
<img
src="/svgs/map/Ic_Location.svg"
alt="기업 전화번호"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/search/SearchPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ const SearchPage = () => {
)}

{step === 1 && (
<div className="flex flex-col items-center justify-center text-center h-full my-44 text-h4 text-gray-9">
<div className="flex flex-col items-center justify-center text-center h-full my-44 h4 text-gray-9">
<img
src="/svgs/map/Ic_Illustration_Search.svg"
alt="검색기록 없음"
Expand Down
6 changes: 3 additions & 3 deletions src/pages/search/components/PlaceCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ const PlaceCard = ({ place, onClick }) => {
className="w-6 h-6 mt-1"
/>
<div className="flex flex-col">
<h3 className="text-b2 font-semibold text-gray-12">
<h3 className="b2 text-gray-12">
{place.name}
</h3>
<p className="text-b6 text-gray-9 mt-1">{place.address}</p>
<p className="b6 text-gray-9 mt-1">{place.address}</p>
</div>
</div>

Expand All @@ -43,7 +43,7 @@ const PlaceCard = ({ place, onClick }) => {
/>
)}
</div>
<span className="text-b6 text-gray-11">{place.formattedDistance}</span>
<span className="b6 text-gray-11">{place.formattedDistance}</span>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/search/components/SearchPlaceList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PlaceCard from "./PlaceCard";
const PlaceList = ({ places, onSelect, showEmptyMessage }) => {
if (!places.length) {
return showEmptyMessage ? (
<div className="flex flex-col items-center justify-center mt-32 text-center text-h4 font-semibold text-gray-9">
<div className="flex flex-col items-center justify-center mt-32 text-center h4 text-gray-9">
<img
src="/svgs/map/Ic_Illustration_Search.svg"
alt="최근 검색 결과 없음"
Expand Down
4 changes: 2 additions & 2 deletions src/pages/story/components/carousel/StoryCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ const StoryCarousel = () => {
alt="fire"
className="w-4 h-4"
/>
<span className="text-caption2 text-primary-8 font-semibold">
<span className="caption2 text-primary-8">
{story.storyLikes || 0}
</span>
</div>

<h2 className="text-white font-semibold text-h4 break-keep">
<h2 className="text-white h4 break-keep">
{story.storyTitle}
</h2>
</div>
Expand Down
Loading