$$config title: MovieView 기술설명서 keywords: keywords: - IT - 기술설명서 - 영화 리뷰 $$ ## ?개요 및 목적 ### 개요 - MovieView 바로가기 : [https://movieview.awesomestie.kr](https://movieview.awesomestie.kr) - 최신영화사이트 (개봉, 미개봉) 리뷰 - 사용자 영화 감상 리뷰 공유, 소통 ### 목적 - 자유롭게 사용자들의 공감적인 부분을 형상화 시키기 위해, 딱딱한 분위기 대신 자유로운 리뷰를 통해 사용자들간의 공간 생성 및 활성화 - 리뷰 사이트의 유명세를 통한 배너광고 수익창출 --- ### ?Git 리포지터리 - GitHub Repository : [https://github.com/whdrnal/MovieProjects](https://github.com/whdrnal/MovieProjects) --- 　 ## ?사용된 기술 ### 버전관리 ``` ?️ - GitHub ``` ### 배포환경 ``` ?️ - GitHub - Jenkins - Docker - Jenkins CI/CD ``` ### 개발환경 ``` ?️ - Anaconda - PyCharm - SQLyog - Windows 10 - Chrome - Jenkins - MariaDB - Windows 11 ``` ## ?서비스환경 ``` ?️ - Nginx - MariaDB - Docker - CentOS7 ``` ### 기술스택 ``` ?️ - Python 3 - Django 4 - Django MTV - DRF - MariaDB - HTML, CSS, JS - Jquery - Tailwindcss - BootStrap - Summernote ``` --- ## 설계패턴 ![](https://i.postimg.cc/bY9QJ7BH/e726a7e20f25e80a.png) --- ## ?요구사항 분석 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-0001 | 메인 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 로고 클릭시 홈 화면으로 이동할 수 있다.| 01.12 | 박종구 | 반영 | 0.01 | | RQ-0002 | 영화목록 | 가운데 영역 | 사이트의 이름과 생성된 날짜가 Footer에 등록 되어있다. | 01.12 | 박종구 | 반영 | 0.01 | | RQ-0003 | 메인 | 상단 영역 | 네비게이션바 클릭시 로그인 과 회원가입 홈 이동 가능하다. | 01.14 | 박종구 | 반영 | 0.01 | | RQ-0004 | 영화목록 | 가운데 영역 | 메인화면 과 같이 보이도록 하였고, 제목과 별점이 보이도록 구현했다. | 01.16 | 박종구 | 반영 | 0.01 | | RQ-0005 | 영화상세 | 상단 영역 | 검색바가 있다. - 상세보기 화면 오른쪽 상단 | 01.17 | 박종구 | 반영 | 0.01 | | RQ-0006 | 영화상세 | 하단 영역 | 리뷰 작성 버튼이 있다. - 하단부분 | 01.19 | 박종구 | 반영 | 0.01 | | RQ-0007 | 영화상세 | 가운데 영역 | 위에서부터 영화 정보, 리뷰내용, | 01.20 | 박종구 | 반영 | 0.01 | | RQ-0008 | 영화상세 | 하단 영역 | 리뷰등록 버튼 위에 별점이있다. - 카테고리 형식 | 01.23 | 박종구 | 반영 | 0.01 | | RQ-0009 | 영화상세 | 가운데 영역 | 영화상세보기 아래에 리뷰등록이 있다. 리뷰작성 폼이 있다. | 01.23 | 박종구 | 반영 | 0.01 | | RQ-0010 | 게시글 | 가운데 영역 | 댓글 작성 폼 아래에 게시글 리스트가 있다. - 페이지는 현재 보고있는 게시글이 해당하는 페이지이며 보고있는 게시글은 강조됐다. | 01.28 | 박종구 | 반영 | 0.01 | | RQ-0011 | 로그인 | 가운데 영역 | 로그인 폼이 있다. | 02.02 | 박종구 | 반영 | 0.01 | | RQ-0012 | 회원가입 | 가운데 영역 | 아이디, 비밀번호 찾기, 회원가입이 가능하다. - 로그인 하단| 02.04 | 박종구 | 반영 | 0.01 | --- ### ?주요 폴더 및 파일 - common : 회원 앱 - config : 프로젝트 - mv : 영화 앱 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - node_modules : node 패키지 - QnA : 질문 앱 - requirements : 의존성 - summernote_support : 서머노트서포트앱 - package.json : node 의존성 - git_pull_and_rerun.sh : 젠킨스에 의해서 실행회되는 재배포 스크립트 - tailwind.config.js : 테일윈드 설정 --- ## ⚙️ 배포구조 - 커밋, 푸시, 젠킨스 빌드 유발, 컨테이너 내의 소스코드 리빌드 ### 서버 구조 $$uml !theme mars frame 작업자PC { frame 윈도우10 { frame 크롬 { } } } frame 운영서버머신 { frame CentOS7(public．473．be,_172．17．0．1) { circle 172．17．0．1――8000 circle 172．17．0．1――443 circle 172．17．0．1――3306 frame 도커 { frame nginx――1 { circle nginx――1――443 } frame mariadb――1 { circle mariadb――1――3306 } frame python――2 { circle python――2――8000 } frame python――2――test { } } } } 크롬 --> "172．17．0．1――443":1． https://site7．public．473．be 로 접속 "172．17．0．1――443" --> "nginx――1――443" : 2． 외부 443 => nginx__1 내부 443 "nginx――1――443" --> "172．17．0．1――8000" : 3． nginx proxy manager 에 의해 => 외부 8000 "172．17．0．1――8000" --> "python――2――8000" : 4． 외부 8000 => python__2 내부 8000 "python――2――8000" -[#green]-* "172．17．0．1――3306" : 5． DB 쿼리, 내부 8000 => 외부 3306 "172．17．0．1――3306" -[#green]-* "mariadb――1――3306" : 6． 외부 3306 => mariadb__1 내부 3306 $$ --- ### 젠킨스 배포순서, 테스트 실패시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity 깃허브_리포지터리 box "서버" entity 젠킨스 entity 테스트용_장고컨테이너 entity 실서버용_장고컨테이너 end box 개발자 -> 작업PC : 커밋, 얍! 작업PC -> 깃허브_리포지터리 : 푸시 깃허브_리포지터리 -> 젠킨스 : 웹훅에 의해서 커밋신호 전송 젠킨스 -> 테스트용_장고컨테이너 : 깨어나세요.\ngit pull 하세요.\n테스트용 DB 만드세요.\n모든 테스트를 진행하세요.\n테스트용 DB 삭제하세요.\n다시 잠드세요. 테스트용_장고컨테이너 -> 젠킨스 : 테스트가 실패했습니다... 젠킨스 -> 젠킨스 : 이번 빌드는 실패로 처리하고, 작업을 종료합니다. 개발자 -> 젠킨스 : 해당 빌드의 콘솔기록을 확인하여 테스트가 왜 실패했는지 분석 $$ ### 젠킨스 배포순서, 테스트 성공시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity 깃허브_리포지터리 box "서버" entity 젠킨스 entity 테스트용_장고컨테이너 entity 실서버용_장고컨테이너 end box 개발자 -> 작업PC : 커밋, 얍! 작업PC -> 깃허브_리포지터리 : 푸시 깃허브_리포지터리 -> 젠킨스 : 웹훅에 의해서 커밋신호 전송 젠킨스 -> 테스트용_장고컨테이너 : 깨어나세요.\ngit pull 하세요.\n테스트용 DB 만드세요.\n모든 테스트를 진행하세요.\n테스트용 DB 삭제하세요.\n다시 잠드세요. 테스트용_장고컨테이너 -> 젠킨스 : All Clear 젠킨스 -> 실서버용_장고컨테이너 : 리빌드 후 다시 실행하세요! 개발자 -> 실서버용_장고컨테이너 : 웹 브라우저로 빌드 되었는지 확인(수동확인) $$ --- ## ?DB설계서 ### ERD ![](https://ifh.cc/g/lVpgfj.png) --- ## ?️기능현황 표 | 구분 | 기능 | 구현 | 테스트 | 배포 | --- | --- | --- | --- | --- | | 사용자 |회원가입|✔️|✔️|✔️|✔️| | 사용자 | 로그인 |✔️|✔️|✔️| | 사용자 | 로그아웃 |✔️|✔️|✔️| | 사용자 | 아이디찾기 |✔️|✔️|✔️| | 사용자 | 비밀번호찾기 |✔️|✔️|✔️| | 영화 | 리스트 |✔️|✔️|✔️| | 영화 | 검색 |✔️|✔️|✔️| | 영화 | 별점 |✔️|✔️|✔️| | 영화 | 영화리스트 이미지 |✔️|✔️| ✔️| | 리뷰 | 리뷰등록 |✔️|✔️|✔️| | 리뷰 | 상세정보등록 |✔️|✔️|✔️| | 리뷰 | 수정 |✔️|✔️|✔️| | 리뷰 | 삭제 |✔️|✔️|✔️| --- ## ?Release 기록 2022-02-29 v0.02 카카오 로그인 버튼의 CSS 개선. --- 2022-02-28 v0.01 회원가입 로그인 로그아웃 아이디찾기 비번찾기 초기화 및 재설정 영화 리스트 목록 영화 상세보기 영화 리뷰작성 영화 상세보기 별점등록 영화 리스트 별점 합산 영화 제목 키워드 검색 기능 --- 　 ### ?️주요 기능별 UI/UX 정리 ### 웹 화면 화면( 영화리스트 ) ![웹_메인](https://ifh.cc/g/xR4a8E.png) ## 앱 메인 화면( 영화리스트 ) ![웹_메인](https://ifh.cc/g/e9aMNn.jpg) ⚛️ mv/urls.py ```py urlpatterns = [ path('', views.index, name='index'), ] ``` ⚛️ mv/view.py ```py 　 def index(request): search_keyword = request.GET.get('search_keyword', '') movie_list = Movie.objects.order_by('-id') if search_keyword.lower() != "none": movie_list = movie_list.filter( Q(display_name__icontains=search_keyword) | Q(name__icontains=search_keyword) ).distinct() question_list = Question.objects.order_by('-create_date') context = {'question_list': question_list, 'movie_list': movie_list, 'search_keyword': search_keyword} return render(request, 'mv/movie_list.html', context) ``` ⚛️ mv/templates/mv/movie_list.html ```html 　 {% extends 'layout.html' %} {% load humanize %} {%block content %} {% with img_box_class="t-relative t-overflow-hidden t-rounded" %} {% with img_box_before_class="before:t-content-[''] before:t-absolute before:t-inset-0 before:t-bg-[#00000000] group-hover:before:t-bg-[#00000055] before:t-transition-all" %} {% with img_box_after_class="after:t-content-[attr(data-before)] after:t-hidden group-hover:after:t-block after:t-no-underline after:t-text-white after:t-border-2 after:t-border-white after:t-border-solid after:t-rounded after:t-p-2 after:t-whitespace-nowrap after:t-absolute after:t-top-[50%] after:t-left-[50%] after:t-translate-y-[-50%] after:t-translate-x-[-50%] after:t-transition-all" %}

{% if movie.image %} {% else %} {% endif %} {{ movie.display_name }} {% if movie.review_point == 0%}

★
평점이 없습니다.
{% else %}

★
{{ movie.review_point | floatformat:1 }}
{% endif %}

{% if not movie_list %}

' {{ search_keyword }} ' 검색결과가 없습니다.
영화제목 명을 확인 후 다시 검색해주세요!

{% endif %}

{% endwith %} {% endwith %} {% endwith %} {%endblock%} ``` --- ## 웹 상세 화면 ![웹_상세](https://ifh.cc/g/MUzvsH.jpg) ## 앱 상세 화면 ![앱_상세](https://ifh.cc/g/ZZlJYf.jpg) ⚛️ mv/urls.py ```py 　 urlpatterns = [ path('/', views.detail, name='detail'), ] ``` ⚛️ mv/views.py ```py 　 def detail(request, movie_id): movie = get_object_or_404(Movie, pk=movie_id) question_list = movie.question_set.order_by('-create_date') form = forms.QuestionForm() context = {'movie': movie, 'form': form, 'movie_id': movie_id, 'question_list': question_list, } return render(request, 'mv/movie_detail.html', context) ``` ⚛️ mv/templates/mv/movie_detail.html ```html 　 {% extends "layout.html" %} {% load humanize %} {% load django_bootstrap5 %} {%block content %}

{{ movie.display_name }}
개봉날짜 : {{ movie.open_day }}
영화감독 : {{ movie.director_name}}
{{ movie.genre }}

{% if user.is_authenticated %} {%else%} 로그인 후 리뷰 작성을 할수 있습니다. {%endif%}

{{ movie.question_list }} {% if movie.question_set.count == 0 %}

리뷰가 없습니다.

{% else %}

　개의 리뷰 평점이 있습니다.

{% endif %}

{{ question.create_date}}
{% if question.score == 10 %} {% endif %} {% if question.score == 9 %} {% endif %} {% if question.score == 8 %} {% endif %} {% if question.score == 7 %} {% endif %} {% if question.score == 6 %} {% endif %} {% if question.score == 5 %} {% endif %} {% if question.score == 4 %} {% endif %} {% if question.score == 3 %} {% endif %} {% if question.score == 2 %} {% endif %} {% if question.score == 1 %} {% endif %}

{{ question.user }}님

{{ question.content }}

{% if question.user == request.user %} 삭제 {% endif %} {% if question.user == request.user %} 수정 {% endif %}

여러분의 소중한 평점 및 영화 관람평을 작성해주세요.
주제와 무관한 리뷰 또는 스포일러는 표시제한 또는 삭제될 수 있습니다.

{% if user.is_authenticated %} {% endif %}

{% endblock %} ``` --- ## 웹 리뷰 작성 화면 ![웹_리뷰작성](https://ifh.cc/g/YPrttU.png) ## 앱 리뷰 작성 화면 ![웹_리뷰작성](https://ifh.cc/g/mpP4K2.png) ## 리뷰 작성 유효성 체크 $$uml @startuml start repeat :영화 목록; :리뷰작성 시도; backward :메세지 출력 "리뷰 작성은 로그인 후 가능합니다."; repeat while (유효성 체크) is (No) not (Yes) :메세지 출력 "리뷰작성 성공"; stop @enduml $$ ⚛️ mv/urls.py ```py 　 urlpatterns = [ path('/question/create/', views.question_create, name='question_create') ] ``` ⚛️ mv/views.py ```py 　 @login_required(login_url='common:login') def question_create(request, movie_id): if request.method == 'POST': form = forms.QuestionForm(request.POST) form2 = forms.ReviewForm(request.POST) if form.is_valid(): question = form.save(commit=False) question.movie_id = movie_id question.user = request.user if form2.is_valid(): savedScore = form2.cleaned_data['score'] print(savedScore) question.score = savedScore question.save() messages.warning(request, "질문이 등록되었습니다.") return redirect('mv:detail', movie_id=movie_id) return redirect('mv:detail', movie_id=movie_id) ``` ⚛️ mv/forms.py ```py class QuestionForm(forms.ModelForm): class Meta: model = models.Question fields = [ "content", ] labels = { 'content' : ' ', } ``` --- ## 웹 리뷰 작성된 화면 ![웹_리뷰작성된](https://ifh.cc/g/qYeS0j.png) ## 앱 리뷰 작성된 화면 ![앱_리뷰작성된](https://ifh.cc/g/yw3sG7.png) ## 앱 수정 화면 ![웹_리뷰수정](https://ifh.cc/g/jFPLRl.png) ## 앱 수정 화면 ![앱_리뷰수정](https://ifh.cc/g/vAqgTv.png) ⚛️ mv/urls.py ```py 　 urlpatterns = [ path('/question//modify/', views.question_modify, name='question_modify') path('/question//delete', views.question_delete, name='question_delete') ] ``` ⚛️ mv/views.py (Modify) ```py 　 @login_required(login_url='common:login') def question_modify(request, movie_id, question_id): question = get_object_or_404(Question, pk=question_id) movie = Movie.objects.get(id=movie_id) if request.user != request.user: messages.warning(request, '수정권한이 없습니다') if request.method == "POST": form = QuestionForm(request.POST, instance=question) if form.is_valid(): question = form.save(commit=False) question.update_date = timezone.now() question.save() messages.success(request, "질문이 수정되었습니다.") return redirect('mv:detail', movie_id=movie_id) else: form = QuestionForm(instance=question) context = {'form': form, 'movie': movie, 'question': question} return render(request, 'mv/question_form.html', context) ``` ⚛️ mv/views.py (Delete) ```py 　 @login_required(login_url='common:login') def question_delete(request, movie_id, question_id): question = get_object_or_404(Question, pk=question_id) if request.user != request.user: messages.warning(request, '수정권한이 없습니다') else: question.delete() messages.warning(request, "질문이 삭제되었습니다.") return redirect("mv:detail", movie_id=movie_id) ``` ⚛️ mv/forms.py ```py 　 class ReviewForm(forms.Form): score = forms.IntegerField( label='한줄평', widget=forms.NumberInput(attrs={ 'class': 'score', }) ) ``` ⚛️ mv/templates/mv/question_form.html ```html 　 {% extends "layout.html" %} {% load humanize %} {%block content %}

{%endblock%} ``` ⚛️ mv/signals.py ```py 　 @receiver(post_save, sender=Question) def on_post_question_save(sender, instance: Question, created: bool, raw: bool, using, update_fields, **kwargs): movie: Movie = instance.movie review_point = movie.question_set.aggregate(Avg('score'))['score__avg'] movie.review_point = review_point movie.save() @receiver(post_save, sender=Question) def on_post_question_save(sender, instance: Question, created: bool, raw: bool, using, update_fields, **kwargs): movie: Movie = instance.movie review_point = movie.question_set.aggregate(Avg('score'))['score__avg'] movie.review_point = review_point movie.save() ``` --- ## 웹 회원가입 화면 ![웹_회원가입](https://ifh.cc/g/G7Uojf.png) ## 앱 로그인 화면 ![앱_회원가입](https://ifh.cc/g/OJ4lKd.png) $$uml @startuml start repeat :회원가입; :회원가입 시도; backward :메세지 출력 "중복 및 이미사용중 아이디와 비밀번호가 비슷한 예외"; repeat while (중복 체크) is (No) not (Yes) :메세지 출력 "회원가입 성공"; stop @enduml $$ ⚛️ common/urls.py ```py 　 urlpatterns = [ path('signup/', views.signup, name='signup'), ] ``` ⚛️ common/views.py ```py 　 def signup(request): if request.method == "POST": form = UserForm(request.POST) if form.is_valid(): form.save() first_name = form.cleaned_data.get('first_name') username = form.cleaned_data.get('username') raw_password = form.cleaned_data.get('password1') user = authenticate(username=username, password=raw_password, first_name=first_name) # 사용자 인증 login(request, user) # 로그인 messages.success(request, "회원가입 완료되었습니다.") return redirect('index') else: form = UserForm() return render(request, 'common/signup.html', {'form': form}) ``` ⚛️ common/forms.py ```py 　 class UserForm(UserCreationForm): email = forms.EmailField(label="이메일") class Meta: model = User fields = ("first_name", "username", "password1", "password2", "email") ``` ⚛️ common/templates/common/signup.html ```html 　 {% extends "layout.html" %} {% load humanize %} {%block content %}

{% endblock %} ``` --- ## 웹 로그인 화면 ![웹_로그인](https://ifh.cc/g/OsRng7.png) ## 앱 로그인 화면 ![앱_로그인](https://ifh.cc/g/xlJmJ1.png) 　 ⚛️ common/urls.py ```py 　 urlpatterns = [ path('login/', auth_views.LoginView.as_view(template_name='common/login.html'), name='login'), path('logout/', auth_views.LogoutView.as_view(), name='logout'), ] ``` ⚛️ common/templates/common/login.html ```html 　 {% extends "layout.html" %} {% load humanize %} {%block content %}

{% endblock %} ``` --- ## 웹 아이디찾기 화면 ![웹_로그인찾기](https://ifh.cc/g/7PmnWD.png) ## 웹 아이디찾기 화면 ![앱_로그인찾기](https://ifh.cc/g/ntWYBZ.png) ⚛️ common/urls.py ```py 　 urlpatterns = [ path('find_username/', views.find_username, name='find_username') ] ``` ⚛️ common/views.py ```py 　 def find_username(request: HttpRequest): if request.method == 'POST': form = FindUsernameForm(request.POST) if form.is_valid(): email = form.cleaned_data['email'] first_name = form.cleaned_data['first_name'] qs: QuerySet = User.objects.filter(email=email, first_name=first_name) if not qs.exists(): messages.warning(request, "일치하는 회원이 존재하지 않습니다.") else: user: User = qs.first() messages.success(request, f"해당회원의 아이디는 {user.username} 입니다.") return redirect(reverse("common:login") + '?first_name=' + user.first_name) else: form = FindUsernameForm() return render(request, 'common/find_username.html', { 'form': form, }) ``` ⚛️ common/forms.py ```py 　 class FindUsernameForm(forms.ModelForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['first_name'].required = True class Meta: model = User fields = ['first_name', 'email'] ``` ⚛️ common/templates/common/login.html ```html 　 {% extends "layout.html" %} {% load django_bootstrap5 %} {% load humanize %} {%block content %} {% endblock %} ``` ## 웹 비밀번호초기화 화면 ![웹_비밀번호초기화](https://ifh.cc/g/w6ferW.png) ## 웹 비밀번호초기화 화면 ![앱_비밀번호초기화](https://ifh.cc/g/9ZNmOu.png) --- ### UML 문법 ( 비밀번호 초기화 ) 　 $$uml @startuml 사용자 -> 장고: 비밀번호 초기화버튼 클릭 장고 --> 비밀번호초기화: 장고 내부 비밀번호 초기화 비밀번호초기화 --> 장고: 비밀번호초기화 사용자 <- 비밀번호초기화: 비밀번호재설정 @enduml $$ --- ⚛️ common/urls.py ```py 　 path('password_reset/',auth_views.PasswordResetView.as_view(success_url=reverse_lazy('common:password_reset_complete'), email_template_name='common/password_reset_email.html', template_name='common/password_reset_form.html'), name='password_reset'), path('password_reset_done/', auth_views.PasswordResetDoneView.as_view(), name='password_reset_done'), path('password_reset_confirm///', auth_views.PasswordResetConfirmView.as_view(success_url=reverse_lazy('common:password_reset_complete')), name='password_reset_confirm'), path('password_reset_complete/', auth_views.PasswordResetCompleteView.as_view(template_name='common/password_reset_complete.html'), name='password_reset_complete'), ``` ⚛️ common/templates/prssword_reset_complete.html ```html 　 {% extends "layout.html" %} {% load i18n %} {% block breadcrumbs %}

{% translate 'Home' %} › {% translate 'Password reset' %}

{% endblock %} {% block content %}

비밀번호 초기화 완료
로그인 하러가기

{% translate 'Log in' %} {% endblock %} ``` ⚛️ common/templates/common/prssword_reset_email.html ```html 　 {% load i18n %}{% autoescape off %} {% blocktranslate %}You're receiving this email because you requested a password reset for your user account at {{ site_name }}.{% endblocktranslate %} {% translate "Please go to the following page and choose a new password:" %} {% block reset_link %} {{ protocol }}://{{ domain }}{% url 'common:password_reset_confirm' uidb64=uid token=token %} {% endblock %} {% translate 'Your username, in case you’ve forgotten:' %} {{ user.get_username }} {% translate "Thanks for using our site!" %} {% blocktranslate %}The {{ site_name }} team{% endblocktranslate %} {% endautoescape %} ``` ⚛️ common/templates/common/prssword_reset_form.html ```html 　 {% extends "layout.html" %} {% load i18n static %} {% block breadcrumbs %}

{% translate 'Home' %} › {% translate 'Password reset' %}

{% endblock %} {% block content %}

비밀번호 초기화

이메일 :

{% endblock %} ``` ### ?이상 프로젝트 마치겠습니다. 감사합니다.

리뷰 수정

로그인

아이디찾기

?MovieView 기술설명서