즈금 더 안정화

2025-10-15 12:50:05 +00:00
parent 9c0aeb73e8
commit b5802bc398
4 changed files with 31 additions and 19 deletions
--- a/app/components/NavBar.tsx
+++ b/app/components/NavBar.tsx
@@ -1,6 +1,8 @@
+"use client";
 import Link from 'next/link';
 import Image from 'next/image';
 import { signOut } from "next-auth/react";
+import { usePathname } from 'next/navigation';

 interface NavBarProps {
  isOpen: boolean;
@@ -9,6 +11,7 @@ interface NavBarProps {
 }

 const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
+  const pathname = usePathname();
  return (
    <nav onClick={(e) => e.stopPropagation()} className={`
      transition-all duration-300 max-lg:transition-none
@@ -48,17 +51,17 @@ const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
        <div className="flex-0">
          <ul>
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
-              <Link href="/usr/1_dashboard" className="flex items-center gap-3 p-2" onClick={() => setIsOpen(false)}>
+              <Link href="/usr/1_dashboard" className={`flex items-center gap-3 p-2 rounded-lg ${pathname?.startsWith('/usr/1_dashboard') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M11.6758 3.6582C11.9147 3.44753 12.2806 3.44753 12.5195 3.6582L20.3936 10.5996C20.5258 10.7162 20.5976 10.8801 20.5977 11.0479V19.8945C20.5974 20.2155 20.3307 20.5 19.9717 20.5H4.22363C3.86456 20.5 3.59787 20.2155 3.59766 19.8945V11.0479C3.59768 10.8801 3.66953 10.7162 3.80176 10.5996L11.6758 3.6582Z" strokeWidth="2.2" className="group-hover:stroke-primary-normal stroke-black  " />
+                  <path d="M11.6758 3.6582C11.9147 3.44753 12.2806 3.44753 12.5195 3.6582L20.3936 10.5996C20.5258 10.7162 20.5976 10.8801 20.5977 11.0479V19.8945C20.5974 20.2155 20.3307 20.5 19.9717 20.5H4.22363C3.86456 20.5 3.59787 20.2155 3.59766 19.8945V11.0479C3.59768 10.8801 3.66953 10.7162 3.80176 10.5996L11.6758 3.6582Z" strokeWidth="2.2" className={`group-hover:stroke-primary-normal ${pathname?.startsWith('/usr/1_dashboard') ? 'stroke-primary-normal' : 'stroke-black'}`} />
                </svg>
                <span>대시보드</span>
              </Link>
            </li>
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
-              <Link href="/usr/2_mychannel" className="flex items-center gap-2 p-2 group-hover:text-primary-normal" onClick={() => setIsOpen(false)}>
+              <Link href="/usr/2_mychannel" className={`flex items-center gap-2 p-2 rounded-lg group-hover:text-primary-normal ${pathname?.startsWith('/usr/2_mychannel') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path fillRule="evenodd" clipRule="evenodd" d="M19.3419 4.18083C19.2127 4.12797 19.0743 4.10137 18.9347 4.10258C18.7951 4.1038 18.6572 4.1328 18.5289 4.18789C18.4007 4.24299 18.2847 4.32308 18.1877 4.42348L18.1749 4.43652L9.45656 13.1548V14.6411H10.9428L19.6611 5.92279L19.6742 5.90998C19.7746 5.813 19.8547 5.697 19.9098 5.56874C19.9649 5.44049 19.9939 5.30254 19.9951 5.16295C19.9963 5.02337 19.9697 4.88494 19.9168 4.75573C19.864 4.62654 19.7859 4.50916 19.6872 4.41045C19.5885 4.31175 19.4711 4.23369 19.3419 4.18083ZM18.9164 2.00012C19.3352 1.99648 19.7505 2.07628 20.1381 2.23485C20.5257 2.39343 20.8778 2.62761 21.1739 2.92373C21.47 3.21985 21.7042 3.57198 21.8628 3.95957C22.0214 4.34716 22.1012 4.76246 22.0975 5.18122C22.0939 5.59998 22.0069 6.01383 21.8416 6.3986C21.6777 6.78029 21.4399 7.12579 21.1421 7.41528L12.1216 16.4357C11.9245 16.6329 11.6571 16.7436 11.3783 16.7436H8.40529C7.82469 16.7436 7.35402 16.273 7.35402 15.6924V12.7194C7.35402 12.4406 7.46477 12.1732 7.66193 11.976L16.6823 2.95559C16.9718 2.65776 17.3174 2.42001 17.6991 2.25605C18.0838 2.09076 18.4977 2.00376 18.9164 2.00012ZM3.02139 5.05211C3.61284 4.46066 4.41503 4.12838 5.25147 4.12838H10.5078C11.0884 4.12838 11.5591 4.59905 11.5591 5.17965C11.5591 5.76025 11.0884 6.23092 10.5078 6.23092H5.25147C4.97266 6.23092 4.70526 6.34168 4.50811 6.53883C4.31096 6.73599 4.2002 7.00338 4.2002 7.2822V18.8462C4.2002 19.125 4.31096 19.3924 4.50811 19.5895C4.70526 19.7867 4.97266 19.8975 5.25147 19.8975H16.8155C17.0943 19.8975 17.3617 19.7867 17.5588 19.5895C17.756 19.3924 17.8667 19.125 17.8667 18.8462V13.5898C17.8667 13.0092 18.3374 12.5386 18.918 12.5386C19.4986 12.5386 19.9693 13.0092 19.9693 13.5898V18.8462C19.9693 19.6826 19.637 20.4848 19.0455 21.0763C18.4541 21.6677 17.6519 22 16.8155 22H5.25147C4.41503 22 3.61284 21.6677 3.02139 21.0763C2.42993 20.4848 2.09766 19.6826 2.09766 18.8462V7.2822C2.09766 6.44575 2.42993 5.64357 3.02139 5.05211Z" className="group-hover:fill-primary-normal stroke-none fill-black"/>
+                  <path fillRule="evenodd" clipRule="evenodd" d="M19.3419 4.18083C19.2127 4.12797 19.0743 4.10137 18.9347 4.10258C18.7951 4.1038 18.6572 4.1328 18.5289 4.18789C18.4007 4.24299 18.2847 4.32308 18.1877 4.42348L18.1749 4.43652L9.45656 13.1548V14.6411H10.9428L19.6611 5.92279L19.6742 5.90998C19.7746 5.813 19.8547 5.697 19.9098 5.56874C19.9649 5.44049 19.9939 5.30254 19.9951 5.16295C19.9963 5.02337 19.9697 4.88494 19.9168 4.75573C19.864 4.62654 19.7859 4.50916 19.6872 4.41045C19.5885 4.31175 19.4711 4.23369 19.3419 4.18083ZM18.9164 2.00012C19.3352 1.99648 19.7505 2.07628 20.1381 2.23485C20.5257 2.39343 20.8778 2.62761 21.1739 2.92373C21.47 3.21985 21.7042 3.57198 21.8628 3.95957C22.0214 4.34716 22.1012 4.76246 22.0975 5.18122C22.0939 5.59998 22.0069 6.01383 21.8416 6.3986C21.6777 6.78029 21.4399 7.12579 21.1421 7.41528L12.1216 16.4357C11.9245 16.6329 11.6571 16.7436 11.3783 16.7436H8.40529C7.82469 16.7436 7.35402 16.273 7.35402 15.6924V12.7194C7.35402 12.4406 7.46477 12.1732 7.66193 11.976L16.6823 2.95559C16.9718 2.65776 17.3174 2.42001 17.6991 2.25605C18.0838 2.09076 18.4977 2.00376 18.9164 2.00012ZM3.02139 5.05211C3.61284 4.46066 4.41503 4.12838 5.25147 4.12838H10.5078C11.0884 4.12838 11.5591 4.59905 11.5591 5.17965C11.5591 5.76025 11.0884 6.23092 10.5078 6.23092H5.25147C4.97266 6.23092 4.70526 6.34168 4.50811 6.53883C4.31096 6.73599 4.2002 7.00338 4.2002 7.2822V18.8462C4.2002 19.125 4.31096 19.3924 4.50811 19.5895C4.70526 19.7867 4.97266 19.8975 5.25147 19.8975H16.8155C17.0943 19.8975 17.3617 19.7867 17.5588 19.5895C17.756 19.3924 17.8667 19.125 17.8667 18.8462V13.5898C17.8667 13.0092 18.3374 12.5386 18.918 12.5386C19.4986 12.5386 19.9693 13.0092 19.9693 13.5898V18.8462C19.9693 19.6826 19.637 20.4848 19.0455 21.0763C18.4541 21.6677 17.6519 22 16.8155 22H5.25147C4.41503 22 3.61284 21.6677 3.02139 21.0763C2.42993 20.4848 2.09766 19.6826 2.09766 18.8462V7.2822C2.09766 6.44575 2.42993 5.64357 3.02139 5.05211Z" className={`stroke-none ${pathname?.startsWith('/usr/2_mychannel') ? 'fill-primary-normal' : 'fill-black'} group-hover:fill-primary-normal`}/>
                </svg>
                <span>마이채널관리</span>
              </Link>
@@ -76,10 +79,10 @@ const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
              </Link>
            </li> */}
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
-              <Link href="/usr/4_noticeboard" className="flex items-center gap-2 p-2 group-hover:text-primary-normal" onClick={() => setIsOpen(false)}>
+              <Link href="/usr/4_noticeboard" className={`flex items-center gap-2 p-2 rounded-lg group-hover:text-primary-normal ${pathname?.startsWith('/usr/4_noticeboard') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <div className="w-[25px] h-[24px] flex items-center justify-center">
                  <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fillRule="evenodd" clipRule="evenodd" d="M0.446617 1.42007C1.79696 0.522928 3.58036 0 5.5 0C7.16769 0 8.73257 0.394673 10 1.08651C11.2674 0.394673 12.8323 0 14.5 0C16.4207 0 18.2031 0.522959 19.5534 1.42007C19.8323 1.60541 20 1.91809 20 2.253V15.253C20 15.6215 19.7973 15.9602 19.4726 16.1343C19.1478 16.3084 18.7536 16.2899 18.4466 16.0859C17.4609 15.431 16.0733 15 14.5 15C12.9276 15 11.539 15.4311 10.5534 16.0859C10.2181 16.3087 9.78191 16.3087 9.44662 16.0859C8.46096 15.4311 7.07236 15 5.5 15C3.92764 15 2.53904 15.4311 1.55338 16.0859C1.24644 16.2899 0.852214 16.3084 0.527445 16.1343C0.202675 15.9602 0 15.6215 0 15.253V2.253C0 1.91809 0.167658 1.60541 0.446617 1.42007ZM9 2.81949C8.06033 2.31667 6.84766 2 5.5 2C4.15234 2 2.93967 2.31667 2 2.81949V13.6261C3.0538 13.2225 4.24792 13 5.5 13C6.75208 13 7.9462 13.2225 9 13.6261V2.81949ZM11 13.6261C12.0538 13.2225 13.2479 13 14.5 13C15.7527 13 16.9465 13.2224 18 13.626V2.81947C17.0605 2.31664 15.8485 2 14.5 2C13.1523 2 11.9397 2.31667 11 2.81949V13.6261Z" className="stroke-none group-hover:fill-primary-normal fill-black" />
+                    <path fillRule="evenodd" clipRule="evenodd" d="M0.446617 1.42007C1.79696 0.522928 3.58036 0 5.5 0C7.16769 0 8.73257 0.394673 10 1.08651C11.2674 0.394673 12.8323 0 14.5 0C16.4207 0 18.2031 0.522959 19.5534 1.42007C19.8323 1.60541 20 1.91809 20 2.253V15.253C20 15.6215 19.7973 15.9602 19.4726 16.1343C19.1478 16.3084 18.7536 16.2899 18.4466 16.0859C17.4609 15.431 16.0733 15 14.5 15C12.9276 15 11.539 15.4311 10.5534 16.0859C10.2181 16.3087 9.78191 16.3087 9.44662 16.0859C8.46096 15.4311 7.07236 15 5.5 15C3.92764 15 2.53904 15.4311 1.55338 16.0859C1.24644 16.2899 0.852214 16.3084 0.527445 16.1343C0.202675 15.9602 0 15.6215 0 15.253V2.253C0 1.91809 0.167658 1.60541 0.446617 1.42007ZM9 2.81949C8.06033 2.31667 6.84766 2 5.5 2C4.15234 2 2.93967 2.31667 2 2.81949V13.6261C3.0538 13.2225 4.24792 13 5.5 13C6.75208 13 7.9462 13.2225 9 13.6261V2.81949ZM11 13.6261C12.0538 13.2225 13.2479 13 14.5 13C15.7527 13 16.9465 13.2224 18 13.626V2.81947C17.0605 2.31664 15.8485 2 14.5 2C13.1523 2 11.9397 2.31667 11 2.81949V13.6261Z" className={`stroke-none ${pathname?.startsWith('/usr/4_noticeboard') ? 'fill-primary-normal' : 'fill-black'} group-hover:fill-primary-normal`} />
                  </svg>
                </div>
                <span>공지 게시판</span>
@@ -90,9 +93,9 @@ const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
        <div className="flex-1 flex flex-col justify-end mb-10">
          {user?.email === 'wsx204@naver.com' && (
            <div className="mb-4">
-              <Link href="/admin" className="flex items-center gap-2 p-2 border-1 border-[#e6e9ef] rounded-lg hover:bg-[#F0F0F0]" onClick={() => setIsOpen(false)}>
+              <Link href="/admin" className={`flex items-center gap-2 p-2 border-1 border-[#e6e9ef] rounded-lg hover:bg-[#F0F0F0] ${pathname?.startsWith('/admin') ? 'bg-[#FFF3F2] text-primary-normal border-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" className="stroke-none fill-black"/>
+                  <path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" className={`${pathname?.startsWith('/admin') ? 'fill-primary-normal' : 'fill-black'} stroke-none`}/>
                </svg>
                <span className="text-lg font-bold">관리자</span>
              </Link>
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,6 +12,7 @@

@layer base{
  html,body{
+    @apply m-0 p-0; /* remove default browser margin/padding to avoid gaps */
    @apply h-full w-full;
    @apply min-w-[500px] min-h-[820px];
    @apply bg-[#F5F5F5];
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,23 +11,31 @@ export default function Home() {
    signIn("google")
  }
  return (
-    <div className="bg-[url('/imsi_bg.png')] bg-cover bg-center h-screen">
-      {/* <video className="bg-cover bg-center h-screen" autoPlay loop muted>
-        <source src="/bgmv.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </video> */}
+    <div className="relative min-h-screen overflow-hidden bg-black">
+      <video
+        className="fixed inset-0 w-full h-full object-cover z-0"
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        poster="/imsi_bg.png"
+      >
+        <source src="/everfactory.mp4" type="video/mp4" />
+      </video>
      <div className="
-      h-screen
      pt-5 pb-5

      w-full sm:w-1/2 xl:w-1/3
      transition-width 

-      fixed right-0
+      fixed right-0 top-0 bottom-0 z-10
      shadow-lg

      min-w-[500px] min-h-[500px]
-      " >
+      "
+      style={{ height: '100dvh', paddingBottom: 'max(env(safe-area-inset-bottom), 1.25rem)' }}
+      >
        <div
        className="
        bg-black/30 backdrop-blur-lg
@@ -46,9 +54,9 @@ export default function Home() {
              <div className="text-white text-4xl font-bold text-center mb-3">콘텐츠 음원 수익<br/>에버팩토리에서 편리하게</div>
              {/* <div className="text-white text-md text-center mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis maximus</div> */}
            </div>
-            <div>
-              <div className="text-white text-md text-center mb-3 cursor-pointer ">Ready to travel with us?<br/> Enter your email to create or restart your membership.</div>
-              <div className="pointer rounded-full bg-white p-2 flex items-center justify-center gap-2 cursor-pointer" onClick={handleSignIn}> <FcGoogle/> continue with google</div>
+            <div className="w-full">
+              <div className="text-white text-md text-center mb-3 cursor-pointer ">Ready to travel with us?</div>
+              <div className="pointer rounded-full bg-white p-2 flex items-center justify-center gap-2 cursor-pointer w-full" onClick={handleSignIn}> <FcGoogle/> continue with google</div>
            </div>
          </div>

--- a/public/everfactory.mp4
+++ b/public/everfactory.mp4