Conversation
실제 API 데이터를 사용하도록 기존 `mockClubs` 데이터를 삭제함.
- `club` 객체를 직접 참조하는 중첩 구조 제거 - 필드명 변경: - `state` → `recruitmentStatus` - `description` → `introduction`
기존에 `onCategorySelect`에서 `category.name`을 전달하던 방식에서 `category.id`를 전달하도록 변경
- `Club` 타입을 명확하게 전달하도록 `{ club: Club }` 형태로 수정
- 필드명 변경:
- `state` → `recruitmentStatus`
- `description` → `introduction`
- `state` 필드 값 변경: - '모집중' → 'open' - `Description` 컴포넌트명을 `Introduction`으로 변경하여 일관성 유지 - `box-shadow` 스타일 값 조정 (투명도 조절)
- `CardList`의 기본 `gap` 값을 20px → 35px로 변경하여 카드 간 간격을 더 넓게 조정
- `mockClubs` 데이터 제거 및 `useGetCardList` 훅을 활용하여 API에서 동아리 목록을 가져오도록 변경 - `useEffect` 기반 필터링 로직을 `useMemo`를 활용한 최적화된 데이터 처리 방식으로 변경 - `Footer` 및 `Header` 추가 - 검색 키워드를 위한 `setKeyword` 상태 추가 (검색 기능 확장 가능성 고려) - 데이터 로딩, 에러 및 빈 상태를 위한 UI 처리 주석 추가
- `mockClubs` 데이터 제거 및 `useGetCardList` 훅을 활용하여 API에서 동아리 목록을 가져오도록 변경 - `useEffect` 기반 필터링 로직을 `useMemo`를 활용한 최적화된 데이터 처리 방식으로 변경 - `Footer` 및 `Header` 추가 - 검색 키워드를 위한 `setKeyword` 상태 추가 (검색 기능 확장 가능성 고려) - 데이터 로딩, 에러 및 빈 상태를 위한 UI 처리 주석 추가
- `useQuery`에서 `enabled` 옵션을 제거하여 기본 동작으로 API 요청 실행되도록 변경 - 모든 쿼리 키(`queryKey`)가 변경될 때 자동으로 재요청되도록 설정
[chore] Netlify 배포 세팅
…eature/#56-cardlist_api
- logoSize 대신 variant(main, detail) 방식으로 크기 조정 방식 변경 - 데스크톱과 모바일 크기를 별도로 설정할 수 있도록 presets 객체 추가
- 반응형 디자인 적용 (모바일에서 grid 레이아웃 사용)
- 클럽 정보를 표시하는 ClubProfile 컴포넌트 구현 - ClubLogo, ClubTag 활용하여 클럽 로고 및 태그 표시 - 클럽 분류(classification), 분과(division), 추가 태그(tags) 지원 - 반응형 스타일 적용을 위한 ClubProfile.styles 연동
- 테두리 안 보이게 설정
- RefObject 리턴타입으로 해당 DOM접근 가능하도록 함 - sectionsRef의 2번째 인덱스로 설정
- flex-direction 을 column으로 설정하여 세로 정렬로 변경 - InfoBox 테두리 제거
- sectionRef에 index로 순서 할당
- sectionRefs로 스크롤될 섹션을 배열로 관리 - scrollTo로 인덱스에 따라 해당 섹션으로 스크롤되도록 함
- useState로 탭 상태 관리 - 현재 탭이 activeTab일 시 조건부로 active 실행
- 모바일버전에만 보이도록 설정 - 버튼에 activd클래스 추가하여 border-bottom 설정
- width가 500px 이내라면 헤더 제거되도록 함
[fix] 헤더 padding 설정
[feature] sitemap.xml, robots.txt 추가
[feature] 번들링 시 public/ 폴더 내용 복사
[fix] Footer, Header UI 수정
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Caution Review failedThe pull request is closed. """ Walkthrough이 변경 사항은 React 기반 프론트엔드 프로젝트의 초기 구축 및 주요 기능 구현을 포함합니다. Storybook, Chromatic, Netlify, Webpack, ESLint, TypeScript 등의 개발 도구와 환경설정 파일이 추가 또는 수정되었으며, 동아리 리스트/상세 조회, 검색, 관리자 페이지, 공통 UI 컴포넌트(버튼, 입력창, 헤더, 푸터 등), 스타일 시스템, 글로벌 타입, 유틸리티 함수 등이 새롭게 도입되었습니다. 또한, Mixpanel을 통한 분석 추적, 이미지 및 정적 파일 처리, 클라이언트 사이드 라우팅, 반응형 레이아웃, 마크다운 렌더링 기능 등이 구현되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Router
participant QueryClientProvider
participant SearchProvider
participant MainPage
participant ClubDetailPage
participant API
participant Mixpanel
User->>App: 접속/새로고침
App->>QueryClientProvider: React Query context 적용
App->>SearchProvider: 검색 context 적용
App->>Router: 라우팅 시작
User->>Router: "/" 접근
Router->>MainPage: MainPage 렌더링
MainPage->>API: 동아리 리스트 fetch
MainPage->>Mixpanel: 페이지뷰/카테고리/검색 등 이벤트 전송
User->>Router: "/club/:clubId" 접근
Router->>ClubDetailPage: ClubDetailPage 렌더링
ClubDetailPage->>API: 동아리 상세 fetch
ClubDetailPage->>Mixpanel: 페이지뷰/버튼 등 이벤트 전송
User->>Router: "/admin" 접근
Router->>AdminPage: AdminPage 렌더링
AdminPage->>SideBar: 탭 선택
SideBar->>Router: 탭별 컴포넌트 렌더링
Note over App,API: 각종 공통 컴포넌트, 스타일, 컨텍스트, 분석, 유틸리티 등 활용
Possibly related PRs
Suggested labels
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
새로운 기능
문서화
스타일
환경설정/빌드