outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 검수 about

This commit is contained in:
이희원 2026-06-28 18:02:19 +09:00
parent 7924041e84
commit 9b197626ab
10 changed files with 162 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/index.html
View File

@ -116,10 +116,7 @@
<div class="history__yearGroup isOpen">
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
<span class="history__year">2025</span>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2025">
<li class="history__listItem">
<div class="history__listItem">
<div class="main">
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
<p class="sub">
@ -128,7 +125,10 @@
</p>
</div>
<span class="date">25.12 - 26.02</span>
</li>
</div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2025">
<li class="history__listItem">
<div class="main">
<h3 class="title">현대차 판매시스템 구축</h3>
@ -219,63 +219,59 @@
<div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
<span class="history__year">2024</span>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2024" hidden>
<li class="history__listItem">
<div class="history__listItem">
<div class="main">
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
<p class="sub">React, Typescript, Recoil</p>
</div>
<span class="date">24.11 - 25.07</span>
</li>
</ul>
</div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2024" hidden></ul>
</div>
<div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
<span class="history__year">2023</span>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2023" hidden>
<li class="history__listItem">
<div class="history__listItem">
<div class="main">
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
<p class="sub">Vue</p>
</div>
<span class="date">23.12</span>
</li>
</ul>
</div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2023" hidden></ul>
</div>
<div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
<span class="history__year">2022</span>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2022" hidden>
<li class="history__listItem">
<div class="history__listItem">
<div class="main">
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
</div>
<span class="date">22.11</span>
</li>
</ul>
</div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2022" hidden></ul>
</div>
<div class="history__yearGroup">
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
<span class="history__year">2021</span>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2021" hidden>
<li class="history__listItem">
<div class="history__listItem">
<div class="main">
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
</div>
<span class="date">21.11</span>
</li>
</ul>
</div>
<span class="icon" aria-hidden="true"></span>
</button>
<ul class="history__list" id="history2021" hidden></ul>
</div>
</div>
</section>

4
src/scss/base/_reset.scss
View File

@ -16,8 +16,8 @@ html {
body {
font-family: $기본글꼴;
background-color: $color-bg;
color: $color-white;
background-color: #0d0d0d;
color: #ffffff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}

11
src/scss/base/_variable.scss
View File

@ -1,16 +1,5 @@
$color-bg: #0d0d0d;
$color-bg-light: #e5e5e5;
$color-cyan: #00f0ff;
$color-purple: #8f00ff;
$color-blue: #7796ff;
$color-badge-blue: #0071f2;
$color-white: #ffffff;
$color-dark: #0d0d0d;
$color-gray: #999;
$기본글꼴: "SUIT Variable", "SUIT", sans-serif;
$gnb-height: 60px;
$gnb-height-mo: 60px;
$bp-mo: 768px;

8
src/scss/index.scss
View File

@ -15,15 +15,15 @@
.sectionTitle {
font-family: $기본글꼴;
font-size: clamp(28px, 3vw, 40px);
font-size: clamp(28px, 3vw, 48px);
font-weight: 600;
letter-spacing: 0.02em;
color: $color-white;
line-height: 1;
color: #ffffff;
line-height: 0.8;
}
.sectionTitleDark {
color: $color-dark;
color: #0d0d0d;
}
.scrollDown {

124
src/scss/page/_about.scss
View File

@ -5,7 +5,7 @@
.about {
position: relative;
min-height: 100vh;
background: $color-bg;
background: #0d0d0d;
display: flex;
flex-direction: column;
justify-content: center;
@ -30,20 +30,17 @@
}
.about__head {
display: flex;
flex-direction: column;
gap: clamp(30px, 3.1vw, 60px);
.sectionTitle {
margin: 0;
margin: 0 0 57px;
}
}
.about__desc {
margin: 0 0 70px;
font-size: clamp(13px, 1.1vw, 16px);
font-weight: 300;
line-height: 1.8;
color: $color-white;
line-height: 150%;
color: #ffffff;
opacity: 0.9;
}
@ -58,14 +55,14 @@
font-size: clamp(60px, 7.6vw, 146px);
font-weight: 600;
line-height: 1;
color: $color-white;
color: #ffffff;
}
.about__quoteText {
font-size: clamp(22px, 2.4vw, 46px);
font-weight: 100;
line-height: 1.2;
color: $color-white;
color: #ffffff;
}
.about__expertiseList {
@ -84,7 +81,7 @@
.num {
font-size: clamp(14px, 0.85vw, 16px);
font-weight: 800;
color: $color-blue;
color: #7796ff;
}
.name {
@ -92,24 +89,20 @@
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
color: $color-white;
color: #ffffff;
}
.text {
font-size: clamp(12px, 0.75vw, 14px);
font-weight: 300;
color: $color-white;
color: #ffffff;
}
}
// History
// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름
$history-photo-w: clamp(220px, 26vw, 500px);
$history-gap: clamp(40px, 6.25vw, 120px);
.history {
position: relative;
background: $color-bg-light;
background: #fff;
padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
}
@ -118,52 +111,65 @@ $history-gap: clamp(40px, 6.25vw, 120px);
top: 0;
left: 0;
bottom: 0;
width: $history-photo-w;
overflow: hidden;
background: $color-dark;
width: clamp(220px, 34vw, 500px);
.img {
position: sticky;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.history__title {
position: absolute;
top: clamp(60px, 6.25vw, 120px);
left: clamp(24px, 6.25vw, 120px);
position: sticky;
top: 180px;
margin-left: clamp(24px, 6vw, 120px);
z-index: 1;
color: $color-white;
color: #ffffff;
}
.history__timeline {
margin-left: calc(#{$history-photo-w} + #{$history-gap});
margin-left: clamp(220px, 34vw, 500px);
}
.history__yearGroup {
border-top: 1px solid rgba($color-dark, 0.15);
border-top: 1px solid #000;
&:last-child {
border-bottom: 1px solid rgba($color-dark, 0.15);
border-bottom: 1px solid #000;
}
}
.history__yearToggle {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
width: 100%;
padding: clamp(16px, 1.8vw, 24px) 0;
padding: 30px 100px 30px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
.history__year {
flex-shrink: 0;
width: 80px;
}
.history__listItem {
flex: 1;
}
.icon {
position: relative;
position: absolute;
top: 50%;
right: 0;
width: 28px;
height: 28px;
border: 1px solid $color-dark;
transform: translateY(-50%);
border: 1px solid #0d0d0d;
border-radius: 50%;
flex-shrink: 0;
@ -175,7 +181,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
left: 50%;
width: 10px;
height: 1px;
background: $color-dark;
background: #0d0d0d;
transform: translate(-50%, -50%);
}
@ -191,28 +197,30 @@ $history-gap: clamp(40px, 6.25vw, 120px);
}
.history__year {
font-size: clamp(28px, 2.5vw, 40px);
font-weight: 100;
color: $color-dark;
font-size: clamp(24px, 2vw, 32px);
font-weight: 500;
color: #0d0d0d;
line-height: 1;
}
.history__list {
margin-top: -14px;
display: flex;
flex-direction: column;
gap: 16px;
margin-left: 104px;
margin-right: 100px;
&[hidden] {
display: none;
}
}
.history__listItem {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(12px, 1.2vw, 16px) 0;
border-top: 1px solid rgba($color-dark, 0.08);
&:first-child {
border-top: none;
}
.main {
display: flex;
@ -223,25 +231,25 @@ $history-gap: clamp(40px, 6.25vw, 120px);
.title {
font-size: clamp(14px, 1vw, 16px);
font-weight: 400;
color: $color-dark;
color: #0d0d0d;
}
.badge {
display: inline-block;
margin-left: 6px;
vertical-align: top;
margin-left: 5px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
color: $color-badge-blue;
border: 1px solid $color-badge-blue;
color: #0071f2;
border: 1px solid #0071f2;
border-radius: 4px;
vertical-align: middle;
}
.sub {
font-size: clamp(11px, 0.8vw, 13px);
font-weight: 300;
color: rgba($color-dark, 0.55);
font-size: 14px;
color: #7b7b7b;
line-height: 1.6;
}
@ -249,7 +257,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
flex-shrink: 0;
font-size: clamp(12px, 0.85vw, 14px);
font-weight: 400;
color: rgba($color-dark, 0.65);
color: rgba(13, 13, 13, 0.65);
white-space: nowrap;
}
}
@ -283,7 +291,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
.history__title {
position: static;
margin-bottom: 32px;
color: $color-dark;
color: #0d0d0d;
}
.history__photo {
@ -294,6 +302,14 @@ $history-gap: clamp(40px, 6.25vw, 120px);
margin-left: 0;
}
.history__yearToggle {
flex-wrap: wrap;
}
.history__list {
margin-left: 0;
}
.history__listItem {
flex-direction: column;
gap: 6px;

58
src/scss/page/_contact.scss
View File

@ -4,10 +4,10 @@
// Contact
// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
.contact {
background: $color-white;
background: #ffffff;
display: flex;
flex-direction: column;
border-top: 1px solid rgba($color-dark, 0.08);
border-top: 1px solid rgba(13, 13, 13, 0.08);
}
.contact__inner {
@ -22,7 +22,7 @@
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
letter-spacing: 0.02em;
color: $color-dark;
color: #0d0d0d;
line-height: 1;
}
@ -31,7 +31,7 @@
margin-bottom: 48px;
font-size: 15px;
font-weight: 300;
color: rgba($color-dark, 0.6);
color: rgba(13, 13, 13, 0.6);
}
.contact__label {
@ -39,7 +39,7 @@
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba($color-dark, 0.5);
color: rgba(13, 13, 13, 0.5);
margin-bottom: 20px;
}
@ -59,14 +59,14 @@
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
color: $color-blue;
color: #7796ff;
}
.contact__infoValue {
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: rgba($color-dark, 0.85);
color: rgba(13, 13, 13, 0.85);
}
.contact__infoLink {
@ -83,11 +83,11 @@
max-width: 1200px;
width: 100%;
margin: 0 auto;
border-top: 1px solid rgba($color-dark, 0.08);
border-top: 1px solid rgba(13, 13, 13, 0.08);
}
.contactAccordion__item {
border-bottom: 1px solid rgba($color-dark, 0.08);
border-bottom: 1px solid rgba(13, 13, 13, 0.08);
}
.contactAccordion__header {
@ -98,9 +98,9 @@
padding: 28px 48px;
background: none;
border: none;
border-bottom: 1px solid rgba($color-dark, 0.08);
border-bottom: 1px solid rgba(13, 13, 13, 0.08);
cursor: pointer;
color: $color-dark;
color: #0d0d0d;
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
font-family: $기본글꼴;
@ -163,9 +163,9 @@
.contactForm__input,
.contactForm__textarea {
width: 100%;
background: $color-white;
border: 1px solid rgba($color-dark, 0.2);
color: $color-dark;
background: #ffffff;
border: 1px solid rgba(13, 13, 13, 0.2);
color: #0d0d0d;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 300;
@ -174,10 +174,10 @@
transition: border-color 0.2s;
&::placeholder {
color: rgba($color-dark, 0.35);
color: rgba(13, 13, 13, 0.35);
}
&:focus {
border-color: rgba($color-dark, 0.4);
border-color: rgba(13, 13, 13, 0.4);
}
}
@ -198,7 +198,7 @@
cursor: pointer;
font-size: 13px;
font-weight: 300;
color: rgba($color-dark, 0.6);
color: rgba(13, 13, 13, 0.6);
}
.contactForm__checkboxInput {
@ -206,8 +206,8 @@
}
.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
background: $color-blue;
border-color: $color-blue;
background: #7796ff;
border-color: #7796ff;
}
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
@ -215,15 +215,15 @@
display: block;
width: 10px;
height: 6px;
border-left: 1.5px solid $color-white;
border-bottom: 1.5px solid $color-white;
border-left: 1.5px solid #ffffff;
border-bottom: 1.5px solid #ffffff;
transform: rotate(-45deg) translateY(-2px);
}
.contactForm__checkboxBox {
width: 18px;
height: 18px;
border: 1px solid rgba($color-dark, 0.3);
border: 1px solid rgba(13, 13, 13, 0.3);
flex-shrink: 0;
display: flex;
align-items: center;
@ -241,10 +241,10 @@
.btnSend {
padding: 12px 48px;
background: $color-blue;
background: #7796ff;
border: none;
border-radius: 100px;
color: $color-white;
color: #ffffff;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 700;
@ -270,18 +270,18 @@
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px solid rgba($color-dark, 0.25);
border: 1px solid rgba(13, 13, 13, 0.25);
border-radius: 100px;
font-size: 14px;
font-weight: 300;
color: $color-dark;
color: #0d0d0d;
transition:
border-color 0.2s,
color 0.2s;
&:hover {
border-color: $color-blue;
color: $color-blue;
border-color: #7796ff;
color: #7796ff;
}
}
@ -330,7 +330,7 @@
transition: color 0.2s;
&:hover {
color: $color-dark;
color: #0d0d0d;
}
}

21
src/scss/page/_gnb.scss
View File

@ -1,4 +1,3 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
// GNB
@ -11,7 +10,7 @@
transition: background 0.4s;
&.isScrolled {
// background: rgba($color-bg, 0.92);
// background: rgba(13, 13, 13, 0.92);
// backdrop-filter: blur(12px);
}
}
@ -20,7 +19,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 80px clamp(24px, 5.2vw, 100px);
padding: 80px clamp(24px, 5.2vw, 100px) 10px;
}
.gnb__logo {
@ -54,16 +53,16 @@
font-size: clamp(13px, 0.85vw, 16px);
font-weight: 400;
letter-spacing: 0.05em;
color: $color-white;
color: #ffffff;
transition: color 0.2s;
&:hover {
color: $color-blue;
color: #7796ff;
}
}
.gnb__navLink.isActive {
color: $color-blue;
color: #7796ff;
}
.gnb__hamburger {
@ -83,7 +82,7 @@
display: block;
width: 100%;
height: 1px;
background: $color-white;
background: #ffffff;
transition:
transform 0.3s,
opacity 0.3s;
@ -104,7 +103,7 @@
position: fixed;
inset: 0;
z-index: 200;
background: $color-bg;
background: #0d0d0d;
padding: 32px 32px 40px;
opacity: 0;
pointer-events: none;
@ -134,7 +133,7 @@
left: 0;
width: 100%;
height: 1px;
background: $color-white;
background: #ffffff;
&:nth-child(1) {
transform: rotate(45deg);
@ -157,9 +156,9 @@
font-size: clamp(28px, 8vw, 36px);
font-weight: 400;
letter-spacing: 0.02em;
color: $color-white;
color: #ffffff;
}
.gnb__mobileNavLink.isActive {
color: $color-blue;
color: #7796ff;
}

13
src/scss/page/_intro.scss
View File

@ -1,4 +1,3 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
// Intro
@ -8,7 +7,7 @@
align-items: center;
justify-content: center;
overflow: hidden;
background: $color-bg;
background: #0d0d0d;
}
.intro__bg {
@ -29,9 +28,9 @@
font-size: clamp(18px, 2.6vw, 50px);
font-weight: 100;
letter-spacing: 0.02em;
color: $color-white;
color: #ffffff;
margin-bottom: clamp(16px, 2vw, 32px);
line-height: 1.2;
line-height: 0.8;
}
.intro__title {
@ -39,14 +38,14 @@
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
color: $color-white;
line-height: 1.2;
color: #ffffff;
line-height: 0.8;
}
@include mo {
.gnb__inner {
padding: 0 20px;
height: $gnb-height-mo;
height: 60px;
}
.gnb__logoImg {

21
src/scss/page/_project.scss
View File

@ -1,8 +1,7 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
.project {
background: $color-bg;
background: #0d0d0d;
padding: 100px 48px;
}
@ -59,14 +58,14 @@
.project__name {
font-size: clamp(14px, 1.1vw, 16px);
font-weight: 500;
color: $color-white;
color: #ffffff;
line-height: 1.4;
}
.project__company {
font-size: 13px;
font-weight: 300;
color: rgba($color-white, 0.5);
color: rgba(255, 255, 255, 0.5);
}
.project__stack {
@ -79,10 +78,10 @@
.project__tag {
display: inline-block;
padding: 3px 10px;
border: 1px solid rgba($color-white, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 11px;
font-weight: 300;
color: rgba($color-white, 0.55);
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.03em;
}
@ -98,21 +97,21 @@
justify-content: center;
gap: 6px;
padding: 14px 40px;
border: 1px solid rgba($color-white, 0.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 100px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
color: $color-white;
color: #ffffff;
transition:
background 0.3s,
border-color 0.3s,
color 0.3s;
&:hover {
background: $color-white;
color: $color-dark;
border-color: $color-white;
background: #ffffff;
color: #0d0d0d;
border-color: #ffffff;
}
}

13
src/scss/page/_vision.scss
View File

@ -1,9 +1,8 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
// Vision
.vision {
background: $color-bg;
background: #0d0d0d;
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
}
@ -28,7 +27,7 @@
font-size: clamp(13px, 1.1vw, 16px);
font-weight: 300;
line-height: 1.8;
color: $color-white;
color: #ffffff;
opacity: 0.9;
}
@ -43,14 +42,14 @@
font-size: clamp(40px, 4.2vw, 80px);
font-weight: 700;
line-height: 1;
color: $color-white;
color: #ffffff;
}
.text {
font-size: clamp(18px, 1.9vw, 32px);
font-weight: 300;
line-height: 1.4;
color: $color-white;
color: #ffffff;
}
}
@ -71,14 +70,14 @@
font-size: clamp(28px, 3.1vw, 60px);
font-weight: 800;
letter-spacing: 0.01em;
color: $color-white;
color: #ffffff;
line-height: 1;
}
.desc {
font-size: clamp(12px, 0.8vw, 14px);
font-weight: 300;
color: rgba($color-white, 0.75);
color: rgba(255, 255, 255, 0.75);
}
}