컨벤션 반영

src/app/test/Staging.tsx

@@ -2,11 +2,9 @@ import { useEffect } from "react";
 
 import Button from "@/component/Button/Button.tsx";
 import { ButtonProvider } from "@/component/Button/ButtonProvider.tsx";
-import CheckBox from "@/component/common/CheckBox/CheckBox";
-import CheckBoxGroup from "@/component/common/CheckBox/CheckBoxGroup";
-import { Input, InputLabelContainer, Label } from "@/component/common/Input";
-import Radio from "@/component/common/RadioButton/Radio";
-import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup";
+import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox";
+import { Input, InputLabelContainer, Label } from "@/component/common/input";
+import { Radio, RadioButtonGroup } from "@/component/common/radioButton";
 import { useCheckBox } from "@/hooks/useCheckBox";
 import { useInput } from "@/hooks/useInput";
 import { useRadioButton } from "@/hooks/useRadioButton";

src/component/common/CheckBox/CheckBox.tsx

@@ -10,7 +10,7 @@ type CheckBoxProps = {
   children: React.ReactNode;
 };
 
-const CheckBox = ({ value, children }: CheckBoxProps) => {
+export function CheckBox({ value, children }: CheckBoxProps) {
   const checkboxContext = useContext(CheckBoxContext);
   return (
     <ListItemCard variant={checkboxContext?.isChecked(value) ? "theme" : "default"}>
@@ -41,6 +41,4 @@ const CheckBox = ({ value, children }: CheckBoxProps) => {
       />
     </ListItemCard>
   );
-};
-
-export default CheckBox;
+}

src/component/common/CheckBox/CheckBoxGroup.tsx

@@ -8,11 +8,11 @@ export type CheckBoxContextState = {
 
 export const CheckBoxContext = createContext<CheckBoxContextState | undefined>(undefined);
 
-type CheckBoxGroupProps = {
+type CheckBoxProps = {
   children: React.ReactNode;
 } & CheckBoxContextState;
 
-const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => {
+export function CheckBoxGroup({ children, ...props }: CheckBoxProps) {
   return (
     <div
       css={css`
@@ -24,6 +24,4 @@ const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => {
       <CheckBoxContext.Provider value={props}>{children}</CheckBoxContext.Provider>
     </div>
   );
-};
-
-export default CheckBoxGroup;
+}

src/component/common/CheckBox/index.ts

@@ -0,0 +1,2 @@
+export { CheckBox } from "./CheckBox";
+export { CheckBoxGroup } from "./CheckBoxGroup";

src/component/common/RadioButton/Radio.tsx

@@ -10,7 +10,7 @@ type RadioProps = {
   children: React.ReactNode;
 };
 
-const Radio = ({ value, children }: RadioProps) => {
+export function Radio({ value, children }: RadioProps) {
   const radioContext = useContext(RadioContext);
   return (
     <ListItemCard variant={radioContext?.isChecked(value) ? "theme" : "default"}>
@@ -42,6 +42,4 @@ const Radio = ({ value, children }: RadioProps) => {
       />
     </ListItemCard>
   );
-};
-
-export default Radio;
+}

src/component/common/RadioButton/RadioButtonGroup.tsx

@@ -13,7 +13,7 @@ type RadioButtonGroupProps = {
   children: React.ReactNode;
 } & RadioContextState;
 
-const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => {
+export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) {
   return (
     <div
       css={css`
@@ -25,6 +25,4 @@ const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => {
       <RadioContext.Provider value={props}>{children}</RadioContext.Provider>
     </div>
   );
-};
-
-export default RadioButtonGroup;
+}

src/component/common/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioButtonGroup } from "./RadioButtonGroup";

src/component/common/checkBox/CheckBox.tsx

@@ -0,0 +1,44 @@
+import { css } from "@emotion/react";
+import { useContext } from "react";
+
+import { CheckBoxContext } from "./CheckBoxGroup";
+
+import ListItemCard from "@/component/common/Card/ListItemCard";
+
+type CheckBoxProps = {
+  value: string;
+  children: React.ReactNode;
+};
+
+export function CheckBox({ value, children }: CheckBoxProps) {
+  const checkboxContext = useContext(CheckBoxContext);
+  return (
+    <ListItemCard variant={checkboxContext?.isChecked(value) ? "theme" : "default"}>
+      <label
+        htmlFor={value}
+        css={css`
+          font-weight: 600;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          width: 100%;
+          cursor: pointer;
+        `}
+      >
+        {children}
+      </label>
+      <input
+        type="checkbox"
+        id={value}
+        value={value}
+        onChange={(e) => {
+          checkboxContext?.onChange && checkboxContext.onChange(e.target.value);
+        }}
+        css={css`
+          display: none;
+        `}
+      />
+    </ListItemCard>
+  );
+}

src/component/common/checkBox/CheckBoxGroup.tsx

@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+import { createContext } from "react";
+
+export type CheckBoxContextState = {
+  isChecked: (value: string) => boolean;
+  onChange: (value: string) => void;
+};
+
+export const CheckBoxContext = createContext<CheckBoxContextState | undefined>(undefined);
+
+type CheckBoxProps = {
+  children: React.ReactNode;
+} & CheckBoxContextState;
+
+export function CheckBoxGroup({ children, ...props }: CheckBoxProps) {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      `}
+    >
+      <CheckBoxContext.Provider value={props}>{children}</CheckBoxContext.Provider>
+    </div>
+  );
+}

src/component/common/checkBox/index.ts

@@ -0,0 +1,2 @@
+export { CheckBox } from "./CheckBox";
+export { CheckBoxGroup } from "./CheckBoxGroup";

src/component/common/input/Input.tsx

@@ -0,0 +1,34 @@
+import { css } from "@emotion/react";
+import { forwardRef, useContext } from "react";
+
+import { InputContext } from "./InputLabelContainer";
+
+type InputProps = {
+  width?: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = forwardRef(function ({ id, width = "100%", ...props }: InputProps) {
+  const inputContext = useContext(InputContext);
+  return (
+    <div>
+      <div
+        css={css`
+          width: ${width};
+          border: 1px solid #e3e6ea; // FIXME: 디자인 토큰 적용하기
+          border-radius: 0.8rem;
+          padding: 1.6rem;
+        `}
+      >
+        <input
+          id={id || inputContext?.id}
+          css={css`
+            width: 100%;
+          `}
+          {...props}
+        />
+      </div>
+    </div>
+  );
+});
+
+Input.displayName = "Input";

src/component/common/input/InputLabelContainer.tsx

@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+import { createContext } from "react";
+
+type InputLabelContainerProps = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export const InputContext = createContext<{ id: string } | undefined>(undefined);
+
+export function InputLabelContainer({ id, children }: InputLabelContainerProps) {
+  return (
+    <InputContext.Provider value={{ id }}>
+      <div
+        css={[
+          css`
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+          `,
+        ]}
+      >
+        {children}
+      </div>
+    </InputContext.Provider>
+  );
+}

src/component/common/input/Label.tsx

@@ -0,0 +1,63 @@
+import { css, Interpolation, Theme } from "@emotion/react";
+import { useContext } from "react";
+
+import { InputContext } from "./InputLabelContainer";
+
+type LabelProps = {
+  order?: number;
+  styles?: Interpolation<Theme>;
+} & React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export function Label({ id, children, order, styles }: LabelProps) {
+  const inputContext = useContext(InputContext);
+
+  return (
+    <label
+      htmlFor={id || inputContext?.id}
+      css={
+        order
+          ? css`
+              display: flex;
+              align-items: center;
+              gap: 0.8rem;
+            `
+          : null
+      }
+    >
+      {order && (
+        <div
+          css={[
+            css`
+              background-color: #212529; // FIXME: 디자인 토큰 적용하기
+              width: 2rem;
+              height: 2rem;
+              border-radius: 0.4rem;
+              vertical-align: middle;
+              text-align: center;
+            `,
+            styles,
+          ]}
+        >
+          {/* FIXME text 컴포넌트 적용하기 */}
+          <span
+            css={css`
+              color: #fff;
+              font-size: 1rem;
+              font-weight: 600;
+            `}
+          >
+            {order}
+          </span>
+        </div>
+      )}
+      <span
+        css={css`
+          font-size: 1.4rem;
+          font-weight: 600;
+        `}
+      >
+        {children}
+      </span>
+    </label>
+  );
+}

src/component/common/input/index.ts

@@ -0,0 +1,3 @@
+export { Input } from "./Input";
+export { Label } from "./Label";
+export { InputLabelContainer } from "./InputLabelContainer";

src/component/common/radioButton/Radio.tsx

@@ -0,0 +1,45 @@
+import { css } from "@emotion/react";
+import { useContext } from "react";
+
+import { RadioContext } from "./RadioButtonGroup";
+
+import ListItemCard from "@/component/common/Card/ListItemCard";
+
+type RadioProps = {
+  value: string;
+  children: React.ReactNode;
+};
+
+export function Radio({ value, children }: RadioProps) {
+  const radioContext = useContext(RadioContext);
+  return (
+    <ListItemCard variant={radioContext?.isChecked(value) ? "theme" : "default"}>
+      <label
+        htmlFor={value}
+        css={css`
+          font-weight: 600;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          width: 100%;
+          cursor: pointer;
+        `}
+      >
+        {children}
+      </label>
+      <input
+        type="radio"
+        name={radioContext?.radioName}
+        id={value}
+        value={value}
+        onChange={(e) => {
+          radioContext?.onChange && radioContext.onChange(e.target.value);
+        }}
+        css={css`
+          display: none;
+        `}
+      />
+    </ListItemCard>
+  );
+}

src/component/common/radioButton/RadioButtonGroup.tsx

@@ -0,0 +1,28 @@
+import { css } from "@emotion/react";
+import { createContext } from "react";
+
+export type RadioContextState = {
+  radioName: string;
+  isChecked: (value: string) => boolean;
+  onChange: (value: string) => void;
+};
+
+export const RadioContext = createContext<RadioContextState | undefined>(undefined);
+
+type RadioButtonGroupProps = {
+  children: React.ReactNode;
+} & RadioContextState;
+
+export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      `}
+    >
+      <RadioContext.Provider value={props}>{children}</RadioContext.Provider>
+    </div>
+  );
+}

src/component/common/radioButton/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from "./Radio";
+export { RadioButtonGroup } from "./RadioButtonGroup";

tsconfig.json

@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "forceConsistentCasingInFileNames": true,
 
     /* Linting */
     "strict": true,