gil/test-git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: HTML 및 CSS 코드 수정
All checks were successful
코드 품질 검사 / 린트 검사 (push) Successful in 4m34s
Details
Test Runner / test (push) Successful in 2m7s
Details

Browse Source 
- index.html에서 불필요한 h2 태그 제거
- SCSS 및 CSS 파일에서 box-sizing 및 transform 속성 정리
- 이미지 경로를 따옴표로 감싸기
- 주석 및 코드 정리
This commit is contained in:
NEW_GIL_HOME\hyeon
2026-01-31 22:27:58 +09:00
parent fe3afbbc4f
commit 817f10c50c
12 changed files with 2199 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.claude/settings.local.json Normal file
View File

@@ -0,0 +1,8 @@
{
"permissions": {
"allow": [
"Bash(npm run lint)",
"Bash(npm run lint:fix:*)"
]
}
}

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

12
.htmlhintrc Normal file
View File

@@ -0,0 +1,12 @@
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"doctype-first": true,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}

21
.husky/pre-commit Normal file
View File

@@ -0,0 +1,21 @@
#!/bin/sh
echo "커밋 전 코드 품질 검사 중..."
# HTML 검사
echo "HTML 검사 중..."
npm run lint:html
if [ $? -ne 0 ]; then
echo "HTML 검사 실패! 오류를 수정 후 다시 커밋하세요."
exit 1
fi
# CSS/SCSS 검사
echo "CSS/SCSS 검사 중..."
npm run lint:css
if [ $? -ne 0 ]; then
echo "CSS/SCSS 검사 실패! 오류를 수정 후 다시 커밋하세요."
exit 1
fi
echo "코드 품질 검사 통과!"

26
.stylelintrc.json Normal file
View File

@@ -0,0 +1,26 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss"
],
"ignoreFiles": [
"**/node_modules/**",
"**/_reset.scss",
"**/_swiper.scss"
],
"rules": {
"no-empty-source": null,
"selector-class-pattern": null,
"scss/at-import-partial-extension": null,
"no-descending-specificity": null,
"no-duplicate-selectors": null,
"declaration-block-single-line-max-declarations": null,
"scss/dollar-variable-pattern": null,
"scss/at-function-pattern": null,
"scss/no-global-function-names": null,
"scss/load-no-partial-leading-underscore": null,
"number-max-precision": null,
"scss/operator-no-unspaced": null,
"declaration-block-no-duplicate-properties": null
}
}

23
assets/css/_reset.scss
View File

File diff suppressed because one or more lines are too long

52
assets/css/_swiper.scss
View File

@@ -6,6 +6,7 @@
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
@@ -13,13 +14,16 @@
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
@@ -30,17 +34,21 @@
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
transform: translate3d(0, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
@@ -49,31 +57,39 @@
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
.swiper-slide,
.swiper-cube-shadow {
transform-style: preserve-3d;
@@ -90,52 +106,63 @@
display: none;
}
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
&.swiper-horizontal {
> .swiper-wrapper {
scroll-snap-type: x mandatory;
}
}
&.swiper-vertical {
> .swiper-wrapper {
scroll-snap-type: y mandatory;
}
}
&.swiper-free-mode {
> .swiper-wrapper {
scroll-snap-type: none;
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
}
&.swiper-centered {
> .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999;
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
}
&.swiper-centered.swiper-horizontal {
> .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
}
&.swiper-centered.swiper-vertical {
> .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
width: 100%;
min-width: 1px;
@@ -145,6 +172,7 @@
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
.swiper-slide-shadow,
@@ -165,22 +193,28 @@
pointer-events: none;
z-index: 10;
}
.swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
background: rgb(0 0 0 / 15%);
}
.swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
@@ -196,24 +230,30 @@
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
.swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Slide styles end */

235
assets/css/style.css
View File

@@ -1,14 +1,15 @@
@charset "UTF-8";
/* reset */
*,
*:before,
*:after {
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
html,
@@ -19,11 +20,11 @@ body {
font-size: 16px;
line-height: 1.5;
color: #111;
-webkit-text-size-adjust: none;
text-size-adjust: none;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
}
address,
@@ -218,6 +219,7 @@ a {
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
@@ -241,7 +243,7 @@ a {
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
transform: translate3d(0, 0, 0);
}
.swiper-horizontal {
@@ -278,7 +280,7 @@ a {
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
}
@@ -294,6 +296,7 @@ a {
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
@@ -305,46 +308,58 @@ a {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
-webkit-margin-start: var(--swiper-centered-offset-before);
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
-webkit-margin-before: var(--swiper-centered-offset-before);
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
@@ -352,6 +367,7 @@ a {
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
@@ -371,20 +387,25 @@ a {
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
background: rgb(0 0 0 / 15%);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
}
.swiper-lazy-preloader {
@@ -405,7 +426,7 @@ a {
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
-webkit-animation: swiper-preloader-spin 1s infinite linear;
animation: swiper-preloader-spin 1s infinite linear;
animation: swiper-preloader-spin 1s infinite linear;
}
@@ -417,10 +438,11 @@ a {
--swiper-preloader-color: #000;
}
@-webkit-keyframes swiper-preloader-spin {
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -430,10 +452,12 @@ a {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Slide styles end */
.layer-wrap {
overflow-y: auto;
@@ -444,6 +468,7 @@ a {
height: 100%;
background-color: #f3f4f9;
}
.layer-wrap .layer-header {
display: flex;
justify-content: flex-start;
@@ -458,16 +483,19 @@ a {
background-color: #fff;
border-bottom: 1px solid #c8c8c8;
}
.layer-wrap .layer-header .header-title {
font-size: 1.25rem;
font-weight: 600;
color: #000;
}
.layer-wrap .layer-header .btn-back {
position: relative;
width: 1.875rem;
height: 1.875rem;
}
.layer-wrap .layer-header .btn-back::before {
position: absolute;
top: 30%;
@@ -479,10 +507,12 @@ a {
border-right: 0.125rem solid #000;
transform: rotate(225deg);
}
.layer-wrap .layer-header .btn-back em {
display: block;
text-indent: -9999em;
}
.layer-wrap .layer-header .btn-close {
position: absolute;
top: 50%;
@@ -490,47 +520,56 @@ a {
transform: translateY(-50%);
width: 1.625rem;
height: 1.625rem;
background: url(../images/ico_close.png) no-repeat center/100% auto;
background: url("../images/ico_close.png") no-repeat center/100% auto;
}
.layer-wrap .layer-header .btn-close em {
display: block;
text-indent: -9999em;
}
.layer-wrap .layer-container {
padding: 3.75rem 0 0;
}
.layer-wrap .layer-container .layer-content-header {
padding: 1rem;
border-radius: 0 0 1.875rem 1.875rem;
background-color: #fff;
}
.layer-wrap .layer-container .layer-content-header .point-area {
position: relative;
height: 8.125rem;
padding: 0 1.25rem;
background: url(../images/ico_point.png) no-repeat 95% 50%/4.5rem auto;
background: url("../images/ico_point.png") no-repeat 95% 50%/4.5rem auto;
}
.layer-wrap .layer-container .layer-content-header .point-area dt {
font-size: 1.125rem;
font-weight: 500;
color: #000;
}
.layer-wrap .layer-container .layer-content-header .point-area dt span {
margin-left: 0.25rem;
font-size: 0.625rem;
color: #6b6b6b;
font-weight: 400;
}
.layer-wrap .layer-container .layer-content-header .point-area dd {
font-size: 1.625rem;
font-weight: 500;
color: #000;
letter-spacing: -0.04rem;
}
.layer-wrap .layer-container .layer-content-header .point-area dd strong {
font-size: 2rem;
font-weight: 700;
}
.layer-wrap .layer-container .layer-content-header .point-area .btn-useage {
display: flex;
justify-content: flex-start;
@@ -539,6 +578,7 @@ a {
top: 0;
right: 1.25rem;
}
.layer-wrap .layer-container .layer-content-header .point-area .btn-useage em {
display: block;
color: #666;
@@ -546,14 +586,16 @@ a {
font-weight: 400;
border-bottom: 1px solid #666;
}
.layer-wrap .layer-container .layer-content-header .point-area .btn-useage:before {
.layer-wrap .layer-container .layer-content-header .point-area .btn-useage::before {
content: "";
display: block;
width: 0.875rem;
height: 0.875rem;
margin-right: 0.25rem;
background: url(../images/ico_info.png) no-repeat center/100% auto;
background: url("../images/ico_info.png") no-repeat center/100% auto;
}
.layer-wrap .layer-container .layer-content-header .btn-txt-arr {
display: flex;
justify-content: flex-start;
@@ -563,21 +605,24 @@ a {
font-size: 0.625rem;
font-weight: 400;
}
.layer-wrap .layer-container .layer-content-header .btn-txt-arr:after {
.layer-wrap .layer-container .layer-content-header .btn-txt-arr::after {
content: "";
display: block;
width: 0.5rem;
height: 0.5rem;
margin-left: 0.25rem;
background: url(../images/ico_arrow_r2.png) no-repeat center/100% auto;
background: url("../images/ico_arrow_r2.png") no-repeat center/100% auto;
}
.layer-wrap .layer-container .layer-content-header .btn-area {
display: flex;
justify-content: space-between;
align-items: flex-start;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
column-gap: 0.5rem;
}
.layer-wrap .layer-container .layer-content-header .btn-area > * {
flex: 1;
display: flex;
@@ -591,10 +636,12 @@ a {
border-radius: 1rem;
text-align: left;
}
.layer-wrap .layer-container .layer-content-header .btn-area .btn-discount {
position: relative;
background-color: #e30084;
}
.layer-wrap .layer-container .layer-content-header .btn-area .btn-discount .btn-switch {
display: flex;
justify-content: flex-end;
@@ -607,26 +654,31 @@ a {
padding-right: 0.875rem;
cursor: pointer;
}
.layer-wrap .layer-container .layer-content-header .btn-area .btn-point-use {
background-color: #1e1a3a;
}
.layer-wrap .layer-container .layer-content-header .btn-area .btn-point-use:after {
.layer-wrap .layer-container .layer-content-header .btn-area .btn-point-use::after {
content: "";
display: block;
width: 1.625rem;
height: 1.625rem;
background: url(../images/ico_arrow_r.png) no-repeat center/100% auto;
background: url("../images/ico_arrow_r.png") no-repeat center/100% auto;
}
.layer-wrap .layer-container .layer-content {
padding: 1.375rem 1rem 1rem;
}
.layer-wrap .layer-container .layer-content .category-area {
overflow: hidden;
position: relative;
padding-right: 2.75rem;
margin-bottom: 1rem;
}
.layer-wrap .layer-container .layer-content .category-area:after {
.layer-wrap .layer-container .layer-content .category-area::after {
content: "";
display: block;
position: absolute;
@@ -635,9 +687,10 @@ a {
z-index: 1;
width: 3.875rem;
height: 100%;
background: rgb(243, 244, 249);
background: linear-gradient(90deg, rgba(243, 244, 249, 0) 0%, rgb(243, 244, 249) 40%);
background: rgb(243 244 249);
background: linear-gradient(90deg, rgb(243 244 249 / 0%) 0%, rgb(243 244 249) 40%);
}
.layer-wrap .layer-container .layer-content .category-area .btn-cate {
display: flex;
justify-content: center;
@@ -650,10 +703,12 @@ a {
background-color: #e4e7ee;
border-radius: 1.125rem;
}
.layer-wrap .layer-container .layer-content .category-area .btn-cate.active {
color: #fff;
background-color: #1e1a3a;
}
.layer-wrap .layer-container .layer-content .category-area .btn-more {
display: block;
position: absolute;
@@ -663,8 +718,9 @@ a {
transform: translateY(-50%);
width: 1.875rem;
height: 1.875rem;
background: url(../images/btn_more.png) no-repeat center/100% auto;
background: url("../images/btn_more.png") no-repeat center/100% auto;
}
.layer-wrap .layer-container .layer-content .list-area .noti {
display: flex;
justify-content: space-between;
@@ -681,33 +737,40 @@ a {
background-origin: border-box;
background-clip: content-box, border-box;
}
.layer-wrap .layer-container .layer-content .list-area .noti .txt-area {
padding: 0 1.25rem;
line-height: 1.3;
}
.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .tit {
position: relative;
font-size: 1.125rem;
color: #7a7d87;
}
.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .acc {
display: block;
font-size: 1.375rem;
font-weight: 700;
}
.layer-wrap .layer-container .layer-content .list-area .noti .txt-area .acc strong {
font-size: 1.875rem;
font-weight: 700;
margin-left: 0;
padding: 0 0.25rem;
}
.layer-wrap .layer-container .layer-content .list-area .noti .img-area {
padding: 0 1.25rem 0 0.625rem;
}
.layer-wrap .layer-container .layer-content .list-area .noti .img-area img {
width: 4.125rem;
}
.layer-wrap .layer-container .layer-content .list-area .noti.quick .tit:after {
.layer-wrap .layer-container .layer-content .list-area .noti.quick .tit::after {
content: "즉시적립";
display: inline-flex;
justify-content: center;
@@ -725,14 +788,15 @@ a {
border-radius: 0.625rem;
white-space: nowrap;
}
.layer-wrap .layer-container .layer-content .list-area .list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0.75rem;
grid-row-gap: 0.625rem;
grid-gap: 0.625rem 0.75rem;
margin-bottom: 1.375rem;
}
.layer-wrap .layer-container .layer-content .list-area .list li {
overflow: hidden;
display: flex;
@@ -740,13 +804,15 @@ a {
position: relative;
height: 8.9375rem;
padding: 0;
border: solid 0 rgb(233, 233, 233);
border: solid 0 rgb(233 233 233);
border-radius: 0.5rem;
background-color: #fff;
}
.layer-wrap .layer-container .layer-content .list-area .list li + li {
margin-top: 0;
}
.layer-wrap .layer-container .layer-content .list-area .list li .img-area {
display: flex;
justify-content: flex-end;
@@ -759,10 +825,12 @@ a {
border-radius: 0;
box-shadow: none;
}
.layer-wrap .layer-container .layer-content .list-area .list li .img-area img {
width: 3rem;
height: 3rem;
}
.layer-wrap .layer-container .layer-content .list-area .list li .txt-area {
display: flex;
justify-content: flex-start;
@@ -775,18 +843,21 @@ a {
font-weight: 500;
border-radius: 0;
}
.layer-wrap .layer-container .layer-content .list-area .list li .txt-area .acc {
align-items: flex-end;
font-size: 1.25rem;
font-weight: 700;
}
.layer-wrap .layer-container .layer-content .list-area .list li .txt-area .acc strong {
font-size: 1.875rem;
font-weight: 700;
margin-left: 0;
padding: 0 0.25rem;
}
.layer-wrap .layer-container .layer-content .list-area .list li.quick:after {
.layer-wrap .layer-container .layer-content .list-area .list li.quick::after {
content: "즉시적립";
display: inline-flex;
justify-content: center;
@@ -803,10 +874,12 @@ a {
background-color: #fbdaed;
border-radius: 0.625rem;
}
.layer-wrap .layer-container .layer-content .list-area .list li.quick .txt-area:before {
.layer-wrap .layer-container .layer-content .list-area .list li.quick .txt-area::before {
display: none;
}
.layer-wrap .layer-container .layer-content .list-area .list li.etc-cash:before {
.layer-wrap .layer-container .layer-content .list-area .list li.etc-cash::before {
content: "방문+1";
display: block;
position: absolute;
@@ -819,20 +892,24 @@ a {
color: #f84d40;
background-color: #fff7d7;
}
.layer-wrap .layer-container .layer-content .list-area .list li.quick.etc-cash:before {
.layer-wrap .layer-container .layer-content .list-area .list li.quick.etc-cash::before {
left: 3.34375rem;
}
.layer-wrap .layer-container .layer-content .caution-area {
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
}
.layer-wrap .layer-container .layer-content .caution-area h3 {
margin-bottom: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
color: #000;
}
.layer-wrap .layer-container .layer-content .caution-area p {
font-size: 0.8125rem;
font-weight: 400;
@@ -844,67 +921,81 @@ a {
padding-bottom: 4.25rem;
background-color: #fff;
}
.point-earn .point-info {
width: 100%;
height: auto;
padding: 1.875rem 1.375rem;
background: none;
}
.point-earn .point-info figure {
display: flex;
justify-content: flex-start;
align-items: center;
}
.point-earn .point-info figure img {
width: 6.875rem;
}
.point-earn .point-info figure figcaption {
margin-left: 1.375rem;
font-size: 1.25rem;
color: #6b6b6b;
}
.point-earn .point-info figure figcaption strong {
display: block;
margin-top: 0.375rem;
font-size: 1.75rem;
color: #212121;
}
.point-earn .desc {
padding: 0 1.375rem;
margin: 0 0 2.5rem;
}
.point-earn .desc > dl {
padding: 0;
}
.point-earn .desc dt {
font-size: 1.25rem;
font-weight: 700;
color: #212121;
margin-bottom: 1.25rem;
}
.point-earn .desc dd {
font-size: 1rem;
color: #6b6b6b;
font-weight: 400;
}
.point-earn .desc dd dl {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 1rem 0 0;
}
.point-earn .desc dd dl + dl {
margin-top: 0;
border-top: 0;
}
.point-earn .desc dd dl dt {
font-size: 1rem;
font-weight: 400;
color: #212121;
}
.point-earn .desc dd dl dd {
margin-left: 1rem;
}
.point-earn .desc li {
display: flex;
justify-content: flex-start;
@@ -913,24 +1004,30 @@ a {
font-size: 1rem;
color: #6b6b6b;
}
.point-earn .desc li em {
float: none;
width: 6.875rem;
color: #212121;
}
.point-earn .desc li > span {
flex: 1;
}
.point-earn .desc li .coupon {
display: block;
margin-bottom: 0.3125rem;
}
.point-earn .desc li .coupon img {
width: 9.375rem;
}
.point-earn .desc li .txt-caution {
margin-top: 0.25rem;
}
.point-earn .desc li .txt-caution > * {
display: flex;
justify-content: flex-start;
@@ -938,7 +1035,8 @@ a {
font-size: 0.625rem;
line-height: 1.6;
}
.point-earn .desc li .txt-caution > *:before {
.point-earn .desc li .txt-caution > *::before {
content: "";
display: block;
width: 0.1875rem;
@@ -947,20 +1045,24 @@ a {
border-radius: 0.125rem;
background-color: #6b6b6b;
}
.point-earn .txt-box {
padding: 1.5rem 1.375rem;
margin: 0;
background-color: #f2f3f7;
border-radius: 0;
}
.point-earn .txt-box ul + h4 {
margin-top: 1.625rem;
}
.point-earn .txt-box h4 {
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.point-earn .txt-box li {
display: flex;
justify-content: flex-start;
@@ -970,6 +1072,7 @@ a {
margin-bottom: 0.375rem;
line-height: 1.54;
}
.point-earn .txt-box li::before {
content: "";
display: block;
@@ -981,11 +1084,13 @@ a {
opacity: 0.56;
background-color: #999;
}
.point-earn .ico-bu {
display: inline-flex;
justify-content: flex-start;
align-items: flex-start;
}
.point-earn .ico-bu::before {
content: "";
display: block;
@@ -1008,9 +1113,11 @@ a {
padding: 0.75rem;
z-index: 10;
}
.btn-area.fixed-bottom button + button {
margin: 0;
}
.btn-area.fixed-bottom button {
display: flex;
justify-content: center;
@@ -1024,11 +1131,13 @@ a {
border-radius: 0.5rem;
background-color: #e30084;
}
.btn-area.fixed-bottom.btn-full {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
height: fit-content;
height: fit-content;
}
.btn-area.fixed-bottom.btn-full button {
width: 100%;
}
@@ -1038,6 +1147,7 @@ a {
border-radius: 0.625rem;
background-color: #fff;
}
.card + .card {
margin-top: 0.9375rem;
}
@@ -1045,12 +1155,15 @@ a {
.cache-guide {
padding: 1.25rem 0.75rem;
}
.cache-guide #header + main {
padding-bottom: 0;
}
.cache-guide section {
padding: 1.75rem 1.5rem;
}
.cache-guide section h3 {
display: inline-flex;
justify-content: flex-start;
@@ -1062,13 +1175,16 @@ a {
margin-bottom: 1.25rem;
border-bottom: 1px solid #e30084;
}
.cache-guide section h3 em {
font-size: 1.25rem;
font-weight: 700;
}
.cache-guide section img {
margin-top: 1.25rem;
}
.cache-guide .bu-type li {
position: relative;
padding: 0 0.5rem 0 1rem;
@@ -1079,7 +1195,8 @@ a {
word-break: keep-all;
word-wrap: break-word;
}
.cache-guide .bu-type li:before {
.cache-guide .bu-type li::before {
content: "";
display: inline-block;
width: 0.625rem;
@@ -1088,18 +1205,23 @@ a {
border-radius: 50%;
background-color: #ffe4f4;
}
.cache-guide .bu-type li + li {
margin-top: 0.75rem;
}
.cache-guide .bu-type li b {
text-decoration: underline;
}
.cache-guide .cs-info {
margin-top: -0.3125rem;
}
.cache-guide .cs-info:before {
.cache-guide .cs-info::before {
display: none;
}
.cache-guide .cs-info h4 {
padding: 0.75rem 0 0.625rem;
font-size: 1rem;
@@ -1107,17 +1229,20 @@ a {
font-weight: 700;
text-align: center;
}
.cache-guide .cs-info p {
padding: 0.625rem 0 0;
font-size: 0.75rem;
color: #666;
text-align: center;
}
.cache-guide .cs-info p em {
display: block;
margin-top: 0.4375rem;
font-weight: 500;
}
.cache-guide .cs-box {
display: flex;
flex-direction: column;
@@ -1128,6 +1253,7 @@ a {
border-radius: 1.875rem;
background-color: #ffe8f5;
}
.cache-guide .cs-box strong {
display: block;
font-size: 0.975rem;
@@ -1135,6 +1261,7 @@ a {
font-weight: 700;
line-height: 1;
}
.cache-guide .cs-box a {
font-size: 0.75rem;
color: #111;
@@ -1146,24 +1273,24 @@ a {
width: 3.0625rem;
height: 1.625rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
background-color: #e30084;
}
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
background-color: #fff;
transition: 0.2s all ease;
border-radius: 1rem;
}
.switch .slider:before {
.switch .slider::before {
content: "";
position: absolute;
top: 50%;
@@ -1175,10 +1302,12 @@ a {
border-radius: 50%;
transition: 0.2s all ease;
}
.switch input:checked + .slider {
background-color: #fff;
}
.switch input:checked + .slider:before {
.switch input:checked + .slider::before {
left: 1.5rem;
}
@@ -1186,13 +1315,13 @@ a {
width: 100%;
height: 100%;
}
.swiper .swiper-slide {
width: auto;
}
@media only screen and (max-width: 320px) {
@media only screen and (width <= 320px) {
html {
font-size: 14px;
}
}
/*# sourceMappingURL=style.css.map */
}

127
assets/css/style.scss
View File

@@ -2,13 +2,14 @@
@use '_reset' as *;
@use '_swiper' as *;
//rem 변환 $value = 디자인px
// rem 변환 $value = 디자인px
@function rem($value) {
$remValue: calc($value / 16) + rem;
@return $remValue;
}
//flex
// flex
$flex-map: (
start: flex-start,
end: flex-end,
@@ -19,7 +20,7 @@ $flex-map: (
);
@function _get-flex-value($key) {
//입력한 키값($key)를 받아서
// 입력한 키값($key)를 받아서
@return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을.
}
@@ -48,6 +49,7 @@ $flex-map: (
.layer-header {
@include flex(start, center);
position: fixed;
top: 0;
left: 0;
@@ -75,11 +77,11 @@ $flex-map: (
top: 30%;
left: 40%;
content: '';
width: rem(12); //화살표 크기
height: rem(12); //화살표 크기
border-top: rem(2) solid #000; //화살표 선
border-right: rem(2) solid #000; //화살표 선
transform: rotate(225deg); //다음 화살표
width: rem(12); // 화살표 크기
height: rem(12); // 화살표 크기
border-top: rem(2) solid #000; // 화살표 선
border-right: rem(2) solid #000; // 화살표 선
transform: rotate(225deg); // 다음 화살표
}
@@ -96,7 +98,7 @@ $flex-map: (
transform: translateY(-50%);
width: rem(26);
height: rem(26);
background: url(../images/ico_close.png) no-repeat center / 100% auto;
background: url("../images/ico_close.png") no-repeat center / 100% auto;
em {
display: block;
@@ -112,16 +114,18 @@ $flex-map: (
padding: rem(16);
border-radius: 0 0 rem(30) rem(30);
background-color: #fff;
.point-area {
position: relative;
height: rem(130);
padding:0 rem(20);
background: url(../images/ico_point.png) no-repeat 95% 50% / rem(72) auto;
background: url("../images/ico_point.png") no-repeat 95% 50% / rem(72) auto;
dt {
font-size: rem(18);
font-weight: 500;
color: #000;
span {
margin-left:rem(4);
font-size: rem(10);
@@ -129,18 +133,22 @@ $flex-map: (
font-weight: 400;
}
}
dd {
font-size: rem(26);
font-weight: 500;
color: #000;
letter-spacing: rem(-0.64);
strong {
font-size: rem(32);
font-weight: 700;
}
}
.btn-useage {
@include flex(start, center);
position: absolute;
top:0;
right:rem(20);
@@ -152,41 +160,48 @@ $flex-map: (
font-weight: 400;
border-bottom:1px solid #666;
}
&:before {
&::before {
content:"";
display: block;
width: rem(14);
height: rem(14);
margin-right: rem(4);
background: url(../images/ico_info.png) no-repeat center / 100% auto;
background: url("../images/ico_info.png") no-repeat center / 100% auto;
}
}
}
.btn-txt-arr {
@include flex(start, center);
border-bottom:1px solid #6b6b6b;
color:#6b6b6b;
font-size: rem(10);
font-weight: 400;
&:after {
&::after {
content:"";
display: block;
width: rem(8);
height: rem(8);
margin-left: rem(4);
background: url(../images/ico_arrow_r2.png) no-repeat center / 100% auto;
background: url("../images/ico_arrow_r2.png") no-repeat center / 100% auto;
}
}
.btn-area {
@include flex(between, start);
column-gap: rem(8);
& > * {
flex: 1;
@include flex(between, center);
height: rem(76);
padding: rem(14);
font-size: rem(16);
@@ -195,11 +210,14 @@ $flex-map: (
border-radius: rem(16);
text-align: left;
}
.btn-discount {
position: relative;
background-color: #e30084;
.btn-switch {
@include flex(end, center);
position: absolute;
top:0;
left:0;
@@ -209,27 +227,32 @@ $flex-map: (
cursor: pointer;
}
}
.btn-point-use {
background-color: #1e1a3a;
&:after {
&::after {
content:"";
display: block;
width: rem(26);
height: rem(26);
background: url(../images/ico_arrow_r.png) no-repeat center / 100% auto;
background: url("../images/ico_arrow_r.png") no-repeat center / 100% auto;
}
}
}
}
.layer-content {
padding:rem(22) rem(16) rem(16);
.category-area {
overflow: hidden;
position: relative;
padding-right: rem(44);
margin-bottom:rem(16);
&:after {
&::after {
content:"";
display: block;
position: absolute;
@@ -238,11 +261,13 @@ $flex-map: (
z-index: 1;
width: rem(62);
height: 100%;
background: rgb(243,244,249);
background: linear-gradient(90deg, rgba(243,244,249,0) 0%, rgba(243,244,249,1) 40%);
background: rgb(243 244 249);
background: linear-gradient(90deg, rgb(243 244 249 / 0%) 0%, rgb(243 244 249 / 100%) 40%);
}
.btn-cate {
@include flex(center, center);
height: rem(36);
padding:0 rem(12);
font-size: rem(16);
@@ -250,11 +275,13 @@ $flex-map: (
font-weight: 400;
background-color: #e4e7ee;
border-radius: rem(18);
&.active {
color: #fff;
background-color: #1e1a3a;
}
}
.btn-more {
display: block;
position: absolute;
@@ -264,7 +291,7 @@ $flex-map: (
transform: translateY(-50%);
width: rem(30);
height: rem(30);
background: url(../images/btn_more.png) no-repeat center / 100% auto;
background: url("../images/btn_more.png") no-repeat center / 100% auto;
}
}
@@ -274,6 +301,7 @@ $flex-map: (
.list-area {
.noti {
@include flex(between, center);
width: 100%;
height: rem(111);
padding: rem(2);
@@ -285,9 +313,11 @@ $flex-map: (
background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
background-origin: border-box;
background-clip: content-box, border-box;
.txt-area {
padding:0 rem(20);
line-height: 1.3;
.tit {
position: relative;
font-size: rem(18);
@@ -307,8 +337,10 @@ $flex-map: (
}
}
}
.img-area {
padding:0 rem(20) 0 rem(10);
img {
width: rem(66);
}
@@ -316,9 +348,11 @@ $flex-map: (
&.quick {
.tit {
&:after {
&::after {
content: "즉시적립";
@include inlineflex(center, center);
position: absolute;
top:rem(3);
left: 100%;
@@ -335,12 +369,12 @@ $flex-map: (
}
}
}
.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: rem(12);
grid-row-gap: rem(10);
grid-gap: rem(10) rem(12);
margin-bottom:rem(22);
li {
@@ -350,7 +384,7 @@ $flex-map: (
position: relative;
height: rem(143);
padding: 0;
border: solid 0 rgba(233, 233, 233);
border: solid 0 rgb(233 233 233);
border-radius: rem(8);
background-color: #fff;
@@ -360,6 +394,7 @@ $flex-map: (
.img-area {
@include flex(end, center);
width: 100%;
height: rem(62);
padding: 0 rem(12);
@@ -376,6 +411,7 @@ $flex-map: (
.txt-area {
@include flex(start, start);
flex-direction: column;
width: 100%;
padding: rem(10) rem(16) rem(2);
@@ -399,9 +435,11 @@ $flex-map: (
}
&.quick {
&:after {
&::after {
content: "즉시적립";
@include inlineflex(center, center);
position: absolute;
bottom:rem(8.5);
left:rem(6);
@@ -416,14 +454,14 @@ $flex-map: (
}
.txt-area {
&:before {
&::before {
display: none;
}
}
}
&.etc-cash {
&:before {
&::before {
content: "방문+1";
display: block;
position: absolute;
@@ -440,7 +478,7 @@ $flex-map: (
&.quick {
&.etc-cash {
&:before {
&::before {
left: rem(53.5);
}
}
@@ -456,12 +494,14 @@ $flex-map: (
padding: rem(16);
border-radius: rem(8);
background-color: #fff;
h3 {
margin-bottom:rem(12);
font-size: rem(18);
font-weight: 700;
color:#000;
}
p {
font-size: rem(13);
font-weight: 400;
@@ -528,6 +568,7 @@ $flex-map: (
dl {
@include flex(start, start);
padding: rem(16) 0 0;
&+dl {
@@ -546,8 +587,10 @@ $flex-map: (
}
}
}
li {
@include flex(start, start);
margin-bottom: rem(18);
font-size: rem(16);
color: #6b6b6b;
@@ -557,6 +600,7 @@ $flex-map: (
width: rem(110);
color: #212121;
}
> span {
flex: 1;
}
@@ -575,10 +619,11 @@ $flex-map: (
&>* {
@include flex(start, start);
font-size: rem(10);
line-height: 1.6;
&:before {
&::before {
content: "";
display: block;
width: rem(3);
@@ -597,6 +642,7 @@ $flex-map: (
margin: 0;
background-color: #f2f3f7;
border-radius: 0;
ul+h4 {
margin-top: rem(26);
}
@@ -609,6 +655,7 @@ $flex-map: (
li {
@include flex(start, start);
font-size: rem(13);
color: #666;
margin-bottom: rem(6);
@@ -648,6 +695,7 @@ $flex-map: (
.btn-area.fixed-bottom {
@include flex(center, center);
position: fixed;
bottom: 0;
left: 0;
@@ -658,8 +706,10 @@ $flex-map: (
button + button {
margin: 0;
}
button {
@include flex(center, center);
width: 100%;
height: rem(58);
padding: 0 rem(20);
@@ -702,6 +752,7 @@ $flex-map: (
h3 {
@include inlineflex(start, center);
position: relative;
font-size: rem(16);
font-weight: 500;
@@ -714,6 +765,7 @@ $flex-map: (
font-weight: 700;
}
}
img {
margin-top:rem(20);
}
@@ -729,7 +781,7 @@ $flex-map: (
word-break: keep-all;
word-wrap: break-word;
&:before {
&::before {
content: "";
display: inline-block;
width: rem(10);
@@ -751,7 +803,7 @@ $flex-map: (
.cs-info {
margin-top: -0.3125rem;
&:before {
&::before {
display: none;
}
@@ -776,6 +828,7 @@ $flex-map: (
}
}
}
.cs-box {
display: flex;
flex-direction: column;
@@ -817,15 +870,12 @@ $flex-map: (
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
background-color: #fff;
transition: 0.2s all ease;
border-radius: 1rem;
&:before {
&::before {
content: "";
position: absolute;
top: 50%;
@@ -842,7 +892,7 @@ $flex-map: (
input:checked + .slider {
background-color: #fff;
&:before {
&::before {
left: rem(24);
}
}
@@ -851,13 +901,14 @@ $flex-map: (
.swiper {
width: 100%;
height: 100%;
.swiper-slide {
width: auto;
}
}
@media only screen and (max-width: 320px) {
@media only screen and (width <= 320px) {
html {
font-size: 14px;
}

1
index.html
View File

@@ -15,7 +15,6 @@
<!-- header -->
<header class="layer-header">
<h1 class="header-title">쇼핑 적립</h1>
<h2 class="header-title">쇼핑 적립</h2
<button type="button" class="btn-close"><em>닫기</em></button>
</header>
<!-- //header -->

1782
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
package.json Normal file
View File

@@ -0,0 +1,19 @@
{
"name": "test-git",
"version": "1.0.0",
"description": "프런트엔드 프로젝트",
"scripts": {
"lint": "npm run lint:html && npm run lint:css",
"lint:html": "htmlhint \"**/*.html\" --ignore \"node_modules/**\"",
"lint:css": "stylelint \"**/*.css\" \"**/*.scss\" --ignore-pattern \"node_modules/**\"",
"lint:fix": "stylelint \"**/*.css\" \"**/*.scss\" --fix --ignore-pattern \"node_modules/**\"",
"prepare": "husky"
},
"devDependencies": {
"htmlhint": "^1.1.4",
"husky": "^9.0.11",
"stylelint": "^16.2.1",
"stylelint-config-standard": "^36.0.0",
"stylelint-config-standard-scss": "^13.0.0"
}
}