Skip to content

Comments

[release] FE 1차 배포#149

Merged
seongwon030 merged 388 commits intomainfrom
develop/fe
Mar 7, 2025
Merged

[release] FE 1차 배포#149
seongwon030 merged 388 commits intomainfrom
develop/fe

Conversation

@seongwon030
Copy link
Member

@seongwon030 seongwon030 commented Mar 7, 2025

#️⃣연관된 이슈

ex) #148

📝작업 내용

프론트 1차 배포

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

  • 새로운 기능

    • 동아리 목록 및 상세 정보 조회, 검색, 필터, 태그, 지원 등 주요 기능을 제공하는 메인/상세/관리 페이지 UI 및 컴포넌트가 추가되었습니다.
    • 어드민 페이지에서 동아리 정보, 모집 정보, 계정 정보 수정 기능이 제공됩니다.
    • 반응형 헤더, 푸터, 배너, 카테고리 버튼, 커스텀 입력 및 라디오 버튼, 날짜 선택기, 마크다운 미리보기 등 다양한 공통 컴포넌트가 도입되었습니다.
    • 클럽 카드, 태그, 상태 박스 등 리스트 및 상세 뷰를 위한 컴포넌트가 추가되었습니다.
    • 검색 키워드 전역 관리, 자동 스크롤, Mixpanel 기반 사용자 행동 분석, 페이지 뷰 추적 기능이 적용되었습니다.
    • 이미지, 스타일, 글로벌 타입 등 프론트엔드 프로젝트 구조가 정비되었습니다.
    • Storybook, Chromatic, Netlify, SEO/OG/Twitter 메타태그, robots.txt, sitemap.xml 등 개발 및 배포 환경이 개선되었습니다.
  • 문서화

    • SEO, 소셜 미디어 공유, 검색엔진 색인 등을 위한 메타 태그, robots.txt, sitemap.xml, Netlify 리디렉트 설정이 추가되었습니다.
  • 스타일

    • 전체 페이지 및 컴포넌트에 대해 반응형 styled-components 기반 스타일이 적용되었습니다.
    • 글로벌 폰트 및 리셋, 레이아웃, 버튼, 입력, 카드 등 세부 스타일이 세분화되었습니다.
  • 환경설정/빌드

    • Storybook, Chromatic, Webpack, .env, 이미지 에셋 핸들링, 타입스크립트 경로 별칭 등 개발 및 빌드 환경이 강화되었습니다.
    • ESLint, .gitignore, tsconfig 등 개발 편의성 및 코드 품질 관련 설정이 추가되었습니다.

oesnuj and others added 30 commits February 10, 2025 19:59
실제 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`)가 변경될 때 자동으로 재요청되도록 설정
- 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 이내라면 헤더 제거되도록 함
@seongwon030 seongwon030 added 🌏 Deploy 배포 관련 💻 FE Frontend labels Mar 7, 2025
@seongwon030 seongwon030 requested a review from oesnuj March 7, 2025 07:20
@seongwon030 seongwon030 self-assigned this Mar 7, 2025
@netlify
Copy link

netlify bot commented Mar 7, 2025

Deploy Preview for moadong ready!

Name Link
🔨 Latest commit 1b17d53
🔍 Latest deploy log https://app.netlify.com/sites/moadong/deploys/67ca9e5ce4cd4d0008629ada
😎 Deploy Preview https://deploy-preview-149--moadong.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@seongwon030 seongwon030 added 📈 release 릴리즈 배포 and removed 🌏 Deploy 배포 관련 labels Mar 7, 2025
Copy link
Member

@oesnuj oesnuj left a comment

Choose a reason for hiding this comment

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

커밋수 ㄷㄷ
드디어 배포..!!!
🔥고생 많았습니다🔥

@seongwon030 seongwon030 merged commit 6705c81 into main Mar 7, 2025
4 checks passed
@seongwon030 seongwon030 linked an issue Mar 7, 2025 that may be closed by this pull request
1 task
@seongwon030 seongwon030 added 🌏 Deploy 배포 관련 and removed 📈 release 릴리즈 배포 labels Apr 28, 2025
@seongwon030 seongwon030 changed the title [release] FE 1차 배포 [deploy] FE 1차 배포 Apr 28, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Apr 28, 2025

Caution

Review failed

The pull request is closed.

"""

Walkthrough

이 변경 사항은 React 기반 프론트엔드 프로젝트의 초기 구축 및 주요 기능 구현을 포함합니다. Storybook, Chromatic, Netlify, Webpack, ESLint, TypeScript 등의 개발 도구와 환경설정 파일이 추가 또는 수정되었으며, 동아리 리스트/상세 조회, 검색, 관리자 페이지, 공통 UI 컴포넌트(버튼, 입력창, 헤더, 푸터 등), 스타일 시스템, 글로벌 타입, 유틸리티 함수 등이 새롭게 도입되었습니다. 또한, Mixpanel을 통한 분석 추적, 이미지 및 정적 파일 처리, 클라이언트 사이드 라우팅, 반응형 레이아웃, 마크다운 렌더링 기능 등이 구현되었습니다.

Changes

파일/경로 요약 변경 요약
.gitignore, chromatic.config.json, netlify.toml, public/_redirects, public/robots.txt, public/sitemap.xml Storybook 로그, Chromatic, Netlify, 리디렉션, robots, sitemap 등 환경 및 정적 파일 추가/수정
.storybook/main.ts, .storybook/preview.ts Storybook 설정 파일 및 프리뷰 파라미터 추가
package.json, tsconfig.json Storybook, Chromatic, React Query, Mixpanel, ESLint 등 의존성 및 타입스크립트 경로/글로벌 타입 설정
config/webpack.common.ts, config/webpack.dev.ts Webpack 이미지 처리, 환경변수, 정적파일 복사, 포트 자동 감지, CSS 로더 분리 등 빌드 설정 개선
public/index.html SEO, 소셜 미디어, favicon, 메타 태그 등 HTML 헤드 구조 및 메타데이터 강화
src/index.tsx Mixpanel 초기화 및 분석 연동 추가
src/App.tsx React Query, SearchProvider, BrowserRouter, 라우팅 구조, 글로벌 스타일 적용 등 앱 루트 구현
src/constants/api.ts API 베이스 URL 환경변수화 및 상수화
src/types/club.ts, src/types/Info.ts, src/types/global.d.ts 동아리, 정보, 이미지 import용 글로벌 타입 선언
src/apis/getClubList.ts, src/apis/getClubDetail.ts 동아리 리스트/상세 API 함수 추가
src/context/SearchContext.tsx 검색어 Context, Provider, custom hook 구현
src/hooks/queries/club/useGetCardList.ts, src/hooks/queries/club/useGetClubDetail.ts React Query 기반 동아리 리스트/상세 커스텀 훅 구현
src/hooks/useAutoScroll.ts, src/hooks/useMixpanelTrack.ts, src/hooks/useTrackPageView.ts 자동 스크롤, Mixpanel 이벤트, 페이지뷰 추적 커스텀 훅 구현
src/utils/banners.ts, src/utils/stringToDate.ts 배너 이미지 리스트, 기간 문자열 파싱 유틸 함수 추가
src/styles/Global.styles.ts, src/styles/PageContainer.styles.ts Pretendard 폰트 및 글로벌/페이지 컨테이너 스타일 적용
src/components/ClubLogo/ClubLogo.tsx, src/components/ClubStateBox/ClubStateBox.tsx, src/components/ClubTag/ClubTag.tsx 동아리 로고, 상태, 태그 공통 컴포넌트 구현
src/components/StoryBookButton/MyButton.tsx, src/components/StoryBookButton/MyButton.stories.tsx Storybook용 버튼 컴포넌트 및 스토리 추가
src/components/common/Button/Button.tsx, Footer/Footer.tsx, Footer/Footer.styles.ts, Header/Header.tsx, Header/Header.styles.ts, InputField/InputField.tsx, InputField/InputField.styles.ts, SearchBox/SearchBox.tsx, SearchBox/SearchBox.styles.ts 공통 버튼, 푸터, 헤더, 입력창, 검색박스 컴포넌트 및 스타일 구현
src/pages/AdminPage/AdminPage.tsx, AdminPage.styles.ts, components/Calendar/Calendar.tsx, components/Calendar/Calendar.styles.ts, components/MakeTags/MakeTags.tsx, components/MakeTags/MakeTags.styles.ts, components/SelectTags/SelectTags.tsx, components/SelectTags/SelectTags.styles.ts, components/SideBar/SideBar.tsx, components/SideBar/SideBar.styles.ts, tabs/AccountEditTab/AccountEditTab.tsx, tabs/ClubInfoEditTab/ClubInfoEditTab.tsx, tabs/ClubInfoEditTab/ClubInfoEditTab.styles.ts, tabs/RecruitEditTab/RecruitEditTab.tsx, tabs/RecruitEditTab/RecruitEditTab.styles.ts 관리자 페이지(사이드바, 캘린더, 태그, 계정/동아리/모집정보 탭 등) 및 스타일 구현
src/pages/ClubDetailPage/ClubDetailPage.tsx, components/BackNavigationBar/BackNavigationBar.tsx, components/BackNavigationBar/BackNavigationBar.styles.ts, components/ClubApplyButton/ClubApplyButton.tsx, components/ClubDetailFooter/ClubDetailFooter.tsx, components/ClubDetailFooter/ClubDetailFooter.styles.ts, components/ClubDetailHeader/ClubDetailHeader.tsx, components/ClubDetailHeader/ClubDetailHeader.styles.ts, components/ClubProfile/ClubProfile.tsx, components/ClubProfile/ClubProfile.styles.ts, components/DeadlineBadge/DeadlineBadge.tsx, components/DeadlineBadge/DeadlineBadge.styles.ts, components/InfoBox/InfoBox.tsx, components/InfoBox/InfoBox.styles.ts, components/InfoTabs/InfoTabs.tsx, components/InfoTabs/InfoTabs.styles.ts, components/IntroduceBox/IntroduceBox.tsx, components/IntroduceBox/IntroduceBox.styles.ts 동아리 상세 페이지 및 하위 컴포넌트(탭, 정보/소개/지원/마감/네비 등)와 스타일 구현
src/pages/MainPage/MainPage.tsx, MainPage.styles.ts, components/Banner/Banner.tsx, components/Banner/Banner.styles.ts, components/CategoryButtonList/CategoryButtonList.tsx, components/CategoryButtonList/CategoryButtonList.styles.ts, components/ClubCard/ClubCard.tsx, components/ClubCard/ClubCard.styles.ts, components/MobileHeader/MobileHeader.tsx, components/MobileHeader/MobileHeader.styles.ts, components/StatusRadioButton/StatusRadioButton.tsx, components/StatusRadioButton/StatusRadioButton.styles.ts 메인 페이지 및 배너, 카테고리, 카드, 모바일 헤더, 상태 라디오 등 주요 컴포넌트와 스타일 구현

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: 각종 공통 컴포넌트, 스타일, 컨텍스트, 분석, 유틸리티 등 활용
Loading

Possibly related PRs

  • Moadong/moadong#225: Storybook 설정 파일(frontend/.storybook/main.ts)에 path alias와 viewport addon 추가. 본 PR과 동일 파일을 다루며 Storybook 설정 확장과 관련 있음.
  • Moadong/moadong#340: 기존 Header 컴포넌트 리팩토링 및 모바일/데스크탑 분리. 본 PR에서 Header 신규 도입과 구조적으로 연관됨.

Suggested labels

✨ Feature
"""

✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🌏 Deploy 배포 관련 💻 FE Frontend 📈 release 릴리즈 배포

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[release] FE 1차 배포

2 participants