[NDD-168] Selection Box 컴포넌트 생성 (2h/2h) (#47)

* feat: SelectionBox 컴포넌트 추가

* style: typography에 title4 속성 추가

FE/src/components/foundation/SelectionBox/SelectionBox.styles.tsx

@@ -0,0 +1,49 @@
+import { theme } from '@/styles/theme';
+import { css } from '@emotion/react';
+
+export const selectionBox = css`
+  ::before {
+    content: '';
+    position: absolute;
+    background-color: ${theme.colors.point.primary.default};
+  }
+`;
+
+export const selectionBoxDirection = {
+  top: css`
+    ::before {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 0.4rem;
+      border-radius: 0 0 0.2rem 0.2rem;
+    }
+  `,
+  left: css`
+    ::before {
+      top: 0;
+      left: 0;
+      width: 0.4rem;
+      height: 100%;
+      border-radius: 0 0.2rem 0.2rem 0;
+    }
+  `,
+  right: css`
+    ::before {
+      top: 0;
+      right: 0;
+      width: 0.4rem;
+      height: 100%;
+      border-radius: 0.2rem 0 0 0.2rem;
+    }
+  `,
+  bottom: css`
+    ::before {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 0.4rem;
+      border-radius: 0.2rem 0.2rem 0 0;
+    }
+  `,
+} as const;

FE/src/components/foundation/SelectionBox/SelectionBox.tsx

@@ -0,0 +1,57 @@
+import { css } from '@emotion/react';
+import { selectionBox, selectionBoxDirection } from './SelectionBox.styles';
+import { HTMLElementTypes } from '@/types/utils';
+
+type SelectionButtonProps = {
+  children: React.ReactNode;
+  id: string;
+  name?: string;
+  lineDirection?: 'left' | 'right' | 'top' | 'bottom';
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+} & HTMLElementTypes<HTMLDivElement>;
+
+const SelectionBox: React.FC<SelectionButtonProps> = ({
+  children,
+  id,
+  name,
+  lineDirection = 'left',
+  onChange,
+  value,
+  ...args
+}) => {
+  return (
+    <div
+      css={css`
+        display: inline-block;
+        position: relative;
+        padding: 0 2rem;
+      `}
+      {...args}
+    >
+      <input
+        id={id}
+        name={name}
+        type={name ? 'radio' : 'checkbox'}
+        onChange={onChange}
+        value={value}
+        css={css`
+          display: none;
+        `}
+      />
+      <label
+        htmlFor={id}
+        css={css`
+          ${'#' + id}:checked + & {
+            ${selectionBox}
+            ${selectionBoxDirection[lineDirection]}
+          }
+        `}
+      >
+        {children}
+      </label>
+    </div>
+  );
+};
+
+export default SelectionBox;

FE/src/styles/_typography.ts

@@ -30,6 +30,16 @@ export const typography = {
     fontSize: '1.5rem',
   },
 
+  /**
+   * 문제선택 tab, 마이페이지의 tab 컴포넌트에 사용됩니다.
+   */
+  title4: {
+    fontFamily: 'Pretendard',
+    fontStyle: 'normal',
+    fontWeight: 600,
+    fontSize: '1.125rem',
+  },
+
   /**
    * 기본 글자에는 모두 이 스타일이 사용됩니다.
    */