@coldsurf/ocean-road 1.13.2

package/src/base/label/label.styled.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { colors } from '../../tokens';
+import { Text } from '../text';
+
+export const StyledRequiredLabelMark = styled(Text)`
+  color: ${colors.oc.red[7].value};
+`;

package/src/base/label/label.tsx

@@ -0,0 +1,27 @@
+import { type LabelHTMLAttributes, forwardRef } from 'react';
+import { Text } from '../text';
+import { StyledRequiredLabelMark } from './label.styled';
+
+type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+  children: string;
+  required?: boolean;
+};
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ htmlFor, style, children, required, ...otherProps }, ref) => {
+    return (
+      <label
+        ref={ref}
+        {...otherProps}
+        htmlFor={htmlFor}
+        style={{ marginTop: '1.5rem', marginBottom: '0.5rem', ...style }}
+      >
+        <Text as="p" style={{ margin: 'unset' }}>
+          {children} {required && <StyledRequiredLabelMark as="span">*</StyledRequiredLabelMark>}
+        </Text>
+      </label>
+    );
+  }
+);
+
+Label.displayName = 'Label';

package/src/base/modal/index.ts

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

package/src/base/modal/modal.tsx

@@ -0,0 +1,59 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { PropsWithChildren } from 'react';
+import { semantics } from '../../tokens';
+
+export const Modal = ({
+  children,
+  visible,
+  onClose,
+  zIndex,
+}: PropsWithChildren<{
+  visible: boolean;
+  onClose: () => void;
+  zIndex?: number;
+}>) => {
+  return (
+    <AnimatePresence>
+      {visible && (
+        <>
+          <motion.div
+            onClick={onClose}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.25 }}
+            exit={{ opacity: 0 }}
+            style={{
+              background: semantics.color.dimmed[1],
+              position: 'fixed',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              zIndex,
+            }}
+          />
+
+          <motion.dialog
+            open={visible}
+            className="modal-content"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.1 }}
+            style={{
+              background: 'transparent',
+              position: 'fixed',
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              border: 'none',
+              zIndex: zIndex ? zIndex + 1 : undefined,
+            }}
+          >
+            {children}
+          </motion.dialog>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};

package/src/base/spinner/index.ts

@@ -0,0 +1,2 @@
+export * from './spinner';
+export * from './spinner.types';

package/src/base/spinner/spinner.styled.ts

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { LoaderCircle } from 'lucide-react';
+import { semantics } from '../../tokens';
+
+const MotionIcon = motion.create(LoaderCircle);
+
+export const StyledPageLoadingWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  backdrop-filter: blur(1px);
+`;
+
+export const StyledSpinner = styled(MotionIcon)`
+  color: ${semantics.color.foreground[1]};
+  width: 32px;
+  height: 32px;
+`;

package/src/base/spinner/spinner.tsx

@@ -0,0 +1,36 @@
+import { StyledPageLoadingWrapper, StyledSpinner } from './spinner.styled';
+import type { SpinnerVariant } from './spinner.types';
+
+const RotateSpinner = ({ className }: { className?: string }) => {
+  return (
+    <StyledSpinner
+      animate={{
+        rotate: 360, // Rotates the element 360 degrees
+      }}
+      transition={{
+        repeat: Number.POSITIVE_INFINITY, // Loops the animation infinitely
+        duration: 0.5, // Each full rotation takes 2 seconds
+        ease: 'linear', // Smooth, constant speed
+      }}
+      className={className}
+    />
+  );
+};
+
+type Props = {
+  variant?: SpinnerVariant;
+  className?: string;
+};
+
+export const Spinner = ({ variant, className }: Props) => {
+  switch (variant) {
+    case 'page-overlay':
+      return (
+        <StyledPageLoadingWrapper>
+          <RotateSpinner className={className} />
+        </StyledPageLoadingWrapper>
+      );
+    default:
+      return <RotateSpinner className={className} />;
+  }
+};

package/src/base/spinner/spinner.types.ts

@@ -0,0 +1 @@
+export type SpinnerVariant = 'page-overlay';

package/src/base/switch/index.ts

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

package/src/base/switch/switch.styled.tsx

@@ -0,0 +1,49 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { colors } from '../../tokens';
+
+const width = 40;
+const height = width * 0.55;
+const thumbSize = width * 0.45;
+
+export const StyledSwitchContainer = styled.button<{ $checked: boolean }>`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  ${({ $checked }) =>
+    $checked
+      ? css`
+    background-color: ${colors.oc.green[5].value};
+  `
+      : css`
+    background-color: ${colors.oc.gray[2].value};
+  `}
+
+  width: ${width}px;
+  min-width: ${width}px;
+  height: ${height}px;
+`;
+
+export const StyledSwitchThumb = styled.span<{ $checked: boolean }>`
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  background-color: ${colors.oc.white.value};
+  transition: transform 0.15s ease;
+
+  width: ${thumbSize}px;
+  height: ${thumbSize}px;
+
+  ${({ $checked }) =>
+    $checked &&
+    css`
+      transform: translate(${thumbSize}px, -50%);
+  `}
+`;

package/src/base/switch/switch.tsx

@@ -0,0 +1,29 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+import { StyledSwitchContainer, StyledSwitchThumb } from './switch.styled';
+
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, disabled, onChange, ...buttonProps }, forwardedRef) => {
+    return (
+      <StyledSwitchContainer
+        ref={forwardedRef}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-disabled={disabled}
+        disabled={disabled}
+        $checked={checked}
+        onClick={() => onChange(!checked)}
+        {...buttonProps}
+      >
+        <StyledSwitchThumb $checked={checked} />
+      </StyledSwitchContainer>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';

package/src/base/text/index.ts

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

package/src/base/text/text.styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+export const StyledTextContainer = styled.span<{ numberOfLines?: number }>`
+  white-space: pre-wrap;
+  line-height: 1.25;
+
+  ${({ numberOfLines }) =>
+    numberOfLines &&
+    `
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: ${numberOfLines};
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  `}
+`;

package/src/base/text/text.tsx

@@ -0,0 +1,37 @@
+import {
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  type ElementType,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+import { StyledTextContainer } from './text.styled';
+
+type TextProps = PropsWithChildren<
+  ComponentPropsWithRef<'span'> & {
+    style?: CSSProperties;
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    as?: ElementType<any, keyof JSX.IntrinsicElements>;
+    numberOfLines?: number;
+  }
+>;
+
+export const Text = forwardRef<HTMLSpanElement, TextProps>(
+  ({ children, style, as, numberOfLines, ...otherProps }, ref) => {
+    return (
+      <StyledTextContainer
+        ref={ref}
+        as={as}
+        numberOfLines={numberOfLines}
+        style={{
+          ...style,
+        }}
+        {...otherProps}
+      >
+        {children}
+      </StyledTextContainer>
+    );
+  }
+);
+
+Text.displayName = 'Text';

package/src/base/text-area/index.ts

@@ -0,0 +1,2 @@
+export * from './text-area';
+export * from './text-area.types';

package/src/base/text-area/text-area.styled.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { colors, semantics } from '../../tokens';
+
+export const StyledTextAreaContainer = styled.textarea<{ $isError: boolean }>`
+  padding: 1rem;
+  background-color: ${semantics.color.background[2]};
+  border: 2px solid ${({ $isError }) => ($isError ? colors.oc.red[7].value : semantics.color.border[2])};
+  border-radius: 2rem;
+  color: ${semantics.color.foreground[1]};
+
+  &:focus, &:active {
+    border: 2px solid ${({ $isError }) => ($isError ? colors.oc.red[7].value : colors.oc.blue[6].value)};
+    outline: none;
+    box-shadow: none;
+  }
+`;

package/src/base/text-area/text-area.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { Label } from '../label';
+import { StyledTextAreaContainer } from './text-area.styled';
+import type { TextAreaProps } from './text-area.types';
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ label, labelStyle, noResize = true, isError, required, ...props }, ref) => {
+    return (
+      <>
+        {label && (
+          <Label htmlFor={props.id} style={labelStyle} required={required}>
+            {label}
+          </Label>
+        )}
+        <StyledTextAreaContainer
+          ref={ref}
+          {...props}
+          $isError={!!isError}
+          style={{
+            ...props.style,
+            resize: noResize ? 'none' : 'vertical',
+          }}
+        />
+      </>
+    );
+  }
+);
+
+TextArea.displayName = 'TextArea';

package/src/base/text-area/text-area.types.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties, DetailedHTMLProps, TextareaHTMLAttributes } from 'react';
+
+export type TextAreaProps = DetailedHTMLProps<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+> & {
+  label?: string;
+  labelStyle?: CSSProperties;
+  noResize?: boolean;
+  isError?: boolean;
+};

package/src/base/text-input/index.ts

@@ -0,0 +1,2 @@
+export * from './text-input';
+export * from './text-input.types';

package/src/base/text-input/text-input.styled.ts

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+import { colors, semantics } from '../../tokens';
+
+export const StyledTextInputContainer = styled.div<{ $isError: boolean }>`
+  padding: 1rem;
+  background-color: ${semantics.color.background[2]};
+  border: 2px solid ${({ $isError }) => ($isError ? colors.oc.red[7].value : semantics.color.border[2])};
+  border-radius: 2rem;
+  color: ${semantics.color.foreground[1]};
+
+  display: flex;
+  align-items: center;
+
+  &:focus, &:active {
+    border: 2px solid ${({ $isError }) => ($isError ? colors.oc.red[7].value : colors.oc.blue[6].value)};
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:has(input:focus), &:has(input:active) {
+    border: 2px solid ${({ $isError }) => ($isError ? colors.oc.red[7].value : colors.oc.blue[6].value)};
+    outline: none;
+    box-shadow: none;
+  }
+`;
+
+export const StyledTextInputInput = styled.input`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  flex: 1;
+  font-family: 'Pretendard';
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: inherit;
+  line-height: 1.25;
+
+  color: ${semantics.color.foreground[1]};
+`;

package/src/base/text-input/text-input.tsx

@@ -0,0 +1,59 @@
+import {
+  type MouseEventHandler,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { Label } from '../label';
+import { StyledTextInputContainer, StyledTextInputInput } from './text-input.styled';
+import type { TextInputProps, TextInputRef } from './text-input.types';
+
+export const TextInput = forwardRef<TextInputRef, TextInputProps>(
+  (
+    { label, labelStyle, isError, required, left, right, className, style, ...inputProps },
+    forwardedRef
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => {
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          inputRef.current?.blur();
+        },
+      }),
+      []
+    );
+
+    const onClick = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
+      e.preventDefault();
+      inputRef.current?.focus();
+    }, []);
+
+    return (
+      <>
+        {label && (
+          <Label htmlFor={inputProps.id} style={labelStyle} required={required}>
+            {label}
+          </Label>
+        )}
+        <StyledTextInputContainer
+          className={className}
+          $isError={!!isError}
+          onClick={onClick}
+          style={style}
+        >
+          {left && left}
+          <StyledTextInputInput ref={inputRef} {...inputProps} />
+          {right && right}
+        </StyledTextInputContainer>
+      </>
+    );
+  }
+);
+
+TextInput.displayName = 'TextInput';

package/src/base/text-input/text-input.types.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  labelStyle?: CSSProperties;
+  isError?: boolean;
+  required?: boolean;
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+export interface TextInputRef {
+  focus: () => void;
+  blur: () => void;
+}

package/src/base/toast/index.ts

@@ -0,0 +1,2 @@
+export * from './toast';
+export * from './toast.types';

package/src/base/toast/toast.tsx

@@ -0,0 +1,60 @@
+import { motion, usePresence } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+import { semantics } from '../../tokens';
+import { Text } from '../text';
+import type { ToastProps } from './toast.types';
+
+const AUTO_CLOSE_TIME = 3000;
+
+/**
+ * 사용시, framer-motion의 AnimatePresence 컴포넌트를 사용해야 합니다.
+ */
+export const Toast = ({ message, zIndex = 99, onClose }: ToastProps) => {
+  const [isPresent, safeToRemove] = usePresence();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onClose();
+    }, AUTO_CLOSE_TIME);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!isPresent) {
+      safeToRemove();
+    }
+  }, [isPresent, safeToRemove]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 50, transition: { duration: 0.3 } }}
+      transition={{ duration: 0.3 }}
+      onClick={onClose}
+      style={{
+        background: semantics.color.background[1],
+        padding: '16px 16px',
+        margin: '0 16px',
+        borderRadius: '8px',
+        position: 'fixed',
+        bottom: '45px',
+        left: 'calc(50% - 192.5px)',
+        width: 'calc(385px - 32px - 32px)',
+        zIndex,
+        boxShadow: `0px 0px 12px 0px ${semantics.color.dimmed[1]}`,
+        cursor: 'pointer',
+      }}
+    >
+      <Text as="p">{message}</Text>
+    </motion.div>
+  );
+};

package/src/base/toast/toast.types.ts

@@ -0,0 +1,5 @@
+export type ToastProps = {
+  message: string;
+  zIndex?: number;
+  onClose: () => void;
+};

package/src/constants.ts

@@ -0,0 +1 @@
+export const WEB_APP_HEADER_HEIGHT = '100px';