ttipo/inneratb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

사이트 3차 수정

Browse Source
This commit is contained in:
TtiPo
2026-06-03 23:24:28 +09:00
parent 111e0b05a4
commit d1052b9d8e
4 changed files with 240 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/index.vue
+187 -17
View File
@@ -131,6 +131,17 @@ const history: HistoryItem[] = [
{ year: '2025', text: '한국 소비자 평가 대상 2연속 수상', img: imgBrand },
]
// 모바일용 — 같은 년도끼리 묶어 "년도(헤더) + 항목 리스트" 형태로 표시 (등장 순서 유지)
const historyGroups = computed(() => {
const groups: { year: string; items: HistoryItem[] }[] = []
for (const item of history) {
const last = groups[groups.length - 1]
if (last && last.year === item.year) last.items.push(item)
else groups.push({ year: item.year, items: [item] })
}
return groups
})
// 구성원 카드 — PEOPLE 섹션 비활성화로 함께 주석 처리 (재활성화 시 아래 + 템플릿 주석 해제)
// interface PeopleCard {
// label: string
@@ -289,7 +300,8 @@ const history: HistoryItem[] = [
<div class="gcard-title">주요 연혁 내역</div>
<!-- 슬로건 — 연혁 카드에 메시지 부여 -->
<p class="history-slogan">끊임없는 도전으로 써내려간 성장의 기록</p>
<ul class="timeline">
<!-- 데스크톱: 행마다 년도 + 내용 -->
<ul class="timeline timeline-flat">
<li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
<!-- 같은 년도가 연속되면 시각적으로 묶어 표기 -->
<span class="t-year">{{ item.year }}</span>
@@ -300,6 +312,24 @@ const history: HistoryItem[] = [
<span v-else-if="item.label" class="t-label">{{ item.label }}</span>
</li>
</ul>
<!-- 모바일: 년도 헤더 하나로 묶고 그 아래 항목 리스트 나열 -->
<ul class="timeline-grouped">
<li
v-for="(g, gi) in historyGroups"
:key="g.year"
v-reveal="{ delay: 200 + gi * 90 }"
class="tg-group"
>
<span class="tg-year">{{ g.year }}</span>
<ul class="tg-items">
<li v-for="(item, i) in g.items" :key="i" class="tg-item">
<span class="t-text">{{ item.text }}</span>
<img v-if="item.img" :src="item.img" class="t-flag" :alt="`${item.text} 이미지`" >
<span v-else-if="item.label" class="t-label">{{ item.label }}</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
@@ -730,11 +760,14 @@ const history: HistoryItem[] = [
}
.growth-head h2 {
font-size: clamp(1.75rem, 4.2vw, 3.125rem); /* 28~50px */
font-size: clamp(1.625rem, 4vw, 3.125rem); /* 26~50px — 좁은 화면 시작값 살짝 축소 */
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.32;
color: var(--ink);
/* 한글이 글자 단위로 끊기지 않고 어절(공백) 단위로만 줄바꿈되도록 */
word-break: keep-all;
text-wrap: balance; /* 여러 줄일 때 줄 길이를 고르게 분배 */
}
/* 세로 스택 — 상단 행(매출+연혁) → 하단 행(지표 3개) */
@@ -794,23 +827,25 @@ const history: HistoryItem[] = [
);
}
/* 좌→우로 커지는 구체 크기 */
.revenue-card .orb-1 {
width: clamp(6rem, 11vw, 9rem);
/* 2026년으로 올수록 점점 더 커지는 구체 크기 (크기 차이를 뚜렷하게)
※ .orb-cluster를 함께 명시해 .stat-card .stat-orb(동일 폭 일괄 지정)보다
특이도를 높여 구체별 폭이 확실히 적용되도록 함 */
.revenue-card .orb-cluster .orb-1 {
width: clamp(4.75rem, 8.5vw, 7rem);
opacity: 0.5; /* 가장 옅게 */
}
.revenue-card .orb-2 {
.revenue-card .orb-cluster .orb-2 {
width: clamp(7.5rem, 14vw, 11.5rem);
opacity: 0.74;
margin-left: clamp(-2.75rem, -4.5vw, -3.75rem); /* 앞 구체와 겹침 */
margin-left: clamp(-2.5rem, -4vw, -3.25rem); /* 앞 구체와 겹침 */
}
/* 마지막 구체 — 가장 크고 기존 단일 구체와 동일한 불투명도(opacity 미지정 = 1)
DOM 순서상 뒤에 있어 위에 그려지며 가장 진하게 앞으로 옴 */
.revenue-card .orb-3 {
width: clamp(9.5rem, 17vw, 14rem);
margin-left: clamp(-3.25rem, -5.5vw, -4.5rem);
.revenue-card .orb-cluster .orb-3 {
width: clamp(11.5rem, 21vw, 17.5rem);
margin-left: clamp(-3.5rem, -6vw, -5rem);
}
/* 구체 내부 텍스트 라벨 — 연도(상단) + 큰 숫자 */
@@ -827,20 +862,32 @@ const history: HistoryItem[] = [
.revenue-card .orb-year {
font-weight: 700;
font-size: clamp(0.8125rem, 1.3vw, 1.0625rem); /* 13~17px */
letter-spacing: -0.01em;
margin-bottom: 0.25em;
}
/* 연도 텍스트도 구체 크기에 맞춰 2026년으로 갈수록 점점 더 크게 */
.revenue-card .orb-1 .orb-year {
font-size: clamp(0.6875rem, 1.1vw, 0.875rem); /* 11~14px */
}
.revenue-card .orb-2 .orb-year {
font-size: clamp(0.8125rem, 1.3vw, 1.0625rem); /* 13~17px */
}
.revenue-card .orb-3 .orb-year {
font-size: clamp(0.9375rem, 1.6vw, 1.25rem); /* 15~20px */
}
.revenue-card .orb-value {
font-weight: 800;
letter-spacing: -0.03em;
white-space: nowrap;
}
/* 숫자 크기도 구체 크기에 맞춰 좌→우로 확대 */
/* 숫자 크기도 구체 크기에 맞춰 2026년으로 갈수록 점점 더 크게 확대 */
.revenue-card .orb-1 .orb-value {
font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
font-size: clamp(1.125rem, 2.1vw, 1.625rem); /* 18~26px */
}
.revenue-card .orb-2 .orb-value {
@@ -848,7 +895,7 @@ const history: HistoryItem[] = [
}
.revenue-card .orb-3 .orb-value {
font-size: clamp(2.25rem, 4.6vw, 3.5rem); /* 36~56px */
font-size: clamp(2.625rem, 5.4vw, 4.25rem); /* 42~68px */
}
/* 단위(억) — 숫자보다 작게 */
@@ -1017,8 +1064,8 @@ const history: HistoryItem[] = [
flex: none;
margin-left: auto; /* 우측 끝단으로 밀착 */
align-self: center;
width: clamp(2.625rem, 3.9vw, 3.375rem); /* 42~54px — 가로/세로 동일 (직전 대비 75%) */
height: clamp(2.625rem, 3.9vw, 3.375rem);
width: clamp(1.8375rem, 2.73vw, 2.3625rem); /* 약 29~38px — 직전 대비 70% 축소 */
height: clamp(1.8375rem, 2.73vw, 2.3625rem);
border-radius: 0.25rem; /* 4px — 사각 이미지 모서리 살짝 둥글게 */
object-fit: contain; /* 박스 안에서 비율 유지하며 맞춤(왜곡 없음) */
}
@@ -1034,7 +1081,79 @@ const history: HistoryItem[] = [
font-weight: 700;
font-size: clamp(1.25rem, 2vw, 1.625rem); /* 20~26px */
letter-spacing: 0.04em;
color: var(--brand); /* 브랜드 컬러 */
color: var(--ink); /* 검은색 */
line-height: 1;
}
/* ===== 모바일 연혁 — 년도 묶음 형태 (기본 숨김, 모바일에서만 표시) ===== */
.timeline-grouped {
display: none; /* 데스크톱에서는 .timeline-flat 사용 */
list-style: none;
margin-top: clamp(1.25rem, 2.5vw, 1.875rem);
}
/* 년도 그룹 — 상단 구분선 + 상하 여백 */
.timeline-grouped .tg-group {
padding: 0.875rem 0; /* 14px */
border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
}
.timeline-grouped .tg-group:first-child {
border-top: 0;
padding-top: 0;
}
/* 년도 헤더 — 그룹당 한 번만 표기 */
.timeline-grouped .tg-year {
display: block;
font-family: var(--font-display);
font-size: 1.125rem; /* 18px */
font-weight: 700;
letter-spacing: 0.02em;
color: var(--brand);
margin-bottom: 0.625rem; /* 10px — 헤더↔리스트 간격 */
}
/* 그룹 내 항목 리스트 */
.timeline-grouped .tg-items {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.625rem; /* 10px */
}
.timeline-grouped .tg-item {
display: flex;
align-items: center;
gap: 0.75rem; /* 12px */
}
.timeline-grouped .tg-item .t-text {
flex: 1; /* 텍스트가 남는 폭 차지 → 이미지/배지는 우측 끝 */
font-size: 0.9375rem; /* 15px */
color: var(--ink);
font-weight: 500;
line-height: 1.4;
}
/* 그룹 항목의 우측 이미지/배지 — 데스크톱 timeline과 동일 규칙 */
.timeline-grouped .t-flag {
flex: none;
margin-left: auto;
width: clamp(1.8375rem, 2.73vw, 2.3625rem);
height: clamp(1.8375rem, 2.73vw, 2.3625rem);
border-radius: 0.25rem;
object-fit: contain;
}
.timeline-grouped .t-label {
flex: none;
margin-left: auto;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem; /* 20px */
letter-spacing: 0.04em;
color: var(--ink);
line-height: 1;
}
@@ -1180,6 +1299,19 @@ const history: HistoryItem[] = [
flex-direction: column;
}
/* 세로로 쌓일 때 두 카드 모두 콘텐츠 높이를 갖도록.
history-card의 flex:1 1 0(=flex-basis 0)이 세로 스택에서 높이 0으로
눌려 연혁 표가 보이지 않던 문제를 해결한다. */
.revenue-card,
.history-card {
flex: 0 0 auto;
}
/* 연혁 타임라인 — 세로 스택에서는 균등 채움(flex:1) 대신 콘텐츠 높이 사용 */
.timeline {
flex: 0 0 auto;
}
.brand-bento {
grid-template-columns: 1fr 1fr;
}
@@ -1213,6 +1345,44 @@ const history: HistoryItem[] = [
grid-template-columns: 1fr;
}
/* 연혁: 모바일에서는 행별 년도(평면) 대신 년도 묶음 형태로 전환 */
.timeline-flat {
display: none;
}
.timeline-grouped {
display: block;
}
/* 연 매출 성장률 구체 — 모바일에서는 3개 크기 차이를 줄이고(1 : 1.29 : 1.57)
전체적으로 축소해 카드 안에 균형 있게 배치 */
.revenue-card .orb-cluster .orb-1 {
width: 5.25rem; /* 84px */
}
.revenue-card .orb-cluster .orb-2 {
width: 6.75rem; /* 108px */
margin-left: -1.5rem;
}
.revenue-card .orb-cluster .orb-3 {
width: 8.25rem; /* 132px */
margin-left: -1.75rem;
}
/* 구체 내부 숫자도 작아진 구체 크기에 맞춰 축소 */
.revenue-card .orb-1 .orb-value {
font-size: 1.125rem; /* 18px */
}
.revenue-card .orb-2 .orb-value {
font-size: 1.5rem; /* 24px */
}
.revenue-card .orb-3 .orb-value {
font-size: 2rem; /* 32px */
}
.people-cols {
grid-template-columns: 1fr;
gap: clamp(2.5rem, 8vw, 4rem);