Docthru 프론트엔드 레포지토리

Docthru 바로가기

목차

1. 서비스 소개
2. 프론트엔드 팀 소개
3. 기술 및 개발 환경
4. 개발 일정
5. 역할 분담
6. 구현 기능
7. 컨벤션
8. 프로젝트 구조
9. 협업 문화
10. 버그 문제

📝 1. 서비스 소개

'Docthru'는 개발자들을 위한 번역 챌린지 플랫폼입니다. 많은 개발 자료가 영어로 작성되어 있어, 영어에 익숙하지 않은 한국 개발자들이 기술 습득에 어려움을 겪고 있습니다. Docthru는 이러한 문제를 해결하기 위해 개발 관련 영어 문서를 번역하는 챌린지를 제공하며, 번역 작업을 협업하여 진행할 수 있는 기능을 갖추고 있습니다. 사용자들은 번역 에디터에서 문서를 번역하고, 다른 사용자와 피드백을 주고받으며 번역 실력을 향상시킬 수 있습니다. 또한, 피드백을 교환함으로써 기술 습득의 장벽을 낮추는 것을 목표로 합니다.

• 챌린지 탐색 및 검색: 진행 중인 번역 챌린지를 제목이나 필터 옵션으로 검색하여 쉽게 찾을 수 있습니다.
• 번역 챌린지 참여: 사용자는 원하는 챌린지에 참여해 번역 작업을 수행하고, 다른 참여자와 피드백을 주고받을 수 있습니다.
• 번역 작성 및 제출: 에디터를 통해 번역을 작성하고 임시 저장이나 최종 제출이 가능합니다. 진행 중인 작업물은 언제든 포기할 수 있습니다.
• 신규 챌린지 신청 및 관리: 유저는 번역하고 싶은 문서가 있을 경우 신규 챌린지를 신청할 수 있으며, 어드민만이 이를 승인, 거절 또는 삭제할 수 있습니다.
  유저는 어드민의 승인 전까지 신청을 취소할 수 있으며, 어드민이 거절 또는 삭제할 경우 사유가 함께 전달되어 확인할 수 있습니다.
• 유저 등급 시스템: 유저는 챌린지 참여 횟수와 추천 횟수에 따라 등급이 부여됩니다.
  • 일반: 기본 등급으로, 모든 유저가 처음에 부여받는 등급입니다.
  • 전문가: 챌린지 참여 5회 이상 및 추천 5회 이상을 달성하거나, 참여 10회 이상 또는 추천 10회 이상을 달성하면 부여됩니다.
• 알림 기능: 챌린지 상태 변경, 새로운 작업물 추가, 피드백 작성 등 주요 변경 사항에 대한 알림을 제공합니다. 알림은 신청하거나 참여 중인 챌린지에 변동 사항이 있을 때 유저에게 전달됩니다.

시연 영상

🧑🏻‍💻👩🏻‍💻 2. 프론트엔드 팀 소개

팀원

김민서	임송이	이율리
claudia99503	Im-amberIm	yoorli

🛠️ 3. 기술 및 개발 환경

Frontend

Backend

• Docthru 백엔드 레포지토리
  
• Swagger API 명세서

Design

협업방식

배포

📅 4. 개발 일정 [2024-10-08 ~ 2024-10-31]

1. 기획 완료

• 요구사항 분석 및 수집
• 기술 스택 검토 및 선정
• Git 브랜치 전략 수립
• PR 규칙 등 팀 컨벤션 확립 [2024-10-08 ~ 2024-10-09]

2. 컴포넌트 개발

• 각 단위별 담당자 지정 [2024-10-10]
• 컴포넌트 개발 [2024-10-11 ~ 2024-10-13]

3. 페이지 개발

• 페이지 레이아웃 및 구조 설계 [2024-10-10]
• 페이지 개발 [2024-10-14 ~ 2024-10-25]
• 페이지 스타일링 및 반응형 디자인 적용 [2024-10-14 ~ 2024-10-25]

4. 백엔드 API 연동

• API 테스트 [2024-10-21 ~ 2024-10-24]
• 페이지에 API 연동 [2024-10-24 ~ 2024-10-28]

5. 릴리스 준비

• 최종 점검 및 테스트
• 최종 발표 [2024-10-31]

TOP👆🏻

📝 5. 역할 분담

김민서

✨ 신규 챌린지 신청 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 번역하고 싶은 문서를 챌린지로 신청할 수 있는 페이지입니다.
• 챌린지 정보 입력 : 유저는 챌린지 제목, 목표, 문서타입, 마감일, 최대 참여 인원 등의 정보를 입력하여 신청할 수 있습니다.

✨ 신청한 챌린지 목록 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 신청한 챌린지의 목록과 각 챌린지의 승인 여부를 확인할 수 있는 페이지입니다.
• 승인 여부 확인 및 신청 취소 : 유저는 신청한 챌린지의 승인 또는 거절 / 삭제 상태를 확인할 수 있습니다.

✨ 신청한 챌린지 상세 페이지

• 승인 대기 중 상태 => 승인 대기 중인 신청은 언제든지 취소할 수 있습니다. 승인 대기 중 상태를 제외하고는 신청 취소 버튼이 페이지에 나타나지 않습니다.

데스크탑 & 태블릿 버전	모바일 버전

• 승인 상태

데스크탑 & 태블릿 버전	모바일 버전

• 거절 상태 => 어드민의 거절 사유가 표시됩니다.

데스크탑 & 태블릿 버전	모바일 버전

• 삭제 상태 => 어드민의 삭제 사유가 표시됩니다.

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 신청한 특정 챌린지의 세부 정보를 조회하고 신청 상태 (어드민 유저가 승인 또는 거절 / 삭제) 를 확인할 수 있는 페이지입니다.
  • 승인 대기 중 상태 : 승인 대기 중인 신청은 언제든지 취소할 수 있습니다. 승인 대기 중 상태를 제외하고는 신청 취소 버튼이 페이지에 나타나지 않습니다.
  • 승인 상태 : 승인된 신청에 대해서는 최다 추천 번역 리스트가 제공됩니다.
  • 거절 또는 삭제 : 어드민이 입력한 거절 및 삭제 사유도 함께 확인할 수 있습니다.
• 원문 미리보기 : 유저가 신규 챌린지 신청 페이지에서 입력한 원문 문서 주소에 대한 미리보기 기능이 제공됩니다.
• 원문 보기 버튼이 제공되며, 클릭 시 새 창에서 원문 문서를 확인할 수 있습니다.
• 신청 취소: 승인 대기 상태일 때만 신청 취소가 가능합니다.

✨ 어드민 전용 챌린지 신청관리 관리 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 어드민이 유저가 신청한 신규 챌린지 목록을 관리할 수 있는 페이지입니다.
• 검색 및 필터링: 신청 목록을 검색하고 필터링하여 필요한 챌린지를 쉽게 찾을 수 있으며, 페이지네이션 기능이 포함되어 있습니다.

✨ 어드민 전용 신청관리 상세 페이지

• 승인 대기 중 상태 => 어드민은 승인 대기 중인 챌린지를 승인, 거절, 수정 또는 삭제할 수 있습니다.

데스크탑 & 태블릿 버전	모바일 버전

• 수정 버튼 클릭 시 => 해당 챌린지의 수정 페이지로 이동합니다.
  

✨ 챌린지 수정 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 신청한 챌린지의 내용을 수정할 수 있는 페이지입니다.
• 챌린지 정보 입력 : 유저가 이전에 입력한 내용이 미리 채워진 상태로 로드되며, 필요 시 어드민이 수정하여 저장할 수 있습니다.

• 삭제 버튼을 클릭하고 삭제 사유를 입력한 후 전송 버튼을 클릭 => 유저의 챌린지 상세 페이지에 어드민의 삭제 사유가 표시됩니다.

데스크탑 & 태블릿 버전	모바일 버전

• 거절 버튼을 클릭하고 거절 사유를 입력한 후 전송 버튼을 클릭 => 유저의 챌린지 상세 페이지에 어드민의 거절 사유가 표시됩니다.

데스크탑 & 태블릿 버전	모바일 버전

• 어드민이 유저가 신청한 신규 챌린지를 관리할 수 있는 페이지입니다.
• 원문 미리보기 : 유저가 신규 챌린지 신청 페이지에서 입력한 원문 문서 주소에 대한 미리보기 기능이 제공됩니다.
• 원문 보기 버튼이 제공되며, 클릭 시 새 창에서 원문 문서를 확인할 수 있습니다.
• 챌린지 관리 : 어드민은 승인 대기 중인 챌린지를 승인, 거절 또는 삭제할 수 있습니다.
  승인할 경우 별도의 사유 입력 없이 승인이 가능하며, 삭제나 거절 시에는 유저가 확인할 수 있도록 사유를 입력해야 합니다.
  또한, 수정 을 클릭하면 해당 챌린지를 수정할 수 있습니다.
• 검색 및 필터링: 신청 목록을 검색하고 필터링하여 필요한 챌린지를 쉽게 찾을 수 있으며, 페이지네이션 기능이 포함되어 있습니다.

임송이

✨ 작업물 상세 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저는 자신이 작성한 작업물에 대해서만 수정 및 삭제 버튼이 포함된 메뉴가 표시됩니다.
• 어드민은 모든 작업물에 대해 수정 및 삭제 권한이 있습니다.

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 제출한 작업물의 내용을 조회할 수 있는 페이지입니다.
• 피드백 조회 및 작성 : 작업물에 대한 피드백을 조회하고 작성할 수 있습니다.
• 좋아요 기능 : 작업물에 하트를 남길 수 있으며, 페이지네이션을 통해 추가 피드백을 조회할 수 있습니다.
• 수정 및 삭제: 유저는 자신이 작성한 작업물에 대해서만 수정 및 삭제할 수 있습니다. 어드민은 모든 작업물에 대해 수정 및 삭제 권한이 있습니다.

✨ 작업물 도전하기 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 원문 버튼 클릭 시

데스크탑 & 태블릿 버전	모바일 버전

• 임시 저장 후 다시 들어왔을 때 나타나는 알림 메시지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 새로운 번역 챌린지에 도전하여 작업물을 작성할 수 있는 페이지입니다.
• 챌린지 마감일 전까지 제출이 가능합니다.
• 진행 중인 작업물은 언제든지 포기할 수 있습니다.
• 원문 미리보기 : 번역할 원문이 미리보기가 제공되어 작업을 진행할 수 있으며, 에디터에서 번역을 작성할 수 있습니다.
• 임시 저장 기능 : 작성 도중 작업물을 로컬 스토리지에 임시 저장하여 중단 후 이어서 작업할 수 있습니다.

✨ 작업물 상세 수정 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저는 자신이 작성한 작업물만 수정할 수 있으며, 어드민은 모든 작업물을 수정할 수 있습니다.
• 미리 채워진 작업물: 이전에 유저가 작성한 번역 작업이 미리 채워진 상태로 로드되며, 수정 후 다시 저장할 수 있습니다.

✨ 회원가입 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 신규 유저가 Docthru에 회원가입할 수 있는 페이지입니다.
• 회원 정보 입력 : 회원 가입을 위해 필요한 이메일, 비밀번호, 닉네임 등을 입력할 수 있습니다.

✨ 로그인 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 계정에 로그인하여 필요한 페이지에 접근할 수 있는 페이지입니다.
• 권한에 따른 접근 제한 : 로그인 성공 시, 어드민과 유저는 기능과 페이지에 다르게 접근할 수 있습니다.

이율리

✨ 전체 도전 목록 조회 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 참여 가능한 번역 챌린지 목록을 조회할 수 있는 페이지입니다.
• 제공 정보: 챌린지 제목, 분야, 문서타입, 마감일, 상태(진행 중, 마감), 참여 인원, 최대 참여 가능 인원 등의 정보가 포함됩니다.
• 검색 및 필터링: 챌린지 제목으로 검색하고, 분야, 문서타입, 상태별로 필터링하여 원하는 챌린지를 찾을 수 있습니다. 페이지네이션 기능이 포함되어 있습니다.

✨ 챌린지 상세 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 특정 챌린지의 상세 내용을 유저가 확인할 수 있는 페이지입니다.
• 진행 중인 챌린지 : 참여한 사람들의 목록이 제공됩니다.
  • 도전하기 버튼을 통해 챌린지에 참여할 수 있습니다.
• 마감된 챌린지 : 참여한 사람들의 목록 및 최다 추천 번역 리스트가 제공됩니다.

✨ 참여중인 챌린지 목록 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 참여 중인 번역 챌린지 목록을 조회할 수 있는 페이지입니다.
• 검색 및 필터링: 챌린지 제목, 분야, 문서타입, 상태별로 검색 및 필터링하여 원하는 챌린지를 찾을 수 있으며, 페이지네이션 기능이 포함됩니다.
  • 도전 계속하기 버튼을 통해 작성한 작업물을 볼 수 있습니다.

✨ 완료한 챌린지 목록 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 유저가 참여했던 마감된 챌린지 목록을 조회할 수 있는 페이지입니다.
• 검색 및 필터링: 챌린지 제목, 분야, 문서타입, 상태별로 검색 및 필터링하여 원하는 챌린지를 찾을 수 있으며, 페이지네이션 기능이 포함됩니다.
  • 작업물 보기 버튼을 통해 작성된 작업물을 볼 수 있습니다.

✨ 어드민 전용 챌린지 보기 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 어드민이 전체 챌린지를 조회할 수 있는 페이지입니다.
• 챌린지 상태 관리 : 어드민은 챌린지 목록에서 각 챌린지의 상태를 확인하고, 필요 시 수정 및 삭제할 수 있습니다.

✨ 어드민 전용 챌린지 상세 보기 페이지

데스크탑 & 태블릿 버전	모바일 버전

• 어드민이 특정 챌린지의 상세 내용을 확인하고 관리할 수 있는 페이지입니다.
• 관리 권한 : 어드민은 특정 챌린지를 수정하거나 삭제할 수 있습니다.

마이페이지 (백엔드 팀 기여)

TOP👆🏻

✨ 6. 구현 기능

유저

• 🔗 전체 도전 목록 조회 페이지 - 이율리
• 🔗 챌린지 상세 페이지 - 이율리
• 🔗 신규 챌린지 신청 페이지 - 김민서
• 🔗 참여중인 챌린지 목록 페이지 - 이율리
• 🔗 완료한 챌린지 목록 페이지 - 이율리
• 🔗 신청한 챌린지 목록 페이지 -김민서
• 🔗 신청한 챌린지 상세 페이지 - 김민서
• 🔗 작업물 상세 페이지 - 임송이
• 🔗 작업 도전하기 페이지 - 임송이
• 🔗 작업물 상세 수정 페이지 - 임송이
• 🔗 회원가입 페이지 - 임송이
• 🔗 로그인 페이지 - 임송이

어드민 전용 페이지

• 🔗 챌린지 신청관리 관리 페이지 - 김민서
• 🔗 신청관리 상세 페이지 - 김민서
• 🔗 챌린지 수정 페이지 - 김민서
• 🔗 챌린지 보기 페이지 - 이율리
• 🔗 챌린지 상세 보기 페이지 - 이율리

TOP👆🏻

🖌️ 7. 컨벤션

Git 컨벤션

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
📦	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
🎨	:art:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포

Code 컨벤션

• 변수/함수
  • Camel 표기법 사용 (상수는 대문자)
• 컴포넌트/파일명
  • Pascal 표기법 사용
• 이미지 파일
  • Snake 표기법 사용 - (형태)(의미)(순서)_(상태) / 예: btn_login_001_off.png
• ClassName - Kebab 표기법 사용

TOP👆🏻

🌱 8. 프로젝트 구조

• public/: 애플리케이션의 정적 자산을 포함하는 디렉터리.
  • assets/: 이미지 파일을 포함하는 디렉터리.
    • icons/: 아이콘 SVG 파일 저장.
    • images/: 일반 이미지 SVG 파일 저장.
  • favicon/favicon.png: 웹사이트의 파비콘 파일.
  • icons_sprite.svg: 아이콘 스프라이트 파일.
  • images_sprite.svg: 이미지 스프라이트 파일.
• src/: 애플리케이션의 핵심 소스 코드와 관련 리소스.
  • components/: 각 기능을 담당하는 컴포넌트 모음.
    • application/: 챌린지 신청 관리 페이지 컴포넌트.
    • challenge/: 챌린지 목록 및 상세 페이지 컴포넌트.
    • feedback/: 작업물 상세 페이지의 피드백 및 댓글 컴포넌트.
    • mypage/: 사용자 프로필 및 정보 수정 인터페이스.
    • user/: 인증 관련 컴포넌트 (로그인, 회원가입 등).
    • work/: 작업물 생성, 수정, 상세 페이지 컴포넌트.
    • modals/: 모달 UI 컴포넌트.
    • layouts/: 공통 레이아웃, 네비게이션 및 접근 제어 로직.
    • commons/: 재사용 가능한 공통 UI 컴포넌트.
  • context/: 전역 상태 관리를 위한 Context API 정의 (예: 사용자 정보).
  • hooks/: 재사용 가능한 상태 및 로직을 관리하는 커스텀 훅 모음.
    • useAuth: 사용자 상태 관리 및 인증 로직을 위한 훅.
    • useModal: 모달 동작, 리다이렉션 및 상태 관리를 위한 훅.
  • pages/: 페이지별 컴포넌트와 라우팅, 데이터 페칭 로직 정의.
  • service/: 서비스 로직과 API 호출을 위한 모듈.
    • api/: axios 설정 및 API 호출 함수 모음.
    • mutations/: react-query의 mutation 훅 모음.
    • queries/: react-query의 useQuery 훅 모음.
  • styles/: 공통 색상, 폰트, 전역 스타일 정의.
    • pages/: 페이지별 스타일 시트 (개별 컴포넌트는 해당 컴포넌트와 동일한 디렉터리에 CSS 파일을 포함).
    • global.css: 전역 스타일 정의 파일.
    • reset.css: 기본 스타일 초기화 파일.
  • utils/: 다양한 유틸리티 함수와 공통 기능을 관리하는 모듈.
    • canUseDom.js: 클라이언트 사이드 여부를 확인하는 Boolean 변수.
    • clsx.js: 클래스 이름 관리 설정.
    • generateImgSrc.js: public/assets/의 이미지 경로를 assets 객체로 변환하는 스크립트.
    • generateSprite.js: public/assets/ 내 SVG 파일로 스프라이트 파일 생성.
    • utilFunction.js: 전역에서 재사용할 유틸리티 함수 모음.
  • variables/: 자주 사용되는 상수와 변수를 관리하는 디렉터리.
    • fonts.js: Next.js 폰트 설정.
    • formValidation.js: react-hook-form 유효성 검사 상수.
    • images.js: Image 태그에 사용될 이미지 경로 모음.
    • queryKeys.js: react-query 쿼리 키 관리.
    • variables.js: 페이지와 라우트 관련 상수 모음.
• jsconfig.json: 경로 설정 및 프로젝트 구성 파일.
• next.config.mjs: Next.js 설정 파일.
• package.json: 프로젝트 의존성 및 스크립트 관리.

📦src
 ┣ 📂components
 ┃ ┣ 📂application
 ┃ ┃ ┣ 📜AdminModal.jsx
 ┃ ┃ ┣ 📜AdminModal.module.css
 ┃ ┃ ┣ 📜ApplicationDropdown.jsx
 ┃ ┃ ┣ 📜ApplicationDropdown.module.css
 ┃ ┃ ┣ 📜ChallengeStatusBadge.jsx
 ┃ ┃ ┣ 📜ChallengeStatusBadge.module.css
 ┃ ┃ ┣ 📜ChallengeTable.jsx
 ┃ ┃ ┣ 📜ChallengeTable.module.css
 ┃ ┃ ┣ 📜DocTypeSelection.jsx
 ┃ ┃ ┣ 📜DocTypeSelection.module.css
 ┃ ┃ ┣ 📜FieldSelection.jsx
 ┃ ┃ ┣ 📜FieldSelection.module.css
 ┃ ┃ ┣ 📜Pagination.jsx
 ┃ ┃ ┣ 📜Pagination.module.css
 ┃ ┃ ┣ 📜ReasonBox.jsx
 ┃ ┃ ┗ 📜ReasonBox.module.css
 ┃ ┣ 📂challenge
 ┃ ┃ ┣ 📜AllCardSection.jsx
 ┃ ┃ ┣ 📜AllCardSection.module.css
 ┃ ┃ ┣ 📜BestRecWork.jsx
 ┃ ┃ ┣ 📜BestRecWork.module.css
 ┃ ┃ ┣ 📜Card.jsx
 ┃ ┃ ┣ 📜Card.module.css
 ┃ ┃ ┣ 📜ChallengeDetailInfo.jsx
 ┃ ┃ ┣ 📜ChallengeDetailInfo.module.css
 ┃ ┃ ┣ 📜ChallengeDropdown.jsx
 ┃ ┃ ┣ 📜ChallengeDropdown.module.css
 ┃ ┃ ┣ 📜ChallengeSearchBar.jsx
 ┃ ┃ ┣ 📜ChallengeSearchBar.module.css
 ┃ ┃ ┣ 📜Container.jsx
 ┃ ┃ ┣ 📜Container.module.css
 ┃ ┃ ┣ 📜InfoContainer.jsx
 ┃ ┃ ┣ 📜InfoContainer.module.css
 ┃ ┃ ┣ 📜ParticipationStatus.jsx
 ┃ ┃ ┣ 📜ParticipationStatus.module.css
 ┃ ┃ ┣ 📜SearchBarWithDropdown.jsx
 ┃ ┃ ┣ 📜SearchBarWithDropdown.module.css
 ┃ ┃ ┣ 📜SeveralBestRecCards.jsx
 ┃ ┃ ┗ 📜SeveralBestRecCards.module.css
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂form
 ┃ ┃ ┃ ┣ 📜Input.jsx
 ┃ ┃ ┃ ┣ 📜PasswordInput.jsx
 ┃ ┃ ┃ ┣ 📜TextArea.jsx
 ┃ ┃ ┃ ┗ 📜inputFields.module.css
 ┃ ┃ ┣ 📜Border.jsx
 ┃ ┃ ┣ 📜Border.module.css
 ┃ ┃ ┣ 📜Button.jsx
 ┃ ┃ ┣ 📜Button.module.css
 ┃ ┃ ┣ 📜CancelMenu.jsx
 ┃ ┃ ┣ 📜CancelMenu.module.css
 ┃ ┃ ┣ 📜ChallengeSearchBarLarge.jsx
 ┃ ┃ ┣ 📜ChallengeSearchBarLarge.module.css
 ┃ ┃ ┣ 📜DocTypeChip.jsx
 ┃ ┃ ┣ 📜DocTypeChip.module.css
 ┃ ┃ ┣ 📜Iframe.jsx
 ┃ ┃ ┣ 📜KebabMenu.jsx
 ┃ ┃ ┣ 📜KebabMenu.module.css
 ┃ ┃ ┣ 📜LikeButton.jsx
 ┃ ┃ ┣ 📜LikeButton.module.css
 ┃ ┃ ┣ 📜Loader.jsx
 ┃ ┃ ┣ 📜Loader.module.css
 ┃ ┃ ┣ 📜Message.jsx
 ┃ ┃ ┣ 📜Message.module.css
 ┃ ┃ ┣ 📜Profile.jsx
 ┃ ┃ ┣ 📜Profile.module.css
 ┃ ┃ ┗ 📜Svg.jsx
 ┃ ┣ 📂feedback
 ┃ ┃ ┣ 📜EmptyFeedbacks.jsx
 ┃ ┃ ┣ 📜EmptyFeedbacks.module.css
 ┃ ┃ ┣ 📜FeedbackContent.jsx
 ┃ ┃ ┣ 📜FeedbackContent.module.css
 ┃ ┃ ┣ 📜FeedbackForm.jsx
 ┃ ┃ ┣ 📜FeedbackForm.module.css
 ┃ ┃ ┣ 📜FeedbackList.jsx
 ┃ ┃ ┣ 📜FeedbackList.module.css
 ┃ ┃ ┣ 📜RepliesList.jsx
 ┃ ┃ ┣ 📜Reply.jsx
 ┃ ┃ ┣ 📜UpdateFeedbackForm.module.css
 ┃ ┃ ┗ 📜UpdatedFeedbackForm.jsx
 ┃ ┣ 📂layouts
 ┃ ┃ ┣ 📜Headers.jsx
 ┃ ┃ ┣ 📜Headers.module.css
 ┃ ┃ ┣ 📜Layout.jsx
 ┃ ┃ ┣ 📜Layout.module.css
 ┃ ┃ ┣ 📜Nav.jsx
 ┃ ┃ ┣ 📜Nav.module.css
 ┃ ┃ ┣ 📜ProfileDropDown.jsx
 ┃ ┃ ┣ 📜ProfileDropDown.module.css
 ┃ ┃ ┣ 📜TabNavigation.jsx
 ┃ ┃ ┗ 📜TabNavigation.module.css
 ┃ ┣ 📂modals
 ┃ ┃ ┣ 📜AlertModal.jsx
 ┃ ┃ ┣ 📜AlertModal.module.css
 ┃ ┃ ┣ 📜Toast.jsx
 ┃ ┃ ┣ 📜Toast.module.css
 ┃ ┃ ┣ 📜TwoBtnModal.jsx
 ┃ ┃ ┗ 📜TwoBtnModal.module.css
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📜LoginForm.jsx
 ┃ ┃ ┣ 📜SignUpForm.jsx
 ┃ ┃ ┗ 📜userForms.module.css
 ┃ ┗ 📂work
 ┃ ┃ ┣ 📜TextEditor.jsx
 ┃ ┃ ┣ 📜TextEditor.module.css
 ┃ ┃ ┣ 📜WorkDetail.jsx
 ┃ ┃ ┗ 📜WorkDetail.module.css
 ┣ 📂context
 ┃ ┗ 📜AuthProvider.js
 ┣ 📂hooks
 ┃ ┣ 📜useAuth.js
 ┃ ┗ 📜useModal.js
 ┣ 📂pages
 ┃ ┣ 📂admin
 ┃ ┃ ┣ 📂application
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂work
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜edit.jsx
 ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┣ 📜edit.jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂application
 ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂auth
 ┃ ┃ ┣ 📜login.jsx
 ┃ ┃ ┗ 📜sign-up.jsx
 ┃ ┣ 📂me
 ┃ ┃ ┣ 📂application
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂done
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂work
 ┃ ┃ ┣ 📂[id]
 ┃ ┃ ┃ ┣ 📜edit.jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📂new
 ┃ ┃ ┃ ┗ 📜[id].jsx
 ┃ ┣ 📜[id].jsx
 ┃ ┣ 📜_app.js
 ┃ ┣ 📜_document.js
 ┃ ┗ 📜index.js
 ┣ 📂service
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📜application.js
 ┃ ┃ ┣ 📜auth.js
 ┃ ┃ ┣ 📜axios.js
 ┃ ┃ ┣ 📜challenge.js
 ┃ ┃ ┣ 📜feedback.js
 ┃ ┃ ┣ 📜user.js
 ┃ ┃ ┗ 📜work.js
 ┃ ┣ 📂mutations
 ┃ ┃ ┣ 📜application.js
 ┃ ┃ ┣ 📜feedback.js
 ┃ ┃ ┣ 📜user.js
 ┃ ┃ ┗ 📜work.js
 ┃ ┗ 📂queries
 ┃ ┃ ┣ 📜application.js
 ┃ ┃ ┣ 📜challenge.js
 ┃ ┃ ┣ 📜user.js
 ┃ ┃ ┗ 📜work.js
 ┣ 📂styles
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂application
 ┃ ┃ ┃ ┣ 📜AdminApplicationDetailPage.module.css
 ┃ ┃ ┃ ┣ 📜AdminApplicationPage.module.css
 ┃ ┃ ┃ ┣ 📜CreateApplicationPage.module.css
 ┃ ┃ ┃ ┣ 📜EditApplicationPage.module.css
 ┃ ┃ ┃ ┣ 📜MyApplicationDetailPage.module.css
 ┃ ┃ ┃ ┗ 📜MyApplicationPage.module.css
 ┃ ┃ ┣ 📂work
 ┃ ┃ ┃ ┣ 📜mutateWork.module.css
 ┃ ┃ ┃ ┗ 📜workDetail.module.css
 ┃ ┃ ┣ 📜Home.module.css
 ┃ ┃ ┗ 📜auth.module.css
 ┃ ┣ 📜globals.css
 ┃ ┗ 📜reset.css
 ┣ 📂utils
 ┃ ┣ 📜canUseDom.jsx
 ┃ ┣ 📜clsx.js
 ┃ ┣ 📜generateImgSrc.js
 ┃ ┣ 📜generateSprite.js
 ┃ ┣ 📜generateSprite_v2.js
 ┃ ┗ 📜utilFunction.js
 ┗ 📂variables
 ┃ ┣ 📜fonts.js
 ┃ ┣ 📜formValidation.js
 ┃ ┣ 📜images.js
 ┃ ┣ 📜queryKeys.js
 ┃ ┗ 📜variables.js

TOP👆🏻

💪🏻 9. 협업 문화

• 일시: 평일 오전 9시 ~ 오후 7시, 주말
• 내용: PR 내용 발표 및 코드 리뷰, 진행 상황 점검, 추가 이후 계획 논의

TOP👆🏻

버그 문제