fix: pretendardGlobal -> pretendard로 변경 사용

[sehyun0518]

• 제목 : fix(71): pretendardGlobal -> pretendard로 변경 사용

🔘Part

• FE

  
  

🔎 작업 내용

• global 이름 제거

  
  

이미지 첨부

🔧 앞으로의 과제

• DF-73 수행

  
  

➕ 이슈 링크

[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 aims to fix a global font name issue, which is a critical component in the system's styling architecture. This change will affect all parts of the application that use this font, including all FE components.
• Key components modified: The global stylesheet (src/styles/global/globalText.css.ts) is modified, which affects the global font name.
• Impact assessment: The change might have system-wide impacts on any component or page that uses this font. This includes all FE components, as indicated by the FE part checkbox in the PR details.
• System dependencies and integration impacts: The pretendard font is used globally, so this change will affect all parts of the application that use this font. This includes all FE components, as indicated by the FE part checkbox in the PR details.

1.2 Architecture Changes

• System design modifications: The global font name is changed from pretendardGlobal to pretendard.
• Component interactions: The pretendard font is used globally, so this change will affect all components that use this font. This includes all FE components, as indicated by the FE part checkbox in the PR details.
• Integration points: The global stylesheet (src/styles/global/globalText.css.ts) is modified, which affects the global font name. This change might have system-wide impacts on any component or page that uses this font.

2. Detailed Technical Analysis

2.1 Code Logic Deep-Dive

Core Logic Changes

• src/styles/global/globalText.css.ts - export const pretendard
  • Submitted PR Code:

    export const pretendard = 'pretendard'

• Analysis:
  • The PR changes the global font name from pretendardGlobal to pretendard. This change affects the global stylesheet, which is a critical component in the system's styling architecture. This change might have system-wide impacts on any component or page that uses this font.
  • The initial PR review correctly identified the potential system-wide impacts and the need to update all CSS rules that use the pretendard font. However, it did not delve into the potential performance implications of changing the font name.
  • Edge cases and error handling: The initial review did not consider potential edge cases, such as large amounts of text or text in different languages, which could be affected by this change.
  • Cross-component impact: The initial review did not discuss the potential impact on other components or pages that use this font, which could lead to styling inconsistencies if not handled properly.
• LlamaPReview Suggested Improvements:

    // Add a comment to explain the change and its potential impacts
    /**
     * Change the global font name from 'pretendardGlobal' to 'pretendard'.
     * This change affects the global stylesheet and might have system-wide impacts on any component or page that uses this font.
     * Ensure that all CSS rules that use the 'pretendard' font are updated correctly to maintain the expected styling.
     * Additionally, validate that the font files are loading correctly and that there are no performance issues due to the font change.
     * Test all components and pages that use the 'pretendard' font to confirm they are displaying correctly.
     */
    export const pretendard = 'pretendard'

• Improvement rationale:
  • The added comment explains the change and its potential impacts, which can help other developers understand the change and its implications.
  • This can help prevent styling issues and ensure that the font is loading correctly and performing well.
  • It also encourages thorough testing to ensure that all components and pages that use the pretendard font are displaying correctly.

Core Logic Changes

• src/styles/global/globalText.css.ts - globalFontFace
  • Submitted PR Code:

    globalFontFace(pretendard, [
        {
            src: 'url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff")',
            fontWeight: 400,
            fontStyle: 'regular',
        },
        // ... other font weights and styles ...
    ])

• Analysis:
  • The initial PR review did not discuss the potential performance implications of changing the font name. If the font files' URLs or weights have changed, this could impact the application's performance and load times.
  • Edge cases and error handling: The initial review did not consider potential edge cases, such as slow or unstable network conditions, which could affect the font loading process.
  • Cross-component impact: The initial review did not discuss the potential impact on other components or pages that use this font, which could lead to performance issues if not handled properly.
• LlamaPReview Suggested Improvements:

    // Add a comment to explain the potential performance implications and suggest testing
    /**
     * Ensure that the font files are loading correctly and that there are no performance issues due to the font change.
     * Test the font loading process under different network conditions to ensure it is performing well.
     * Consider using a font loading strategy, such as preloading or using a font display property, to improve performance.
     */
    globalFontFace(pretendard, [
        {
            src: 'url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff")',
            fontWeight: 400,
            fontStyle: 'regular',
        },
        // ... other font weights and styles ...
    ])

• Improvement rationale:
  • The added comment explains the potential performance implications of changing the font name and suggests testing the font loading process under different network conditions.
  • This can help ensure that the font is loading correctly and performing well, even under challenging network conditions.
  • It also suggests using a font loading strategy to improve performance, which can help optimize the application's load times.

2.2 Implementation Quality

• Code organization and structure: The code is well-organized and follows a clear structure, with the global font definition and loading at the top of the file.
• Design patterns usage: The code uses the @vanilla-extract/css library to define and load the global font, which is a common and recommended approach for styling in React applications.
• Error handling approach: The initial PR review did not discuss error handling for the font loading process. It is recommended to add error handling to ensure that the font loading process does not fail silently.
• Resource management: The font files are loaded using the globalFontFace function, which ensures that the font files are loaded only once, improving performance.

3. Critical Findings

Details

3.1 Potential Issues

• 🔴 Critical Issues
  • Impact: The change in font name might break any existing CSS rules or styles that reference the old font name (pretendardGlobal), leading to unexpected styling issues across the application.
  • Recommendation: Thoroughly review all CSS rules that use the pretendard font to ensure they are updated correctly and maintain the expected styling. Additionally, validate that the font files are loading correctly and that there are no performance issues due to the font change.
• 🟡 Warnings
  • Warning: The initial PR review did not discuss the potential performance implications of changing the font name. If the font files' URLs or weights have changed, this could impact the application's performance and load times.
  • Potential risks: Slow or unstable network conditions could affect the font loading process, leading to performance issues.
  • Suggested improvements: Test the font loading process under different network conditions to ensure it is performing well. Consider using a font loading strategy, such as preloading or using a font display property, to improve performance.

3.2 Code Quality Concerns

• Maintainability aspects: The code is well-organized and follows a clear structure, with the global font definition and loading at the top of the file. This makes it easy to maintain and update the global font definition.
• Readability issues: The code is well-commented, with clear and concise comments explaining the purpose and functionality of the code. This improves readability and understanding for other developers.
• Performance bottlenecks: The initial PR review did not discuss the potential performance implications of changing the font name. It is recommended to test the font loading process under different network conditions to ensure it is performing well and to consider using a font loading strategy to improve performance.

4. Security Assessment

Details

• Authentication/Authorization impacts: The PR does not directly address authentication or authorization, as it only changes the global font name.
• Data handling concerns: The PR does not involve any data handling, as it only changes the global font name.
• Input validation: The PR does not involve any user input, as it only changes the global font name.
• Security best practices: The font files are loaded using HTTPS, which ensures that the font files are loaded securely.
• Potential security risks: While this PR doesn't directly address security, it's crucial to ensure that the font files are hosted securely and that their URLs are not exposed in the codebase to prevent potential security risks.
• Mitigation strategies: Ensure that the font files are hosted securely and that their URLs are not exposed in the codebase.
• Security testing requirements: No additional security testing is required for this PR, as it only changes the global font name.

5. Testing Strategy

Details

5.1 Test Coverage

• Unit test analysis: The initial PR review did not discuss unit testing for the font loading process. It is recommended to add unit tests to ensure that the font loading process works as expected.
• Integration test requirements: Integration tests are required to ensure that the font is loading correctly and that there are no styling issues across the application.
• Edge cases coverage: The initial PR review did not discuss edge case testing for the font loading process. It is recommended to test the font loading process under different network conditions and with different amounts of text to ensure it is performing well.

5.2 Test Recommendations

Suggested Test Cases

  // Example unit test for font loading process
  it('should load the font correctly', async () => {
    const { getByText } = render(<App />);
    const textElement = getByText('Hello, World!');
    expect(textElement).toHaveStyle('font-family: pretendard');
  });

  // Example integration test for font loading process
  it('should load the font correctly across the application', async () => {
    const { getByText } = render(<App />);
    const textElements = getByText(/Hello, World!/i);
    expect(textElements).toHaveLength(5);
    expect(textElements[0]).toHaveStyle('font-family: pretendard');
    expect(textElements[1]).toHaveStyle('font-family: pretendard');
    expect(textElements[2]).toHaveStyle('font-family: pretendard');
    expect(textElements[3]).toHaveStyle('font-family: pretendard');
    expect(textElements[4]).toHaveStyle('font-family: pretendard');
  });

  // Example edge case test for font loading process
  it('should load the font correctly under slow network conditions', async () => {
    const { getByText } = render(<App />, { delay: 1000 });
    const textElement = getByText('Hello, World!');
    expect(textElement).toHaveStyle('font-family: pretendard');
  });

• Coverage improvements: The initial PR review did not discuss test coverage for the font loading process. It is recommended to add unit tests, integration tests, and edge case tests to ensure that the font loading process works as expected under different conditions.
• Performance testing needs: The initial PR review did not discuss performance testing for the font loading process. It is recommended to test the font loading process under different network conditions to ensure it is performing well and to consider using a font loading strategy to improve performance.

6. Documentation & Maintenance

Details

• Documentation updates needed: The initial PR review did not discuss documentation updates. It is recommended to update the documentation to reflect the change in global font name and any updates to the CSS rules that use the pretendard font.
• Long-term maintenance considerations: The initial PR review did not discuss long-term maintenance considerations. It is recommended to ensure that the global font definition and loading are well-commented and easy to maintain, and to consider using a font loading strategy to improve performance.
• Technical debt and monitoring requirements: The initial PR review did not discuss technical debt or monitoring requirements. It is recommended to monitor the font loading process to ensure it is performing well and to address any performance issues that may arise.

7. Deployment & Operations

Details

• Deployment impact and strategy: The initial PR review did not discuss deployment impact or strategy. It is recommended to ensure that the global font definition and loading are deployed correctly and that there are no styling issues across the application.
• Key operational considerations: The initial PR review did not discuss key operational considerations. It is recommended to monitor the font loading process to ensure it is performing well and to address any performance issues that may arise.

8. Summary & Recommendations

8.1 Key Action Items

1. Thoroughly review all CSS rules that use the pretendard font to ensure they are updated correctly and maintain the expected styling.
2. Validate that the font files are loading correctly and that there are no performance issues due to the font change.
3. Test all components and pages that use the pretendard font to confirm they are displaying correctly.
4. Test the font loading process under different network conditions to ensure it is performing well.
5. Consider using a font loading strategy, such as preloading or using a font display property, to improve performance.
6. Update the documentation to reflect the change in global font name and any updates to the CSS rules that use the pretendard font.
7. Ensure that the global font definition and loading are well-commented and easy to maintain.
8. Monitor the font loading process to ensure it is performing well and to address any performance issues that may arise.

8.2 Future Considerations

• Technical evolution path: As the application evolves, it is important to consider the performance implications of changing the global font name and to ensure that the font loading process is optimized.
• Business capability evolution: As the application's business capabilities evolve, it is important to ensure that the global font definition and loading are updated to reflect any changes in the application's styling requirements.
• System integration impacts: As the application is integrated with other systems, it is important to ensure that the global font definition and loading are compatible with any styling requirements imposed by those systems.

---

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