Skip to content

fix: 라우팅 경로 수정 #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
heeeeyong merged 8 commits into from
Aug 13, 2025
Merged

fix: 라우팅 경로 수정 #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0c9a63f
fix: 쿠키 요청 경로 수정
heeeeyong Aug 13, 2025
bcb9625
Merge pull request #109 from THIP-TextHip/develop
heeeeyong Aug 13, 2025
70fdec4
Merge branch 'main' of https://github.com/THIP-TextHip/THIP-Web into …
heeeeyong Aug 13, 2025
2c1e233
Merge branch 'main' of https://github.com/THIP-TextHip/THIP-Web into …
heeeeyong Aug 13, 2025
489633e
Merge pull request #110 from THIP-TextHip/develop
heeeeyong Aug 13, 2025
77fc4b5
Merge branch 'main' of https://github.com/THIP-TextHip/THIP-Web into …
heeeeyong Aug 13, 2025
0cda714
fix: 회원가입 라우팅경로 수정
heeeeyong Aug 13, 2025
4e8068c
fix: 변수명 수정
heeeeyong Aug 13, 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
2 changes: 1 addition & 1 deletion src/api/users/postSignup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { apiClient } from '../index';

export interface PostSignupRequest {
aliasName: string;
nickName: string;
nickname: string;
}
Comment on lines 3 to 6
Copy link

@coderabbitai coderabbitai bot Aug 13, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

요청 필드명 nickName → nickname 변경 반영 👍

타입 정의가 깔끔하게 정리되었습니다. 이제 호출부 전역에서 남아있는 nickName 사용이 없는지만 확인하면 됩니다.

레거시 키워드 잔존 여부를 점검하는 스크립트입니다.

🏁 Script executed:

#!/bin/bash
# 레거시 필드명 'nickName' 사용 흔적 점검
rg -n --hidden --glob '!*dist/*' --glob '!*build/*' --glob '!*node_modules/*' '\bnickName\b' || true

Length of output: 430

레거시 필드명 nickName 사용 잔존 – 추가 변경 필요
다음 파일에서 여전히 nickName이 사용되고 있으니, 전부 nickname으로 변경해주세요:

  • src/pages/signup/SignupDone.tsx:12
  • src/pages/signup/SignupDone.tsx:23
  • src/pages/signup/SignupDone.tsx:34
  • src/pages/signup/SignupDone.tsx:41
🤖 Prompt for AI Agents 
In src/api/users/postSignup.ts around lines 3 to 6 the interface still uses the
legacy field naming; change any remaining occurrences of "nickName" to
"nickname". Update this file's PostSignupRequest to use nickname and then update
the referenced UI files (src/pages/signup/SignupDone.tsx lines 12, 23, 34, 41)
to read/write the same "nickname" property so names are consistent across API
and frontend.


export interface PostSignupResponse {
Expand Down
8 changes: 3 additions & 5 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
RouterProvider,
} from 'react-router-dom';
import Login from './login/Login';
import Signup from './signup/Signup';
// import Signup from './signup/Signup';
import SignupGenre from './signup/SignupGenre';
import SignupNickname from './signup/SignupNickname';
import SignupDone from './signup/SignupDone';
Expand Down Expand Up @@ -44,10 +44,8 @@ const Router = () => {
createRoutesFromElements(
<>
<Route path="/" element={<Login />} />
<Route path="signup" element={<Signup />}>
<Route index element={<SignupNickname />} />
<Route path="genre" element={<SignupGenre />} />
</Route>
<Route path="signup" element={<SignupNickname />} />
<Route path="signup/genre" element={<SignupGenre />} />
Comment on lines +47 to +48
Copy link

@coderabbitai coderabbitai bot Aug 13, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

중첩 → 평면 라우트 전환은 타당하지만, 부모(Signup) 레이아웃/가드 소실 여부를 확인해주세요

이전 구조에서 Signup 컴포넌트가 공통 레이아웃(스텝 진행바, 공통 헤더 등)이나 Outlet/컨텍스트/가드 역할을 했다면, 평면 라우트로 전환되면서 해당 역할이 사라졌을 수 있습니다. 특히 /signup/genre에 직접 접근을 차단하는 가드가 빠지면 플로우가 깨질 수 있습니다.

  • 확인 포인트
    • Signup.tsx가 <Outlet /> 또는 useOutletContext로 하위 스텝에 상태/가드를 제공했는지
    • SignupNickname/SignupGenre가 부모 컨텍스트나 레이아웃에 의존하지 않는지
    • navigate("genre")/to="genre" 등 상대 네비게이션이 여전히 기대대로 동작하는지

필요 시, signup/genre 라우트에 최소한의 가드를 씌워 플로우 보장을 권장합니다.

적용 예시(가드 컴포넌트가 있다는 전제):

-        <Route path="signup" element={<SignupNickname />} />
-        <Route path="signup/genre" element={<SignupGenre />} />
+        <Route path="signup" element={<SignupNickname />} />
+        <Route
+          path="signup/genre"
+          element={
+            <SignupGuard>
+              <SignupGenre />
+            </SignupGuard>
+          }
+        />

가드 예시 구현(외부 파일; 실제 앱 상태소스에 맞게 수정 필요):

import { Navigate, useLocation } from 'react-router-dom';

// TODO: 실제 구현으로 교체(예: Redux/Zustand/Recoil/Query 등에서 닉네임 완료 여부 읽기)
function useCanProceedToGenre() {
  return false;
}

export function SignupGuard({ children }: { children: React.ReactNode }) {
  const canProceed = useCanProceedToGenre();
  const location = useLocation();
  if (!canProceed) {
    return <Navigate to="/signup" replace state={{ from: location }} />;
  }
  return <>{children}</>;
}

아래 스크립트로 잠재 리스크를 빠르게 점검할 수 있습니다.

🏁 Script executed:

#!/bin/bash
# 1) Signup 래퍼 파일 존재 여부 확인
fd -a --glob 'src/**/signup/Signup.*'

# 2) Outlet/OutletContext 의존성 확인(부모 컨텍스트 의존 여부)
rg -n -A2 -B2 $'useOutletContext|<Outlet' src

# 3) 상대 네비게이션(genre) 사용처 확인
rg -n -A1 -B1 $'navigate\\([\'"]genre[\'"]\\)|to=[\'"]genre[\'"]' src

Length of output: 361

Signup.tsx의 미사용 레이아웃 확인 및 중첩 구조 적용 여부 결정

현재 검증 결과:

  • src/pages/signup/Signup.tsx에 <Outlet />이 존재하지만, src/pages/index.tsx의 라우트가 모두 평면 구조로 정의되어 있어 해당 레이아웃이 렌더링되지 않습니다.
  • SignupNickname과 SignupGenre 양쪽 컴포넌트에서 useOutletContext나 부모 상태·컨텍스트 의존 코드는 발견되지 않았습니다.
  • navigate('genre') 또는 to="genre" 같은 상대 경로 네비게이션도 사용되지 않고 있습니다.

해결 방향 제안:

  • 부모 레이아웃/가드를 더 이상 사용하지 않을 계획이라면, Signup.tsx와 관련 파일을 제거하거나 단일 페이지 방식으로 리팩터링하세요.
  • 여전히 단계별 레이아웃(스텝 진행바·헤더)이나 가드 로직이 필요하다면, 아래처럼 중첩 라우트 구조로 돌아가길 권장합니다.
<Routes>
-  <Route path="signup" element={<SignupNickname />} />
-  <Route path="signup/genre" element={<SignupGenre />} />
+  <Route path="signup" element={<Signup />}>
+    <Route index element={<SignupNickname />} />
+    <Route
+      path="genre"
+      element={
+        <SignupGuard>
+          <SignupGenre />
+        </SignupGuard>
+      }
+    />
+  </Route>
</Routes>

필요하다면, 다음과 같은 가드 컴포넌트를 참고해 실제 앱 상태 관리 로직에 맞춰 구현하세요:

import { Navigate, useLocation } from 'react-router-dom';

function useCanProceedToGenre() {
  // TODO: 닉네임 완료 여부 등을 실제 상태에서 읽어오기
  return false;
}

export function SignupGuard({ children }: { children: React.ReactNode }) {
  const canProceed = useCanProceedToGenre();
  const location = useLocation();
  return canProceed
    ? <>{children}</>
    : <Navigate to="/signup" replace state={{ from: location }} />;
}
🤖 Prompt for AI Agents 
In src/pages/index.tsx around lines 47-48, the Signup parent layout
(src/pages/signup/Signup.tsx) contains an Outlet but your routes are defined
flat so that layout never renders; either remove/refactor the unused Signup
layout and related files if you don't need a multi-step layout, or convert the
routes to nested routes so the parent layout wraps the child steps: replace the
two flat signup routes with a parent Route path="signup" element={<Signup /> }
and put nested Route path="" element={<SignupNickname />} and Route path="genre"
element={<SignupGenre />} (optionally wrap child routes with a guard component
if you need step protection), and update any imports and navigation to use
absolute or relative paths consistent with nesting.

<Route path="signupdone" element={<SignupDone />} />
<Route path="post/create" element={<CreatePost />} />
<Route path="group" element={<Group />} />
Expand Down
4 changes: 2 additions & 2 deletions src/pages/signup/SignupGenre.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,15 @@ const SignupGenre = () => {
// ✅ 쿠키는 브라우저가 자동으로 전송
const result = await postSignup({
aliasName: selectedAlias.subTitle,
nickName: nickname,
nickname: nickname,
});

if (result.success) {
console.log('🎉 회원가입 성공! 사용자 ID:', result.data.userId);
navigate('/signupdone', {
state: {
aliasName: selectedAlias.subTitle,
nickName: nickname,
nickname: nickname,
},
});
} else {
Expand Down