SlideShare a Scribd company logo
Mfe project
01팀 소개
02개요
03개발환경
04일정
05설계 & 산출물
06핵심 코드
07스토리보드
08후기
01 팀 소개
송민준
#조장 #기획 #DB설계
#메인화면#관리자기능
조태석
#로그인 #회원가입 #예매
김바하
#채팅 #통신
#AJAX#채팅게시판
김현윤
#디자인 #마이페이지
#리뷰게시판#아이디어뱅크
배유리
#자유게시판 #검색
#필터링
#반응형 디자인
02개요
Why?
단순하게 콘서트 정보만을 제공하는 사이트(인터파크, 롯데 등)는 있지만
20∼30 대의 기호에 맞는 직관적인 UI와 맞춤 정보를 제공해주는 서비스가 없음
How?
해외 서비스 중 하나인 FEVERUP을 벤치마킹, 차별화 전략을 구상하여 서비스를
제공하고자 함. UI에서 직관성을 높이고 개인별 맞춤형 정보를 제공하여 소비자의
니즈를 충족, VOC를 제공하여 고객관리 업무의 효율화를 주안점으로 함
03개발환경
• O/S : Windows 10
• Server : Tomcat8.5
• DB : Oracle 11g
• Framework / Library : bootstrap3, jQuery3, slick
• Programming Language : JAVA, HTML5, JavaScript
• Tool : Eclipse, Github, Aquerytool, StarUML
04일정 - WBS
05설계 & 산출물 – 테이블 정의서
05설계 & 산출물 – ERD
05설계 & 산출물 – 유스케이스 다이어그램
05설계 & 산출물 – 시퀀스 다이어그램
06핵심코드 - 송민준
메인화면 맞춤형 정보 제공
- 회원 -> 선호장르에 따른
맞춤형 정보 제공
- 비회원 -> 최신 정보 제공
- 회원이 선호장르가 없다면
최신 정보를 제공
- Slick Library를 사용하여
슬라이더 구현
06핵심코드 - 김현윤
관리자와 한 상담 내역
- 회차마다 관리자와 한 상담
내역이 저장된다.
06핵심코드 - 조태석
예매 수량 가격 정보
- 티켓 수에 따른 가격 변동이
결제페이지로 넘어가는 버튼에
표기되어 사용자가 쉽게 확인
정보 제공 Tab
- Tab을 통해 사용자가 쉽게
정보에 접근 가능
06핵심코드 - 배유리
필터링 결과 출력
- 날짜별, 지역별, 장르별로
필터링한 콘서트를 출력
06핵심코드 - 김바하
웹 통신
07스토리보드
1. 네비게이션 바
- 아이콘 클릭 시 검색, 로그인,
계정관리, 커뮤니티 이용 가능
- 관리자는 톱니바퀴 모양의
관리자페이지 이동 가능
2. 콘서트 정보 제공
- 회원의 경우 맞춤형 정보 제
공
- 비회원은 최신 정보 제공
- Slick Library 활용 슬라이더
- 반응형 웹 구현
2
1
07스토리보드
1. 회원 검색
- 각 항목별 키워드에 맞는 검
색
결과 제공
2. 목록 개수
- 1, 3, 5, 10개 단위로 선택 가능
- AJAX 구현 (검색 후 선택 가
능)
2
1
3 4
3. 상세보기
- 클릭 시 회원에 대한 상세 정
보
조회 Modal로 확인 가능
4. 삭제
- 회원에 대한 삭제 가능
5
5. 반응형
- 화면 크기에 따른 반응형 지원
07스토리보드
1. 게시판 검색
- 각 항목별 키워드에 맞는 검
색
결과 제공
2
1
2. 목록 개수
- 1, 3, 5, 10개 단위로 선택 가능
- AJAX 구현 (검색 후 선택 가
능)
3. 삭제
- 게시판에 대한 삭제 가능
4
3
4. 페이지네이션
- 페이지 기능 추가
07스토리보드
2
1
3
4
5
1. 콘서트 검색
- 각 항목별 키워드에 맞는 검
색
결과 제공
2. 목록 개수
- 1, 3, 5, 10개 단위로 선택 가능
- AJAX 구현 (검색 후 선택 가
능)
3. 삭제
- 콘서트에 대한 삭제 가능
4. 등록
- 관리자만 콘서트 등록 가능
5. 페이지네이션
- 페이지 기능 추가
07스토리보드
1
2
1. 이미지 등장
- 고객이 로그인을 하면 채팅 상
담을 요청할 수 있는 이미지
등장.
1
07스토리보드
1. 이미지 클릭
- 이미지 클릭시 채팅창 등장.
채팅 입력란과 보내기 버튼은
비활성된 상태.
1
07스토리보드
1. 회원목록
- 채팅상담을 요청한 고객의
목록 확인 가능
2. 상담하기
- 상담하기 버튼을 통해 고객과
상담을 시작
1 2
07스토리보드
1. 채팅 활성화
- 관리자가 선택한 고객은 채팅
입력란과 보내기 버튼이 활성화
되며 채팅이 가능해짐.
1
Mfe project
Mfe project
Mfe project
07스토리보드
1. 로그인 후 계정관리
- 아이콘 클릭 시 계정관리
Modal 작동
2. 계정관리
- 마이페이지
- 로그아웃
1
2
07스토리보드
1. 마이페이지 메뉴
- 예매내역
- 찜목록
- 정보수정
- 상담내역
2. 예매내역
- 해당 회원의 예매 내역 출력
- 예매 내역 개수 출력
1
2
3
4
3. 공연 상세보기
- 해당 공연명 클릭 시
상세보기 페이지로 넘어감
4. 예매 취소
5
6
5. 목록 개수 지정
6. 페이징 처리
07스토리보드
1. 찜목록
- 메인에서 하트 아이콘 클릭
시
찜목록으로 넘어옴
- 하트는 빈 하트  흰 하트
로
변경
2. 공연 상세보기
- 클릭 시 해당 공연 상세보기
페이지로 넘어감
1
1
07스토리보드
1. 회원정보수정
- 아이디 제외 수정 가능
2. 회원탈퇴
- 클릭 시 alert으로 확인 후
회원탈퇴 진행
1 2
07스토리보드
1. 상담내역
- 관리자와 한 상담내역 출력
2. 채팅 목록 개수
- 채팅 목록 개수 출력
2
3
1
3. 상세보기
- 클릭 시 채팅 상세보기 출력
07스토리보드
1. 리뷰게시판
- 콘서트 리뷰 게시판
1
07스토리보드
1. 리뷰 작성
- 리뷰 작성 게시판
1
07스토리보드
1. 검색 결과
- 입력한 검색어 출력
2. 검색 결과 개수
- 검색 결과에 해당하는 콘서트
의 개수 출력
1
2
4
3
3. D-Day
- 오늘 날짜를 기준으로 남은 날
을 나타냄
4. 마감임박
- D-Day가 오늘 날짜를 기준으
로 5일 이하로 남았을 경우 마감
임박을 알림
검색 페이지
07스토리보드
1. 필터 폼
- 메인 화면에서 필터 클릭 시
필터폼 나타남
- 날짜별, 지역별, 장르별 선택
- 지역과 장르는 개수 제한 없
음
- 지역과 장르에서 아무것도 선
택하지 않았을 경우 전국, 모
든 장르로 선택됨
2. 선택한 필터
- 선택한 필터값 출력
- X버튼 클릭시 삭제 후 새로운
결과 출력
3. 검색 결과 개수
- 검색 결과에 해당하는 콘서트
의 개수 출력
1
2
3
필터 페이지
07스토리보드
1. 목록 개수
- 게시판에 출력될 목록의 개수
를 선택하는 기능(1, 3, 5, 7, 10)
2. 검색 기능
- 작성자, 제목, 내용 중 선택하
여 검색하는 기능
3. 페이징
- 목록 개수에 따른 페이징 처리
1
2
3
자유 게시판 - 목록
07스토리보드
1. 목록 개수
- 게시판에 출력될 목록의 개수
를 선택하는 기능(1, 3, 5, 7, 10)
2. 검색 기능
- 작성자 : admin인 글 출력
3. 페이징
- 목록 개수에 따른 페이징 처리
1
2
3
자유 게시판 - 검색
07스토리보드
1. 비밀번호 확인
- 글쓴이의 아이디와 비밀번호
가 일치할 경우 글 등록 가능
2. 글자수 제한
- 글을 입력할 때마다 글자수를
나타냄
- 500자가 넘어갈 경우 더 이상
입력되지 않도록 제한함
1
2
자유 게시판 - write
3
3. 파일 첨부
- 파일 첨부 및 다운로드 가능
07스토리보드
2. View 페이지
- 등록된 게시글을 보여줌
2. 댓글, 답변, 수정, 삭제,
목록
- 댓글과 답변 등록
- 내용 수정 가능
- 게시글 삭제 가능
- 목록으로 돌아가는 기능
- - 비밀번호 일치하는지 확인
자유 게시판 - view
3. 댓글
- 등록한 댓글 목록을 보여줌
1
2
3
07스토리보드
1. 글자수 제한
- 글을 입력할 때마다 글자수를
나타냄
- 500자가 넘어갈 경우 더 이상
입력되지 않도록 제한함
2. 비밀번호 확인
- 원문을 등록한 회원과 비밀번
호가 일치하는지 확인함
1
2
자유 게시판 - 답변
07스토리보드
자유 게시판 - 수정
1
2
1. 비밀번호 확인
- 원문을 등록한 회원과 비밀번
호가 일치하는지 확인함
2. 글자수 제한
- 글을 입력할 때마다 글자수를
나타냄
- 500자가 넘어갈 경우 더 이상
입력되지 않도록 제한함
08후기

More Related Content

What's hot (20)

DOCX
Proposal jalan aspal 260118
Tohir Haliwaza
 
PPTX
Penguatan Etika dan Integritas Birokrasi Dalam Rangka Pencegahan Korupsi
Tri Widodo W. UTOMO
 
PPTX
Pedoman penyusunan proposal program pembangunan desa
muhammad hamdi
 
PPTX
PERAN SATLINMAS DESA DALAM MENJAGA KAMTIBMAS (SLOROK).pptx
Sumberurip1
 
PDF
Buku saku dtks kemsos
Pemdes Seboro Sadang
 
PPTX
OPTIMALISASI-PEMBINAAN-DAN-PENGAWASAN-DANA-DESA.pptx
ulfaharahap1
 
PPTX
PERAN DESA DALAM KETAHANAN PANGAN.pptx
inaalimut
 
PDF
Tata cara mendirikan koperasi
Tony Setiawan
 
PDF
Modul Managemen Asset Desa
Mustika Aji
 
PDF
Permenkes nomor 54 tahun 2015 tentang pengujian dan kalibrasi alat kesehatan
Agung Oktavianto
 
PDF
Pengantar ilmu hukum
Muhammad Ilyas
 
PPTX
perencanaan berbasis masyarakat menuju penyediaan infrastruktur yang nyaman d...
Bagus ardian
 
DOCX
Sk pembentukan tim perencanaan teknis
Christine Roberts
 
PPT
SOTK Pemerintah Desa
Formasi Org
 
DOCX
forensik
blofoma
 
PPT
Penyelenggaraan Urusan Pemerintahan Bidang Lingkungan Hidup dan Kehutanan ber...
CIFOR-ICRAF
 
PPTX
PPT Utilitas Rumah Sakit
hillmirama
 
PPT
Ppt power point.1
Rais Piliang
 
DOCX
Pokdakan gelanggang ikan
ahmadbindjasman
 
PPTX
Presentasi renja 2015 pada forgab skpd 5 maret2014
Ariston Pamungkas
 
Proposal jalan aspal 260118
Tohir Haliwaza
 
Penguatan Etika dan Integritas Birokrasi Dalam Rangka Pencegahan Korupsi
Tri Widodo W. UTOMO
 
Pedoman penyusunan proposal program pembangunan desa
muhammad hamdi
 
PERAN SATLINMAS DESA DALAM MENJAGA KAMTIBMAS (SLOROK).pptx
Sumberurip1
 
Buku saku dtks kemsos
Pemdes Seboro Sadang
 
OPTIMALISASI-PEMBINAAN-DAN-PENGAWASAN-DANA-DESA.pptx
ulfaharahap1
 
PERAN DESA DALAM KETAHANAN PANGAN.pptx
inaalimut
 
Tata cara mendirikan koperasi
Tony Setiawan
 
Modul Managemen Asset Desa
Mustika Aji
 
Permenkes nomor 54 tahun 2015 tentang pengujian dan kalibrasi alat kesehatan
Agung Oktavianto
 
Pengantar ilmu hukum
Muhammad Ilyas
 
perencanaan berbasis masyarakat menuju penyediaan infrastruktur yang nyaman d...
Bagus ardian
 
Sk pembentukan tim perencanaan teknis
Christine Roberts
 
SOTK Pemerintah Desa
Formasi Org
 
forensik
blofoma
 
Penyelenggaraan Urusan Pemerintahan Bidang Lingkungan Hidup dan Kehutanan ber...
CIFOR-ICRAF
 
PPT Utilitas Rumah Sakit
hillmirama
 
Ppt power point.1
Rais Piliang
 
Pokdakan gelanggang ikan
ahmadbindjasman
 
Presentasi renja 2015 pada forgab skpd 5 maret2014
Ariston Pamungkas
 

Similar to Mfe project (20)

PDF
CONSUPPORT.pdf
TheSophist
 
PPT
Spring portfolio3
ssuser25d7ff
 
PDF
웹개발/솔루션개발
혜리 김
 
PPTX
Siwoo&Japan(private blog)
Pak Siwoo
 
PPTX
웨딩싱어즈
Sungjun Kim
 
PDF
Php report
kimheewon4
 
PDF
Here hear 발표
다현 변
 
PDF
[팀프로젝트] 호텔예약시스템
ssuser664d41
 
PDF
Here hear 5차_1
다현 변
 
PDF
Here hear 5차_1
다현 변
 
PPTX
Html5
상길 안
 
PPTX
종합설계프로젝트(1960052 추영호).pptx
choo7913
 
PDF
Backpacker’s
kangho kim
 
PPTX
Meet Me! project
hyunyoonkim
 
PDF
Here hear 3차 최종
다현 변
 
PDF
Kcjcinema
KANGCHEOLJOON
 
PDF
인터렉최종피티 제출용
호정 정
 
PDF
Here hear 발표용
다현 변
 
PPTX
Project ppt (1)
kim kyubum
 
PPTX
2조 프로젝트 보고서 김동현
kdh24
 
CONSUPPORT.pdf
TheSophist
 
Spring portfolio3
ssuser25d7ff
 
웹개발/솔루션개발
혜리 김
 
Siwoo&Japan(private blog)
Pak Siwoo
 
웨딩싱어즈
Sungjun Kim
 
Php report
kimheewon4
 
Here hear 발표
다현 변
 
[팀프로젝트] 호텔예약시스템
ssuser664d41
 
Here hear 5차_1
다현 변
 
Here hear 5차_1
다현 변
 
Html5
상길 안
 
종합설계프로젝트(1960052 추영호).pptx
choo7913
 
Backpacker’s
kangho kim
 
Meet Me! project
hyunyoonkim
 
Here hear 3차 최종
다현 변
 
Kcjcinema
KANGCHEOLJOON
 
인터렉최종피티 제출용
호정 정
 
Here hear 발표용
다현 변
 
Project ppt (1)
kim kyubum
 
2조 프로젝트 보고서 김동현
kdh24
 
Ad

Mfe project

  • 2. 01팀 소개 02개요 03개발환경 04일정 05설계 & 산출물 06핵심 코드 07스토리보드 08후기
  • 3. 01 팀 소개 송민준 #조장 #기획 #DB설계 #메인화면#관리자기능 조태석 #로그인 #회원가입 #예매 김바하 #채팅 #통신 #AJAX#채팅게시판 김현윤 #디자인 #마이페이지 #리뷰게시판#아이디어뱅크 배유리 #자유게시판 #검색 #필터링 #반응형 디자인
  • 4. 02개요 Why? 단순하게 콘서트 정보만을 제공하는 사이트(인터파크, 롯데 등)는 있지만 20∼30 대의 기호에 맞는 직관적인 UI와 맞춤 정보를 제공해주는 서비스가 없음 How? 해외 서비스 중 하나인 FEVERUP을 벤치마킹, 차별화 전략을 구상하여 서비스를 제공하고자 함. UI에서 직관성을 높이고 개인별 맞춤형 정보를 제공하여 소비자의 니즈를 충족, VOC를 제공하여 고객관리 업무의 효율화를 주안점으로 함
  • 5. 03개발환경 • O/S : Windows 10 • Server : Tomcat8.5 • DB : Oracle 11g • Framework / Library : bootstrap3, jQuery3, slick • Programming Language : JAVA, HTML5, JavaScript • Tool : Eclipse, Github, Aquerytool, StarUML
  • 7. 05설계 & 산출물 – 테이블 정의서
  • 9. 05설계 & 산출물 – 유스케이스 다이어그램
  • 10. 05설계 & 산출물 – 시퀀스 다이어그램
  • 11. 06핵심코드 - 송민준 메인화면 맞춤형 정보 제공 - 회원 -> 선호장르에 따른 맞춤형 정보 제공 - 비회원 -> 최신 정보 제공 - 회원이 선호장르가 없다면 최신 정보를 제공 - Slick Library를 사용하여 슬라이더 구현
  • 12. 06핵심코드 - 김현윤 관리자와 한 상담 내역 - 회차마다 관리자와 한 상담 내역이 저장된다.
  • 13. 06핵심코드 - 조태석 예매 수량 가격 정보 - 티켓 수에 따른 가격 변동이 결제페이지로 넘어가는 버튼에 표기되어 사용자가 쉽게 확인 정보 제공 Tab - Tab을 통해 사용자가 쉽게 정보에 접근 가능
  • 14. 06핵심코드 - 배유리 필터링 결과 출력 - 날짜별, 지역별, 장르별로 필터링한 콘서트를 출력
  • 16. 07스토리보드 1. 네비게이션 바 - 아이콘 클릭 시 검색, 로그인, 계정관리, 커뮤니티 이용 가능 - 관리자는 톱니바퀴 모양의 관리자페이지 이동 가능 2. 콘서트 정보 제공 - 회원의 경우 맞춤형 정보 제 공 - 비회원은 최신 정보 제공 - Slick Library 활용 슬라이더 - 반응형 웹 구현 2 1
  • 17. 07스토리보드 1. 회원 검색 - 각 항목별 키워드에 맞는 검 색 결과 제공 2. 목록 개수 - 1, 3, 5, 10개 단위로 선택 가능 - AJAX 구현 (검색 후 선택 가 능) 2 1 3 4 3. 상세보기 - 클릭 시 회원에 대한 상세 정 보 조회 Modal로 확인 가능 4. 삭제 - 회원에 대한 삭제 가능 5 5. 반응형 - 화면 크기에 따른 반응형 지원
  • 18. 07스토리보드 1. 게시판 검색 - 각 항목별 키워드에 맞는 검 색 결과 제공 2 1 2. 목록 개수 - 1, 3, 5, 10개 단위로 선택 가능 - AJAX 구현 (검색 후 선택 가 능) 3. 삭제 - 게시판에 대한 삭제 가능 4 3 4. 페이지네이션 - 페이지 기능 추가
  • 19. 07스토리보드 2 1 3 4 5 1. 콘서트 검색 - 각 항목별 키워드에 맞는 검 색 결과 제공 2. 목록 개수 - 1, 3, 5, 10개 단위로 선택 가능 - AJAX 구현 (검색 후 선택 가 능) 3. 삭제 - 콘서트에 대한 삭제 가능 4. 등록 - 관리자만 콘서트 등록 가능 5. 페이지네이션 - 페이지 기능 추가
  • 20. 07스토리보드 1 2 1. 이미지 등장 - 고객이 로그인을 하면 채팅 상 담을 요청할 수 있는 이미지 등장. 1
  • 21. 07스토리보드 1. 이미지 클릭 - 이미지 클릭시 채팅창 등장. 채팅 입력란과 보내기 버튼은 비활성된 상태. 1
  • 22. 07스토리보드 1. 회원목록 - 채팅상담을 요청한 고객의 목록 확인 가능 2. 상담하기 - 상담하기 버튼을 통해 고객과 상담을 시작 1 2
  • 23. 07스토리보드 1. 채팅 활성화 - 관리자가 선택한 고객은 채팅 입력란과 보내기 버튼이 활성화 되며 채팅이 가능해짐. 1
  • 27. 07스토리보드 1. 로그인 후 계정관리 - 아이콘 클릭 시 계정관리 Modal 작동 2. 계정관리 - 마이페이지 - 로그아웃 1 2
  • 28. 07스토리보드 1. 마이페이지 메뉴 - 예매내역 - 찜목록 - 정보수정 - 상담내역 2. 예매내역 - 해당 회원의 예매 내역 출력 - 예매 내역 개수 출력 1 2 3 4 3. 공연 상세보기 - 해당 공연명 클릭 시 상세보기 페이지로 넘어감 4. 예매 취소 5 6 5. 목록 개수 지정 6. 페이징 처리
  • 29. 07스토리보드 1. 찜목록 - 메인에서 하트 아이콘 클릭 시 찜목록으로 넘어옴 - 하트는 빈 하트  흰 하트 로 변경 2. 공연 상세보기 - 클릭 시 해당 공연 상세보기 페이지로 넘어감 1 1
  • 30. 07스토리보드 1. 회원정보수정 - 아이디 제외 수정 가능 2. 회원탈퇴 - 클릭 시 alert으로 확인 후 회원탈퇴 진행 1 2
  • 31. 07스토리보드 1. 상담내역 - 관리자와 한 상담내역 출력 2. 채팅 목록 개수 - 채팅 목록 개수 출력 2 3 1 3. 상세보기 - 클릭 시 채팅 상세보기 출력
  • 33. 07스토리보드 1. 리뷰 작성 - 리뷰 작성 게시판 1
  • 34. 07스토리보드 1. 검색 결과 - 입력한 검색어 출력 2. 검색 결과 개수 - 검색 결과에 해당하는 콘서트 의 개수 출력 1 2 4 3 3. D-Day - 오늘 날짜를 기준으로 남은 날 을 나타냄 4. 마감임박 - D-Day가 오늘 날짜를 기준으 로 5일 이하로 남았을 경우 마감 임박을 알림 검색 페이지
  • 35. 07스토리보드 1. 필터 폼 - 메인 화면에서 필터 클릭 시 필터폼 나타남 - 날짜별, 지역별, 장르별 선택 - 지역과 장르는 개수 제한 없 음 - 지역과 장르에서 아무것도 선 택하지 않았을 경우 전국, 모 든 장르로 선택됨 2. 선택한 필터 - 선택한 필터값 출력 - X버튼 클릭시 삭제 후 새로운 결과 출력 3. 검색 결과 개수 - 검색 결과에 해당하는 콘서트 의 개수 출력 1 2 3 필터 페이지
  • 36. 07스토리보드 1. 목록 개수 - 게시판에 출력될 목록의 개수 를 선택하는 기능(1, 3, 5, 7, 10) 2. 검색 기능 - 작성자, 제목, 내용 중 선택하 여 검색하는 기능 3. 페이징 - 목록 개수에 따른 페이징 처리 1 2 3 자유 게시판 - 목록
  • 37. 07스토리보드 1. 목록 개수 - 게시판에 출력될 목록의 개수 를 선택하는 기능(1, 3, 5, 7, 10) 2. 검색 기능 - 작성자 : admin인 글 출력 3. 페이징 - 목록 개수에 따른 페이징 처리 1 2 3 자유 게시판 - 검색
  • 38. 07스토리보드 1. 비밀번호 확인 - 글쓴이의 아이디와 비밀번호 가 일치할 경우 글 등록 가능 2. 글자수 제한 - 글을 입력할 때마다 글자수를 나타냄 - 500자가 넘어갈 경우 더 이상 입력되지 않도록 제한함 1 2 자유 게시판 - write 3 3. 파일 첨부 - 파일 첨부 및 다운로드 가능
  • 39. 07스토리보드 2. View 페이지 - 등록된 게시글을 보여줌 2. 댓글, 답변, 수정, 삭제, 목록 - 댓글과 답변 등록 - 내용 수정 가능 - 게시글 삭제 가능 - 목록으로 돌아가는 기능 - - 비밀번호 일치하는지 확인 자유 게시판 - view 3. 댓글 - 등록한 댓글 목록을 보여줌 1 2 3
  • 40. 07스토리보드 1. 글자수 제한 - 글을 입력할 때마다 글자수를 나타냄 - 500자가 넘어갈 경우 더 이상 입력되지 않도록 제한함 2. 비밀번호 확인 - 원문을 등록한 회원과 비밀번 호가 일치하는지 확인함 1 2 자유 게시판 - 답변
  • 41. 07스토리보드 자유 게시판 - 수정 1 2 1. 비밀번호 확인 - 원문을 등록한 회원과 비밀번 호가 일치하는지 확인함 2. 글자수 제한 - 글을 입력할 때마다 글자수를 나타냄 - 500자가 넘어갈 경우 더 이상 입력되지 않도록 제한함