diff --git a/Program/Layout/MainLayout.razor b/Program/Layout/MainLayout.razor index 0064939..ad55c02 100644 --- a/Program/Layout/MainLayout.razor +++ b/Program/Layout/MainLayout.razor @@ -1,23 +1,49 @@ @inherits LayoutComponentBase + +
-
-
-

PROJECT

+ @*
*@ + @*
*@ + @* icon *@ + @*

PROJECT

*@ + @*
*@ + @*
*@ + +
+ +
+ +
-
- @Body -
+ @*
*@ + @* @Body *@ + @* $1$ *@ +
+ @for (int i = 0; i < 50; i++) + { +
Dummy Box @i
+ } +
- -
- +
+ +
+
+
@*
*@ diff --git a/Program/Layout/MainLayout.razor.css b/Program/Layout/MainLayout.razor.css index 162d7e9..13ba7d2 100644 --- a/Program/Layout/MainLayout.razor.css +++ b/Program/Layout/MainLayout.razor.css @@ -1,3 +1,7 @@ +html, body { + overscroll-behavior: none; /* 바운스/오버스크롤 차단 */ +} + /* 전체 페이지 wrapper */ .page { position: relative; @@ -5,6 +9,11 @@ overflow-x: hidden; } +.top-view { + position: fixed; +} + + /* TopNav를 화면 위에 떠 있게 설정 */ .top-nav { position: fixed; @@ -20,6 +29,23 @@ box-shadow: 0 2px 10px rgba(0,0,0,0.05); } + +.logoIcon{ + width: 5vw; + min-width: 32px; + max-width: 128px; + height: auto; + aspect-ratio: 1/1; +} + + +/*.logo-mask img {*/ +/* visibility: hidden;*/ +/* width: 100%;*/ +/* height: 100%;*/ +/*}*/ + + /* 타이틀 텍스트 */ .prj-title { font-size: 1.5rem; @@ -34,15 +60,134 @@ gap: 1.5rem; } -.bottom-left-btn { +/* 테스트 플로팅 */ +.top-floating-menu { position: fixed; + top: 4rem; + right: 2rem; z-index: 1000; - left: 40px; - width: 100%; - background-color: rgba(255, 255, 255, 0.95); /* 반투명 배경 */ - z-index: 1000; + display: inline-block; +} + +/* 원형 버튼 (아래쪽 레이어) */ +.menu-toggle { + width: 48px; + height: 48px; + background-color: black; + color: white; + font-size: 1.5rem; + border-radius: 50%; display: flex; - justify-content: space-between; align-items: center; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); -} \ No newline at end of file + justify-content: center; + cursor: pointer; + position: relative; + z-index: 1; /* 🔽 아래 레이어 */ +} + +/* 펼쳐질 박스 (위에 뜨는 레이어) */ +.menu-box { + position: absolute; + top: 0; + right: 0; + width: 85vw; + height: 120px; + background-color: white; + border-radius: 50%; + transform: scale(0); + transform-origin: top right; + opacity: 0; + transition: all 0.3s ease; + padding: 1rem; + pointer-events: none; + z-index: 2; /* 🔼 위쪽 레이어 */ + display: flex; + flex-direction: row; + gap: 0.5rem; +} + +/* 마우스를 전체에 올리면 박스가 앞에 뜨도록 */ +.top-floating-menu:hover .menu-box { + transform: scale(1); + border-radius: 0.75rem; + opacity: 1; + pointer-events: auto; +} +.menu-box { + position: absolute; + top: 0; + right: 0; + /* 나머지 스타일 유지 */ + padding-top: 2rem; /* X 버튼이 박스 내부에서 안 겹치도록 여백 추가 */ +} + +.menu-box button { + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: transparent; + border: none; + font-size: 1.2rem; + color: #333; + cursor: pointer; + z-index: 3; +} + + + + + + + +/* 플로팅 뷰 */ +.float-left-down { + position: fixed; + left: 2rem; + bottom: 2rem; + width: clamp(48px, 8vw, 128px); + height: clamp(48px, 8vw, 128px); + z-index: 1000; +} + +.float-right-down { + position: fixed; + right: 2rem; + bottom: 2rem; + z-index: 1000; +} + +.fld-btn { + padding: 0.75rem 1.2rem; + background-color: var(--point-dark); + color: white; + border: none; + border-radius: 10px; + font-size: 1rem; + font-weight: bold; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + cursor: pointer; + transition: all 0.2s ease; +} + +.fld-btn :hover { + transform: translateY(-3px); +} + + +/*더미 체크용*/ +.dummy-scroll-test { + overscroll-behavior: none; +} + +.dummy-box { + height: 150px; + background-color: var(--normal-normal); + margin: 1rem 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + border: 1px solid var(--normal-dark); +} + + diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css index e7b8602..3cea11d 100644 --- a/wwwroot/css/app.css +++ b/wwwroot/css/app.css @@ -65,42 +65,67 @@ a, .btn-link { content: "An error has occurred." } -.loading-progress { - position: relative; - display: block; - width: 8rem; - height: 8rem; - margin: 20vh auto 1rem auto; + +/* 전체 화면을 덮는 로딩 오버레이 */ +.loading-overlay { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: #f0f0f0; + display: flex; + align-items: center; + justify-content: center; } - .loading-progress circle { - fill: none; - stroke: #e0e0e0; - stroke-width: 0.6rem; - transform-origin: 50% 50%; - transform: rotate(-90deg); - } - - .loading-progress circle:last-child { - stroke: #1b6ec2; - stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; - } - -.loading-progress-text { - position: absolute; - text-align: center; - font-weight: bold; - inset: calc(20vh + 3.25rem) 0 auto 0.2rem; +/* 기존 코드 유지 */ +.custom-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } - .loading-progress-text:after { - content: var(--blazor-load-percentage-text, "Loading"); - } +/* 이후 동일한 스타일 유지 */ + +/*.loading-progress {*/ +/* position: relative;*/ +/* display: block;*/ +/* width: 8rem;*/ +/* height: 8rem;*/ +/* margin: 20vh auto 1rem auto;*/ +/*}*/ -code { - color: #c02d76; -} +/* .loading-progress circle {*/ +/* fill: none;*/ +/* stroke: #e0e0e0;*/ +/* stroke-width: 0.6rem;*/ +/* transform-origin: 50% 50%;*/ +/* transform: rotate(-90deg);*/ +/* }*/ + +/* .loading-progress circle:last-child {*/ +/* stroke: #1b6ec2;*/ +/* stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;*/ +/* transition: stroke-dasharray 0.05s ease-in-out;*/ +/* }*/ + +/*.loading-progress-text {*/ +/* position: absolute;*/ +/* text-align: center;*/ +/* font-weight: bold;*/ +/* inset: calc(20vh + 3.25rem) 0 auto 0.2rem;*/ +/*}*/ + +/* .loading-progress-text:after {*/ +/* content: var(--blazor-load-percentage-text, "Loading");*/ +/* }*/ + +/*code {*/ +/* color: #c02d76;*/ +/*}*/ :root { @@ -148,3 +173,66 @@ code { --text-black: #000000; --text-border: #C6C6C6; } + +/* Progress Icon */ + +.custom-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + background: #f0f0f0; +} + +.logo-mask { + position: relative; + width: 192px; + height: 192px; + mask-image: url('/logo.png'); + mask-size: cover; + -webkit-mask-image: url('/logo.png'); + -webkit-mask-size: cover; +} + + +.logo-mask img { + visibility: hidden; + width: 100%; + height: 100%; +} + +.logo-progress { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0%; + background-color: black; + animation: progressFill 3s linear forwards; +} + +@keyframes progressFill { + from { + width: 0%; + } + to { + width: 100%; + } +} + +.loading-text { + margin-top: 20px; + font-size: 1.2em; + color: #333; + animation: blink 1.2s infinite; +} + +@keyframes blink { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} diff --git a/wwwroot/favicon.png b/wwwroot/favicon.png index 8422b59..6c18ce7 100644 Binary files a/wwwroot/favicon.png and b/wwwroot/favicon.png differ diff --git a/wwwroot/index.html b/wwwroot/index.html index e1a6f39..b674c01 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -23,25 +23,52 @@ - -
- - - - - -
+ + +
+
+
+ logo +
+
+ +
Loading...
+
+ +
An unhandled error has occurred. Reload 🗙
+ - + + + + diff --git a/wwwroot/logo.png b/wwwroot/logo.png new file mode 100644 index 0000000..f0762e3 Binary files /dev/null and b/wwwroot/logo.png differ