반응형 수정정
This commit is contained in:
@@ -77,31 +77,32 @@ export function Footer() {
|
||||
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
|
||||
|
||||
return (
|
||||
<footer className="flex w-full shrink-0 items-start border-t border-solid border-border bg-background px-6 pt-4 pb-1 text-foreground">
|
||||
<div className="w-[55%]">
|
||||
<h6 className="mb-4 text-2xl font-bold">{siteInfo?.siteNm ?? ""}</h6>
|
||||
<p className="my-1 text-xl opacity-60">{siteInfo?.siteAddr ?? ""}</p>
|
||||
<p className="my-1 text-xl opacity-60">
|
||||
<footer className="flex flex-col sm:flex-row w-full shrink-0 items-start border-t border-solid border-border bg-background px-3 sm:px-6 pt-4 pb-1 text-foreground">
|
||||
<div className="w-full sm:w-[55%] mb-4 sm:mb-0">
|
||||
<h6 className="mb-2 sm:mb-4 text-lg sm:text-xl md:text-2xl font-bold">{siteInfo?.siteNm ?? ""}</h6>
|
||||
<p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.siteAddr ?? ""}</p>
|
||||
<p className="my-1 text-sm sm:text-base md:text-xl opacity-60">
|
||||
전화: {siteInfo?.telNo ?? ""} / 팩스: {siteInfo?.faxNumber ?? ""}
|
||||
</p>
|
||||
<p className="my-1 text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
|
||||
<p className="my-1 text-sm sm:text-base md:text-xl opacity-60">{siteInfo?.lwndCn ?? ""}</p>
|
||||
</div>
|
||||
<div className="flex w-[45%] flex-col">
|
||||
<div className="flex justify-end gap-4">
|
||||
<span className="text-xl">개인정보처리방침</span>
|
||||
<span className="text-xl">이용약관</span>
|
||||
<span className="text-xl">사이트맵</span>
|
||||
<span className="text-xl">고객센터</span>
|
||||
<div className="flex w-full sm:w-[45%] flex-col">
|
||||
<div className="flex flex-wrap justify-start sm:justify-end gap-2 sm:gap-4 mb-4 sm:mb-0">
|
||||
<span className="text-sm sm:text-base md:text-xl">개인정보처리방침</span>
|
||||
<span className="text-sm sm:text-base md:text-xl">이용약관</span>
|
||||
<span className="text-sm sm:text-base md:text-xl">사이트맵</span>
|
||||
<span className="text-sm sm:text-base md:text-xl">고객센터</span>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<Carousel
|
||||
plugins={[plugin.current]}
|
||||
opts={{ loop: true }}
|
||||
className="relative my-8 h-24"
|
||||
>
|
||||
<CarouselContent>
|
||||
{mainBanners && mainBanners.length > 0 ? (
|
||||
plugins={[plugin.current]}
|
||||
opts={{ loop: true }}
|
||||
className="relative my-4 sm:my-8 h-20 sm:h-24"
|
||||
>
|
||||
<CarouselContent>
|
||||
{mainBanners && mainBanners.length > 0 ? (
|
||||
mainBanners.map((banner) => (
|
||||
<CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/3">
|
||||
<CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/2 sm:basis-1/3">
|
||||
<BannerImage
|
||||
atflCd={banner.atflCd}
|
||||
bnrSn={banner.bnrSn}
|
||||
@@ -110,16 +111,17 @@ export function Footer() {
|
||||
</CarouselItem>
|
||||
))
|
||||
) : (
|
||||
<CarouselItem className="basis-1/3">
|
||||
<div className="relative flex h-24 w-full items-center justify-center bg-accent">
|
||||
<div className="text-sm text-muted-foreground">배너가 없습니다</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
)}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
|
||||
<CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
|
||||
</Carousel>
|
||||
<CarouselItem className="basis-1/2 sm:basis-1/3">
|
||||
<div className="relative flex h-20 sm:h-24 w-full items-center justify-center bg-accent">
|
||||
<div className="text-sm text-muted-foreground">배너가 없습니다</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
)}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
|
||||
<CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -147,16 +147,16 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-30 box-border flex flex-col sm:flex-row h-auto sm:h-[6rem] w-full items-center justify-between border-b border-solid border-border bg-background">
|
||||
<header className="sticky top-0 z-30 box-border flex flex-col sm:flex-row h-[6rem] w-full items-center justify-between border-b border-solid border-border bg-background">
|
||||
<div className="flex items-center px-2 sm:px-4 md:px-6 w-full sm:w-auto justify-between sm:justify-start">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<SidebarTrigger className="size-8 sm:size-10 md:size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
|
||||
<h1 className="flex flex-col items-center gap-1 sm:gap-2">
|
||||
<SidebarTrigger className="size-12 !bg-transparent p-2 hover:!bg-accent [&>svg]:!size-full [&>svg]:text-foreground" />
|
||||
<h1 className="flex flex-col items-center gap-2">
|
||||
{mounted ? (
|
||||
<img
|
||||
ref={logoRef}
|
||||
src={getLogoImage()}
|
||||
className="h-[2rem] sm:h-[2.5rem] md:h-[3rem]"
|
||||
className="h-[3rem]"
|
||||
alt="logo"
|
||||
onLoad={() => {
|
||||
if (logoRef.current) {
|
||||
@@ -165,10 +165,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Skeleton className="h-[2rem] sm:h-[2.5rem] md:h-[3rem] w-[10rem] sm:w-[12rem] md:w-[15rem]" />
|
||||
<Skeleton className="h-[3rem] w-[15rem]" />
|
||||
)}
|
||||
<span
|
||||
className="text-xs sm:text-sm md:text-[1.2rem] font-semibold text-foreground"
|
||||
className="text-[1.2rem] font-semibold text-foreground"
|
||||
style={{
|
||||
letterSpacing: logoWidth > 0 ? `${(logoWidth - 120) / (siteInfo?.siteNm?.length || 1)}px` : '0.05em'
|
||||
}}
|
||||
@@ -183,16 +183,16 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
|
||||
{mounted && (
|
||||
<Button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="m-0 flex h-[2.5rem] items-center !bg-background px-2 py-0 text-label"
|
||||
className="m-0 flex h-[3rem] items-center !bg-background px-3 py-0 text-label"
|
||||
>
|
||||
<i className={`diveicon ${isMobileMenuOpen ? 'di-close' : 'di-menu'} static text-xl`} />
|
||||
<i className={`diveicon ${isMobileMenuOpen ? 'di-menu-close-fill' : 'di-menu-open-fill'} static text-4xl`} />
|
||||
</Button>
|
||||
)}
|
||||
{mounted && isLoggedIn && (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="group m-0 flex h-[2.5rem] items-center !bg-background px-2 py-0 text-label">
|
||||
<i className="diveicon di-account-circle static translate-y-0.5 pr-1 text-xl" />
|
||||
<Button className="group m-0 flex h-[3rem] items-center !bg-background px-2 py-0 text-label">
|
||||
<i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
|
||||
<span className="text-xs hidden xs:inline">{userInfo?.userName}</span>
|
||||
<i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
|
||||
</Button>
|
||||
@@ -223,7 +223,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
|
||||
<a
|
||||
key={site.siteId}
|
||||
href={site.dmnAddr}
|
||||
className="text-base font-medium text-foreground hover:text-primary transition-colors w-full text-center py-2"
|
||||
className="text-xl font-medium text-foreground hover:text-primary transition-colors w-full text-center py-2"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
|
||||
Reference in New Issue
Block a user