회사에서 프론트엔드 개발시 발생한 이슈 중 Card컴포넌트와 Children구조 리뉴얼에 대해 다음과 같이 문제를 정의, 설명하고 해결하였다. 이에 기록을 남겨 둔다.
2024-08-24. Card컴포넌트와 그에 따른 내부 children이 적용되는 구조로 UI의 아키텍쳐가 짜여져 있습니다.
그러나 children이 길어질 경우나 비즈니스 로직이 많이 필요할 경우 등에서는 코드의 유지보수성과 가독성에 문제가 있음을 인지하고 있었고, 개선이 필요하다고 판단했습니다.
문제를 다음과 같이 정리하고 방안을 제시하겠습니다.
Card컴포넌트는 children을 넣도록 설정되어 있음. 그러나
위의 두가지 경우 때문에 Card컴포넌트가 적용된 Parent단의 소스가 길어지고 가독성이 떨어짐
예시 : Home 소스
<div className="grid grid-cols-12 gap-4 md:gap-6">
<SummaryCard />
<Card
id="energyMonitoring"
title="Real-time energy monitoring"
size="md"
>
<LineChart />
</Card>
<Card id="iotMonitoring" title="IoT Equipment Status" size="sm">
{iotSeries && iotSeries.length > 0 && (
<MixBarChart series={iotSeries} />
)}
<div className="flex justify-between">
<div className="flex items-center gap-2">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
d="M14.7585 12.103L14.7596 12.1023L14.7348 12.0594C14.7226 12.0365 14.7108 12.0135 14.6962 11.9924L7.96537 0.333951C7.85625 0.135902 7.6482 0 7.40587 0C7.14335 0 6.91815 0.158404 6.81922 0.384491L6.8185 0.384134L0.14001 11.9521L0.146439 11.9558C0.0523264 12.0691 0.000554925 12.2116 0 12.3589C-2.63767e-08 12.5289 0.0674968 12.6919 0.187652 12.8121C0.307807 12.9323 0.470786 12.9999 0.640758 13H14.1715C14.3415 13 14.5045 12.9324 14.6247 12.8122C14.7449 12.692 14.8124 12.529 14.8124 12.3591C14.8124 12.2678 14.7928 12.1816 14.7585 12.103ZM7.41247 11.7892C6.89922 11.7892 6.48366 11.3861 6.48366 10.8731C6.48366 10.3598 6.89904 9.94443 7.41247 9.94443C7.91304 9.94443 8.32861 10.3596 8.32861 10.8731C8.32877 10.9934 8.30519 11.1126 8.25921 11.2239C8.21322 11.3351 8.14575 11.4361 8.06064 11.5212C7.97554 11.6063 7.87448 11.6738 7.76326 11.7198C7.65203 11.7658 7.53283 11.7894 7.41247 11.7892ZM8.32861 3.6874V8.74114H8.32825L8.32861 8.74399C8.32861 8.95347 8.15895 9.11795 7.95465 9.11795L7.95215 9.11777L6.86404 9.11795C6.65439 9.11795 6.48491 8.95347 6.48491 8.74399L6.48527 8.74114H6.48491V3.70097C6.48473 3.69632 6.48348 3.69186 6.48348 3.68722C6.48348 3.48774 6.63796 3.33076 6.82904 3.31612V3.31326H7.95197C8.15717 3.31451 8.32236 3.47363 8.32754 3.67757H8.32843L8.32861 3.6874Z"
fill="#80CAEE"
/>
</svg>
<span className="text-xs">
Number of recent abnormalities : {totalAbNormalCount}
</span>
</div>
<div className="flex items-center gap-2">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
d="M6.80169 10.4481C6.87401 10.5206 6.93139 10.6067 6.97054 10.7015C7.00969 10.7963 7.02985 10.8979 7.02985 11.0006C7.02985 11.1033 7.00969 11.2049 6.97054 11.2997C6.93139 11.3945 6.87401 11.4806 6.80169 11.5531L6.47072 11.8859C6.11938 12.2405 5.70162 12.5215 5.24159 12.7127C4.78156 12.904 4.28839 13.0016 3.79061 13C3.04096 13.0002 2.30808 12.7769 1.6847 12.3582C1.06131 11.9396 0.57543 11.3444 0.28852 10.648C0.0016098 9.95162 -0.0734348 9.18531 0.0728803 8.44603C0.219195 7.70675 0.580295 7.02771 1.1105 6.49483L3.35685 4.2361C3.83465 3.75574 4.43146 3.41252 5.08549 3.24197C5.73951 3.07142 6.42699 3.07975 7.07674 3.26608C7.72649 3.45242 8.31491 3.80999 8.78106 4.30178C9.24722 4.79358 9.57418 5.40171 9.72809 6.06324C9.75358 6.16382 9.75885 6.26851 9.74359 6.37116C9.72833 6.47382 9.69285 6.57238 9.63922 6.66107C9.58559 6.74976 9.5149 6.82679 9.43128 6.88766C9.34766 6.94853 9.2528 6.992 9.15226 7.01553C9.05173 7.03906 8.94753 7.04218 8.84577 7.0247C8.74402 7.00722 8.64676 6.9695 8.55969 6.91374C8.47262 6.85798 8.3975 6.78531 8.33872 6.69999C8.27994 6.61466 8.23869 6.5184 8.21738 6.41684C8.12605 6.02634 7.93265 5.66746 7.65718 5.37729C7.38171 5.08712 7.03416 4.8762 6.65046 4.76632C6.26676 4.65645 5.86085 4.65162 5.47467 4.75232C5.0885 4.85303 4.73608 5.05562 4.45385 5.33914L2.20749 7.59788C1.89437 7.91247 1.68106 8.31337 1.59453 8.74987C1.50801 9.18637 1.55217 9.63887 1.72142 10.0501C1.89067 10.4614 2.17742 10.813 2.54538 11.0604C2.91335 11.3077 3.34602 11.4399 3.78867 11.44C4.08278 11.4409 4.37415 11.3831 4.64589 11.2699C4.91764 11.1568 5.16436 10.9906 5.37178 10.7809L5.70211 10.4481C5.77419 10.3753 5.85986 10.3175 5.95421 10.2781C6.04856 10.2387 6.14973 10.2184 6.2519 10.2184C6.35407 10.2184 6.45524 10.2387 6.54959 10.2781C6.64394 10.3175 6.72961 10.3753 6.80169 10.4481ZM13.8898 1.11613C13.1789 0.401471 12.2147 0 11.2094 0C10.2041 0 9.23994 0.401471 8.52896 1.11613L8.19863 1.44828C8.05291 1.59481 7.97104 1.79355 7.97104 2.00077C7.97104 2.208 8.05291 2.40674 8.19863 2.55327C8.34436 2.6998 8.54201 2.78212 8.7481 2.78212C8.95419 2.78212 9.15184 2.6998 9.29757 2.55327L9.62854 2.22047C10.0486 1.79812 10.6183 1.56084 11.2123 1.56084C11.8063 1.56084 12.376 1.79812 12.7961 2.22047C13.2161 2.64282 13.4521 3.21566 13.4521 3.81296C13.4521 4.41026 13.2161 4.98309 12.7961 5.40544L10.5458 7.66092C10.3384 7.8706 10.0917 8.03681 9.81994 8.14995C9.5482 8.26308 9.25683 8.32089 8.96272 8.32002C8.45817 8.31966 7.96855 8.14793 7.57324 7.83268C7.17793 7.51743 6.90013 7.07715 6.78488 6.58323C6.73825 6.38171 6.61391 6.20707 6.43922 6.09773C6.26453 5.98838 6.05379 5.9533 5.85337 6.00019C5.65296 6.04708 5.47927 6.1721 5.37053 6.34776C5.26178 6.52341 5.22689 6.73531 5.27352 6.93683C5.46817 7.77329 5.93813 8.51911 6.60718 9.05334C7.27623 9.58756 8.10514 9.87887 8.95949 9.88001H8.96272C9.46074 9.88138 9.95409 9.78345 10.4142 9.59189C10.8744 9.40032 11.2922 9.11892 11.6435 8.76397L13.8898 6.50523C14.2418 6.15141 14.521 5.73133 14.7115 5.269C14.902 4.80666 15 4.31112 15 3.81068C15 3.31024 14.902 2.8147 14.7115 2.35237C14.521 1.89003 14.2418 1.46996 13.8898 1.11613Z"
fill="#80CAEE"
/>
</svg>
<span className="text-xs">Association status :</span>
<span>
<svg
width="44"
height="20"
viewBox="0 0 44 20"
fill="none"
xmlns="<http://www.w3.org/2000/svg>"
>
<path
d="M25.448 7.712H28.304V8.678H25.448V7.712ZM27.94 4.436H29.102V11.982H27.94V4.436ZM24.944 12.36C27.548 12.36 29.158 13.242 29.158 14.726C29.158 16.224 27.548 17.078 24.944 17.078C22.326 17.078 20.716 16.224 20.716 14.726C20.716 13.242 22.326 12.36 24.944 12.36ZM24.944 13.27C23.04 13.27 21.878 13.802 21.878 14.726C21.878 15.636 23.04 16.168 24.944 16.168C26.848 16.168 28.01 15.636 28.01 14.726C28.01 13.802 26.848 13.27 24.944 13.27ZM21.92 5.71H22.872V6.732C22.872 9.07 21.444 11.072 19.344 11.856L18.742 10.932C20.618 10.246 21.92 8.552 21.92 6.732V5.71ZM22.144 5.71H23.082V6.732C23.082 8.37 24.314 9.938 26.148 10.582L25.56 11.506C23.502 10.764 22.144 8.86 22.144 6.732V5.71ZM19.092 5.36H25.854V6.312H19.092V5.36ZM34.6449 5.094H35.6109V6.382C35.6109 8.818 34.2389 10.834 32.1249 11.66L31.5089 10.722C33.4129 10.022 34.6449 8.314 34.6449 6.382V5.094ZM34.8549 5.094H35.8069V6.466C35.8069 8.174 37.0669 9.756 38.8869 10.386L38.2709 11.296C36.2409 10.54 34.8549 8.664 34.8549 6.466V5.094ZM40.2309 4.436H41.3929V12.108H40.2309V4.436ZM41.0709 7.698H43.2689V8.678H41.0709V7.698ZM37.3609 12.458C39.9509 12.458 41.5189 13.312 41.5189 14.768C41.5189 16.224 39.9509 17.064 37.3609 17.064C34.7709 17.064 33.2029 16.224 33.2029 14.768C33.2029 13.312 34.7709 12.458 37.3609 12.458ZM37.3609 13.382C35.4849 13.382 34.3369 13.886 34.3369 14.768C34.3369 15.65 35.4849 16.154 37.3609 16.154C39.2369 16.154 40.3849 15.65 40.3849 14.768C40.3849 13.886 39.2369 13.382 37.3609 13.382Z"
fill="#3C50E0"
/>
<path
d="M4.6875 9.5625C4.55566 9.5625 4.43359 9.53809 4.32129 9.48926C4.20898 9.44043 4.11133 9.37451 4.02832 9.2915C3.94531 9.2085 3.87695 9.1084 3.82324 8.99121C3.76953 8.87402 3.74512 8.75195 3.75 8.625C3.75 8.49316 3.77441 8.37109 3.82324 8.25879C3.87207 8.14648 3.93799 8.04883 4.021 7.96582C4.104 7.88281 4.2041 7.81445 4.32129 7.76074C4.43848 7.70703 4.56055 7.68262 4.6875 7.6875C4.81934 7.6875 4.94141 7.71191 5.05371 7.76074C5.16602 7.80957 5.26367 7.87549 5.34668 7.9585C5.42969 8.0415 5.49805 8.1416 5.55176 8.25879C5.60547 8.37598 5.62988 8.49805 5.625 8.625C5.625 8.75684 5.60059 8.87891 5.55176 8.99121C5.50293 9.10352 5.43701 9.20117 5.354 9.28418C5.271 9.36719 5.1709 9.43555 5.05371 9.48926C4.93652 9.54297 4.81445 9.56738 4.6875 9.5625ZM10.3125 7.6875C10.4443 7.6875 10.5664 7.71191 10.6787 7.76074C10.791 7.80957 10.8887 7.87549 10.9717 7.9585C11.0547 8.0415 11.123 8.1416 11.1768 8.25879C11.2305 8.37598 11.2549 8.49805 11.25 8.625C11.25 8.75684 11.2256 8.87891 11.1768 8.99121C11.1279 9.10352 11.062 9.20117 10.979 9.28418C10.896 9.36719 10.7959 9.43555 10.6787 9.48926C10.5615 9.54297 10.4395 9.56738 10.3125 9.5625C10.1807 9.5625 10.0586 9.53809 9.94629 9.48926C9.83398 9.44043 9.73633 9.37451 9.65332 9.2915C9.57031 9.2085 9.50195 9.1084 9.44824 8.99121C9.39453 8.87402 9.37012 8.75195 9.375 8.625C9.375 8.49316 9.39941 8.37109 9.44824 8.25879C9.49707 8.14648 9.56299 8.04883 9.646 7.96582C9.729 7.88281 9.8291 7.81445 9.94629 7.76074C10.0635 7.70703 10.1855 7.68262 10.3125 7.6875ZM7.5 3C8.18848 3 8.85254 3.08789 9.49219 3.26367C10.1318 3.43945 10.73 3.69092 11.2866 4.01807C11.8433 4.34521 12.3486 4.73584 12.8027 5.18994C13.2568 5.64404 13.6475 6.15186 13.9746 6.71338C14.3018 7.2749 14.5532 7.87305 14.729 8.50781C14.9048 9.14258 14.9951 9.80664 15 10.5C15 11.1885 14.9121 11.8525 14.7363 12.4922C14.5605 13.1318 14.3091 13.73 13.9819 14.2866C13.6548 14.8433 13.2642 15.3486 12.8101 15.8027C12.356 16.2568 11.8481 16.6475 11.2866 16.9746C10.7251 17.3018 10.127 17.5532 9.49219 17.729C8.85742 17.9048 8.19336 17.9951 7.5 18C6.81152 18 6.14746 17.9121 5.50781 17.7363C4.86816 17.5605 4.27002 17.3091 3.71338 16.9819C3.15674 16.6548 2.65137 16.2642 2.19727 15.8101C1.74316 15.356 1.35254 14.8481 1.02539 14.2866C0.698242 13.7251 0.446777 13.1294 0.270996 12.4995C0.0952148 11.8696 0.00488281 11.2031 0 10.5C0 9.81152 0.0878906 9.14746 0.263672 8.50781C0.439453 7.86816 0.690918 7.27002 1.01807 6.71338C1.34521 6.15674 1.73584 5.65137 2.18994 5.19727C2.64404 4.74316 3.15186 4.35254 3.71338 4.02539C4.2749 3.69824 4.87061 3.44678 5.50049 3.271C6.13037 3.09521 6.79688 3.00488 7.5 3ZM7.5 17.0625C8.10059 17.0625 8.6792 16.9844 9.23584 16.8281C9.79248 16.6719 10.3149 16.4521 10.8032 16.1689C11.2915 15.8857 11.7358 15.5415 12.1362 15.1362C12.5366 14.731 12.8784 14.2891 13.1616 13.8105C13.4448 13.332 13.667 12.8096 13.8281 12.2432C13.9893 11.6768 14.0674 11.0957 14.0625 10.5C14.0625 9.89941 13.9844 9.3208 13.8281 8.76416C13.6719 8.20752 13.4521 7.68506 13.1689 7.19678C12.8857 6.7085 12.5415 6.26416 12.1362 5.86377C11.731 5.46338 11.2891 5.12158 10.8105 4.83838C10.332 4.55518 9.80957 4.33301 9.24316 4.17188C8.67676 4.01074 8.0957 3.93262 7.5 3.9375C6.89941 3.9375 6.3208 4.01562 5.76416 4.17188C5.20752 4.32812 4.68506 4.54785 4.19678 4.83105C3.7085 5.11426 3.26416 5.4585 2.86377 5.86377C2.46338 6.26904 2.12158 6.71094 1.83838 7.18945C1.55518 7.66797 1.33301 8.19043 1.17188 8.75684C1.01074 9.32324 0.932617 9.9043 0.9375 10.5C0.9375 11.1006 1.01562 11.6792 1.17188 12.2358C1.32812 12.7925 1.54785 13.3149 1.83105 13.8032C2.11426 14.2915 2.4585 14.7358 2.86377 15.1362C3.26904 15.5366 3.71094 15.8784 4.18945 16.1616C4.66797 16.4448 5.19043 16.667 5.75684 16.8281C6.32324 16.9893 6.9043 17.0674 7.5 17.0625Z"
fill="#3C50E0"
/>
<path
d="M5.58203 13.7944C6.18262 14.0679 6.81982 14.2046 7.49365 14.2046C8.17236 14.1997 8.81201 14.0605 9.4126 13.7871C10.0132 13.5137 10.5381 13.1255 10.9873 12.6226L10.2842 12C9.91797 12.4053 9.49805 12.7178 9.02441 12.9375C8.55078 13.1572 8.04053 13.2671 7.49365 13.2671C6.94189 13.2671 6.4292 13.1572 5.95557 12.9375C5.48193 12.7178 5.06445 12.4053 4.70313 12L4 12.6226C4.4541 13.1304 4.98145 13.521 5.58203 13.7944Z"
fill="#3C50E0"
/>
</svg>
</span>
</div>
</div>
</Card>
<Card id="chargeMonitoring" title="Fee Status" size="md">
<DoubleBarChart />
</Card>
</div>