/gi, "").replace(/<[^>]+>/g, "");
- return cleaned
- .split(/\?|·|•|;|，|、/g)
- .map((t) => t.trim().replace(/^[-•·]\s*/, "")) // ← bullet 문자 제거 핵심
- .filter(Boolean);
-}
+import "../../../../src/styles/infopage.css"
export default function InfoCompPage() {
const { t } = useLocalization();
diff --git a/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.css b/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.css
index 21e15cb..a384dae 100644
--- a/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.css
+++ b/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.css
@@ -22,30 +22,7 @@
color: #2f3747;
}
-/* 대제목 */
-.section-title {
- position: relative;
- display: block;
- width: fit-content;
- z-index: 1;
- margin: 25px 0 0;
- font-size: 20px;
- font-weight: 600;
- line-height: 1.3;
- color: #2f3747;
-}
-/* 대제목 */
-.section-title.hl::after {
- content: "";
- position: absolute;
- left: -6px;
- right: -27px;
- top: 55%;
- height: 12px;
- background: #e0eeff;
- border-radius: 4px;
- z-index: -1;
-}
+
/* 소제목 (1-1, 1-2, 1-3, 제외사유) */
.sub-title {
diff --git a/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.tsx b/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.tsx
index 95fe3cd..40227ac 100644
--- a/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.tsx
+++ b/src/pages/InfoPage/InfoDictionPage/InfoDictionPage.tsx
@@ -2,8 +2,9 @@ import Header from "../../../components/Header/Header";
import BottomBar from "../../../components/BottomBar/BottomBar";
import { useLocalization } from "../../../contexts/LocalizationContext";
import "./InfoDictionPage.css";
+import "../../../../src/styles/infopage.css"
-// ✅ 내부 유틸: 안의 '•' 라인 자동 분리
+// 내부 유틸:
안의 '•' 라인 자동 분리
function toBullets(text: string): string[] {
return text
.split(//gi)
diff --git a/src/pages/InfoPage/InfoPage.css b/src/pages/InfoPage/InfoPage.css
index 2313ffa..17a8558 100644
--- a/src/pages/InfoPage/InfoPage.css
+++ b/src/pages/InfoPage/InfoPage.css
@@ -14,8 +14,8 @@
.info-content {
flex: 1;
display: flex;
- justify-content: center;
- align-items: center;
+ justify-content: center; /* 세로 가운데 */
+ align-items: center;
padding: 0px 20px 100px;
box-sizing: border-box;
overflow-x: auto;
@@ -28,19 +28,23 @@
display: flex;
flex-direction: column;
align-items: center;
- gap: 15px;
+ gap: 22px;
width: 100%;
max-width: 900px;
}
/* === 카드 === */
.info-card-item {
- position: relative;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #ffffff;
+ border-radius: 28px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
+ padding: 15px 24px;
width: 100%;
max-width: 600px;
min-width: 280px;
- border-radius: 12px;
- overflow: hidden;
cursor: pointer;
transition: transform 0.2s ease;
}
@@ -49,25 +53,12 @@
transform: translateY(-3px);
}
-/* 이미지 */
-.info-card-img {
- width: 100%;
- height: auto;
- display: block;
- object-fit: cover;
- border: none;
- box-shadow: none;
- background: none;
-}
-
-/* 텍스트 */
+/* === 텍스트 === */
.info-card-text {
- position: absolute;
- top: 28px;
- left: 24px;
- right: 24px;
- text-align: left;
- z-index: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ flex: 1;
}
/* 제목 */
@@ -76,7 +67,6 @@
font-weight: 700;
line-height: 1.3;
color: #000;
- margin-right:60px;
margin-bottom: 0px;
}
@@ -87,10 +77,14 @@
font-size: 12px;
line-height: 1.4;
color: #92939f;
- text-align: left;
- white-space: pre-line; /* 줄바꿈 유지 */
- margin-right:50px;
-
+ white-space: pre-line;
+}
+
+
+.info-card-logo img {
+ display: block;
+ width: 58px;
+ height: auto;
}
/* === 반응형 === */
@@ -98,7 +92,6 @@
/* 260px 이상 */
@media (min-width: 260px) {
.info-card-title {
- margin-top: 5px;
font-size: 15px;
}
.info-card-subtitle {
@@ -109,7 +102,6 @@
/* 350px 이상 */
@media (min-width: 350px) {
.info-card-title {
- margin-top: 10px;
font-size: 18px;
}
.info-card-subtitle {
@@ -120,7 +112,6 @@
/* 480px 이상 */
@media (min-width: 480px) {
.info-card-title {
- margin-top: 15px;
font-size: 20px;
}
.info-card-subtitle {
@@ -137,7 +128,6 @@
max-width: 500px;
}
.info-card-title {
- margin-top: 10px;
font-size: 21px;
}
.info-card-subtitle {
@@ -163,7 +153,7 @@
.info-card-group {
flex-direction: row;
- gap: 20px;
+ gap: 2px;
width: max-content;
}
@@ -179,4 +169,4 @@
.info-card-subtitle {
font-size: 10px;
}
-}
\ No newline at end of file
+}
diff --git a/src/pages/InfoPage/InfoPage.tsx b/src/pages/InfoPage/InfoPage.tsx
index 5b5da00..7e40c0a 100644
--- a/src/pages/InfoPage/InfoPage.tsx
+++ b/src/pages/InfoPage/InfoPage.tsx
@@ -12,25 +12,25 @@ export default function InfoPage() {
{
title: t('infoInsurance'),
subtitle: t('infoExplain'),
- img: "/Info/Compensation-box.svg",
+ img: "/Info/Compensation-logo.svg",
path: "/info/compensation",
},
{
title: t('infoStep'),
subtitle: t('infoReward'),
- img: "/Info/Process-box.svg",
+ img: "/Info/Process-logo.svg",
path: "/info/process",
},
{
title: t('infoWage'),
subtitle: t('infoKindOfWage'),
- img: "/Info/Benefit-box.svg",
+ img: "/Info/Benefit-logo.svg",
path: "/info/salary",
},
{
title: t('infoDic'),
subtitle: t('infoDicintro'),
- img: "/Info/Glossary-box.svg",
+ img: "/Info/Glossary-logo.svg",
path: "/info/dictionary",
},
];
@@ -42,17 +42,20 @@ export default function InfoPage() {
{infoCards.map((card, i) => (
-
navigate(card.path)}
- >
-
-
-
{card.title}
-
{card.subtitle}
-
+
navigate(card.path)}
+ >
+
+
{card.title}
+
{card.subtitle}
+
+
+
+
+
))}
diff --git a/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.css b/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.css
index 4b193cb..8df26be 100644
--- a/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.css
+++ b/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.css
@@ -28,27 +28,16 @@
.proc-section { margin-bottom: 30px; }
/* 서브타이틀 */
-.section-title {
- position: relative;
- display: block;
- width: fit-content;
- z-index: 0;
- margin: 0 0 30px 0; /* 섹션 타이틀 → 컨텐츠 30px */
+.section-subtitle {
+ margin-top: 20px;
+ display: inline; /* inline으로 변경 */
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: #2f3747;
-}
-.section-title.hl::after {
- content: "";
- position: absolute;
- left: -6px;
- right: -27px;
- top: 50%;
- height: 12px;
- background: #e0eeff;
+ background: #e0eeff; /* 하이라이트 배경 */
border-radius: 4px;
- z-index: -1;
+ padding: 2px 6px; /* 위아래 여백, 좌우 여백 */
}
/* 본문 */
diff --git a/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.tsx b/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.tsx
index 21e513e..7fdfc8f 100644
--- a/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.tsx
+++ b/src/pages/InfoPage/InfoProcessPage/InfoProcessPage.tsx
@@ -2,6 +2,7 @@ import Header from "../../../components/Header/Header";
import BottomBar from "../../../components/BottomBar/BottomBar";
import { useLocalization } from "../../../contexts/LocalizationContext";
import "./InfoProcessPage.css";
+import "../../../../src/styles/infopage.css"
function stripOrderedPrefix(text: string) {
return text.replace(/^\s*\d+\.\s*/, "");
@@ -42,11 +43,6 @@ export default function InfoProcessPage() {
{t("second_step5")}
{t("second_step6")}
-
{/* 업무상 질병 산재 보험 신청 절차 */}
@@ -79,7 +75,6 @@ export default function InfoProcessPage() {
-
diff --git a/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.css b/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.css
index 8b86508..230c7cc 100644
--- a/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.css
+++ b/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.css
@@ -60,57 +60,55 @@
/* 트리거 박스 */
.acc-trigger {
width: var(--box-w);
- height: var(--box-h);
+ min-height: var(--box-h);
background: var(--box-bg);
border: 0;
border-radius: 3px;
cursor: pointer;
position: relative;
- display: block;
-
- text-align: left;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0 var(--icon-right);
+ box-sizing: border-box;
}
/* 트리거 라벨 */
.acc-trigger__label {
- position: absolute;
- left: var(--label-pad-left);
- top: 50%;
- transform: translateY(-50%);
-
+ flex: 1;
+ text-align: left;
+ white-space: normal;
+ word-break: break-word;
+ overflow-wrap: break-word;
font-size: 16px;
font-weight: 600;
color: #2f3747;
- white-space: nowrap;
}
+/* 화살표 아이콘 */
.acc-trigger__icon {
position: absolute;
right: var(--icon-right);
top: 50%;
- width: 11px;
transform: translateY(-50%);
- pointer-events: none;
+ width: 11px;
+ height: auto;
}
-/* 펼쳐지는 내용 */
+/* 펼쳐지는 패널 */
.acc-panel {
- width: var(--box-w);
- margin-top: var(--box-gap);
+ width: 100%;
+ margin-top: var(--box-gap);
margin-bottom: var(--box-gap);
font-size: var(--content-font);
font-weight: 400;
line-height: 1.6;
color: #3a4152;
- word-break: keep-all;
- padding-left: 5px;
-
- word-break: break-all; /* 단어 중간이라도 줄바꿈 허용 */
- overflow-wrap: anywhere; /* 긴 단어도 줄바꿈 허용 */
+ word-break: break-word;
+ overflow-wrap: break-word;
padding-left: 5px;
}
-
/* details 내부 summary 기본 스타일 보완 */
.acc-panel details {
margin-top: 10px;
diff --git a/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.tsx b/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.tsx
index 49fc33e..c406921 100644
--- a/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.tsx
+++ b/src/pages/InfoPage/InfoSalaryPage/InfoSalaryPage.tsx
@@ -1,9 +1,9 @@
-// 산재 보험 급여 안내
import { useState } from "react";
import Header from "../../../components/Header/Header";
import BottomBar from "../../../components/BottomBar/BottomBar";
import { useLocalization } from "../../../contexts/LocalizationContext";
import "./InfoSalaryPage.css";
+import "../../../../src/styles/infopage.css"
type Item = {
key: string;
diff --git a/src/pages/LocationPage/ListPage.css b/src/pages/ListPage/ListPage.css
similarity index 79%
rename from src/pages/LocationPage/ListPage.css
rename to src/pages/ListPage/ListPage.css
index 28f6e2f..c5b6d45 100644
--- a/src/pages/LocationPage/ListPage.css
+++ b/src/pages/ListPage/ListPage.css
@@ -28,21 +28,39 @@
/* === 필터 바 === */
.loc-filterbar.in-sheet {
display: flex;
- gap: 12px;
+ flex-wrap: wrap; /* 줄바꿈 허용 */
+ gap: 12px; /* 버튼 간격 */
padding-top: 20px;
padding-left: 25px;
- background: #fff;
+ padding-right: 25px;
}
-.chip {
- padding: 8px 12px;
- font-size: 13px;
+/* 버튼 */
+.chip,
+.region-chip,
+.dept-chip,
+.hours-chip {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ white-space: normal;
+ text-align: center;
+ padding: 8px 12px;
border-radius: 40px;
- height: 25px;
border: 1px solid #dedede;
- background: #fff;
- color: #111;
+ font-size: 13px;
cursor: pointer;
+ background: #fff;
+ min-width: 80px;
+ line-height: 1.2;
+}
+
+.region-chip,
+.dept-chip,
+.hours-chip {
+ margin-left: 10px;
+ line-height: 16px;
}
.chip--active {
@@ -143,7 +161,6 @@
.hospital-dept {
color: #8c8c8c;
font-size: 14px;
- margin-bottom: 2px;
}
.hospital-info {
@@ -154,7 +171,7 @@
}
.phone {
- margin-top: 4px;
+ margin-top: 3px;
font-weight: 500;
}
@@ -163,14 +180,14 @@
height: 16px;
}
-/* ✅ 영업 상태 색상 표시 */
+/* 영업 상태 색상 표시 */
.status-open {
- color: #16a34a; /* 초록색 */
+ color: #16a34a;
font-weight: 600;
}
.status-closed {
- color: #dc2626; /* 빨간색 */
+ color: #dc2626;
font-weight: 600;
}
@@ -181,3 +198,7 @@
font-size: 14px;
padding: 40px 0;
}
+
+.hospital-info > div:nth-child(2) {
+ margin-top: 3px; /* 주소 위쪽 여백 */
+}
\ No newline at end of file
diff --git a/src/pages/LocationPage/ListPage.tsx b/src/pages/ListPage/ListPage.tsx
similarity index 100%
rename from src/pages/LocationPage/ListPage.tsx
rename to src/pages/ListPage/ListPage.tsx
diff --git a/src/pages/LocationPage/hospitals.ts b/src/pages/ListPage/hospitals.ts
similarity index 100%
rename from src/pages/LocationPage/hospitals.ts
rename to src/pages/ListPage/hospitals.ts
diff --git a/src/styles/infopage.css b/src/styles/infopage.css
new file mode 100644
index 0000000..adf71f7
--- /dev/null
+++ b/src/styles/infopage.css
@@ -0,0 +1,8 @@
+/* info 페이지 공용 하이라이터 */
+.section-title.hl {
+ display: inline;
+ box-shadow: inset 0 -0.45em 0 #e0eeff;
+ line-height: 1.3;
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 9dd362f..4c600b4 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -27,5 +27,5 @@
"types": ["vite/client", "navermaps"],
"typeRoots": ["./types", "./node_modules/@types"]
},
- "include": ["src", "non-used/HelpPage", "non-used/FavoritePage", "non-used/MyPage", "non-used/SearchPage", "non-used/BookmarkPage", "non-used/LocationPage.tsx", "non-used/InfoTipPage", "non-used/LoginPage", "non-used/SignupPage", "non-used/TermsPage", "src/pages/SplashPage"]
+ "include": ["src", "non-used/HelpPage", "non-used/FavoritePage", "non-used/MyPage", "non-used/SearchPage", "non-used/BookmarkPage", "non-used/LocationPage.tsx", "non-used/InfoTipPage", "non-used/LoginPage", "non-used/SignupPage", "non-used/TermsPage", "src/pages/SplashPage", "non-used/Map.tsx", "non-used/navermaps", "non-used/navermaps", "non-used/geocode.ts"]
}