Progmong (프로그몽)

// src/pages/Home/Home.jsx (Dual Layout 분기)
return (
  <BackgroundContainer>
    {isMobile ? (
      // Mobile Strategy: 터치 친화적인 Swiper UI
      <MobileSliderWrapper>
        <Swiper modules={[Navigation]} loop>
          {allItems.map(item => (
            <SwiperSlide key={item.name}>
               <MobileMenuIcon src={item.src} onClick={() => navigate(item.route)} />
            </SwiperSlide>
          ))}
        </Swiper>
      </MobileSliderWrapper>
    ) : (
      // Desktop Strategy: 비율 유지 Scaling Engine
      <ScalingStage scale={scale}>
        <StageContent>
          {allItems.map(item => (
            <DesktopMenuIcon
              style={{ top: item.top, left: item.left }} // 절대 좌표 배치
              onClick={() => navigate(item.route)}
            />
          ))}
        </StageContent>
      </ScalingStage>
    )}
  </BackgroundContainer>
)

// src/components/ContentView.jsx
export default function ContentViewer({ html }) {
  // 1. 보안을 위한 Sanitization (XSS 방지)
  const clean = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });

  // 2. HTML -> React Lazy Component 변환
  const content = parse(clean, {
    replace(domNode) {
      // 3. 코드 블록 발견 시 SyntaxHighlighter로 교체
      if (domNode.name === 'pre' && domNode.children?.[0]?.name === 'code') {
        const codeString = domNode.children[0].children[0]?.data;
        return (
          <SyntaxHighlighter language="javascript" style={dracula}>
            {codeString}
          </SyntaxHighlighter>
        );
      }
    },
  });

  return <>{content}</>;
}