Feature/api community#15
Conversation
- 게시글 상세 조회 기능(fetchPostDetail) 추가 - 댓글 조회(fetchComments) 및 댓글 생성(createComment) 기능 추가 - 게시글 검색(searchPosts) 기능 추가
- 댓글 생성(createComment) 기능 삭제 - 관련된 코드 정리
- usePost 훅 삭제 - 게시글 상세 조회 및 댓글 조회 기능을 usePosts 훅으로 통합 - 관련된 API 호출(fetchPostDetail, fetchComments) 추가 및 정리
- PostDetailPage 컴포넌트를 새로 생성하고, 게시글 상세 조회 기능 구현 - 날짜 형식화 관련 함수(formatRelativeTime, formatAbsoluteTime 등) 추가 - 기존 PostDetailPage.tsx 파일 삭제 및 관련 코드 정리 - 댓글 및 게시글 목록에서 날짜 형식화 적용
- useDebounce 훅을 새로 생성하여 주어진 값의 디바운스 처리 기능 구현 - 지연 시간(delay) 설정에 따라 값이 변경될 때마다 디바운스된 값을 반환
- useSearch 훅을 새로 생성하여 검색어 입력 및 최근 검색어 관리 기능 구현 - 검색 결과를 표시하는 SearchResults 컴포넌트 추가 - 검색어 입력 시 디바운스 처리 및 유효성 검사 기능 추가 - 최근 검색어 목록을 로컬 스토리지에 저장하고 불러오는 기능 구현 - 검색 페이지에서 검색 결과와 최근 검색어 목록을 조건에 따라 표시하도록 수정
- 기존 community.types.ts 파일 삭제 - 새로운 my.types.ts 파일 생성 및 프로필 관련 타입 정의 추가 - post.types.ts 파일에서 Post 인터페이스를 PostListResponse 및 PostDetailResponse로 변경하고, 댓글 및 좋아요 관련 응답 타입 추가
- 게시글 상세 조회, 댓글 조회, 댓글 생성, 좋아요 및 북마크 토글 기능을 위한 훅(useToggleLike, useToggleBookmark, useCreateComment) 추가 - API 호출(fetchPostDetail, fetchComments, createComment, toggleLike, toggleBookmark) 수정 및 추가 - 타입 정의(PostDetailResponse, CommentResponse 등) 수정 및 업데이트 - 댓글 입력 시 Enter 키로 제출 가능하도록 기능 추가 - UI 컴포넌트(PostContent, CommentSection 등)에서 새로운 기능 및 타입 반영
- PositionSelector 컴포넌트에 다중 선택 기능 추가 및 관련 props 수정 - useAddPostModal 훅에 선택된 포지션 ID 배열 및 위치 정보 추가 - usePosts 훅에 지원자 목록 조회 및 지원 상태 반전 기능 추가 - 게시글 삭제 및 댓글 수정/삭제 기능을 위한 API 및 UI 컴포넌트 추가 - 댓글 작성 및 수정 시 취소 기능 추가 - ApplicantSection 컴포넌트 추가로 지원자 목록 표시 기능 구현
- 위치 정보 가져오기 기능 추가 및 관련 에러 처리 구현 - 게시글 작성 시 위치 정보 필드 추가 - ListItem 컴포넌트에서 모집 게시판에 지원자 수 표시 기능 추가 - AddPostModal에서 위치 정보 자동 설정 및 초기 데이터 처리 로직 개선 - RecruitItem에서 포지션 선택 기능을 프로젝트 게시판에 맞게 수정
- SearchResults 컴포넌트에서 게시글 타입을 Post에서 PostListItem으로 변경 - 클릭 핸들러에서 사용되는 게시글 타입을 Post에서 PostListItem으로 수정
- 프로필 수정 페이지(EditProfilePage) 추가 및 관련 UI 구현 - 프로필 정보를 가져오는 훅(useMyProfile) 및 프로필 업데이트 훅(useUpdateProfile) 추가 - 프로필 섹션(ProfileSection)에서 프로필 정보 표시 및 수정 버튼 기능 추가 - API 호출을 통해 프로필 정보를 가져오고 수정하는 기능 구현
- 하단 내비게이션이 "/my/edit" 경로에서는 표시되지 않도록 조건 추가 - 기존 조건문을 수정하여 더 명확한 로직 구현
- 공용 컴포넌트로 변경
- 메뉴 항목에서 '좋아요 한 글'을 '내가 쓴 댓글'로 변경 - '로그아웃' 및 '계정 삭제' 항목 추가 - 프로필 탭에서 '작성한 글' 라벨을 '소셜 링크'로 수정
- 회원가입 성공 시 네비게이션 경로를 "/board"에서 "/login"으로 변경 - 버튼 텍스트를 "홈으로"에서 "로그인하기"로 수정
- index.tsx 파일에서 사용되지 않는 Save 컴포넌트 임포트를 제거하여 코드 정리
- usePosts, usePostDetail, useSearchPosts, useComments 훅의 staleTime을 0으로 설정하여 데이터 갱신 주기를 즉시 반영하도록 수정
- 내 게시물, 댓글, 북마크, 지원 내역 페이지 추가 - 프로필 섹션에 구독자 수 표시 기능 추가 - 관련 API 호출을 위한 쿼리 훅(useMyPosts, useMyComments, useMyBookmarks, useMyApplies) 추가 - 소셜 링크 컴포넌트 추가 및 프로필 컴포넌트 수정 - 계정 삭제 및 로그아웃 기능 추가
- 개발자 목록을 가져오는 fetchDevelopers 함수 수정 및 필터링 기능 추가 - 사용자 프로필을 가져오는 fetchUserProfile 함수 추가 - 사용자 구독 상태를 토글하는 useToggleUserSubscription 훅 추가 - ExplorePage에서 useDevelopers 훅을 사용하여 개발자 데이터 로드 방식 변경 - DeveloperProfileCard에서 클릭 시 프로필 페이지로 네비게이션 기능 추가
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Monixc, 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!
This pull request introduces significant new API features and UI enhancements across the community and user profile sections of the application. I've implemented robust data fetching and state management using React Query for posts, comments, and user profiles, ensuring a more responsive and efficient user experience. Key changes include dynamic post detail views that adapt to different board types, comprehensive user profile management with editable fields and social links, and a refined navigation structure to support these new features. Additionally, I've integrated new UI components and utility functions to improve overall usability and maintainability.
Highlights
- Enhanced Community Features: The pull request introduces a comprehensive set of new API integrations and UI components to enhance community functionalities, including detailed post views, commenting, liking, bookmarking, and a new applicant management system for recruitment posts.
- Comprehensive User Profile Management: Users can now view and edit their profiles with extensive details, including personal information, social media links, tech stack, and interests, through dedicated new pages and updated profile sections.
- Improved Data Fetching and State Management: The application's data fetching and state management have been significantly upgraded by extensively leveraging React Query (now TanStack Query) for posts, comments, user profiles, and other dynamic data, ensuring efficient caching, background updates, and simplified data synchronization.
- New UI Components and Utilities: New UI components from Radix UI (Alert Dialog, Dropdown Menu) have been integrated, alongside custom utility functions for advanced date formatting, managing recent search history, and implementing input debouncing for a smoother user experience.
- Refactored Navigation and Routing: The application's navigation and routing have been expanded to support the newly introduced profile editing pages, user-specific content views (my posts, comments, bookmarks, history), and dynamic developer profiles, providing a more structured and intuitive user journey.
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
-
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. ↩
| onSuccess: () => { | ||
| queryClient.clear(); | ||
| window.location.href = "/login"; | ||
| }, |
There was a problem hiding this comment.
onSuccess 콜백에서 window.location.href를 사용하여 페이지를 이동시키고 있습니다. 이 방식은 전체 페이지를 새로고침하여 SPA(Single Page Application)의 이점을 살리지 못하고 사용자 경험을 저해할 수 있습니다. react-router-dom의 useNavigate 훅을 사용하여 클라이언트 사이드 렌더링을 유지하는 것이 좋습니다. 훅을 사용하는 컴포넌트에서 navigate 함수를 mutate 함수의 onSuccess 콜백으로 전달하거나, 컴포넌트 레벨에서 네비게이션을 처리하는 것을 고려해보세요.
| queryClient.setQueryData(["userProfile", nickname], (oldData: any) => { | ||
| if (oldData) { | ||
| return { | ||
| ...oldData, | ||
| nSubscribers: data.nSubscribers, | ||
| subscribing: data.subscribing, | ||
| }; | ||
| } | ||
| return oldData; | ||
| }); |
| return data.results || []; | ||
| }; | ||
|
|
||
| export const fetchUserProfile = async (nickname: string): Promise<any> => { |
| }; | ||
|
|
||
| // 내가 쓴 게시물 검색 | ||
| export const fetchMyPosts = async (): Promise<any[]> => { |
There was a problem hiding this comment.
| setIsModalOpen(false); | ||
| } catch (err) { | ||
| console.error("게시글 작성 실패:", err); | ||
| alert("게시글 작성에 실패했습니다."); |
There was a problem hiding this comment.
에러 처리 시 alert()를 사용하고 있습니다. alert()는 사용자 경험을 방해할 수 있으므로, 프로젝트에 이미 포함된 react-hot-toast와 같은 라이브러리를 사용하여 보다 부드러운 사용자 경험을 제공하는 토스트 메시지로 대체하는 것을 권장합니다.
| new Date(b.createdAt).getTime() - | ||
| new Date(a.createdAt).getTime() | ||
| ) | ||
| .map((post: any) => ( |
There was a problem hiding this comment.
| @@ -1,4 +1,4 @@ | |||
| export interface Post { | |||
| export interface PostListResponse { | |||
There was a problem hiding this comment.
PostListResponse라는 타입 이름은 리스트 전체 응답 객체로 오해될 수 있습니다. 실제로는 리스트의 개별 아이템을 나타내므로, BasePost 또는 PostSummary와 같이 그 역할을 더 명확하게 나타내는 이름으로 변경하는 것을 고려해 보세요. 이는 코드의 가독성을 높이는 데 도움이 됩니다.
1 participant
📌 PR 종류 (PR Type)
📝 요약 (Summary)
ex) 게시글 리스트 UI 개선 및 반응형 대응
🔍 상세 내용 (Describe your changes)
ex)
📸 스크린샷 (필수)
✅ 확인 사항 (CheckList)
💬 기타 참고사항 (Optional)
ex) 이 부분 로직이 좀 복잡해서 한번 더 확인 부탁드립니다 🙏