@remember-web/primitive 0.4.7 → 0.5.0

package/src/ModalScreen/ModalScreen.stories.tsx

@@ -0,0 +1,269 @@
+import { IconCloseM, IconMailM, IconProfileM } from '@remember-web/icon';
+import {
+  bgModal100,
+  bgModal200,
+  contents000,
+  contents150,
+  contents200,
+  divider,
+  roleRed,
+} from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@/Buttons';
+import { Divider, Flex, Typography } from '@/Common';
+import { RememberLogo } from '@/Logos';
+import { ModalScreen } from './index';
+
+const meta = {
+  title: 'Primitive/ModalScreen',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Header와 Bottom을 함께 사용하는 실제 모달 화면 예시입니다.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: '#f2f2f2',
+          padding: '40px',
+          minWidth: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 모달 예시
+export const BasicModal: Story = {
+  render: () => (
+    <div>
+      <ModalScreen.Header type="default" title="메모 추가" />
+      <div
+        style={{
+          padding: '16px 30px',
+          background: 'white',
+          minHeight: '200px',
+          color: contents200,
+        }}
+      >
+        내용을 입력해주세요
+      </div>
+      <ModalScreen.Bottom
+        rightElement={
+          <Flex gap={8}>
+            <Button variant="outline" size="xLarge" layout="block">
+              취소
+            </Button>
+            <Button variant="primary" size="xLarge" layout="block">
+              저장
+            </Button>
+          </Flex>
+        }
+      />
+    </div>
+  ),
+};
+
+// Bottom Off 타입 모달 예시
+export const BottomOffModal: Story = {
+  render: () => (
+    <div style={{ width: 650, margin: '0 auto' }}>
+      <ModalScreen.Header
+        title="미리보기"
+        rightElement={
+          <button type="button" style={{ all: 'unset' }}>
+            <IconCloseM />
+          </button>
+        }
+      />
+      <Flex
+        direction="column"
+        align="center"
+        style={{
+          backgroundColor: bgModal200,
+          padding: '24px 85px',
+          borderRadius: '0 0 8px 8px',
+        }}
+      >
+        {/* 상단 알림 박스 */}
+        <Flex
+          width="100%"
+          style={{
+            backgroundColor: bgModal100,
+            padding: '8px 24px',
+            marginBottom: '8px',
+          }}
+        >
+          <Typography variant="SubTitle1" color={contents000}>
+            {'{#회사명}'}에서 {'{#지원자명}'}님 서류 검토를{' '}
+            <span style={{ color: roleRed }}>시작했습니다</span>.
+          </Typography>
+        </Flex>
+
+        {/* 메인 콘텐츠 */}
+        <Flex
+          direction="column"
+          align="flex-start"
+          width="100%"
+          style={{
+            backgroundColor: bgModal100,
+            padding: '40px 24px 24px',
+          }}
+        >
+          {/* Remember 로고 */}
+          <div style={{ marginBottom: '24px' }}>
+            <RememberLogo color={contents000} height={18} />
+          </div>
+
+          {/* 제목 */}
+          <div style={{ marginBottom: '24px' }}>
+            <Typography variant="Title2" color={contents000}>
+              지원하신 {'{#회사명}'} {'{#포지션명}'}의
+              <br />
+              서류 검토가 시작되었습니다.
+            </Typography>
+          </div>
+
+          {/* 본문 텍스트 */}
+          <Typography
+            variant="UIBody2"
+            color={contents000}
+            style={{ marginBottom: '24px' }}
+          >
+            {'{#지원자명}'}님 안녕하세요.
+            <br />
+            {'{#회사명}'}에서 제출하신 서류 검토를{' '}
+            <span style={{ color: roleRed }}>시작했습니다</span>.<br />
+            연락을 받지 못하시면 아래 정보로 문의해 주세요.
+            <br />
+            부디 좋은 결과 있으시길 바랍니다!
+            <br />
+            감사합니다.
+          </Typography>
+
+          {/* 담당자 정보 폼 */}
+          <Flex
+            direction="column"
+            width="100%"
+            style={{ marginBottom: '24px' }}
+          >
+            {/* 담당자명 */}
+            <Flex
+              direction="column"
+              align="flex-start"
+              width="100%"
+              gap={4}
+              style={{
+                borderBottom: `1px solid ${divider}`,
+                padding: '16px 0',
+              }}
+            >
+              <Flex align="center" gap={4}>
+                <IconProfileM />
+                <Typography variant="SubTitle1" color={contents000}>
+                  담당자명
+                </Typography>
+              </Flex>
+              <Typography variant="UIBody2" color={contents000}>
+                {'{#기업담당자} 이름}'}
+              </Typography>
+            </Flex>
+
+            {/* 담당자 이메일 */}
+            <Flex
+              direction="column"
+              align="flex-start"
+              width="100%"
+              gap={4}
+              style={{
+                borderBottom: `1px solid ${divider}`,
+                padding: '16px 0',
+              }}
+            >
+              <Flex align="center" gap={4}>
+                <IconMailM />
+                <Typography variant="SubTitle1" color={contents000}>
+                  담당자 이메일
+                </Typography>
+              </Flex>
+              <Typography variant="UIBody2" color={contents000}>
+                {'{#기업담당자} 이메일 주소}'}
+              </Typography>
+            </Flex>
+          </Flex>
+
+          {/* CTA 버튼 */}
+          <Button variant="primary" size="medium" layout="inline">
+            지원 현황 바로가기
+          </Button>
+        </Flex>
+
+        {/* 하단 푸터 */}
+        <Flex direction="column" width={480} style={{ marginTop: '16px' }}>
+          <Divider />
+          <Flex
+            direction="column"
+            align="flex-start"
+            gap={16}
+            style={{ padding: '16px 0' }}
+          >
+            {/* 안내 문구 */}
+            <Typography variant="Caption1" color={contents150}>
+              본 메일은 발신전용으로 회신할 수 없습니다. 서비스와 관련하여
+              궁금하신 사항은 고객센터로 문의해 주세요.
+            </Typography>
+
+            {/* 메뉴 링크 */}
+            <Flex align="center" gap={8}>
+              <Typography variant="Caption1" color={contents150}>
+                프리미엄 채용공고
+              </Typography>
+              <Divider
+                style={{
+                  width: '1px',
+                  height: '12px',
+                  transform: 'rotate(90deg)',
+                }}
+              />
+              <Typography variant="Caption1" color={contents150}>
+                스카웃 제안 받기
+              </Typography>
+              <Divider
+                style={{
+                  width: '1px',
+                  height: '12px',
+                  transform: 'rotate(90deg)',
+                }}
+              />
+              <Typography variant="Caption1" color={contents150}>
+                고객센터
+              </Typography>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* 최하단 푸터 */}
+        <Flex
+          direction="column"
+          align="center"
+          gap={12}
+          width={480}
+          style={{ padding: '24px 0' }}
+        >
+          <RememberLogo color={contents150} height={18} />
+          <Typography variant="Caption2_B" color={contents150}>
+            copyright © Drama&Company All rights reserved.
+          </Typography>
+        </Flex>
+      </Flex>
+    </div>
+  ),
+};

package/src/ModalScreen/index.tsx

@@ -0,0 +1,79 @@
+import { contents000, contents200 } from '@remember-web/mixin';
+import type { ReactNode } from 'react';
+import { Divider, Typography } from '@/Common';
+import {
+  StyledModalScreenBottom,
+  StyledModalScreenHeader,
+  StyledModalScreenLeftElement,
+} from './styles';
+
+type ModalScreenHeaderProps = {
+  title: ReactNode;
+  rightElement?: ReactNode;
+  divider?: boolean;
+} & (
+  | { type?: 'default' }
+  | { type: 'vertical' | 'horizontal'; description: ReactNode }
+);
+
+const ModalScreenHeader = (props: ModalScreenHeaderProps) => {
+  const { divider = true } = props;
+
+  return (
+    <>
+      <StyledModalScreenHeader>
+        <StyledModalScreenLeftElement data-layout={props.type || 'default'}>
+          {typeof props.title === 'string' ? (
+            <Typography variant="Title1" color={contents000} ellipsis={1}>
+              {props.title}
+            </Typography>
+          ) : (
+            props.title
+          )}
+          {(props.type === 'vertical' || props.type === 'horizontal') &&
+            (typeof props.description === 'string' ? (
+              <Typography
+                variant="UIBody2"
+                color={contents200}
+                {...(props.type === 'horizontal' && { ellipsis: 1 })}
+              >
+                {props.description}
+              </Typography>
+            ) : (
+              props.description
+            ))}
+        </StyledModalScreenLeftElement>
+        {props.rightElement}
+      </StyledModalScreenHeader>
+      {divider && <Divider />}
+    </>
+  );
+};
+
+type ModalScreenBottomProps = {
+  rightElement: ReactNode;
+  leftElement?: ReactNode;
+  divider?: boolean;
+};
+
+const ModalScreenBottom = (props: ModalScreenBottomProps) => {
+  const { divider = true } = props;
+
+  return (
+    <>
+      {divider && <Divider />}
+      <StyledModalScreenBottom>
+        {props.leftElement}
+        {props.rightElement}
+      </StyledModalScreenBottom>
+    </>
+  );
+};
+
+const ModalScreen = {
+  Header: ModalScreenHeader,
+  Bottom: ModalScreenBottom,
+};
+
+export type { ModalScreenHeaderProps, ModalScreenBottomProps };
+export { ModalScreen };

package/src/ModalScreen/radix.tsx

@@ -0,0 +1,77 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from '@radix-ui/react-dialog';
+import type { ModalScreenBottomProps, ModalScreenHeaderProps } from './index';
+import { ModalScreen as BaseModalScreen } from './index';
+
+/**
+ * Radix UI Dialog를 사용하는 프로젝트를 위한 ModalScreen 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * import { ModalScreen } from '@remember-web/primitive/radix';
+ *
+ * <Dialog.Root open={isOpen}>
+ *   <Dialog.Portal>
+ *     <Dialog.Content>
+ *       <ModalScreen.Header
+ *         title="제목"
+ *         rightElement={<CloseButton />}
+ *       />
+ *       <ModalScreen.Bottom
+ *         rightElement={<Button>확인</Button>}
+ *       />
+ *     </Dialog.Content>
+ *   </Dialog.Portal>
+ * </Dialog.Root>
+ * ```
+ */
+
+/**
+ * Radix UI DialogTitle로 래핑된 ModalScreen.Header
+ * 접근성을 위해 DialogTitle이 필수인 Radix UI Dialog에서 사용
+ */
+const ModalScreenHeader = (props: ModalScreenHeaderProps) => {
+  return (
+    <>
+      <span
+        style={{
+          position: 'absolute',
+          border: 0,
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: 'hidden',
+          clip: 'rect(0, 0, 0, 0)',
+          whiteSpace: 'nowrap',
+          wordWrap: 'normal',
+        }}
+      >
+        <DialogTitle>{props.title?.toString()}</DialogTitle>
+      </span>
+      <BaseModalScreen.Header {...props} />
+    </>
+  );
+};
+
+export const ModalScreen = {
+  Dialog,
+  Overlay: DialogOverlay,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Header: ModalScreenHeader,
+  Description: DialogDescription,
+  Content: DialogContent,
+  Bottom: BaseModalScreen.Bottom,
+  Close: DialogClose,
+};
+
+export type { ModalScreenBottomProps, ModalScreenHeaderProps };

package/src/ModalScreen/styles.ts

@@ -0,0 +1,54 @@
+import { bgModal100, mobileOnly } from '@remember-web/mixin';
+import styled from 'styled-components';
+
+export const StyledModalScreenHeader = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  background-color: ${bgModal100};
+  padding: 24px;
+  border-radius: 8px 8px 0 0;
+
+  &:not(:has(> :only-child)) {
+    align-items: flex-start;
+  }
+  
+  &:has(> [data-layout='vertical']) {
+    padding-bottom: 16px;
+  }
+
+  ${mobileOnly`
+    border-radius: 0;
+  `}
+`;
+
+export const StyledModalScreenLeftElement = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: 8px;
+
+  &[data-layout='vertical'] {
+    grid-auto-flow: row;
+    align-items: flex-start;
+  }
+`;
+
+export const StyledModalScreenBottom = styled.footer`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 14px 24px;
+  border-radius: 0 0 8px 8px;
+  background-color: ${bgModal100};
+
+  &:has(> :only-child) {
+    justify-content: flex-end;
+  }
+
+  ${mobileOnly`
+    border-radius: 0;
+  `}
+`;

package/src/index.ts

@@ -1,12 +1,13 @@
 export * from './Avatars';
-export * from './Buttons';
 export * from './Badge';
+export * from './Buttons';
+export * from './Chips';
 export * from './Common';
-export * from './Control';
-export * from './Logos';
-export * from './Modals';
-export * from './Paginations';
+export { _Checkbox, Checkbox } from './Control/Checkbox';
+export { Radio } from './Control/Radio';
+export { _Toggle, CircleBaseToggle, Toggle } from './Control/Toggle';
 export * from './Inputs';
-export * from './Floating';
-export * from './Chips';
 export * from './Labels';
+export * from './Logos';
+export * from './ModalScreen';
+export * from './Paginations';

package/src/radix.ts

@@ -0,0 +1,24 @@
+/**
+ * @remember-web/primitive/radix
+ *
+ * Radix UI에 의존하는 모든 컴포넌트를 한 곳에서 export합니다.
+ * Radix UI를 사용하지 않는 프로젝트는 이 파일을 import하지 않으면 됩니다.
+ *
+ * @example
+ * ```tsx
+ * // Radix 사용 프로젝트
+ * import { Dialog, ModalScreen, Popover, Tooltip, Divider } from '@remember-web/primitive/radix';
+ *
+ * // Native 사용 프로젝트
+ * import { ModalScreen } from '@remember-web/primitive';
+ * ```
+ */
+
+// Control - Switch (Radix Switch 기반)
+export * from './Control/Switch';
+// Floating 컴포넌트들 (default export)
+export * from './Floating';
+// ModalScreen (Radix DialogTitle 래핑 버전)
+export * from './ModalScreen/radix';
+// Dialog 관련
+export * from './Modals/Dialog';