From 7433b32b3b28c8644fabeffc97d154c889c443e3 Mon Sep 17 00:00:00 2001 From: Seonkyu_Kim Date: Thu, 24 Apr 2025 17:57:11 +0900 Subject: [PATCH] =?UTF-8?q?[=E2=9C=A8]=20=ED=8C=8C=EB=B9=84=EC=BD=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Program/Layout/MainLayout.razor | 44 ++++++-- Program/Layout/MainLayout.razor.css | 161 ++++++++++++++++++++++++++-- wwwroot/css/app.css | 150 ++++++++++++++++++++------ wwwroot/favicon.png | Bin 1148 -> 849 bytes wwwroot/index.html | 45 ++++++-- wwwroot/logo.png | Bin 0 -> 1393079 bytes 6 files changed, 343 insertions(+), 57 deletions(-) create mode 100644 wwwroot/logo.png 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

*@ + @*
*@ + @*
*@ + +
+
≡
+
+
+ 메뉴 1 + 메뉴 2 + 메뉴 3 +
+
+ +
-
- @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 8422b59695935d180d11d5dbe99653e711097819..6c18ce7f7618c0cb17f97ac64f365498256f5c51 100644 GIT binary patch delta 827 zcmV-B1H}CN2+;}ak-}22vP@wiC@d=2`6r-OiUa}%Yy?FmNE*>b*5YN~?9R@+$70@O zv&+oxumLr&2X681pYxsb-TU49;0Q;!%MgIM|60UhkO8_Af`0&z=lODs@r{;jR>E*6 zfp?L_7{4pa(nV36ZUtlqtjhov78XvHWqDuQw@dge>M|hZdA^Kv!ggc(b-**MYw|o_ z4k7!-cJHtP##3JrWHtsp-R*WC1)3=w8PLqn&p%8Ep8=iWaJV^<^`NM&i-#mX*IEve z?rECl+!T%gG=GbWi%VISeIa-N+}NI2J+lZv(y9~+>^}H!unlLHmX;P7WnrAw3`o6R zuNV%S%aV>`8umFW`w37>z5uKOmh`Qp7XSr?-sa}!3Zt`-wXNy(dPP-LmnA)A-x9UI z!zsuB=Xw6Dq(=bR{&-_!<7?YL0SR=Dosw+2-R`|rb$|0Kg>X9IA8gh%%1v_^0SQ3T zg;DHuqps@@+p)KSAn{~bmM4Mjq9~qdn&yh6QzZB2LRgV}wcVYm6*Eo1*!>C6sn+4U zF~*mRqFe)hw9{`$q?BHZF`l)#D(N^F;|o<)T?g*p#~`r(y>8&Vq|EpaNxuUhArR`> zUcVQo+9*T1ReGIHM}xs&rVIq2i7`GX>G_cqe;z{ko;DRWec*lD zTZm+POGw7o>bkxNbbypnN+TcAlvq;*0IW*km~pcGK~+`1+I~jTMTzruUH=LGR44$M z?VEF1b_N)->$Vd>uszeIH$Ksw7~?NRQEbN;uYa^-d&^1PZg;sTil!(^#~9DH{c~+2 z&+}JXj;*379-m}-?-|H|VT|!bDLe)s@y>1H#?NX4sH&=KF~*<4>vdhf*YXX=yte0& z<^TqR!Nd&g6_5Z@O4mc+P221Je*cqpY&aoX057GK{%XI|?L1kQed&~9N@=s(-M+ED z4m2G6i2b{m_EQnq*{i+IC(VT&_tSV9{%`J&aD*cO`~#u=C|M{;s)PUl002ovPDHLk FV1mopnU??n delta 1128 zcmV-u1eg2K2K)$+BYy-#Nkl9h26h2-Cs%i*@Moc3?#6qJID|D#|3|2Hn z7gTIYEkr|%Xjp);YgvFmB&0#2E2b=|kVr)lMv9=KqwN&%obTp-$<51T%rx*NCwceh z-E+=&e(oLO`@Z~7gybJ#U|^tB2Pai}RN@5%1qsZ1e@R(XC4Z)}#hH$)EK*sna+7Na z!Jk&XUI!3KG?YjDAQh4sWtLh=_x_aAhd)U7>u)lzqEIaDlI;8{mydrGpzT_p%qlOCYz9Cn zXxm~vh)52&rGMVR%kDSdW#xvk0#JEl?Q0>x01eM*020K~7N%Fp&M)Sme*Gp~1voU_ z$2F0KON#_(J)eS6?wT>sA`%LEZL@V9ExmsJleD+>OFo!2cZB)3(XtT)of=u>u?mC+ zBoH$!B3oU>BS(1>nK8`unqCbG`_4`==Y<^QaVp=d@qc>x=)_>!S==FkTu62**xoy{fKhy8~E;*$~i|Y+C1xh>f>$JLl9F)UTqa+)UCt$63a>)Fb z1Ke=l_kV1i%dM-u0*u##7OxI7wwyCGpS?4UBFAr(%GBv5j$jS@@t@iI8?ZqE36I^4 zt+P^J9D^ELbS5KMtZ{Qn#JnSd$15nJ$ggkF%I4yUQC+BjDF z^}AtB7w348EL>7#sAsLWs}ndp8^DsAcOIL9TYny?aRN#Zo*Zf(T@nst^PcpB-Z%{~ z)ctLsOlxBkIK+eG1q~o=LSu?cLIN;1(AR@?PEXMz2>eGjgQ(R~MYt3XRC$c^o@*hy z8xQ9lUZ`uRbJRR _z{glespUbPj33%w+ha#GK#BP5+pCsh2#&CmT6vmg2m)lYql z4}Wh@Vr--?+UX~seZstv?zeqry=s1k-+J*a=lnDASJ+Q+*C9PBWw?7>8KRT8dXL~P zZ`KP4*x58$!!lfURCO`KS(0Fi6_XX{5t}sTEIE|BQh#3vCj>3bb|~Px4X8gj2?x3N zcvj^!5|r;hH-#|=dZ;`I&t~H(74&o}Vt;!@v%%{I2WM5fKpjB0JbGoS%+p-K9fD?M zF~+<#g5ayzF2ay7L&3zX-e!`E6@s^3#%kaj0ZE94#Q!W-pzBExtO8x^u`M|TWuOp1 z^MNsS%U&9fl8?U#;Z{kL-J`c5_Ml>*oUyN=@=OT6h@!SdhT&~<>>V$poRY3`O<~ye zI;j$6>~k@IMwD42=8$$!+R^@5o6HX(*n~