@coldsurf/ocean-road 1.13.2

package/src/extensions/error-ui/network-error/network-error.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@/base';
+import { memo } from 'react';
+import { StyledErrorContainer, StyledErrorText } from './network-error.styled';
+
+export const NetworkError = memo(({ onClickRetry }: { onClickRetry: () => void }) => {
+  return (
+    <StyledErrorContainer>
+      <StyledErrorText as="h1">네트워크 에러가 발생했어요 🗯</StyledErrorText>
+      <Button onClick={onClickRetry}>다시 시도하기</Button>
+    </StyledErrorContainer>
+  );
+});
+
+NetworkError.displayName = 'ErrorUI.NetworkError';

package/src/extensions/error-ui/unknown-error/index.ts

@@ -0,0 +1 @@
+export * from './unknown-error';

package/src/extensions/error-ui/unknown-error/unknown-error.styled.ts

@@ -0,0 +1,16 @@
+import { Text } from '@/base';
+import styled from '@emotion/styled';
+
+export const StyledErrorContainer = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledErrorText = styled(Text)`
+  font-weight: bold;
+  margin: unset;
+  margin-bottom: 1rem;
+`;

package/src/extensions/error-ui/unknown-error/unknown-error.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@/base';
+import { memo } from 'react';
+import { StyledErrorContainer, StyledErrorText } from './unknown-error.styled';
+
+export const UnknownError = memo(({ onClickRetry }: { onClickRetry: () => void }) => {
+  return (
+    <StyledErrorContainer>
+      <StyledErrorText as="h1">알 수 없는 오류가 발생했어요 🗯</StyledErrorText>
+      <Button onClick={onClickRetry}>다시 시도하기</Button>
+    </StyledErrorContainer>
+  );
+});
+
+UnknownError.displayName = 'ErrorUI.UnknownError';

package/src/extensions/full-screen-modal/full-screen-modal.tsx

@@ -0,0 +1,52 @@
+import { Modal } from '@/base';
+import { semantics } from '@/tokens';
+import { usePreventScrollEffect } from '@/utils/use-prevent-scroll-effect';
+import styled from '@emotion/styled';
+import { XIcon } from 'lucide-react';
+import { type PropsWithChildren, memo } from 'react';
+
+const StyledFullScreenModalContent = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${semantics.color.background[2]};
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+`;
+
+const CloseIcon = styled(XIcon)`
+  color: ${semantics.color.foreground[1]};
+  margin-left: auto;
+  flex-shrink: 0;
+
+  cursor: pointer;
+`;
+
+type Props = PropsWithChildren<{
+  visible: boolean;
+  onClose: () => void;
+  zIndex?: number;
+}>;
+
+export const FullScreenModal = memo(({ visible, onClose, children, zIndex }: Props) => {
+  usePreventScrollEffect({
+    shouldPrevent: visible,
+  });
+
+  return (
+    <Modal visible={visible} onClose={onClose} zIndex={zIndex}>
+      <StyledFullScreenModalContent>
+        <CloseIcon onClick={onClose} />
+        {children}
+      </StyledFullScreenModalContent>
+    </Modal>
+  );
+});
+
+FullScreenModal.displayName = 'FullScreenModal';

package/src/extensions/full-screen-modal/index.ts

@@ -0,0 +1 @@
+export * from './full-screen-modal';

package/src/extensions/grid-card-image/grid-card-image.tsx

@@ -0,0 +1,11 @@
+import { semantics } from '@/tokens';
+import styled from '@emotion/styled';
+
+export const GridCardImage = styled.img`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  object-position: 50%;
+  border-radius: 12px;
+  background-color: ${semantics.color.background[3]};
+`;

package/src/extensions/grid-card-image/index.ts

@@ -0,0 +1 @@
+export * from './grid-card-image';

package/src/extensions/grid-card-image-empty/grid-card-image-empty.tsx

@@ -0,0 +1,11 @@
+import { semantics } from '@/tokens';
+import styled from '@emotion/styled';
+
+export const GridCardImageEmpty = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  object-position: 50%;
+  border-radius: 12px;
+  background-color: ${semantics.color.background[3]};
+`;

package/src/extensions/grid-card-image-empty/index.ts

@@ -0,0 +1 @@
+export * from './grid-card-image-empty';

package/src/extensions/grid-card-item/grid-card-item.masonry.styled.tsx

@@ -0,0 +1,95 @@
+import { Text } from '@/base';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const StyledGridDate = styled(Text)`
+  margin: unset;
+  margin-top: 0.25rem;
+  font-size: 20px;
+  font-weight: 500;
+  color: ${semantics.color.foreground[3]};
+  margin-bottom: 0.875rem;
+
+  ${media.large(css`
+    font-size: 17.5px;
+  `)}
+  ${media.small(css`
+    font-size: 14px;
+  `)}
+`;
+
+export const StyledGridImageEmptyContainer = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  object-position: 50%;
+  border-radius: 12px;
+  background-color: ${semantics.color.background[1]};
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledGridImageEmptyText = styled(Text)`
+  text-align: center;
+  font-weight: 600;
+  font-size: 16px;
+
+  padding-left: 1rem;
+  padding-right: 1rem;
+`;
+
+export const StyledGridItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.875rem;
+
+  ${media.medium(css`
+    margin-bottom: 0.5rem;
+  `)}
+`;
+
+export const StyledGridTop = styled.div`
+  position: relative;
+`;
+
+export const StyledGridTextContainer = styled.div`
+  margin-top: 0.5rem;
+`;
+
+export const StyledGridTitle = styled(Text)`
+  margin: unset;
+  font-size: 22px;
+  color: ${semantics.color.foreground[1]};
+  font-weight: 600;
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+
+  ${media.large(css`
+    font-size: 1.5rem;
+    font-size: 20px;
+  `)}
+  ${media.small(css`
+    font-size: 1.25rem;
+    font-size: 16.5px;
+  `)}
+`;
+
+export const StyledVenueText = styled(Text)`
+  margin: unset;
+  margin-top: 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: ${semantics.color.foreground[4]};
+  text-align: right;
+
+  ${media.small(css`
+    font-size: 14.5px;
+  `)}
+`;

package/src/extensions/grid-card-item/grid-card-item.masonry.tsx

@@ -0,0 +1,63 @@
+import { memo } from 'react';
+import { match } from 'ts-pattern';
+import { GridCardImage } from '../grid-card-image';
+import type { GridCardListItemProps } from './grid-card-item';
+import {
+  StyledGridDate,
+  StyledGridImageEmptyContainer,
+  StyledGridImageEmptyText,
+  StyledGridItem,
+  StyledGridTextContainer,
+  StyledGridTitle,
+  StyledGridTop,
+  StyledVenueText,
+} from './grid-card-item.masonry.styled';
+import { FixedSubscribeEventButtonLayout } from './grid-card-item.subscribe-btn-layout';
+
+export const MasonryGridCardItem = memo(
+  ({
+    isSubscribed,
+    thumbnailUrl,
+    titleText,
+    subText,
+    bottomText,
+    rightBottomSlot,
+    renderThumbnail,
+  }: GridCardListItemProps) => {
+    return (
+      <StyledGridItem>
+        <StyledGridTitle as="p">{titleText}</StyledGridTitle>
+        <StyledGridDate as="p">{subText}</StyledGridDate>
+        <StyledGridTop>
+          {thumbnailUrl ? (
+            renderThumbnail ? (
+              renderThumbnail(thumbnailUrl)
+            ) : (
+              <GridCardImage src={thumbnailUrl} alt={titleText} />
+            )
+          ) : (
+            <StyledGridImageEmptyContainer>
+              <StyledGridImageEmptyText>{titleText}</StyledGridImageEmptyText>
+            </StyledGridImageEmptyContainer>
+          )}
+          {match(rightBottomSlot)
+            .with(
+              { type: 'subscribe' },
+              (value) =>
+                typeof isSubscribed === 'boolean' && (
+                  <FixedSubscribeEventButtonLayout>
+                    {value.subscribeEventBtn}
+                  </FixedSubscribeEventButtonLayout>
+                )
+            )
+            .otherwise(() => null)}
+        </StyledGridTop>
+        <StyledGridTextContainer>
+          {bottomText && <StyledVenueText as="p">{bottomText}</StyledVenueText>}
+        </StyledGridTextContainer>
+      </StyledGridItem>
+    );
+  }
+);
+
+MasonryGridCardItem.displayName = 'GridCardList.MasonryItem';

package/src/extensions/grid-card-item/grid-card-item.styled.tsx

@@ -0,0 +1,93 @@
+import { Text } from '@/base';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+export const StyledGridItem = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledGridTop = styled.div`
+  position: relative;
+`;
+
+export const StyledGridImageEmptyContainer = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  object-position: 50%;
+  border-radius: 12px;
+  background-color: ${semantics.color.background[1]};
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledGridImageEmptyText = styled(Text)`
+  text-align: center;
+  font-weight: 600;
+  font-size: 16px;
+
+  padding-left: 1rem;
+  padding-right: 1rem;
+`;
+
+export const StyledGridTextContainer = styled.div`
+  margin-top: 0.5rem;
+`;
+
+export const StyledGridTitle = styled(Text)`
+  margin: unset;
+  font-size: 16px;
+  color: ${semantics.color.foreground[1]};
+  font-weight: 600;
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+
+  ${media.medium(css`
+    font-size: 14px;
+  `)}
+`;
+
+export const StyledGridDate = styled(Text)`
+  margin: unset;
+  margin-top: 0.25rem;
+  font-size: 14px;
+  color: ${semantics.color.foreground[3]};
+
+  ${media.medium(css`
+    font-size: 12px;
+  `)}
+`;
+
+export const StyledVenueText = styled(Text)`
+  margin: unset;
+  margin-top: 0.25rem;
+  font-size: 14px;
+  color: ${semantics.color.foreground[3]};
+
+  ${media.medium(css`
+    font-size: 12px;
+  `)}
+`;
+
+export const StyledFixedSubscribeEventButtonLayoutContainer = styled(motion.div)`
+    position: absolute;
+    background: transparent;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${semantics.color.background[4]};
+    border-radius: 50%;
+
+    box-shadow: 0 1px 3px ${semantics.color.border[1]}, 0 1px 2px ${semantics.color.border[2]};
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+`;

package/src/extensions/grid-card-item/grid-card-item.subscribe-btn-layout.tsx

@@ -0,0 +1,30 @@
+import { withStopPropagation } from '@/utils/with-stop-propagation';
+import { type PropsWithChildren, memo } from 'react';
+import { StyledFixedSubscribeEventButtonLayoutContainer } from './grid-card-item.styled';
+
+export const FixedSubscribeEventButtonLayout = memo(
+  ({
+    children,
+    customRight = 12,
+    customBottom = 12,
+  }: PropsWithChildren<{
+    customRight?: number;
+    customBottom?: number;
+  }>) => {
+    return (
+      <StyledFixedSubscribeEventButtonLayoutContainer
+        onClick={withStopPropagation()}
+        whileHover={{
+          scale: 1.1,
+        }}
+        transition={{ type: 'spring', stiffness: 300 }}
+        style={{
+          bottom: customBottom,
+          right: customRight,
+        }}
+      >
+        {children}
+      </StyledFixedSubscribeEventButtonLayoutContainer>
+    );
+  }
+);

package/src/extensions/grid-card-item/grid-card-item.tsx

@@ -0,0 +1,81 @@
+import type { WithId } from '@/utils/with-id';
+import { type MouseEventHandler, type ReactNode, memo } from 'react';
+import { match } from 'ts-pattern';
+import { GridCardImage } from '../grid-card-image';
+import {
+  StyledGridDate,
+  StyledGridImageEmptyContainer,
+  StyledGridImageEmptyText,
+  StyledGridItem,
+  StyledGridTextContainer,
+  StyledGridTitle,
+  StyledGridTop,
+  StyledVenueText,
+} from './grid-card-item.styled';
+import { FixedSubscribeEventButtonLayout } from './grid-card-item.subscribe-btn-layout';
+
+export type GridCardListItemProps = WithId<{
+  thumbnailUrl: string;
+  titleText: string;
+  subText: string;
+  bottomText?: string;
+  isSubscribed?: boolean;
+  rightBottomSlot?: {
+    type: 'subscribe';
+    subscribeEventBtn: ReactNode;
+  };
+  renderThumbnail?: (url: string) => ReactNode;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
+}>;
+
+export const GridCardItem = memo(
+  ({
+    thumbnailUrl,
+    titleText,
+    subText,
+    bottomText,
+    rightBottomSlot,
+    renderThumbnail,
+    isSubscribed,
+    onClick,
+  }: GridCardListItemProps) => {
+    return (
+      <StyledGridItem onClick={onClick}>
+        <StyledGridTop>
+          {thumbnailUrl ? (
+            renderThumbnail ? (
+              renderThumbnail(thumbnailUrl)
+            ) : (
+              <GridCardImage src={thumbnailUrl} alt={titleText} />
+            )
+          ) : (
+            <StyledGridImageEmptyContainer>
+              <StyledGridImageEmptyText>{titleText}</StyledGridImageEmptyText>
+            </StyledGridImageEmptyContainer>
+          )}
+          {match(rightBottomSlot)
+            .with(
+              { type: 'subscribe' },
+              (value) =>
+                typeof isSubscribed === 'boolean' && (
+                  <FixedSubscribeEventButtonLayout>
+                    {value.subscribeEventBtn}
+                  </FixedSubscribeEventButtonLayout>
+                )
+            )
+            .otherwise(() => null)}
+        </StyledGridTop>
+        <StyledGridTextContainer>
+          <StyledGridTitle as="p" numberOfLines={2}>
+            {titleText}
+          </StyledGridTitle>
+          <StyledGridDate as="p">{subText}</StyledGridDate>
+          {bottomText && <StyledVenueText as="p">{bottomText}</StyledVenueText>}
+        </StyledGridTextContainer>
+      </StyledGridItem>
+    );
+  }
+);
+
+GridCardItem.displayName = 'GridCardList.Item';

package/src/extensions/grid-card-item/index.ts

@@ -0,0 +1,2 @@
+export * from './grid-card-item';
+export * from './grid-card-item.masonry';

package/src/extensions/grid-card-list/grid-card-list.masonry.styled.tsx

@@ -0,0 +1,45 @@
+import { Text } from '@/base';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const StyledListContainer = styled.div`
+  margin-top: 1.5rem;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StyledListHeader = styled.div`
+  width: 100%;
+  margin-top: 3.5rem;
+
+  ${media.medium(css`
+    margin-top: 1.5rem;
+    margin-bottom: 2.25rem;
+  `)}
+`;
+
+export const StyledListHeaderText = styled(Text)`
+  text-align: center;
+  color: ${semantics.color.foreground[2]};
+
+  font-size: 2rem;
+
+  ${media.medium(css`
+    font-size: 1.875rem;
+  `)}
+`;
+
+export const StyledLoadMoreContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+
+  ${media.medium(css`
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  `)}
+`;

package/src/extensions/grid-card-list/grid-card-list.masonry.tsx

@@ -0,0 +1,58 @@
+import { Fragment, type ReactNode, memo } from 'react';
+import type { GridCardListItemProps } from '../grid-card-item';
+import { GridCardListLoadMore } from '../grid-card-list-load-more';
+import {
+  StyledListContainer,
+  StyledListHeader,
+  StyledListHeaderText,
+} from './grid-card-list.masonry.styled';
+import { StyledGridContainer, StyledNavigationContainer } from './grid-card-list.styled';
+
+type Props = {
+  items: GridCardListItemProps[];
+  renderItem: (item: GridCardListItemProps) => ReactNode;
+  onLoadMore: () => void;
+  headerText?: string;
+  hasNextPage?: boolean;
+  isEmpty?: boolean;
+  emptyComponent?: ReactNode;
+  navigationComponent?: ReactNode;
+};
+
+export const MasonryGridCardList = memo(
+  ({
+    items,
+    renderItem,
+    onLoadMore,
+    headerText,
+    hasNextPage,
+    isEmpty,
+    emptyComponent,
+    navigationComponent,
+  }: Props) => {
+    return (
+      <StyledListContainer>
+        {headerText && (
+          <StyledListHeader>
+            <StyledListHeaderText as="h1">{headerText}</StyledListHeaderText>
+          </StyledListHeader>
+        )}
+        <StyledNavigationContainer>
+          {navigationComponent && navigationComponent}
+        </StyledNavigationContainer>
+        {isEmpty ? (
+          emptyComponent
+        ) : (
+          <StyledGridContainer>
+            {items.map((item) => (
+              <Fragment key={item.id}>{renderItem(item)}</Fragment>
+            ))}
+          </StyledGridContainer>
+        )}
+        {hasNextPage && <GridCardListLoadMore onLoadMore={onLoadMore} />}
+      </StyledListContainer>
+    );
+  }
+);
+
+MasonryGridCardList.displayName = 'GridCardList.MasonryList';

package/src/extensions/grid-card-list/grid-card-list.styled.tsx

@@ -0,0 +1,40 @@
+import { Text } from '@/base';
+import { media } from '@/utils';
+import { commonHorizontalLayoutCss } from '@/utils/common-styles';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const StyledGridContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0px, 1fr));
+  gap: 1.25rem;
+
+  ${commonHorizontalLayoutCss(['left', 'right'])}
+
+  ${media.large(css`
+    grid-template-columns: repeat(3, minmax(0px, 1fr));
+    gap: 1rem;
+  `)}
+  ${media.medium(css`
+    grid-template-columns: repeat(2, minmax(0px, 1fr));
+    gap: 0.85rem;
+  `)}
+  ${media.small(css`
+    grid-template-columns: repeat(2, minmax(0px, 1fr));
+  `)}
+`;
+
+export const StyledListContainer = styled.div``;
+
+export const StyledListHeader = styled.div`
+  width: 100%;
+`;
+
+export const StyledListHeaderText = styled(Text)``;
+
+export const StyledNavigationContainer = styled.div`
+  margin-bottom: 3rem;
+  ${media.small(css`
+    margin-bottom: 1.875rem;
+  `)}
+`;