LC-2880 ADMIN 마그넷 내부화 글 등록 API 연동#2150
Hidden character warning
Conversation
- magnetSchema.ts에 magnetDetailResponseSchema (magnetInfo + magnetQuestionInfo) 추가 - magnet.ts에 useGetMagnetDetailQuery, usePatchMagnetMutation 훅 추가 - PATCH 성공 시 detail + list 쿼리 동시 무효화 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- MagnetPostDetail 타입을 API 응답 필드 기반으로 변경 - useMagnetPostForm에서 mock 제거, useGetMagnetDetailQuery로 데이터 로딩 - description JSON 파싱/직렬화로 metaDescription, programRecommend, magnetRecommend 매핑 - previewContents↔lexicalBefore, mainContents↔lexicalAfter 필드 매핑 - MagnetPostPage에서 initialData prop 제거, 로딩 스피너 추가 - page.tsx SSR fetch 제거 - mock.ts에서 post 관련 코드 제거 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
changed the title
Summary of ChangesHello, I'm Gemini Code Assist1! 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! 이 PR은 관리자 페이지의 마그넷 글 관리 기능을 백엔드 API와 통합하는 것을 목표로 합니다. 기존에 사용되던 목 데이터를 실제 API 호출로 대체하고, 데이터 스키마를 정의하여 데이터의 일관성과 유효성을 확보했습니다. 이를 통해 마그넷 글의 상세 조회 및 수정 프로세스가 실제 운영 환경에 맞춰 작동하도록 개선되었습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe 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 by creating a comment using either
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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 어드민 마그넷 글 관리 기능에 실제 API를 연동하여 기존의 모의(mock) 데이터를 대체하는 작업을 담고 있습니다. React Query를 사용하여 데이터 페칭 및 뮤테이션을 구현한 점이 좋으며, 전반적으로 코드 구조가 잘 잡혀있습니다. 몇 가지 개선점을 제안합니다. Zod 스키마에서 더 엄격한 타입 검사를 위해 z.enum을 사용하고, React 훅에서 데이터 로드 후 상태를 초기화하는 로직을 useEffect로 리팩토링하여 React 모범 사례를 따르도록 하는 것이 좋겠습니다.
| questionType: z.string(), | ||
| isRequired: z.string(), | ||
| question: z.string(), | ||
| description: z.string().nullable(), | ||
| selectionMethod: z.string(), |
There was a problem hiding this comment.
zod 스키마에서 questionType, isRequired, selectionMethod 필드를 z.string()으로 정의하셨습니다. 하지만 src/domain/admin/blog/magnet/types.ts에 정의된 관련 타입들을 보면 이 필드들은 특정 문자열 값만 허용하는 enum 형태입니다.
questionType:'SUBJECTIVE' | 'OBJECTIVE'isRequired:'REQUIRED' | 'OPTIONAL'selectionMethod:'SINGLE' | 'MULTIPLE'
z.string() 대신 z.enum()을 사용하면 API 응답을 더 엄격하게 검증하고 타입 안정성을 높일 수 있습니다. 예상치 못한 값이 들어왔을 때 런타임 에러를 방지하는 데 도움이 됩니다.
| questionType: z.string(), | |
| isRequired: z.string(), | |
| question: z.string(), | |
| description: z.string().nullable(), | |
| selectionMethod: z.string(), | |
| questionType: z.enum(['SUBJECTIVE', 'OBJECTIVE']), | |
| isRequired: z.enum(['REQUIRED', 'OPTIONAL']), | |
| question: z.string(), | |
| description: z.string().nullable(), | |
| selectionMethod: z.enum(['SINGLE', 'MULTIPLE']), |
| const [formState, setFormState] = useState<FormState>({ | ||
| metaDescription: '', | ||
| thumbnail: '', | ||
| hasCommonForm: false, | ||
| }); | ||
| const [formInitialized, setFormInitialized] = useState(false); | ||
|
|
||
| // detailData가 로드되면 폼 상태 초기화 | ||
| if (magnetInfo && !formInitialized) { | ||
| setFormState({ | ||
| metaDescription: descPayload.metaDescription, | ||
| thumbnail: magnetInfo.desktopThumbnail ?? '', | ||
| hasCommonForm: false, | ||
| }); | ||
| setFormInitialized(true); | ||
| } | ||
|
|
||
| const [displayDate, setDisplayDate] = useState<Dayjs | null>(null); | ||
| const [endDate, setEndDate] = useState<Dayjs | null>(null); | ||
| const [dateInitialized, setDateInitialized] = useState(false); | ||
|
|
||
| if (magnetInfo && !dateInitialized) { | ||
| setDisplayDate(magnetInfo.startDate ? dayjs(magnetInfo.startDate) : null); | ||
| setEndDate(magnetInfo.endDate ? dayjs(magnetInfo.endDate) : null); | ||
| setDateInitialized(true); | ||
| } | ||
|
|
||
| const [content, setContent] = useState<MagnetPostContent>( | ||
| createEmptyContent(), | ||
| ); | ||
| const [content, setContent] = useState<MagnetPostContent>(initialContent); | ||
| const [contentInitialized, setContentInitialized] = useState(false); | ||
|
|
||
| if (magnetInfo && !contentInitialized) { | ||
| setContent(initialContent); | ||
| setContentInitialized(true); | ||
| } |
There was a problem hiding this comment.
데이터 로딩 후 폼 상태를 초기화하기 위해 렌더링 중에 if (magnetInfo && !...Initialized) 조건문과 useState를 함께 사용하는 패턴을 여러 번 사용하고 계십니다. 이는 React의 렌더링 로직 내에서 부수 효과(side effect)를 유발할 수 있어 안티패턴으로 간주됩니다.
이러한 상태 초기화 로직은 useEffect 훅으로 옮기는 것이 좋습니다. useEffect는 컴포넌트가 렌더링된 후에 실행되므로, 데이터 의존성을 명확히 하고 부수 효과를 안전하게 관리할 수 있습니다.
아래와 같이 하나의 useEffect로 관련 상태들을 한 번에 초기화하는 것을 권장합니다.
const [formState, setFormState] = useState<FormState>({
metaDescription: '',
thumbnail: '',
hasCommonForm: false,
});
const [displayDate, setDisplayDate] = useState<Dayjs | null>(null);
const [endDate, setEndDate] = useState<Dayjs | null>(null);
const [content, setContent] = useState<MagnetPostContent>(
createEmptyContent(),
);
useEffect(() => {
if (magnetInfo) {
setFormState({
metaDescription: descPayload.metaDescription,
thumbnail: magnetInfo.desktopThumbnail ?? '',
hasCommonForm: false,
});
setDisplayDate(magnetInfo.startDate ? dayjs(magnetInfo.startDate) : null);
setEndDate(magnetInfo.endDate ? dayjs(magnetInfo.endDate) : null);
setContent(initialContent);
}
}, [magnetInfo, descPayload, initialContent]);References
- 스타일 가이드에서는 함수가 이름에서 암시하는 동작만 수행하고 숨겨진 부수 효과를 피해야 한다고 권장합니다(단일 책임 원칙). React 컴포넌트의 렌더링 로직 내에서 상태를 업데이트하는 것은 부수 효과에 해당하며, 이는
useEffect를 통해 관리하는 것이 바람직합니다. (link)
1 participant
연관 작업