WheelTalk

React를 사용하여 구현된 모던한 디자인의 커뮤니티입니다. 사용자 친화적인 인터페이스와 효율적인 게시물 검색 기능을 제공하여, 사용자가 쉽고 빠르게 원하는 정보를 찾을 수 있습니다.

Go Web

아래 링크를 클릭하면 WheelTalk 웹으로 이동할 수 있습니다. 다양한 정보를 공유해보세요.

WheelTalk

기능

이 앱은 다음과 같은 주요 기능들을 제공합니다.

• 사용자 로그인 및 회원가입
• 게시물 작성, 수정, 삭제
• 댓글 기능
• 좋아요 기능
• 게시물 검색
• 카테고리별 게시물 보기
• 인기 게시물 차트
• 페이지네이션

디렉토리 구조

• 디렉토리 구조 도식화

.
├── .firebase             # Firebase 설정 폴더
├── .github               # Github 설정 폴더
├── .vscode               # VSCode 설정 폴더
├── public                # 퍼블릭 폴더
│   ├── favicon.ico       # favicon 이미지 (ico)
│   └── google-logo.svg   # 구글 로고 이미지 (svg)
├── src
│   └── assets            # 모든 에셋 폴더
│      ├── css            # Tailwind CSS
│      └── images         # 애플리케이션의 모든 이미지 에셋
│   └── components        # 모든 컴포넌트
│      └── views          # 뷰 컴포넌트
│         ├── Notice.tsx
│         ├── NoticeBoard.tsx
│         └── SearchPage.tsx
│      └── layouts
│         ├── Nav.tsx
│         ├── LoadingScreen.tsx
│         ├── Pagination.tsx
│         └── Footer.tsx
│      └── constants      # 일반 상수
│         └── Category.ts
│      └── helpers        # 유틸리티 함수
│         └── helpers.ts
│      ├── Article.tsx    # 컴포넌트
│      ├── ArticleContent.tsx
│      ├── ArticleList.tsx
│      ├── auth-components.ts
│      ├── EditNotice.tsx
│      ├── GoogleBtn.tsx
│      ├── PopularCharts.tsx
│      ├── SearchBar.tsx
│      ├── Slider.tsx
│      └── WriteModal.tsx
│   └── routes            # 라우터 설정
│      ├── CreateAccount.tsx
│      ├── HOME.tsx
│      └── Login.tsx
│   ├── App.tsx           # 애플리케이션의 엔트리 포인트 파일
│   └── main.tsx          # 애플리케이션 레이아웃 구조 파일
├── .env                  # 환경 변수 파일
├── .firebaserc           # Firebase 설정 파일
├── .gitignore            # Git 커밋 무시 설정 파일
├── .firebase.json        # Firebase 설정 파일
├── .prettierrc           # 코드 포매팅 설정 파일
├── index.html            # HTML 인덱스 파일
├── package-lock.json     # 패키지 종속성 관리 파일
├── package.json          # 패키지 정보 파일
├── postcss.config.cjs    # PostCSS 설정 파일
├── README.md             # README 파일
├── tailwind.config.cjs   # Tailwind CSS 설정 파일
├── tsconfig.json         # TypeScript 설정 파일
├── tsconfig.node.json    # Node.js용 TypeScript 설정 파일
└── vite.config.ts        # Vite 설정 파일

Article

Article 기능을 구현하면서 기록한 내용을 남깁니다.

• Firebase Firestore를 사용하여 게시물 CRUD 기능 구현
• 사용자 인증 및 권한 관리
• 이미지 업로드 및 관리 기능 구현
• 반응형 디자인 적용

Pagination

Pagination 기능을 구현하면서 기록한 내용 추가:

• Firebase Firestore의 쿼리를 사용하여 페이지네이션 구현
• 사용자가 선택한 번호에 따라 자동으로 더 많은 게시물을 로드하는 기능 추가
• 성능 최적화를 위한 캐싱 및 데이터 관리

Firebase Write

Firebase 기반으로 Write 기능을 구현하면서 기록한 내용 추가:

• Firebase Authentication을 통한 사용자 인증
• Firestore에 게시물 데이터 저장
• Storage를 사용한 이미지 업로드 및 URL 저장
• 실시간 데이터베이스 업데이트를 통한 동기화

어려웠던 점

• Firebase Firestore의 복잡한 쿼리 작성
• 사용자 인증 및 권한 관리
• 이미지 업로드 및 Storage 관리
• 실시간 데이터 동기화 및 성능 최적화