Fix: 기존 authGuard 수정 및 리다이렉트 모달 추가, 프록시 경로 추가 by youdaeng2 · Pull Request #100 · B2A5/SOSO-Front-End

youdaeng2 · 2025-12-10T10:02:15Z

📌 개요

비로그인 액션에 사용하는 로그인 리다이렉트 오버레이 추가
useAuthGuard를 고차함수(HOF) 기반 requireAuth 패턴으로 리팩터링하고 사용처 정리
자유/투표 게시판 API를 프록시 대상으로 포함하고, SSR 환경에서 /api 리라이트를 건너뛰도록 분기 추가

🗒 상세 설명

1. 로그인 리다이렉트 오버레이 추가 (`LoginRedirectOverlay`)

비로그인 상태에서 좋아요/댓글 작성 등 보호된 액션을 호출할 때 띄우는 로그인 안내 모달 오버레이를 추가했습니다.

핵심 기술 및 구현사항

useOverlay 기반 오버레이로 구성하여, 어디서든 동일한 UX의 로그인 안내 모달을 호출 가능
현재 URL(pathname)을 returnTo 쿼리로 함께 전달해, 로그인 후 원래 페이지로 복귀할 수 있도록 지원
pointer-events를 사용해, 오버레이 전체는 클릭 차단, 모달 내부만 인터랙션 가능하도록 레이아웃 처리

사용 예시

// useOverlay 호출부 예시 (useAuthGuard 내부에서 사용)
const { open } = useOverlay();

await open<boolean>(({ close }) => (
  <LoginRedirectOverlay close={close} />
));

2. `useAuthGuard` 리팩터링 (HOF 패턴 도입 + 사용처 정리)

guard(fn) / ensureAuthed() 형태로 흩어져 있던 인증 가드 패턴을,
고차함수(HOF) 기반의 requireAuth 하나로 모아 재사용성을 높였습니다.

핵심 기술 및 구현사항

useAuthGuard 반환값 정리
- authed: 현재 로그인 여부
- requireAuth(fn): 로그인 확인이 래핑된 액션 함수를 반환
비인증 상태일 때는:
- LoginRedirectOverlay 오버레이를 띄우고
- 원래 액션은 실행하지 않음
기존 guard(...) 호출부를 requireAuth(...) 형태로 정리
- CommentInput, LikeButtonComment, LikeButtonPost 등에서 중복 가드 호출 제거
- onClick에 바로 requireAuth(handleToggleLike) 등으로 연결

사용 예시

const { requireAuth } = useAuthGuard();

const handleToggleLike = () => {
  if (toggleLike.isPending) return;
  toggleLike.mutate({ freeboardId: postId });
};

return (
  <button
    type="button"
    onClick={requireAuth(handleToggleLike)} // 비로그인 시 자동으로 로그인 모달 팝업
  >
    좋아요
  </button>
);

3. 프록시 경로 확장 및 SSR 분기 추가 (`next.config.js`, `api-client.ts`)

쿠키 기반 인증이 필요한 게시판 API에 대해 프록시를 확장하고,
SSR 환경에서 발생하던 Invalid URL 문제를 방지하기 위한 분기를 추가했습니다.

핵심 기술 및 구현사항

next.config.js
- /api/community/freeboard/:path* → ${apiBaseUrl}/community/freeboard/:path*
- /api/community/votesboard/:path* → ${apiBaseUrl}/community/votesboard/:path*
- 자유/투표 게시판 요청도 프론트 도메인 쿠키를 사용하는 프록시 경로로 통일
api-client.ts
- COOKIE_REQUIRED_PATHS에 자유/투표 게시판 경로 추가
  - 인증이 필요한 freeboard/votesboard 요청은 /api 프록시를 타도록 처리
- isBrowser 분기 추가
  - typeof window === 'undefined' (SSR/RSC)인 경우,
    baseURL과 url을 변경하지 않고 그대로 사용 →
    Node 환경에서 new URL() 호출 시 Invalid URL가 발생하지 않도록 방지

📸 스크린샷

UI 변경이 있을 경우, Before / After 스크린샷을 첨부해주세요.

AS-IS

비로그인 상태에서 좋아요/댓글 클릭 시, 단순 토스트 혹은 아무 동작 없음

TO-BE

비로그인 상태에서 보호된 액션 클릭 시 로그인 유도 모달 오버레이 노출

🔗 이슈

머지 시 자동으로 닫힐 이슈 번호를 closes #32처럼 closes #<번호>로 적어주세요.

closes #90

✅ 체크리스트

코드가 스타일 가이드를 따릅니다
자체 코드 리뷰를 완료했습니다
복잡/핵심 로직에 주석을 추가했습니다
관심사 분리를 확인했습니다 (인증 가드 / UI 오버레이 / API 클라이언트)
잠재적 사이드이펙트를 점검했습니다 (좋아요/댓글 가드 동작, SSR URL 처리)
Vercel Preview로 테스트를 완료했습니다

🧪 테스트 방법

변경 사항을 검증한 방법을 간단히 적어주세요!

비로그인 상태에서:
- 자유게시판 좋아요 버튼 클릭 시 로그인 모달 노출 확인
- 댓글 작성 시 로그인 모달 노출 및 실제 요청 차단 확인
로그인 상태에서:
- 좋아요/댓글 작성이 정상적으로 동작하고, 중복 요청 방지가 잘 되는지 확인
자유/투표 게시판 상세 페이지 SSR 진입 시 에러 로그(Invalid URL)가 발생하지 않는지 확인

📝 추가 노트

프록시 대상 확장에 관하여
“조회는 공개, 뮤테이션만 프록시/쿠키 필요” 기준으로 경로를 더 세분화해야 할지 검토 부탁드립니다.
( 뮤테이션만 프록시 대상이 돼야하는지)
Invalid URL 에러로 인하여 isBrowser 분기를 추가하였는데 이 방식이 맞는 건지 검토 부탁드립니다.

후속 작업

…해 Invalid URL 방지

linear · 2025-12-10T10:02:18Z

SOS-48 [Refactor] 상세페이지 로그인 여부 판별 로직 수정

github-actions · 2025-12-10T10:04:35Z

✅ PREVIEW https://soso-front-end-ohqzlws0b-dreampastes-projects.vercel.app

github-actions · 2025-12-10T10:07:27Z

📦 번들 분석 결과

📊 번들 크기 요약

항목	값
📦 전체 번들 크기	`3.7M`
📄 JavaScript 크기	`1.6M`
🗂️ JavaScript 파일 수	`62개`

🔍 주요 청크 파일 (크기순)

fe98bb7c-75056deddb8826d9.js - 169K
framework-69e0f7d37422957b.js - 137K
main-448b0e12e0910adc.js - 130K
7147-b4b28a8f9d4487de.js - 122K
1762-edb35251145c761f.js - 121K
polyfills-42372ed130431b0a.js - 110K
2877-3c61ab12293ea4d2.js - 90K
6086-d8a2074efae3c305.js - 76K
page-50c70d67c259b206.js - 31K
2906-961db7df3fbbb1e4.js - 28K

🤖 자동 생성된 번들 분석 리포트

github-actions · 2025-12-10T10:07:28Z

⚡ Lighthouse 성능 분석 결과

📊 전체 평균 점수

지표	점수
🚀 Performance	74점
♿ Accessibility	86점
✅ Best Practices	100점
🔍 SEO	100점

📈 측정 현황

측정 성공: 15/16 페이지
상태: success

📄 페이지별 상세 분석

🏠 커뮤니티 페이지: `/main/community`

지표	점수
🚀 Performance	70점
♿ Accessibility	78점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👥 창업자 페이지: `/main/founder`

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🏡 홈 페이지: `/main/home`

지표	점수
🚀 Performance	75점
♿ Accessibility	91점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🗺️ 지도 페이지: `/main/maps`

지표	점수
🚀 Performance	75점
♿ Accessibility	87점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

👤 프로필 페이지: `/main/profile`

지표	점수
🚀 Performance	75점
♿ Accessibility	88점
✅ Best Practices	100점
🔍 SEO	100점

📊 상세 분석 보기

🔗 전체 상세 분석 결과

📊 전체 상세 Lighthouse 분석 결과 보기

📄 측정된 페이지

/main/community
/main/founder
/main/home
/main/maps
/main/profile

모든 페이지에서 성능 측정이 완료되었습니다.

🤖 자동 생성된 Lighthouse 성능 리포트

DreamPaste

고생하셨어요!!

DreamPaste · 2025-12-11T12:38:42Z

apps/web/next.config.js

+      // 자유 게시판
+      {
+        source: '/api/community/freeboard/:path*',
+        destination: `${apiBaseUrl}/community/freeboard/:path*`,
+      },
+      // 투표 게시판
+      {
+        source: '/api/community/votesboard/:path*',
+        destination: `${apiBaseUrl}/community/votesboard/:path*`,
+      },


{ source: '/api/community/:path*', destination: `${apiBaseUrl}/community/:path*`, },

위처럼 한번에 해도 좋을거같아요!

DreamPaste · 2025-12-11T13:48:13Z

apps/web/src/hooks/useAuth.ts

+  /**
+   * 고차함수(HOF) 패턴
+   *
+   * - 인자: fn: 실제로 실행하고 싶은 액션(함수)
+   * - 반환: 로그인 체크가 래핑된 새 함수
+   **/
+  const requireAuth =
+    // Args: 원래 함수가 받을 인자 타입들
+    <Args extends unknown[]>(
+        fn: (...args: Args) => void | Promise<void>,
+      ) =>
+      async (...args: Args) => {
+        if (!(await ensureAuthed())) return;
+        return fn(...args);
+      };
+


HOF 패턴이네요 고생하셨어요

github-actions · 2025-12-11T13:53:20Z

✅ PREVIEW https://soso-front-end-8pkf5kkyb-dreampastes-projects.vercel.app

youdaeng2 added 5 commits December 7, 2025 19:30

feat: 로그인 리다이렉트 모달 생성

4477b66

fix: 레거시 authGuard 고차함수 패턴으로 리팩토링

92268ff

fix: 변경된 authGuard에 맞춰 사용처 수정

45342a2

fix: 게시글 좋아요 버튼 인증 가드 중복 호출 제거

21ef7d7

fix: 프록시 대상 경로에 자유/투표 게시판 추가, SSR에서는 /api 리라이트를 건너뛰도록 isBrowser 분기 추가…

c28d8bc

…해 Invalid URL 방지

youdaeng2 requested a review from DreamPaste December 10, 2025 10:02

youdaeng2 added the Fix 🔧 문제가 있는 내용을 수정합니다! label Dec 10, 2025

youdaeng2 added the 유진 label Dec 10, 2025

youdaeng2 changed the title ~~Fix/sos 48 freeboard auth guard~~ Fix: 기존 authGuard 수정 및 리다이렉트 모달 추가, 프록시 경로 추가 Dec 10, 2025

youdaeng2 self-assigned this Dec 10, 2025

DreamPaste approved these changes Dec 11, 2025

View reviewed changes

Merge branch 'dev' into fix/SOS-48-freeboard-auth-guard

49b5426

DreamPaste merged commit a72007e into dev Dec 11, 2025
4 checks passed

DreamPaste deleted the fix/SOS-48-freeboard-auth-guard branch December 11, 2025 14:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: 기존 authGuard 수정 및 리다이렉트 모달 추가, 프록시 경로 추가#100

Fix: 기존 authGuard 수정 및 리다이렉트 모달 추가, 프록시 경로 추가#100
DreamPaste merged 6 commits intodevfrom
fix/SOS-48-freeboard-auth-guard

youdaeng2 commented Dec 10, 2025

Uh oh!

linear bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 10, 2025 •

edited

Loading

Uh oh!

DreamPaste left a comment

Uh oh!

DreamPaste Dec 11, 2025

Uh oh!

DreamPaste Dec 11, 2025

Uh oh!

github-actions bot commented Dec 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

youdaeng2 commented Dec 10, 2025

📌 개요

🗒 상세 설명

1. 로그인 리다이렉트 오버레이 추가 (LoginRedirectOverlay)

핵심 기술 및 구현사항

사용 예시

2. useAuthGuard 리팩터링 (HOF 패턴 도입 + 사용처 정리)

핵심 기술 및 구현사항

사용 예시

3. 프록시 경로 확장 및 SSR 분기 추가 (next.config.js, api-client.ts)

핵심 기술 및 구현사항

📸 스크린샷

AS-IS

TO-BE

🔗 이슈

✅ 체크리스트

🧪 테스트 방법

📝 추가 노트

후속 작업

Uh oh!

linear bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025

Uh oh!

github-actions bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 번들 분석 결과

📊 번들 크기 요약

🔍 주요 청크 파일 (크기순)

Uh oh!

github-actions bot commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚡ Lighthouse 성능 분석 결과

📊 전체 평균 점수

📈 측정 현황

📄 페이지별 상세 분석

🏠 커뮤니티 페이지: /main/community

👥 창업자 페이지: /main/founder

🏡 홈 페이지: /main/home

🗺️ 지도 페이지: /main/maps

👤 프로필 페이지: /main/profile

🔗 전체 상세 분석 결과

📄 측정된 페이지

Uh oh!

DreamPaste left a comment

Choose a reason for hiding this comment

Uh oh!

DreamPaste Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

DreamPaste Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1. 로그인 리다이렉트 오버레이 추가 (`LoginRedirectOverlay`)

2. `useAuthGuard` 리팩터링 (HOF 패턴 도입 + 사용처 정리)

3. 프록시 경로 확장 및 SSR 분기 추가 (`next.config.js`, `api-client.ts`)

github-actions bot commented Dec 10, 2025 •

edited

Loading

github-actions bot commented Dec 10, 2025 •

edited

Loading

🏠 커뮤니티 페이지: `/main/community`

👥 창업자 페이지: `/main/founder`

🏡 홈 페이지: `/main/home`

🗺️ 지도 페이지: `/main/maps`

👤 프로필 페이지: `/main/profile`