*@
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 @@
-
-
-
-
-
+
+
+
+
+
+

+
+
+
+
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