📌 프로젝트 개요

사용자가 회원가입하고 로그인 그리고 커뮤니티 게시판을 사용할 수 있게 구현한 프로젝트입니다.
디자인은 제공된 Figma 시안을 기반으로 TailwindCSS를 활용하여 개발하였으며, 모듈별로 컴포넌트를 분리해 재사용성을 높였습니다.

🔗 배포 링크

• 오즈 커뮤니티 웹사이트 배포주소

📅 프로젝트 기간

2025.06.19(목) ~ 2025.07.16(수)

• 총 일수: 28일
• 워킹데이: 20일 (주말/공휴일 제외)

🙌 팀원

이름	역할
최용훈	커뮤니티 상세 페이지
이성일	글작성/수정 페이지
최진희	유저기능, 로그인/로그아웃
허준서	커뮤니티 목록 페이지

🖥 기술 스택

🚀 프론트엔드

🎨 스타일링

📦 주요 라이브러리

☁️ 배포 환경

✅ 구현 기능

🧩 공통 컴포넌트

• Input, Button, CloseButton, Modal 등 UI 구성 요소를 재사용 가능한 컴포넌트로 분리
• 유지보수성과 일관성을 고려한 컴포넌트 구조 설계

🔐 로그인 기능

• 이메일 / 비밀번호 입력 및 로그인 요청 처리
• ID/PW 찾기 모달 UI 구현
• 로컬스토리지 기반 로그인 상태 유지 (임시 구현)

📝 회원가입 기능

• 닉네임 유효성 검사 및 중복 확인 기능
• 이메일 인증: 인증번호 발송 / 입력, 타이머 기능 포함
• 휴대폰 인증: UI 구현 및 타이머 표시
• 비밀번호 유효성 검사 및 비밀번호 확인 일치 검사
• 모든 항목 유효성 통과 시 가입하기 버튼 활성화

🗂 커뮤니티 목록 페이지

• 커뮤니티 게시글 리스트 조회
• 게시글 정렬 옵션 제공
• 10개씩 페이지네이션 구현

✍️ 게시글 작성/수정 기능

• 게시글 작성 및 수정 페이지 구현
• 본문 영역을 2단 구조로 구성
  (좌측: 마크다운 에디터 / 우측: 실시간 미리보기)

📄 커뮤니티 상세 페이지

• 목록 클릭 시 상세 페이지로 이동 및 렌더링
• 마크다운 형식으로 본문 렌더링
• 댓글은 10개씩 무한 스크롤 로딩
• 게시글 작성자는 수정/삭제 버튼 노출 및 처리 가능

🎬 미리보기

🔐 인증 관련

로그인 화면

아이디 찾기 모달

비밀번호 찾기 모달

비밀번호 변경 페이지

회원 탈퇴 모달

---

🧑‍🏫 수강생 관리

수강생 정보 모달

---

📄 게시글 및 댓글

리스트 페이지 (페이지네이션)

마크다운 에디터

멘션 사용자 검색

댓글 스크롤 무한 렌더링