feat(#100): SwitchCase 컴포넌트 추가

[soonki-98]

Overview

SwitchCase 컴포넌트 추가

PR Checklist

• All tests pass.
• All type checks pass.
• I have read the Contributing Guide document.
  Contributing Guide

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1902a37

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.82%. Comparing base (b3318a6) to head (1902a37).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #101      +/-   ##
==========================================
+ Coverage   82.60%   82.82%   +0.21%     
==========================================
  Files          66       67       +1     
  Lines         552      559       +7     
  Branches      115      118       +3     
==========================================
+ Hits          456      463       +7     
  Misses         84       84              
  Partials       12       12              

Components	Coverage Δ
@modern-kit/react	72.42% <100.00%> (+0.59%)	⬆️
@modern-kit/utils	97.81% <ø> (ø)

[ssi02014]

Suggested change

	export default function SwitchCase<Condition extends string | number>({
	condition,
	cases,
	defaultCase = null,
	}: Props<Condition>) {
	try {
	if (condition === null || condition === undefined) {
	return defaultCase;
	}
	return cases[condition] ?? defaultCase;
	} catch {
	return defaultCase;
	}
	}
	import { Nullable } from '@modern-kit/types';
	type Component = Nullable<JSX.Element>;
	// @modern-kit/types의 Nullable을 재활용해도 될 것 같아요!
	// Props말고 {ComponentName}Props로 변경해주세요!
	interface SwitchCaseProps<Condition extends string | number> {
	condition: Condition | null | undefined;
	cases: Partial<Record<Condition, Component>>;
	defaultComponent?: Component; // 타입명이라던가, 역할을 봤을 때 defaultComponent가 더욱 의미가 적절한 것 같습니다!
	}
	// named export와 default export 혼합은 권장되지 않은데 현재 대부분의 모듈들이 named export로 구성되어 있습니다.
	export const SwitchCase = <Condition extends string | number>({
	condition,
	cases,
	defaultComponent = null,
	}: SwitchCaseProps<Condition>) => {
	try {
	if (condition == null) { // == null로 두 조건식을 모두 검증할 수 있을 것 같습니다
	return defaultComponent;
	}
	return cases[condition] ?? defaultComponent;
	} catch {
	return defaultComponent;
	}
	};

[ssi02014]

• 이런 주석들은 현재 코드에서 제외하고 문서로 작성하면 좋을 것 같습니다

[ssi02014]

Suggested change

	import { render } from '@testing-library/react';
	import SwitchCase from '.';
	describe('SwitchCase', () => {
	it('SwitchCase는 조건을 받을 수 있어야 한다.', () => {
	const { container } = render(
	<SwitchCase condition={0 as number} cases={{ 0: <div>1</div> }} />
	);
	expect(container.querySelector('div')).toBeInTheDocument();
	});
	});
	import { screen } from '@testing-library/react';
	import { renderSetup } from '../../utils/test/renderSetup';
	import { SwitchCase } from '.';
	describe('SwitchCase', () => {
	it('should render the component corresponding to the condition passed through props.', () => {
	renderSetup(
	<SwitchCase
	condition={0 as number}
	cases={{
	0: <button>Test Button 0</button>,
	1: <button>Test Button 1</button>,
	}}
	/>
	);
	const testButtonZero = screen.queryByRole('button', {
	name: 'Test Button 0',
	});
	const testButtonOne = screen.queryByRole('button', {
	name: 'Test Button 1',
	});
	expect(testButtonZero).toBeInTheDocument();
	expect(testButtonOne).not.toBeInTheDocument();
	});
	it('should render the component corresponding to the condition passed through props.', () => {
	renderSetup(
	<SwitchCase
	condition={null}
	defaultComponent={<p role="paragraph">Default Text</p>}
	cases={{}}
	/>
	);
	const testText = screen.queryByRole('paragraph');
	expect(testText).toBeInTheDocument();
	});
	});

• https://testing-library.com/docs/queries/about/#priority
• https://testing-library.com/docs/queries/about/

[ssi02014]

LGTM