Qi1 126 블로그 seo 개선

[seungwoo505]

📝 변경 사항

1. 헤더, 푸터가 보이면 안되는 곳에 보이던 현상 제거

🔍 변경 사항 세부 설명

🕵️‍♀️ 요청사항

📷 스크린샷 (선택)

[gemini-code-assist]

Summary of Changes

Hello @seungwoo505, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

I've implemented changes to prevent the header and footer components from appearing on specific pages, such as login, signup, and certification pages. This addresses an issue where these components were visible in areas they shouldn't be, which contributes to improving the blog's SEO by ensuring a cleaner and more focused user experience on these particular routes.

Highlights

• Conditional UI Rendering: Introduced new ConditionalHeader and ConditionalFooter components to control the visibility of the global header and footer.
• Path-Based Visibility Control: These new components use usePathname from next/navigation to determine if the current route is /login, /signUp, or /certification, hiding the respective component if it matches.
• Layout Integration: Updated app/layout.tsx to utilize ConditionalHeader and ConditionalFooter instead of directly rendering the Header and Footer components, ensuring the conditional logic is applied globally.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[yshls]

피승완

[gemini-code-assist]

Code Review

이 PR은 특정 경로에서 헤더와 푸터가 보이지 않도록 수정하는 변경 사항을 담고 있습니다. ConditionalHeader와 ConditionalFooter라는 두 개의 새로운 컴포넌트를 추가하여 이 로직을 구현했습니다. 제 리뷰는 코드 중복을 줄이고 유지보수성을 향상시키기 위해 이 두 컴포넌트를 하나의 범용 컴포넌트로 통합하는 것을 제안합니다. 또한, 이 과정에서 스타일 가이드에 맞춰 상수 네이밍과 named export 사용을 권장합니다.

[gemini-code-assist]

안녕하세요. 헤더와 푸터를 특정 경로에서 숨기는 기능 추가 잘 보았습니다.

현재 ConditionalHeader와 ConditionalFooter 컴포넌트는 로직이 거의 동일하여 코드 중복이 발생하고 있습니다. 향후 유지보수성을 높이기 위해, 이 두 컴포넌트를 하나의 범용 컴포넌트(예: ConditionalRenderer)로 통합하는 것을 제안합니다. 이 방식은 코드를 더 간결하게 만들고, 숨김 처리할 경로 목록을 한 곳에서 관리할 수 있게 해줍니다.

또한, 스타일 가이드에 따라 상수는 UPPER_SNAKE_CASE로, 컴포넌트는 named export로 작성하는 것이 좋습니다.¹²

아래는 제안하는 리팩토링 예시입니다.

1. 새로운 범용 컴포넌트 생성

// app/(shared)/components/conditional-renderer.tsx
'use client';

import { usePathname } from 'next/navigation';
import React from 'react';

// 스타일 가이드에 따라 상수는 UPPER_SNAKE_CASE로 선언하고,
// 컴포넌트 외부에서 관리하여 불필요한 재생성을 방지합니다.
const HIDE_ON_PATHS = ['/login', '/signUp', '/certification'];

// 스타일 가이드에 따라 named export를 사용합니다.
export const ConditionalRenderer = ({ children }: { children: React.ReactNode }) => {
  const pathname = usePathname();

  if (HIDE_ON_PATHS.includes(pathname)) {
    return null;
  }

  return <>{children}</>;
};

2. layout.tsx 수정

// app/layout.tsx
// ...
import { Header } from './(shared)/components/Header';
import { Footer } from './(shared)/components/Footer';
import { ConditionalRenderer } from './(shared)/components/conditional-renderer';

// ...

function LayoutContent({ children }: { children: React.ReactNode }) {
  return (
    <div className="w-full md:max-w-[1440px] mx-auto min-h-screen flex flex-col">
      <ConditionalRenderer>
        <Header />
      </ConditionalRenderer>
      <main className="flex-1 bg-white dark:bg-gray-900">{children}</main>
      <ConditionalRenderer>
        <Footer />
      </ConditionalRenderer>
      <Toaster richColors position="top-center" />
    </div>
  );
}

이 방법을 적용하면 conditional-header.tsx와 conditional-footer.tsx 파일이 필요 없게 됩니다.

Style Guide References

Footnotes

1. 상수는 UPPER_SNAKE_CASE를 사용해야 합니다. (link) ↩

2. Default export보다 named export를 선호합니다. (link) ↩

[hyonun321]

LGTM