Skip to content

Qi1 126 블로그 seo 개선 #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 5, 2025
Merged

Qi1 126 블로그 seo 개선 #111

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1385e33
fix: 로그인 회원가입 certification 페이지에서 헤더 푸터 보이던 현상 수정
seungwoo505 Aug 5, 2025
ec4a795
Merge branch 'QI1-126-블로그-seo-개선' of https://github.com/2025-Ureca-Sn…
seungwoo505 Aug 5, 2025
3a87a9c
Merge branch 'main' into QI1-126-블로그-seo-개선
hyonun321 Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions app/(shared)/components/conditional-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client';

import { usePathname } from 'next/navigation';
import { Footer } from './Footer';

export default function ConditionalFooter() {
const pathname = usePathname();

// 푸터를 숨길 경로들
const hideFooterPaths = ['/login', '/signUp', '/certification'];
const shouldHideFooter = hideFooterPaths.includes(pathname);

if (shouldHideFooter) {
return null;
}

return <Footer />;
}
18 changes: 18 additions & 0 deletions app/(shared)/components/conditional-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client';

import { usePathname } from 'next/navigation';
import { Header } from './Header';

export default function ConditionalHeader() {
const pathname = usePathname();

// 헤더를 숨길 경로들
const hideHeaderPaths = ['/login', '/signUp', '/certification'];
const shouldHideHeader = hideHeaderPaths.includes(pathname);

if (shouldHideHeader) {
return null;
}

return <Header />;
}
10 changes: 4 additions & 6 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { ThemeProvider } from './theme-provider';
import WwwRedirect from './(shared)/components/www-redirect';
import { Toaster } from 'sonner';
// 2. Header와 Footer, 그리고 useEffect 훅을 임포트합니다.
import { Header } from './(shared)/components/Header';
import { Footer } from './(shared)/components/Footer';
import ConditionalHeader from './(shared)/components/conditional-header';
import ConditionalFooter from './(shared)/components/conditional-footer';

const notoSansKr = Noto_Sans_KR({
weight: ['400', '500', '700'],
Expand All @@ -16,11 +16,9 @@ const notoSansKr = Noto_Sans_KR({
function LayoutContent({ children }: { children: React.ReactNode }) {
return (
<div className="w-full md:max-w-[1440px] mx-auto min-h-screen flex flex-col">
<Header />

<ConditionalHeader />
<main className="flex-1 bg-white dark:bg-gray-900">{children}</main>

<Footer />
<ConditionalFooter />
Comment on lines +19 to +21
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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

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

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

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

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) ↩

<Toaster richColors position="top-center" />
</div>
);
Expand Down