Skip to content

다양한 챌린지에 참여하고 경험을 공유할 수 있는 커뮤니티 플랫폼

Notifications You must be signed in to change notification settings

soheekimdev/communiT

 
 

Repository files navigation

오즈코딩스쿨 심화반 프로젝트

팀원 소개

권여진 김소희 주민재
Kwonyeojiny
@Kwonyeojiny
soheekimdev
@soheekimdev
Ju-MINJAE
@Ju-MINJAE

프로젝트 소개

  • 프로젝트 명: 커뮤니T
  • 프로젝트 개요: 커뮤니T는 사용자들이 다양한 챌린지에 참여하고 경험을 공유할 수 있는 커뮤니티 플랫폼입니다. 챌린지 생성 및 참여, 게시물 작성, 댓글 기능 등을 제공하며, 직관적인 UI/UX와 다크 모드를 지원합니다.

프로젝트 기술 스택

메뉴 구조

  • 챌린지 페이지

    • 챌린지 목록
    • 챌린지 상세
    • 챌린지 생성, 수정
    • 챌린지 참여
  • 게시물 페이지

    • 게시물 목록
    • 게시물 상세
      • 댓글 목록
      • 댓글 작성, 수정, 삭제
      • 댓글 추천
    • 게시물 작성, 수정
  • 사용자 페이지

    • 프로필
    • 프로필 수정
    • 차단한 유저 관리
    • 로그아웃
  • 로그인/회원가입 페이지

    • 이메일 찾기
    • 비밀번호 찾기
    • 비밀번호 재설정
  • 설정 페이지

    • 알림 설정
    • 테마 설정

배포

  • 배포 환경 : Vercel
  • 배포 방법 : Vercel CI/CD를 통한 자동 배포
  • CI/CD : GitHub Actions를 통해 Vercel로 자동 배포 설정
  • 배포 주소:

개발 방법

  • 사용 가능한 Editor / IDE : VSCode
  • 커밋 메시지 규칙:
    커밋 유형 의미
    Feat 새로운 기능 추가
    Fix 버그 수정
    Docs 문서 수정
    Style 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
    Refactor 코드 리팩토링
    Test 테스트 코드, 리팩토링 테스트 코드 추가
    Chore 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
    Design CSS 등 사용자 UI 디자인 변경
    Comment 필요한 주석 추가 및 변경
    Rename 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
    Remove or Delete 파일을 삭제하는 작업만 수행한 경우
    !BREAKING CHANGE 커다란 API 변경의 경우
    !HOTFIX 급하게 치명적인 버그를 고쳐야 하는 경우

ChangeLog

6,7,8주차(11/28 - 12/18)
[댓글] 권여진

✅ Done


  • 댓글 좋아요 api 연동
    • 좋아요 상태 api 연결
    • 좋아요 api 연결
    • 좋아요 취소 api 연결

🖼️ Preview


[챌린지] 김소희

✅ Done


  • 챌린지 참여 기능 구현

    • 내가 참여한 챌린지 목록 표시
    • 챌린지 상세 화면에서 참여 상태에 따른 버튼 동적 표시
    • 참여 API 연동 및 상태 관리 구현
  • 챌린지 관리 기능 개선

    • 종료된 챌린지 재개(다시 열기) 기능 추가
    • 종료된 챌린지를 목록 뒤쪽으로 정렬하는 로직 구현
    • 챌린지 생성/조회 시 시간대 처리 로직 개선
  • 한국 시간대 고려한 날짜 변환

    • API 요청/응답 시간 포맷 통일
  • 챌린지 인터랙션 기능 구현

    • 좋아요 버튼 기능 추가
    • 좋아요 상태 관리 및 API 연동
    • 토스트 메시지를 통한 사용자 피드백 제공

[챌린지][게시물] 주민재

✅ Done


  • 챌린지 이벤트 목록 페이지 디자인

    • 챌린지 이벤트 목록 API 연동
  • 홈 화면에 인기 게시물과 인기 챌린지 표시

🖼️ Preview


5주차(11/20 - 11/27)
[글 생성/수정][글 삭제] 주민재

✅ Done


  • 기능 및 UI 개선

    • Markdown 렌더링 기능 구현
      • Markdown Checkbox 컴포넌트를 추가하여 사용자의 체크리스트 렌더링 가능
      • contentType에 따라 Markdown 형식의 데이터 렌더링 방식 결정
  • PostDetail UI 변경

    • 뒤로가기 BackButton 컴포넌트 생성
  • 시간 데이터 관리

    • Time 컴포넌트 생성
  • 외부 URL 관리

    • 게시물 작성 및 수정 시 외부 링크(externalLink)를 입력할 수 있도록 Input 필드 추가
    • URL 클릭 시 새 탭에서 열리도록 구현

🖼️ Preview


image
[댓글] 권여진

✅ Done


  • 권한 관리

    • 어드민 권한 사용자의 모든 사용자의 댓글을 삭제할 수 있는 권한 구현
  • 유효성 검사

    • Zod를 사용한 댓글 길이 제한 재설정
  • 텍스트 처리

    • 긴 댓글 줄바꿈 스타일 개선 (wrapping 처리)
  • UI/UX 개선

    • 다크 모드 UI 최적화
      • 댓글 최신순/등록순 메뉴 스타일 다크 모드에 최적화

⚙️ in Progress


  • 댓글 좋아요 api 연동

    • 좋아요 상태 api 연결
    • 좋아요 api 연결
    • 좋아요 취소 api 연결
  • 중복 코드 리펙토링

🖼️ Preview


[챌린지] 김소희

✅ Done


  • 챌린지 폼 컴포넌트 개선

    • 챌린지 생성/수정 로직 통합
      • 중복 코드 제거 및 재사용성 향상
      • 폼 상태 관리 로직 개선
  • 챌린지 기능 확장

    • 챌린지 종료 기능 구현
      • 종료 확인 다이얼로그 추가
      • Redux를 활용한 상태 관리 구현
    • Badge 컴포넌트 사용성 개선
      • 인라인 텍스트 내 사용 가능하도록 수정
  • 공통 컴포넌트 개선

    • PostActionMenu 컴포넌트 리팩토링
      • 드롭다운 로직 분리
      • 재사용성 향상
    • BackButton 컴포넌트 유연성 강화
      • className props 추가로 스타일 커스터마이징 지원
    • ActionFeedback 컴포넌트 신규 작성
      • PostDetail에 작성되어 있던 코드를 컴포넌트화

⚙️ in Progress


  • 챌린지 기능 개선
    • 타임존 관련 버그 수정 (백엔드 이슈 해결 후 진행 예정)
      • 한국 시간대 고려한 날짜 처리
      • API 요청/응답 시간 포맷 통일
    • 챌린지 참여 기능 구현
    • 참여자 관리 기능 개발
    • 챌린지 목록 필터링 기능 구현
    • 진행 상태 표시 개선

🖼️ Preview


4주차(11/13 - 11/19)
[챌린지] 김소희

✅ Done


  • 챌린지 목록 기능 구현

    • 챌린지 목록 페이지(/challenges) 구현
      • 챌린지 카드 컴포넌트 설계
      • 그리드 레이아웃을 활용한 반응형 목록 구현
      • 제목, 기간, 설명, 좋아요 수, 내가 작성한 챌린지 여부, 참여자 목록(UI만 일단 만들어놓음) 표시
    • 챌린지 목록 조회 API 연동
      • getChallenges API 구현
  • 챌린지 생성 기능 구현

    • 챌린지 생성 페이지(/challenges/create) 구현
      • DatePickerWithRange 컴포넌트를 활용한 기간 선택
      • 제목, 설명 입력 폼 구현
    • 폼 유효성 검증 추가
      • 필수 입력값 검증
      • 날짜 선택 여부 확인
  • API 연동 및 에러 처리

    • createChallenge API 구현
      • CreateChallengeRequest 타입 정의
    • 에러 처리 및 UX 개선
      • API 타임아웃 대응 (최대 3회 재시도)
      • 로딩 상태 및 에러 메시지 표시
      • 진행 상태 피드백 제공
  • 챌린지 상세 페이지 구현

    • 챌린지 상세 정보 표시
      • 개설자 정보, 개설일, 챌린지 기간
    • UI/UX 디자인 정리
  • 버그 수정

    • 챌린지 생성 시 발생하던 504 Gateway Timeout 에러 해결
      • API 엔드포인트 경로 수정
      • axios 인스턴스 통합으로 인증 처리 개선
    • 비로그인 사용자의 챌린지 목록 조회 허용

⚙️ in Progress


  • 챌린지 기능 개선
    • 챌린지 수정/삭제 기능 구현
    • 챌린지 참여 기능 구현
    • 참여자 관리 기능 개발
    • 진행 상태 표시 개선

🖼️ Preview


[댓글] 권여진

✅ Done


  • 댓글 UI/UX

    • 새로운 댓글 작성 폼 컴포넌트 구현
    • 댓글 목록 UI/UX 디자인 및 구현
    • 댓글 수정/삭제 폼 추가 (댓글 삭제시 토스트 알림 표시)
    • 좋아요 버튼 컴포넌트 구현
    • 댓글 로딩 상태를 위한 스켈레톤 UI 구현
  • API 연동

    • 댓글 목록 표시 API 연결
    • 댓글 CRUD 작업 API 연동
      • 새 댓글 생성
      • 기존 댓글 수정
      • 댓글 삭제
    • 댓글 정렬기능 추가
      • 최신순 정렬
      • 등록순 정렬
  • 인증 및 권한

    • 로그인한 사용자만 댓글 작성 가능하도록 제한
    • 권한 확인 구현
      • 작성자만 자신의 댓글 수정 가능
      • 작성자만 자신의 댓글 삭제 가능

⚙️ in Progress


  • 어드민 댓글 삭제 권한

  • 댓글 좋아요 api 연결

🖼️ Preview


[프로필][글 생성/수정][글 삭제] 주민재

✅ Done


  • 프로필

    • 공개/비공개 상태에 따라 API 호출 구현
    • toast 문구 오타 수정
  • 게시물

    • react-markdown 라이브러리 사용하여 마크다운 렌더링
    • 글 수정 입력 필드 및 버튼 구성 및 API 연동
    • 글 삭제 버튼 구현과 API 연동
    • 글 조회수(viewCount) 추가

⚙️ in Progress


  • 게시물 추천

    • 게시물 like API 연동
    • dislike는 사용하지 않기로 결정
  • 파일 업로드

    • account, post 파일 업로드 API 연동하여 이미지 정보 가져오기

📚 Next


  • 게시물
    • admin 권한이면 모든 게시물 삭제 가능

🖼️ Preview


3주차(11/06 - 11/12)
[프로필][글 생성/수정][글 상세/삭제] 주민재

✅ Done


  • 프로필

    • 프로필 데이터 API 요청 및 응답 처리
    • 프로필 수정 API 연동
    • 프로필 정보 수정
      • 프로필 이미지, 닉네임, 비밀번호, 카테고리 항목별 submit 버튼 추가 중 (개별 수정 가능)
      • 현재 닉네임, 프로필 이미지, 자기소개 수정 가능
  • 게시물

    • 게시물 글 목록 API 요청 및 응답 처리
    • 글 상세 페이지
    • 새 게시물 작성 폼 제작

⚙️ in Progress


  • 글 생성/수정
    • 글 생성 API 요청 및 응답 처리

🖼️ Preview


[로그인/회원가입] 권여진

✅ Done


  • 로그인/회원가입 API 연결

  • Redux Toolkit을 이용한 로그인 상태관리 (수정)

  • 로그인/로그아웃 분기처리 (수정)

⚙️ in Progress


  • 새 댓글 작성 폼 컴포넌트 구현

  • 댓글 수정 페이지 및 폼 구현

  • 댓글 목록 UI/UX 디자인

🖼️ Preview


[차단 관리][공통 레이아웃] 김소희

✅ Done


  • 차단 유저 관리 UI/UX 디자인

    • 사용자 경험을 고려한 레이아웃 설계
    • 차단된 사용자 목록 표시 및 차단 해제 버튼 구현
    • 차단 해제 버튼 클릭 시 Toast 알림을 통한 사용자 피드백 제공
  • RTK를 활용한 상태 관리 구조 개선

    • Redux Thunk를 사용한 비동기 액션 처리
    • 로그인 시 토큰 로컬 스토리지 저장 기능 구현
  • Layout 컴포넌트 구조 개선

    • Providers, Routes, Layout 컴포넌트 분리 및 리팩토링
      • main.tsx: 전역 상태 및 테마 관리
      • App.tsx: 라우팅 로직 분리
      • Layout.tsx: 공통 UI 구조 관리
  • 사이드바 구조 개선

    • 로그인/로그아웃 버튼을 subMenuItems에서 분리하여 독립적으로 렌더링
    • 사용자 경험 및 유지보수성 향상
  • 컴포넌트 개선

    • Avatar 컴포넌트에 새로운 size 옵션 추가
      • 다양한 사용 컨텍스트 지원

⚙️ in Progress


  • 챌린지 UI/UX 디자인
    • 챌린지 목록 구현
    • 챌린지 상세 화면 구현

🖼️ Preview


2주차(10/30 - 11/05)
[알림설정] 김소희

✅ Done


  • 알림 설정 UI/UX 디자인

    • 사용자 인터페이스 설계
    • 보여줄 정보와 알림 설정 방법 확정
  • 알림 설정 폼 컴포넌트 구현

⚙️ in Progress


  • 구현 중인 내용

    • 차단 유저 관리 UI/UX 디자인

    • 차단 유저 목록 표시 및 차단/해제 버튼 구현

🖼️ Preview


[로그인/회원가입] 권여진

✅ Done


  • 회원가입 페이지 디자인 및 폼 구현

  • 이메일 찾기 페이지 디자인 및 폼 구현

  • 로그인/회원가입 라우팅 설정

⚙️ in Progress


  • 구현 중인 내용

    • 로그인/로그아웃 분기처리

    • Redux Toolkit을 이용한 로그인 상태관리

    • 중복 컴포넌트 분리

🖼️ Preview


[테마설정][비공개 계정 관리] 주민재

✅ Done


  • 테마 설정 UI/UX 디자인

  • 테마 변경 기능 구현

    • 라이트 모드, 다크 모드, 사용자 설정
  • 비공개 계정 설정 UI/UX 디자인

    • 비공개 계정 활성화/비활성화 시 토스트 알림

⚙️ in Progress


  • 프로필 정보 수정

    • 아바타, 닉네임, 비밀번호, 카테고리 항목별 submit 버튼 추가 중 (개별 수정 가능)

🖼️ Preview


1주차(10/23 - 10/27)
[전체 메뉴 구현] 김소희

✅ Done


  • 전체 사이트의 메뉴 구조 및 네비게이션 UI/UX 디자인

  • 헤더, 사이드바 컴포넌트 구현

  • 라우팅 구현

🖼️ Preview


[로그인/회원가입] 권여진

✅ Done


  • 로그인 UI/UX 디자인

  • 로그인 폼 컴포넌트 구현

  • 비밀번호 찾기 페이지 디자인 및 폼 구현

🖼️ Preview


[프로필] 주민재

✅ Done


  • 프로필 UI/UX 디자인

  • 프로필 수정 폼 컴포넌트 구현

🖼️ Preview



작성예시

✅ Done


- 구현 내용

⚙️ in Progress


  • 구현 중인 내용
    • 세부사항
    • 세부사항

📚 Next


  • 구현 예정
    • 세부사항
    • 세부사항

🖼️ Preview


![사진이름](사진URL)

About

다양한 챌린지에 참여하고 경험을 공유할 수 있는 커뮤니티 플랫폼

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.3%
  • Other 1.7%