From d1052b9d8e582e5f422559dca9dca137a56b3a6b Mon Sep 17 00:00:00 2001 From: TtiPo Date: Wed, 3 Jun 2026 23:24:28 +0900 Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9D=B4=ED=8A=B8=203=EC=B0=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/AppFooter.vue | 8 +- frontend/components/AppHeader.vue | 4 +- frontend/pages/culture.vue | 57 +++++++-- frontend/pages/index.vue | 204 +++++++++++++++++++++++++++--- 4 files changed, 240 insertions(+), 33 deletions(-) diff --git a/frontend/components/AppFooter.vue b/frontend/components/AppFooter.vue index 5876bfc..d5ec219 100644 --- a/frontend/components/AppFooter.vue +++ b/frontend/components/AppFooter.vue @@ -11,7 +11,8 @@

이너탭

-

사업자등록번호: 883-81-03100  |  이메일: innertab@gmail.com

+ +

사업자등록번호: 883-81-03100 | 이메일: innertab@gmail.com

주소: 서울특별시 강남구 삼성동 121-38, 304호

@@ -65,6 +66,11 @@ footer { line-height: 1.7; } +/* 이메일 라벨+주소 — 한 줄로 묶어 라벨과 주소가 분리되지 않도록 */ +.foot-company .foot-email { + white-space: nowrap; +} + .foot-company p a { color: inherit; text-decoration: none; diff --git a/frontend/components/AppHeader.vue b/frontend/components/AppHeader.vue index 79f33c2..7670a51 100644 --- a/frontend/components/AppHeader.vue +++ b/frontend/components/AppHeader.vue @@ -16,8 +16,8 @@ withDefaults(defineProps(), { ← 채용 홈으로 diff --git a/frontend/pages/culture.vue b/frontend/pages/culture.vue index d3e236a..bebc1fa 100644 --- a/frontend/pages/culture.vue +++ b/frontend/pages/culture.vue @@ -198,25 +198,25 @@ onMounted(() => { - + 2023년 - 창립 + 창립 - + 2024년 - 55억 + 55억 - + 2026년 목표 - 150억(e) + 150억(e) - + 2027년 목표 - 300억 + 300억 - + 2028년 목표 - 1000억+ + 1000억+ @@ -276,7 +276,7 @@ onMounted(() => {

ITAB은 Level 제도를 운영중이며,
연차가 아닌 실력으로 승진합니다.

-

업계 3~4년차 수준의 역량을 1년 안에 얻어갈 수 있도록
밀도있고 효율적으로 업무를 진행하게 됩니다.

+

업계 3~4년차 수준의 역량을 1년 안에 얻어갈 수 있도록
밀도있고 효율적으로 업무를 진행하게 됩니다.

물경력? 그런건 우리 사전에 없습니다.

@@ -659,13 +659,13 @@ onMounted(() => { .chart-svg .lbl-val { fill: #ffffff; - font-size: 19px; + font-size: 38px; /* 19px 대비 2배 */ font-weight: 800; letter-spacing: -0.02em; } .chart-svg .lbl-val--hl { - font-size: 21px; + font-size: 42px; /* 21px 대비 2배 */ } /* 모션 최소화 선호 시 모든 차트 전환 제거 */ @@ -838,6 +838,12 @@ onMounted(() => { align-items: flex-start; gap: 0.5rem; } + + /* 모바일: 문장 중간 강제 줄바꿈 제거 → 자연스럽게 이어 흐르도록 + (br 앞 공백이 남아 단어가 붙지 않음) */ + .br-pc { + display: none; + } } /* ── 둘째 — 커리어 성장(회색 섹션) ── */ @@ -1043,6 +1049,9 @@ onMounted(() => { font-weight: 700; color: #1b1f27; line-height: 1.45; + /* 한글이 글자 단위로 끊기지 않고 어절(공백) 단위로만 줄바꿈되도록 */ + word-break: keep-all; + text-wrap: balance; /* 여러 줄일 때 줄 길이를 고르게 분배 */ } .wi-sub { @@ -1050,6 +1059,8 @@ onMounted(() => { font-size: clamp(0.75rem, 1.2vw, 0.875rem); /* 12~14px */ color: #8a909c; line-height: 1.45; + word-break: keep-all; + text-wrap: balance; } /* 좁은 화면 — 배지/그리드 열 축소 */ @@ -1057,6 +1068,26 @@ onMounted(() => { .welfare-grid { grid-template-columns: repeat(2, 1fr); } + + /* 버블 배지 — 좁은 화면에서 원이 작아져 제목이 줄바꿈되던 문제 해결: + 간격·안쪽 여백을 줄여 원을 키우고, 제목 폰트를 줄여 한 줄로 유지 */ + .welfare-badges { + gap: 0.5rem; + } + + .wbadge { + padding: 0.25rem; + gap: 0.25rem; + } + + .wbadge strong { + font-size: 0.8125rem; /* 13px — 한 줄에 맞춤 */ + white-space: nowrap; /* 제목 줄바꿈 방지 */ + } + + .wbadge span { + font-size: 0.6875rem; /* 11px */ + } } /* ===================== 마무리 CTA ===================== */ diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue index 43ae012..d09230a 100644 --- a/frontend/pages/index.vue +++ b/frontend/pages/index.vue @@ -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[] = [
주요 연혁 내역

끊임없는 도전으로 써내려간 성장의 기록

-
    + +
    • {{ item.year }} @@ -300,6 +312,24 @@ const history: HistoryItem[] = [ {{ item.label }}
    + +
      +
    • + {{ g.year }} +
        +
      • + {{ item.text }} + + {{ item.label }} +
        • +
      +
      • +
    @@ -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);