@coldsurf/ocean-road 1.13.2

package/src/next/app-footer/app-footer.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import { Text } from '@/base';
+import { AppLogo, AppStoreButton, SNSIcon } from '@/extensions';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import Link from 'next/link';
+import { GlobalLink } from '../global-link';
+import { NewTabLink } from '../new-tab-link';
+
+const FooterContainer = styled.footer`
+  display: flex;
+  flex-direction: column;
+  margin-top: 15rem;
+`;
+
+const FooterInnerContainer = styled.div`
+  margin: 0 auto;
+  max-width: 100%;
+  min-width: 100%;
+
+  ${media['xx-large'](css`
+    margin-left: 1rem;
+    margin-right: 1rem;
+    min-width: unset;
+    max-width: 100%;
+  `)}
+`;
+
+const FooterTopContainer = styled(FooterInnerContainer)`
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 1.5rem;
+
+  ${media.medium(css`
+    flex-direction: column;
+  `)}
+`;
+
+const FooterMiddleContainer = styled(FooterInnerContainer)`
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+`;
+
+const FooterBottomContainer = styled(FooterInnerContainer)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+
+  border-top: 1px solid ${semantics.color.border[2]};
+
+  ${media.medium(css`
+    flex-direction: column;
+    align-items: flex-start;
+  `)}
+`;
+
+const FooterText = styled(Text)`
+  margin: unset;
+  color: ${semantics.color.foreground[1]};
+`;
+
+const StyledLinksContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-left: auto;
+
+  ${media.medium(css`
+    flex-direction: column;
+    margin-left: unset;
+    margin-top: 1.5rem;
+  `)}
+`;
+
+const StyledSNSLinksContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-left: 2.5rem;
+
+  ${media.medium(css`
+    margin-left: unset;
+    margin-top: 1.5rem;
+  `)}
+`;
+
+const StyledSNSIcon = styled(SNSIcon)`
+  width: 1.5rem;
+  height: 1.5rem;
+  color: ${semantics.color.foreground[1]};
+  fill: ${semantics.color.foreground[1]};
+  cursor: pointer;
+
+  ${media.medium(css`
+    width: 1.25rem;
+    height: 1.25rem;
+  `)}
+`;
+
+const StyledSNSLogo = ({ social, url }: { social: 'instagram' | 'x'; url: string }) => {
+  return (
+    <NewTabLink href={url}>
+      <StyledSNSIcon social={social} />
+    </NewTabLink>
+  );
+};
+
+const StyledAppLogo = styled(AppLogo)`
+  width: 5rem;
+  height: 5rem;
+
+  ${media.medium(css`
+    margin-left: -1rem;
+  `)}
+`;
+
+const StyledTopFooterMenuContainer = styled.div`
+  margin-left: 8rem;
+
+  ${media.medium(css`
+    margin-left: unset;
+    padding-right: unset;
+    margin-top: 2rem;
+  `)}
+`;
+
+const StyledTopFooterMenuText = styled(Text)`
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: ${semantics.color.foreground[1]};
+  margin: unset;
+  flex: 1;
+`;
+
+const StyledTopFooterSubMenuText = styled(Text)`
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: ${semantics.color.foreground[3]};
+  margin: unset;
+  flex: 1;
+  margin-top: 0.5rem;
+`;
+
+const footerMenuItems = [
+  {
+    sectionTitle: 'About',
+    items: [
+      {
+        title: 'Mission',
+        href: 'https://coldsurf.io/about',
+      },
+      {
+        title: 'Blog',
+        href: 'https://blog.coldsurf.io',
+      },
+    ],
+  },
+  {
+    sectionTitle: 'Support',
+    items: [
+      {
+        title: 'Buy me a coffee',
+        href: 'https://ko-fi.com/coldsurf',
+      },
+    ],
+  },
+  {
+    sectionTitle: 'Work with us',
+    items: [
+      {
+        title: 'Partners',
+        href: 'https://coldsurf.io/partners',
+      },
+      {
+        title: 'Makers',
+        href: 'https://coldsurf.io/makers',
+      },
+    ],
+  },
+] as const;
+
+export function AppFooter({
+  appStoreUrl,
+  playStoreUrl,
+  instagramUrl,
+  xUrl,
+}: {
+  appStoreUrl: string;
+  playStoreUrl: string;
+  instagramUrl: string;
+  xUrl: string;
+}) {
+  return (
+    <FooterContainer>
+      <FooterTopContainer>
+        <GlobalLink href={'https://coldsurf.io'}>
+          <StyledAppLogo type="round" logoTheme="white-background" />
+        </GlobalLink>
+        <div style={{ flex: 1 }} />
+        {footerMenuItems.map((item) => {
+          return (
+            <StyledTopFooterMenuContainer key={item.sectionTitle}>
+              <StyledTopFooterMenuText as="p">{item.sectionTitle}</StyledTopFooterMenuText>
+              {item.items.map((item) => {
+                return (
+                  <Link key={item.href} href={item.href}>
+                    <StyledTopFooterSubMenuText as="p">{item.title}</StyledTopFooterSubMenuText>
+                  </Link>
+                );
+              })}
+            </StyledTopFooterMenuContainer>
+          );
+        })}
+      </FooterTopContainer>
+      <FooterMiddleContainer>
+        <NewTabLink href={appStoreUrl}>
+          <AppStoreButton store="app-store" />
+        </NewTabLink>
+        <NewTabLink href={playStoreUrl}>
+          <AppStoreButton store="google-play" />
+        </NewTabLink>
+      </FooterMiddleContainer>
+      <FooterBottomContainer>
+        <Text as="p" style={{ fontWeight: 'bold', margin: 'unset' }}>
+          &copy; 2026 COLDSURF, Inc.
+        </Text>
+        <StyledLinksContainer>
+          <GlobalLink href="https://coldsurf.io/privacy-policy">
+            <FooterText as="p">개인정보 처리방침</FooterText>
+          </GlobalLink>
+          <GlobalLink href="https://coldsurf.io/terms-of-service">
+            <FooterText as="p">이용약관</FooterText>
+          </GlobalLink>
+        </StyledLinksContainer>
+        <StyledSNSLinksContainer>
+          <StyledSNSLogo social="instagram" url={instagramUrl} />
+          <StyledSNSLogo social="x" url={xUrl} />
+        </StyledSNSLinksContainer>
+      </FooterBottomContainer>
+    </FooterContainer>
+  );
+}

package/src/next/app-footer/index.ts

@@ -0,0 +1 @@
+export * from './app-footer';

package/src/next/app-header/app-header.fixed-header.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { IconButton } from '@/base';
+import { AppHeader } from '@/extensions';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { commonHorizontalLayoutCss } from '@/utils/common-styles';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { AlignRight } from 'lucide-react';
+import { type ReactNode, memo } from 'react';
+import { AppHeaderLogo } from './app-header.logo';
+
+const HeaderContainer = styled(AppHeader.AnimatedHeader)<{ $headerHeight?: string }>`
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+
+  background-color: ${semantics.color.background[2]};
+
+  height: ${(props) => props.$headerHeight ?? '100px'};
+
+  ${commonHorizontalLayoutCss(['left', 'right'])}
+`;
+
+const MobileMenuContainer = styled.div`
+  display: none;
+
+  ${media['x-large'](css`
+    display: flex;
+  `)}
+`;
+
+const MobileMenuIcon = styled(AlignRight)`
+  color: ${semantics.color.foreground[3]};
+`;
+
+const MobileMenuOpener = ({
+  onClick,
+  leftAccessory,
+}: {
+  onClick?: () => void;
+  leftAccessory?: ReactNode;
+}) => {
+  return (
+    <MobileMenuContainer>
+      {leftAccessory}
+      <IconButton onClick={onClick}>
+        <MobileMenuIcon />
+      </IconButton>
+    </MobileMenuContainer>
+  );
+};
+
+export const FixedHeader = memo(
+  ({
+    zIndex,
+    onClickOpenDrawer,
+    mobileLeftAccessory,
+    HeaderMenuItemComponent,
+    logoRightAccessory,
+    headerHeight,
+  }: {
+    zIndex?: number;
+    onClickOpenDrawer?: () => void;
+    mobileLeftAccessory?: ReactNode;
+    HeaderMenuItemComponent: ReactNode;
+    logoRightAccessory?: ReactNode;
+    headerHeight?: string;
+  }) => {
+    const { headerAnimation } = AppHeader.useHeaderScrollAnimation();
+
+    return (
+      <HeaderContainer animation={headerAnimation} zIndex={zIndex} $headerHeight={headerHeight}>
+        <AppHeaderLogo logoRightAccessory={logoRightAccessory} />
+        {HeaderMenuItemComponent}
+        <MobileMenuOpener leftAccessory={mobileLeftAccessory} onClick={onClickOpenDrawer} />
+      </HeaderContainer>
+    );
+  }
+);
+
+FixedHeader.displayName = 'AppHeader.FixedHeader';

package/src/next/app-header/app-header.full-screen-mobile-accordion-drawer.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { Accordion, type AccordionProps, FullScreenModal } from '@/extensions';
+import { useIsMobileMenuOpen } from '@/extensions/app-header/app-header.hooks';
+import { usePreventScrollEffect } from '@/utils/use-prevent-scroll-effect';
+import { AnimatePresence, type Variants } from 'framer-motion';
+import { type ReactNode, useCallback } from 'react';
+import {
+  StyledFloatingHeaderCloseDrawerButton,
+  StyledFloatingHeaderCloseDrawerIcon,
+  StyledFullScreenMobileMenuBackground,
+} from './app-header.styled';
+
+type CommonProps<ItemT> = {
+  onClickClose?: (params: { isOpen: boolean }) => void;
+  ColorSchemeToggleComponent: ReactNode;
+} & AccordionProps<ItemT>;
+
+type FullScreenMobileMenuProps<ItemT> =
+  | ({
+      standalone: true;
+      isOpen: boolean;
+      zIndex?: number;
+    } & CommonProps<ItemT>)
+  | ({
+      standalone: false;
+    } & CommonProps<ItemT>);
+
+// @TODO: too many anti patterns. need to refactor
+const MobileMenuContent = <ItemT extends { accordionKey: string }>(
+  props: FullScreenMobileMenuProps<ItemT>
+) => {
+  // Animation variants
+  const menuVariants: Variants = {
+    hidden: {
+      x: '100%', // Start off-screen to the right
+    },
+    visible: {
+      x: 0, // Slide into view
+      transition: {
+        type: 'tween',
+        duration: 0.25,
+        stiffness: 60,
+        damping: 12,
+      },
+    },
+    exit: {
+      x: '100%', // Slide out to the right
+      transition: {
+        type: 'tween',
+        duration: 0.25,
+        stiffness: 60,
+        damping: 12,
+      },
+    },
+  };
+
+  const mobileMenuStore = useIsMobileMenuOpen();
+
+  const isOpen = props.standalone ? props.isOpen : mobileMenuStore.isMobileMenuOpen;
+
+  const handleClickClose = useCallback(() => {
+    props.onClickClose?.({
+      isOpen,
+    });
+    if (!props.standalone) {
+      if (isOpen) {
+        mobileMenuStore.closeMobileMenu();
+      } else {
+        mobileMenuStore.openMobileMenu();
+      }
+    }
+  }, [isOpen, mobileMenuStore, props]);
+
+  usePreventScrollEffect({
+    shouldPrevent: isOpen,
+  });
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <StyledFullScreenMobileMenuBackground
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={menuVariants}
+          $standalone={props.standalone}
+        >
+          {props.standalone && (
+            <StyledFloatingHeaderCloseDrawerButton $isOpen={isOpen} onClick={handleClickClose}>
+              <StyledFloatingHeaderCloseDrawerIcon />
+            </StyledFloatingHeaderCloseDrawerButton>
+          )}
+          <ul style={{ listStyleType: 'none', padding: 0 }}>
+            <Accordion
+              data={props.data}
+              renderTrigger={props.renderTrigger}
+              renderExpanded={props.renderExpanded}
+              customized={props.customized}
+            />
+          </ul>
+          {props.ColorSchemeToggleComponent}
+        </StyledFullScreenMobileMenuBackground>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export const FullScreenMobileAccordionDrawer = <ItemT extends { accordionKey: string }>(
+  props: FullScreenMobileMenuProps<ItemT>
+) => {
+  if (props.standalone) {
+    return (
+      <FullScreenModal
+        visible={props.isOpen}
+        onClose={() =>
+          props.onClickClose?.({
+            isOpen: props.isOpen,
+          })
+        }
+        zIndex={props.zIndex}
+      >
+        <MobileMenuContent {...props} />
+      </FullScreenModal>
+    );
+  }
+
+  return <MobileMenuContent {...props} />;
+};
+
+FullScreenMobileAccordionDrawer.displayName = 'AppHeader.FullScreenMobileAccordionDrawer';

package/src/next/app-header/app-header.logo.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Text } from '@/base';
+import { AppLogo } from '@/extensions';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type ReactNode, memo } from 'react';
+import { GlobalLink } from '../global-link';
+
+const StyledHeaderLogo = styled(AppLogo)`
+  margin-right: 12px;
+
+  width: 42px;
+  height: 42px;
+
+  ${media.large(css`
+    width: 36px;
+    height: 36px;
+  `)}
+`;
+
+const HeaderTitle = styled(Text)`
+  font-size: 32px;
+  font-weight: 800;
+  color: ${semantics.color.foreground[1]};
+
+  ${media['x-large'](css`
+    font-size: 24px;
+  `)}
+`;
+
+export const AppHeaderLogo = memo(
+  ({ logoRightAccessory, title }: { logoRightAccessory?: ReactNode; title?: string }) => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
+        <GlobalLink href="/">
+          <StyledHeaderLogo type="round" logoTheme="white-background" />
+        </GlobalLink>
+        <GlobalLink href="/">
+          <HeaderTitle as="h1">
+            {title ? `${title} ` : ''}
+            {logoRightAccessory}
+          </HeaderTitle>
+        </GlobalLink>
+      </div>
+    );
+  }
+);

package/src/next/app-header/app-header.modal-mobile-accordion-drawer.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Accordion, type AccordionProps } from '@/extensions';
+import { semantics } from '@/tokens';
+import { usePreventScrollEffect } from '@/utils/use-prevent-scroll-effect';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+
+const ModalContainer = styled.div<{ $isOpen: boolean; $zIndex?: number }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(0.5px);
+  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
+  z-index: ${(props) => props.$zIndex ?? 100};
+`;
+
+const ModalContent = styled.div`
+  margin: 10px 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const ModalPaper = styled.div`
+  background: ${semantics.color.background[2]};
+  border-radius: 8px;
+  margin: 12px auto;
+  width: calc(100vw - 24px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+`;
+
+type ModalMobileDrawerProps<ItemT> = {
+  isOpen: boolean;
+  onClose: () => void;
+  bottomAccessory?: ReactNode;
+} & AccordionProps<ItemT>;
+
+export const ModalMobileAccordionDrawer = <ItemT extends { accordionKey: string }>({
+  isOpen,
+  onClose,
+  bottomAccessory,
+  ...accordionProps
+}: ModalMobileDrawerProps<ItemT>) => {
+  usePreventScrollEffect({
+    shouldPrevent: isOpen,
+  });
+
+  return (
+    <ModalContainer onClick={onClose} $isOpen={isOpen} style={{ overflowY: 'auto' }}>
+      {isOpen && (
+        <ModalPaper onClick={(e) => e.stopPropagation()}>
+          <ModalContent>
+            <ul style={{ listStyleType: 'none', padding: 0, margin: '10px 20px' }}>
+              <Accordion {...accordionProps} />
+            </ul>
+            {bottomAccessory}
+          </ModalContent>
+        </ModalPaper>
+      )}
+    </ModalContainer>
+  );
+};
+
+ModalMobileAccordionDrawer.displayName = 'AppHeader.ModalMobileAccordionDrawer';