Merge branch 'dev' of https://github.com/samilHero/missionary-client …

…into feat/SMH-51

packages/design-system/src/components/checkbox-group/index.tsx

@@ -12,7 +12,7 @@ import { Checkbox } from '../checkbox';
 import {
   CheckboxGroupActionsContext,
   CheckboxGroupDataContext,
-} from './CheckboxGroupContext';
+} from './checkboxGroupContext';
 
 interface CheckboxProps
   extends Omit<

packages/design-system/src/components/checkbox/index.tsx

@@ -9,7 +9,7 @@ import { forwardRefWithAs } from '@utils';
 import { useControllableState } from '@hooks';
 
 import styled from '@emotion/styled';
-import { CheckboxGroupActionsContext } from '../checkbox-group/CheckboxGroupContext';
+import { CheckboxGroupActionsContext } from '../checkbox-group/checkboxGroupContext';
 
 const StyledInput = styled.input`
   display: none;
@@ -25,7 +25,7 @@ export const CheckboxDataContext = createContext<{
 } | null>(null);
 CheckboxDataContext.displayName = 'CheckboxDataContext';
 
-interface CheckboxProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
+interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange'> {
   defaultChecked?: boolean;
   checked?: boolean;
   onChange?: (checked: boolean) => void;

packages/design-system/src/components/index.tsx

@@ -5,3 +5,5 @@ export { Tab } from './tab';
 export { Text } from './text';
 export { Checkbox } from './checkbox';
 export { CheckboxGroup } from './checkbox-group';
+export { Radio } from './radio';
+export { RadioGroup } from './radio-group';

packages/design-system/src/components/modal/Modals.tsx

@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import { ModalStateContext } from '@context/ModalStateContext';
+import { ModalDispatchContext } from '@context/ModalDispatchContext';
+
+export const modals = {};
+
+export const Modals = () => {
+  const openedModals = useContext(ModalStateContext);
+  const { closeModal } = useContext(ModalDispatchContext);
+
+  if (openedModals.length === 0) {
+    return null;
+  }
+
+  return openedModals.map((modal, index) => {
+    const { Component, props } = modal;
+
+    const { onSubmit, ...restProps } = props;
+
+    const handleCloseModal = () => {
+      closeModal(Component);
+    };
+
+    const handleSubmit = async () => {
+      if (typeof onSubmit === 'function') {
+        await onSubmit();
+      }
+      handleCloseModal();
+    };
+
+    return (
+      <Component
+        key={index}
+        closeModal={handleCloseModal}
+        onSubmit={handleSubmit}
+        {...restProps}
+      />
+    );
+  });
+};

packages/design-system/src/components/radio-group/index.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { RadioGroup } from '.';
+import { Text } from '../text';
+import styled from '@emotion/styled';
+import { Radio } from '../radio';
+
+const RadioGroupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3em;
+`;
+
+const RadioItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+`;
+
+const RadioGroupStyled = styled(RadioGroup)`
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+
+  .radio-item {
+    display: flex;
+    align-items: center;
+
+    width: 200px;
+
+    cursor: pointer;
+
+    &:hover .radio-icon {
+      background-color: #f5f5f5;
+    }
+
+    &:active .radio-icon {
+      background-color: #e5e5e5;
+    }
+  }
+
+  &.disabled .radio-item {
+    cursor: not-allowed;
+
+    &:hover .radio-icon,
+    &:active .radio-icon {
+      background-color: unset;
+    }
+  }
+`;
+
+const Icon = styled.span<{ checked: boolean }>`
+  position: relative;
+  display: inline-block;
+
+  width: 16px;
+  height: 16px;
+  margin-right: 0.5em;
+  border: 1px solid #000;
+  border-radius: 50%;
+
+  ${({ checked }) =>
+    checked &&
+    `
+    &::after {
+        content: 'v';
+        font-size: 16px;
+        font-weight: bold;
+        width: 16px;
+        height: 16px;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+  `}
+`;
+
+const dataList = ['짜장면', '짬뽕', '탕수육'];
+
+const meta: Meta<typeof RadioGroup> = {
+  component: RadioGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+const RadioGroupComponent = ({
+  args,
+}: {
+  args: React.ComponentProps<typeof RadioGroup>;
+}) => {
+  const [checked, setChecked] = useState<string>(dataList[1]);
+
+  return (
+    <RadioGroupContainer>
+      <RadioItemsContainer>
+        <Text typo="h2">제어 컴포넌트</Text>
+        <RadioGroupStyled
+          {...args}
+          value={checked}
+          onChange={(newChecked) => setChecked(newChecked)}
+          className={args.disabled ? 'disabled' : ''}
+        >
+          <div>
+            {dataList.map((data) => (
+              <Radio key={data} value={data} className="radio-item">
+                <Icon checked={checked === data} className="radio-icon" />
+                {data}
+              </Radio>
+            ))}
+          </div>
+        </RadioGroupStyled>
+      </RadioItemsContainer>
+    </RadioGroupContainer>
+  );
+};
+
+export const Primary: Story = {
+  render: (args) => <RadioGroupComponent args={args} />,
+  args: {
+    disabled: false,
+  },
+};

packages/design-system/src/components/radio-group/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+// TODO: (주찬) 아직 작업 중인 컴포넌트입니다. [24-05-15]
+
+import type { HTMLProps, Ref } from 'react';
+import { useCallback } from 'react';
+import React, { useMemo } from 'react';
+import { forwardRefWithAs } from '@utils';
+import { useControllableState } from '@hooks';
+
+import {
+  RadioGroupActionsContext,
+  RadioGroupDataContext,
+} from './radioGroupContext';
+
+interface RadioGroupProps
+  extends Omit<
+    HTMLProps<HTMLDivElement>,
+    'onChange' | 'defaultValue' | 'checked' | 'defaultChecked' | 'value'
+  > {
+  defaultCheckedValue?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLInputElement>;
+}
+const RadioGroupRoot = (
+  {
+    defaultCheckedValue,
+    value: controlledValue,
+    onChange: controlledOnChange,
+    disabled,
+    className,
+    children,
+    name,
+    ...props
+  }: RadioGroupProps,
+  ref?: Ref<HTMLInputElement>,
+) => {
+  let [value, onChange] = useControllableState<string>(
+    controlledValue,
+    controlledOnChange,
+    defaultCheckedValue,
+  );
+
+  const changeValue = useCallback(
+    (changedValue: string) => {
+      if (disabled) {
+        return;
+      }
+      onChange?.(changedValue);
+    },
+    [disabled],
+  );
+
+  const actions = useMemo(
+    () => ({
+      changeValue,
+    }),
+    [changeValue],
+  );
+  const data = useMemo(
+    () => ({
+      value,
+    }),
+    [value],
+  );
+
+  return (
+    <RadioGroupActionsContext.Provider value={actions}>
+      <RadioGroupDataContext.Provider value={data}>
+        <div
+          role="radiogroup"
+          tabIndex={0}
+          className={className}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupDataContext.Provider>
+    </RadioGroupActionsContext.Provider>
+  );
+};
+
+export const RadioGroup = forwardRefWithAs(RadioGroupRoot);

packages/design-system/src/components/radio-group/radioGroupContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export const RadioGroupActionsContext = createContext<{
+  changeValue: (value: string) => void;
+} | null>(null);
+RadioGroupActionsContext.displayName = 'RadioGroupActionsContext';
+
+export const RadioGroupDataContext = createContext<{
+  value: string;
+} | null>(null);
+RadioGroupDataContext.displayName = 'RadioGroupDataContext';

packages/design-system/src/components/radio/index.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import { Radio } from '.';
+
+const RadioWrapper = styled.div`
+  display: flex;
+`;
+
+const RadioStyled = styled(Radio)`
+  display: flex;
+  align-items: center;
+
+  width: 200px;
+
+  cursor: pointer;
+
+  &:hover:not(.disabled) .radio-icon {
+    background-color: #f5f5f5;
+  }
+
+  &:active:not(.disabled) .radio-icon {
+    background-color: #e5e5e5;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+const Icon = styled.span<{ checked: boolean }>`
+  position: relative;
+  display: inline-block;
+
+  width: 16px;
+  height: 16px;
+  margin-right: 0.5em;
+  border: 1px solid #000;
+  border-radius: 50%;
+
+  ${({ checked }) =>
+    checked &&
+    `
+    &::after {
+        content: 'v';
+        font-size: 16px;
+        font-weight: bold;
+        width: 16px;
+        height: 16px;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+  `}
+`;
+
+const meta: Meta<typeof Radio> = {
+  component: Radio,
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+const RadioComponent = ({
+  args,
+}: {
+  args: React.ComponentProps<typeof Radio>;
+}) => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <RadioWrapper>
+      <RadioStyled
+        {...args}
+        value="value1"
+        onChange={(newChecked) => setChecked(newChecked)}
+        className={args.disabled ? 'disabled' : ''}
+      >
+        <Icon className="radio-icon" checked={checked} />
+        Radio
+      </RadioStyled>
+    </RadioWrapper>
+  );
+};
+
+export const Primary: Story = {
+  render: (args) => <RadioComponent args={args} />,
+  args: {
+    disabled: false,
+  },
+};