withChurch

교회 소개와 예배 정보를 제공하고, 교인 간 소통을 지원하는 교회 커뮤니티 웹 서비스입니다.

로그인과 회원가입 등의 사용자 인증 기능을 제공하며, 교회 소개·예배 안내·온라인 헌금·오시는 길 등 교회 이용에 필요한 정보를 한곳에서 확인할 수 있도록 구현했습니다.

주요 기능

• 로그인 및 회원가입
• 아이디·비밀번호 찾기
• 교회 소개 및 인사말
• 예배 시간과 장소 안내
• 담임목사 소개
• 온라인 헌금 정보 제공
• 지도 및 대중교통 기반 오시는 길 안내

기술 스택

Frontend

• React
• Vite
• JavaScript
• CSS
• React Router

협업 및 개발 도구

• Git
• GitHub
• Figma

시작하기

1. 저장소 복제

git clone <repository-url>
cd <project-directory>

2. 패키지 설치

npm install

3. 개발 서버 실행

npm run dev

4. 프로덕션 빌드

npm run build

페이지별 기능

로그인

• 이메일 또는 아이디와 비밀번호 입력
• 입력값 유효성에 따른 로그인 버튼 활성화
• 로그인 성공 시 메인 페이지로 이동
• 로그인 실패 시 오류 안내 메시지 표시

회원가입

개인정보 동의

• 필수 개인정보 수집 및 이용 동의 화면 제공
• 필수 항목 동의 여부에 따라 다음 단계 이동 제어

개인정보 입력

• 회원가입에 필요한 사용자 정보 입력
• 입력값 유효성에 따른 가입 버튼 활성화

가입 완료

• 회원가입 완료 안내 화면 제공
• 로그인 페이지 이동 기능 제공

아이디·비밀번호 찾기

계정 찾기

• 아이디 또는 비밀번호 찾기를 위한 사용자 정보 입력
• 사용자가 선택한 찾기 유형에 따라 결과 안내 페이지로 이동

결과 안내

• 계정 정보 확인 결과에 따른 안내 메시지 표시
• 로그인 페이지로 이동할 수 있는 버튼 제공

인사말

• 교회 방문자를 위한 환영 인사와 교회 소개 제공

예배 안내

• 교회 예배 관련 이미지 제공
• 예배 시간과 장소를 표 형태로 안내

담임목사 소개

• 담임목사 소개와 관련 정보 제공

온라인 헌금

• 헌금 계좌번호, 은행명, 예금주 정보 제공
• 온라인 헌금 관련 문의처 안내

오시는 길

• Google Maps를 활용한 교회 위치 안내
• 대중교통 수단별 방문 경로 제공

프로젝트 구조

src/
├── assets/          # 이미지 및 정적 리소스
├── components/      # 공통 UI 컴포넌트
├── pages/           # 페이지 컴포넌트
├── routes/          # 페이지 라우팅 설정
├── styles/          # 공통 스타일
├── App.jsx
└── main.jsx

배포

• 서비스 주소: https://withchurch.site/

팀 구성

• Frontend: 2명
• Backend: 1명

담당 역할

• 사용자 인증 페이지 구현
• 교회 소개 및 안내 페이지 구현
• 공통 컴포넌트와 화면 구조 설계
• 백엔드 API 연동
• 반응형 UI 및 사용자 경험 개선