feat: shared Text UI 제작

[sehyun0518]

🔘Part

• FE

  
  

🔎 작업 내용

• Box 컴포넌트를 활용해서 text 관련 태그만을 작성할 수 있도록 Text 컴포넌트를 제작했습니다.

  
  

🔧 앞으로의 과제

• 다른 공통 컴포넌트 추출

  
  

➕ 이슈 링크

• DF-76

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[llamapreview]

Auto Pull Request Review from LlamaPReview

1. Overview

1.1 PR Summary

• Business value and requirements alignment: The PR introduces a new shared Text component, which aligns with the business requirement of promoting code reuse and modularity. This component will be used across the application, impacting various features and screens.
• Key components modified: The Text component is the main component modified in this PR. It uses the Box component from the shared UI, which is a core component in the application's design system.
• Impact assessment: The introduction of the Text component could potentially introduce new bugs or instability if not thoroughly tested. It also introduces a potential single point of failure, as changes or issues in the Box component could propagate to the Text component and affect the entire system.
• System dependencies and integration impacts: The Text component uses the Box component from the shared UI, which is a core component in the application's design system. Any changes or issues in the Box component could propagate to the Text component and affect the entire system.

1.2 Architecture Changes

• System design modifications: The PR introduces a new shared Text component, which promotes code reuse and modularity. This component will be used across the application, impacting various features and screens.
• Component interactions: The Text component uses the Box component from the shared UI, which is a core component in the application's design system. Any changes or issues in the Box component could propagate to the Text component and affect the entire system.
• Integration points: The Text component is designed to be used across the application, impacting various features and screens. It integrates with the Box component from the shared UI.

2. Detailed Technical Analysis

2.1 Code Logic Deep-Dive

Core Logic Changes

• src/shared/ui/Text/Text.tsx - Text
  • Submitted PR Code:

    import { colors, fontSizes } from "@/app/token";
    import { Box } from "../Box";

    type ValidElements = "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

    interface TextProps {
        as?: ValidElements;
        children?: React.ReactNode;
        fontSize: keyof typeof fontSizes;
        color: keyof typeof colors;
        className?: string;
        style? : unknown;
    }

    export const Text = ({as = "span", children, fontSize, color, className, style}: TextProps) => {
        return (
            <Box as={as} fontSize={fontSize} color={color} className={`${className} ${style}`}>
                {children}
            </Box>
        );
    }

• Analysis:
  • The Text component uses the Box component from the shared UI, which is a core component in the application's design system. This introduces a potential single point of failure, as changes or issues in the Box component could propagate to the Text component and affect the entire system.
  • The as prop uses a union type (ValidElements), which could lead to type safety issues if not used correctly. For example, passing an invalid element type like "div" would not be caught at compile time.
  • The component's props (fontSize, color, className, style) are not validated, which could lead to runtime errors if invalid values are passed. For instance, passing an invalid font size or color could cause the component to render incorrectly or not at all.
• LlamaPReview Suggested Improvements:

    import { colors, fontSizes } from "@/app/token";
    import { Box } from "../Box";

    type ValidElements = "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

    interface TextProps {
        as?: ValidElements;
        children?: React.ReactNode;
        fontSize: keyof typeof fontSizes;
        color: keyof typeof colors;
        className?: string;
        style? : unknown;
    }

    const validElements = new Set(ValidElements);

    export const Text = ({as = "span", children, fontSize, color, className, style}: TextProps) => {
        if (!validElements.has(as)) {
            throw new Error(`Invalid element type "${as}". Must be one of ${Array.from(validElements).join(", ")}.`);
        }
        return (
            <Box as={as} fontSize={fontSize} color={color} className={`${className} ${style}`}>
                {children}
            </Box>
        );
    }

• Improvement rationale:
  • Adding a runtime check for the as prop ensures that invalid element types are caught and handled gracefully, improving type safety.
  • While the initial PR review mentioned type safety and prop validation, it did not provide concrete suggestions for improvement. The suggested improvement above addresses these concerns by adding a runtime check for the as prop and ensuring that all props are validated.

3. Critical Findings

Expand for details

3.1 Potential Issues

• 🔴 Critical Issues

  • Type safety: The use of union types for the as prop could lead to runtime errors if an invalid element type is passed. This could cause the component to render incorrectly or not at all.
    • Impact: This could lead to unexpected behavior and user experience issues.
    • Recommendation: Add a runtime check for the as prop to ensure that it is a valid element type.
  • Prop validation: The lack of prop validation could lead to runtime errors if invalid values are passed for the fontSize, color, className, or style props. This could cause the component to render incorrectly or not at all.
    • Impact: This could lead to unexpected behavior and user experience issues.
    • Recommendation: Validate all props to prevent runtime errors.

• 🟡 Warnings

  • Design system consistency: Changes in the Box component could affect the Text component and the entire design system.
    • Potential risks: This could lead to inconsistent styling and behavior across the application.
    • Suggested improvements: Ensure that the Text component adheres to the design system and that it behaves consistently with other components. Also, ensure that the Box component is stable and does not introduce unexpected changes.

3.2 Code Quality Concerns

• Maintainability aspects: The Text component is well-structured and easy to understand. However, it could be improved by adding more descriptive comments and documentation.
• Readability issues: The Text component is easy to read and understand. However, it could be improved by adding more descriptive variable and function names.
• Performance bottlenecks: The Text component is simple and efficient, with no obvious performance bottlenecks. However, it could be improved by adding more performance testing and optimization.

4. Security Assessment

Expand for details

• Authentication/Authorization impacts: The Text component does not have any authentication or authorization impacts.
• Data handling concerns: The Text component does not handle any data, so there are no data handling concerns.
• Input validation: The Text component does not validate its inputs, which could potentially lead to security vulnerabilities if malicious content is passed. However, this is addressed in the suggested improvements above.
• Security best practices: The Text component follows security best practices by using React's component model and avoiding direct DOM manipulation.
• Potential security risks: While there are no immediate security concerns, the Text component could potentially be used to inject malicious content if not properly sanitized. This is addressed in the suggested improvements above.
• Mitigation strategies: The suggested improvements above address the potential security risks by adding input validation and ensuring that all props are validated.
• Security testing requirements: Thorough security testing is required to ensure that the Text component is not vulnerable to security attacks.

5. Testing Strategy

Expand for details

5.1 Test Coverage

• Unit test analysis: Unit tests are required to ensure that the Text component behaves as expected under various conditions. This includes testing the component with various props and edge cases.
• Integration test requirements: Integration tests are required to ensure that the Text component integrates well with other components and the design system.

5.2 Test Recommendations

Suggested Test Cases

// Test that the Text component renders correctly with valid props
it("renders correctly with valid props", () => {
  render(<Text as="p" fontSize="md" color="black">Hello, world!</Text>);
  expect(screen.getByText("Hello, world!")).toBeInTheDocument();
});

// Test that the Text component throws an error with invalid props
it("throws an error with invalid props", () => {
  expect(() => render(<Text as="div" fontSize="md" color="black">Hello, world!</Text>)).toThrow("Invalid element type \"div\"");
});

• Coverage improvements: Thorough testing is required to ensure that the Text component is robust and reliable. This includes testing the component with various props, edge cases, and integration scenarios.
• Performance testing needs: Performance testing is required to ensure that the Text component is efficient and does not introduce performance bottlenecks.

6. Documentation & Maintenance

Expand for details

• Documentation updates needed: The Text component needs documentation to explain its purpose, props, and usage. This includes API documentation, architecture documentation, and configuration documentation.
• Long-term maintenance considerations: The Text component should be maintained and updated as the design system evolves. This includes updating the component to reflect changes in the design system and ensuring that it remains compatible with other components.
• Technical debt and monitoring requirements: The Text component should be monitored to ensure that it remains stable and does not introduce unexpected changes. This includes monitoring the component's usage, performance, and compatibility with other components.

7. Deployment & Operations

Expand for details

• Deployment impact and strategy: The Text component should be deployed as part of the application's design system. This includes ensuring that the component is compatible with other components and that it is deployed in a way that minimizes downtime and disruption.
• Key operational considerations: The Text component should be monitored to ensure that it remains stable and does not introduce unexpected changes. This includes monitoring the component's usage, performance, and compatibility with other components.

8. Summary & Recommendations

8.1 Key Action Items

1. Add runtime check for the as prop: This ensures that invalid element types are caught and handled gracefully, improving type safety.
2. Validate all props: This prevents runtime errors and ensures that the component behaves as expected.
3. Ensure design system consistency: This ensures that the Text component adheres to the design system and that it behaves consistently with other components.
4. Thoroughly test the Text component: This ensures that the component is robust and reliable, and that it integrates well with other components and the design system.

8.2 Future Considerations

• Technical evolution path: The Text component should evolve with the design system, reflecting changes in styling, behavior, and functionality.
• Business capability evolution: The Text component should be used across the application, impacting various features and screens. As the application evolves, the Text component should be updated to reflect changes in business capabilities and requirements.
• System integration impacts: The Text component should be integrated with other components and the design system. As the system evolves, the Text component should be updated to reflect changes in system integration and requirements.

---

💡 Help Shape LlamaPReview
How's this review format working for you? Vote in our Github Discussion Polls to help us improve your review experience!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud