$$config title: ?장고로 만든 길드 커뮤니티 프로젝트 기술서? keywords: - Django - 기술서 - 장고 - IT $$ # 사이트 기술서 ## 0. 개요 ### 소개 ``` ? 게임내 재화 및 아이템 거래와 사진첩 형태의 게시판 기능을 가진 커뮤니티 사이트 구현 ? 참여율 : 100% ``` ### 링크 ``` ? GitHub Repository : https://github.com/seuljaa/lllolll ? Site : https://goyome.lllolll.me/ ``` ## 1. 개발환경 ### 1-1. 배포관리 ``` ? - GitHub - Jenkins - Docker ``` ### 1-2. 기술스택 ``` ? - Python 3 - Django 4 - HTML/CSS/JavaScript - jQuery - Tailwind - Bootstrap - Summernote ``` ### 1-3. 개발환경 ``` ? - Anaconda - Pycharm - SQLyog - Chrome - PIP - Jenkins - MariaDB - Naver Cloud Platform - Windows 10 ``` ### 1-4. 서비스환경 ``` ? - Ngnix - Putty - Docker - CentOS7 ``` ## 2. 요구사항 ``` ✔️ 회원가입, 로그인, 로그아웃의 관한 기능 ✔️ 거래게시글을 올릴수 있는 게시판과 사진을 공유하는 사진첩게시판 기능 ✔️ 각 게시글에 댓글을 달 수 있는 기능 ✔️ 업로드한 사진에 좋아요를 누를수 있는 기능 ✔️ 게시글의 제목을 검색하거나 원하는 조건을 필터링하여 리스트업 할 수 있는 기능 ✔️ 내가 올린 게시글에 좋아요나 댓글이 달리면 알림이 오고 알림을 확인하면 사라지는 기능(누르면 해당 게시글로 이동) ✔️ 모바일에서도 호환가능한 반응형 ``` ## 3. 주요기능 ``` ✔️ 회원(가입, 로그인 등) ✔️ 게시글 업로드(게시판 형식 & 사진첩 형식) ✔️ 댓글 ✔️ 좋아요 ✔️ 게시글 검색 및 필터링 ✔️ 알림 ✔️ 반응형 ``` ### 3-1. 회원 ``` ? 회원 - 회원가입 가능 - 로그인, 로그아웃 가능 - 아이디 찾기, 비밀번호 초기화 가능 - 비밀번호 초기화 : 가입시 입력한 이메일주소로 초기화 링크 발송 ``` ### 3-2. 게시글 업로드 ``` ? 아이템 거래 & 구인, 구직 게시판 - Summernote 적용하여 게시글 꾸미기 가능 - 상세 옵션 설정 가능 - 게시글에서 입력한 다양한 옵션을 사용자의 요구의 따라 필터링 하여 리스팅 가능 - 게시글 제목 검색 가능 - 업로드된 게시글에 댓글달기 가능 - 새로운 댓글이 달리면 알림함에서 확인 가능 ``` ``` ? 인스타그램 형태의 사진첩 게시판 - 여러장의 사진 업로드 가능 - 사진첩 리스트에 여러장의 사진중 첫번째 사진만 노출 - 업로드된 사진에 좋아요 가능 - 업로드된 사진에 댓글달기 가능 - 새로운 댓글및 좋아요가 달리면 알림함에서 확인 가능 ``` ``` ? 알림함 - 본인이 작성한 게시글에 댓글이나 좋아요가 달리면 알림함을 통해 확인 가능 - 알림함의 알림 클릭시 해당 게시글로 이동 - 알림함의 알림 확인시 알림이 사라짐 - 모든 알림을 한번에 확인상태로 변경 가능 ``` ## 4. 주요 폴더 및 파일 - accounts : 회원 관리 앱 - comment : 댓글 관리 앱 - config : 프로젝트 - deal : 거래게시글 앱 - job : 구인구직 앱 - media : 동적으로 발생하는 정적파일들을 담는 폴더 - node_modules : node 패키지 - noti : 알림 앱 - photo : 사진게시판 앱 - requirements : 의존성 설치 폴더 - package.json : node 의존성 - git_pull_and_rerun.sh : Jenkins에 의해서 실행 되는 재배포 스크립트 - tailwind.config.js : Tailwind 설정 ## 5. 배포구조 ``` ? 커밋 > 푸시 > 젠킨스 빌드 유발 > 컨테이너내의 소스코드 리빌드 ``` ## 6. 기술설명 ### 6-1. 회원 ``` ✔️ 회원가입 ✔️ 로그인, 로그아웃 ✔️ 비밀번호 찾기 ``` ### 6-1-1. 동작화면 - 회원가입 ▶ Desktop ![회원가입-데스크탑](https://ifh.cc/g/oQ3oFk.png) ▶ Mobile ![회원가입-모바일](https://ifh.cc/g/eNtshX.png) - 로그인 ▶ Desktop ![로그인-데스크탑](https://ifh.cc/g/FHC0Pm.png) ▶ Mobile ![로그인-모바일](https://ifh.cc/g/QBOoa1.png) - 비밀번호 찾기 ▶ Desktop ![비밀번호 찾기-데스크탑](https://ifh.cc/g/ToQsxE.png) ▶ Mobile ![비밀번호 찾기-모바일](https://ifh.cc/g/8WjwyX.png) ### 6-1-2. 소스코드 > accounts/models.py ```python class UserManager(BaseUserManager): def create_user(self, username, email=None, password=None, **extra_fields): user = self.model( username=username, email=email, ) extra_fields.setdefault('is_staff', False) extra_fields.setdefault('is_superuser', False) user.set_password(password) user.is_active = False user.save() return user def create_superuser(self, username, email=None, password=None, **extra_fields): superuser = self.create_user( username=username, password=password, email=email, ) superuser.is_admin = True superuser.is_superuser = True superuser.is_active = True superuser.is_staff = True superuser.save() return superuser class User(AbstractBaseUser): # Default : id / password / last_login SERVER_CHOICES = ( ('베라', '베라'), ('스카니아', '스카니아'), ('루나', '루나'), ('제니스', '제니스'), ('크로아', '크로아'), ('유니온', '유니온'), ('엘리시움', '엘리시움'), ('이노시스', '이노시스'), ('레드', '레드'), ('오로라', '오로라'), ('아케인', '아케인'), ('노바', '노바'), ) email = models.EmailField(max_length=100, null=False) username = models.CharField(max_length=20, unique=True) server = models.CharField(max_length=9, choices=SERVER_CHOICES) is_staff = models.BooleanField(default=False) is_admin = models.BooleanField(default=False) is_active = models.BooleanField(default=False) is_superuser = models.BooleanField(default=False) date_joined = models.DateTimeField(auto_now_add=True) USERNAME_FIELD = 'username' REQUIRED_FIELDS = ['email'] objects = UserManager() def has_module_perms(self, app_label): return True def has_perm(self, perm, obj=None): return True @property def unchecked_noti_count(self): noti = Noti.objects.filter(to_user_id=self.id).count() return noti ``` > accounts/views.py ```python def sign_up(request): if request.method == 'POST': form = SignupForm(request.POST) if form.is_valid(): signed_user = form.save(commit=False) signed_user.is_active = False signed_user.save() auth_login(request, signed_user) messages.success(request, "회원가입 신청이 완료되었습니다.") # signed_user.send_welcome_email() # FIXME: Celery로 처리하는 것을 추천. next_url = request.GET.get('next', '/') return redirect(next_url) else: form = SignupForm() return render(request, 'accounts/signup.html', {'form': form} ) ``` > accounts/forms.py ```python class SignupForm(UserCreationForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['username'].required = True self.fields['server'].required = True class Meta(UserCreationForm.Meta): model = User fields = ['username', 'email', 'server'] labels = { 'username' : '메이플 닉네임(본캐)', 'server' : '서버', 'email':'이메일(비밀번호 찾을때 사용)', } def clean_email(self): email = self.cleaned_data.get('email') if email: qs = User.objects.filter(email=email) if qs.exists(): raise forms.ValidationError("이미 등록된 이메일 주소입니다.") return email def clean_username(self): username = self.cleaned_data.get('username') if username: qs = User.objects.filter(username=username) if qs.exists(): raise forms.ValidationError("이미 등록된 닉네임 입니다.") return username ``` > accounts/sign_in.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

{% endblock %} ``` > accounts/password_reset_form.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %} {% endblock %} ``` > accounts/find_id_complete.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

? 아이디 찾기 결과

{% for id in result %} {% if id == 0 %}

존재하지 않는 회원입니다.

{% endif %} {% if id == 1 %}

{% for name in username %}

회원님의 아이디는 "{{ name }}" 입니다.

로그인 비밀번호 초기화

{% endfor %}

{% endif %} {% endfor %}

{% endblock %} ``` ### 6-2. 일반 게시판 ``` ✔️ 게시글 리스트 옵션 필터링 & 제목 검색 ✔️ 게시글 작성 ✔️ 댓글 작성 ``` ### 6-2-1. 동작화면 - 게시글 리스트 옵션 필터링 ▶ Desktop ![게시판-데스크톱](https://ifh.cc/g/angmyg.png) ▶ Mobile ![게시판-모바일](https://ifh.cc/g/PqaT5f.png) - 게시글 작성 ▶ Desktop ![게시글작성-데스크톱](https://ifh.cc/g/p2hjJx.png) ▶ Mobile ![게시글작성-모바일](https://ifh.cc/g/jjOTET.png) ### 6-2-2. 소스코드 > job/models.py ```python class Post_job(models.Model): user = models.ForeignKey(User, on_delete=models.DO_NOTHING) subject = models.CharField('제목', max_length=100) create_date = models.DateTimeField('등록날짜', auto_now_add=True) update_date = models.DateTimeField('갱신날짜', auto_now=True) server = models.CharField('서버', max_length=10) boss = models.CharField('보스', max_length=20) level = models.CharField('난이도', max_length=10) total = models.PositiveIntegerField('인원') job = models.CharField('직업', max_length=10, null=True, blank=True) content = models.TextField() kind = models.BooleanField('구인/구직', default=True) is_complete = models.BooleanField('완료여부', default=False) ct_id = models.PositiveIntegerField('content_type_id', default=13) ``` > job/views.py ```python def job_list(request): page = request.GET.get('page', '1') search_keyword = request.GET.get('search_keyword', '') filter_boss = request.GET.getlist('boss') filter_level = request.GET.getlist('level') post_job_list = Post_job.objects.order_by('-create_date') if search_keyword: post_job_list = post_job_list.filter( Q(subject__icontains=search_keyword) ).distinct() if filter_boss: query = Q() for i in filter_boss: query = query | Q(boss__icontains=i) post_job_list = post_job_list.filter(query) if filter_level: query = Q() for i in filter_level: query = query | Q(level__icontains=i) post_job_list = post_job_list.filter(query) paginator = Paginator(post_job_list, 10) page_obj = paginator.get_page(page) context = {'job': page_obj, 'page': page, 'search_keyword': search_keyword} return render(request, 'job/job_list.html', context) @login_required(login_url='accounts:sign_in') def post_job(request): if request.method == 'POST': form = PostForm(request.POST) if form.is_valid(): post = form.save(commit=False) post.user_id = request.user.id post.subject = request.POST.get('subject') post.kind = request.POST.get('kind') post.server = request.user.server post.boss = request.POST.get('boss') post.level = request.POST.get('level') post.total = request.POST.get('total') post.job = request.POST.get('job') post.save() return redirect('job:job_list') else: form = PostForm() return render(request, 'job/job_post.html', {'form': form}) @login_required(login_url='accounts:sign_in') def job_detail(request, post_id): detail = Post_job.objects.get(pk=post_id) return render(request, 'job/job_detail.html', {'detail': detail}) def job_complete(request, post_id): post = Post_job.objects.get(pk=post_id) post.is_complete = True post.save() return redirect('job:job_detail', post.id) ``` > job/job_list.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% load humanize %} {%block content %}

구인구직

{% if job %} {% for post in job %} {% if post.kind == False %} {% else %} {% endif %} {% if post.is_complete == False %} {% else %} {% endif %} {% endfor %} {% else %}

{% endif %}

번호	구인/구직	상태	제목	보스	난이도	서버	닉네임	등록일
{{ post.id }}	구직	구인	미완료	완료	{{post.subject}}	{{ post.boss }}	{{ post.level }}	{{ post.server }}	{{ post.user.username }}	{{ post.create_date.year}}.{{ post.create_date.month}}.{{ post.create_date.day}} {{ post.create_date.hour}}:{{ post.create_date.minute}}
게시글이 없습니다?

게시글작성

이전
이전
{{ page_number }}
{{ page_number }}
다음
다음

{%endblock%}

{% block script %} {% endblock %}

``` > job/job_post.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {%block content %}

{% if user.is_authenticated %}

{% csrf_token %}

구인구직

제목

파티정보

보스

구인/구직중인 직업

파티총인원
명

{% bootstrap_form form %} {% bootstrap_button button_type="submit" content="등록하기" %}

{% else %}

로그인 후 이용해주세요.

{% endif %} {% if form.errors %} {% endif %}

{%endblock%} {% block script %} {% endblock %} ``` > job/job_detail.html ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% load humanize %} {% block content %}

{%if detail.kind == True %}

구인

{% else %}

구직

{% endif %}

{%if detail.is_complete == True %}

완료

{% else %} {% if detail.kind == True %}

구인중

{% else %}

구직중

{% endif %} {% endif %}

작성자 : {{ detail.user }}

{% if request.user == detail.user %}

{% if detail.is_complete == False %} 완료 수정 삭제

{% endif %} {% endif %}

보스

난이도

총인원

{{ detail.total }}명

직업

{% if detail.comment_set.count > 0 %} {% for comment in detail.comment_set.all %}

{{ comment.user }}	{{ comment.content }}

{% endfor %} {% else %}

작성된 댓글이 없습니다?

{% endif %}

{% endblock %} ``` ### 6-3. 사진첩 게시판 ``` ✔️ 리스트에서 게시글의 사진 미리보기 ✔️ 여러장의 사진 업로드 ✔️ 좋아요 ✔️ 댓글 ``` ### 6-3-1. 동작화면 - 리스트에서 게시글의 사진 미리보기 ▶ Desktop ![리스트-데스크톱](https://ifh.cc/g/FXqOKk.jpg) ▶ Mobile ![리스트-모바일](https://ifh.cc/g/taZkW8.jpg) - 사진업로드 ▶ Desktop ![사진업로드-데스크톱](https://ifh.cc/g/agT3tN.png) ▶ Mobile ![사진업로드-모바일](https://ifh.cc/g/tZiwGj.png) - 사진 상세보기에서 좋아요와 댓글 ▶ Desktop ![사진상세-데스크톱](https://ifh.cc/g/e4cWoC.jpg) ▶ Mobile ![사진상세-모바일](https://ifh.cc/g/amNciA.jpg) ### 6-3-2. 소스코드 > photo/models.py ```python class Photo_post(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) create_date = models.DateTimeField('등록날짜', auto_now_add=True) update_date = models.DateTimeField('갱신날짜', auto_now=True) content = models.TextField() like_count = models.PositiveIntegerField(default=0) likes_user = models.ManyToManyField( User, # this is preferred than just 'User' blank=True, # blank is allowed related_name='likes_user' ) ct_id = models.PositiveIntegerField('content_type_id', default=10) def count_likes_user(self): # total likes_user return self.likes_user.count() class Photo_Image(models.Model): post = models.ForeignKey(Photo_post, on_delete=models.CASCADE) imgfile = models.ImageField(null=False, upload_to="photo", blank=False) def delete(self, *args, **kargs): os.remove(os.path.join(settings.MEDIA_ROOT, self.imgfile.name)) super(Photo_post, self).delete(*args, **kargs) ``` >photo/views.py ```python def photo_list(request): page = request.GET.get('page', '1') photo = Photo_post.objects.order_by('-create_date') img = [] for photo_id in photo: img.append(Photo_Image.objects.filter(post_id=photo_id).first()) paginator = Paginator(photo, 10) page_obj = paginator.get_page(page) context = {'photo': page_obj, 'page': page, 'img': img} return render(request, 'photo/photo_list.html', context) @login_required(login_url='accounts:sign_in') def photo_post(request): if request.method == 'POST': content = request.POST['content'] img_list = request.FILES.getlist('imgfile[]') images = Photo_post.objects.create(user_id=request.user.id, content=content) images.save() for img in img_list: Photo_Image.objects.create(post=Photo_post.objects.last(), imgfile=img) return redirect('photo:photo_list') else: form = Photo_PostForm() return render(request, 'photo/photo_post.html', {'form': form}) @login_required(login_url='accounts:sign_in') def photo_detail(request, photo_id): photo_detail = Photo_post.objects.get(pk=photo_id) photo = Photo_Image.objects.filter(post_id=photo_id) like_list = photo_detail.likes_user.filter(id=request.user.id) context = {'photo_detail': photo_detail, 'like_list': like_list, 'photo':photo} return render(request, 'photo/photo_detail.html', context) @login_required(login_url='accounts:sign_in') def photo_like(request, photo_id): post = get_object_or_404(Photo_post, id=photo_id) user = request.user if post.likes_user.filter(id=user.id).exists(): post.likes_user.remove(user) post.like_count -= 1 post.save() else: post.likes_user.add(user) post.like_count += 1 post.save() return redirect('photo:photo_detail', photo_id) @login_required(login_url='accounts:sign_in') def delete(request, photo_id): post = Photo_post.objects.get(pk=photo_id) if request.user != post.user: messages.error(request, '본인이 게시글만 삭제할수있습니다.') return redirect('photo:photo_detail', photo_id) else: post.delete() return redirect('photo:photo_list') ``` ### 6-4. 알림함 ``` ✔️ 본인이 작성한 게시글에 댓글이 달리면 알림함에 추가 ✔️ 알림 클릭시 해당 게시글로 이동 ``` ### 6-4-1. 동작화면 - 알림함 ▶ Desktop ![알림함-데스크톱](https://ifh.cc/g/BnatH2.png) ▶ Mobile ![알림함-모바일](https://ifh.cc/g/ZIYWU6.png) ### 6-4-2. 소스코드 > noti/models.py ```python class Noti(models.Model): to_user = models.ForeignKey("accounts.User", on_delete=models.DO_NOTHING) create_date = models.DateTimeField('생성날짜', auto_now_add=True) content_type = models.ForeignKey(ContentType, related_name="content_type_noti", on_delete=models.DO_NOTHING) noti_type = models.ForeignKey(ContentType, related_name="noti_type", on_delete=models.DO_NOTHING) object_id = models.PositiveIntegerField('관련 데이터 번호') content_object = GenericForeignKey('content_type', 'object_id') is_viewed = models.BooleanField('읽음여부', default=False) @property def click(self): self.is_viewed = True self.save() ``` > noti/views.py ```python @login_required(login_url='accounts:sign_in') def noti_list(request): article_list = [] photo_content = ContentType.objects.get_for_model(Photo_post) job_content = ContentType.objects.get_for_model(Post_job) deal_content = ContentType.objects.get_for_model(DealItems) noti_list = Noti.objects.filter(to_user_id=request.user.id, is_viewed=0).order_by('create_date') for noti in noti_list : if noti.content_type == photo_content: article = Photo_post.objects.get(pk=noti.object_id) if article not in article_list: article_list.append(Photo_post.objects.get(pk=noti.object_id)) if noti.content_type == job_content: article = Post_job.objects.get(pk=noti.object_id) if article not in article_list: article_list.append(Post_job.objects.get(pk=noti.object_id)) if noti.content_type == deal_content: article = DealItems.objects.get(pk=noti.object_id) if article not in article_list: article_list.append(DealItems.objects.get(pk=noti.object_id)) return render(request, 'noti/noti_list.html', {'noti_list':noti_list, 'article_list':article_list}) ``` # 테스트 내역 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 로그아웃 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 아이디 찾기 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 비밀번호 찾기 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 게시글 작성, 수정, 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 게시글 필터링 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 게시글 제목 검색 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 게시글 댓글 작성 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 사진 업로드, 수정, 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 사진 좋아요 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 사진 댓글 작성 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 알림 생성 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김슬기 ## 알림 클릭시 해당게시글로 이동 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-24 - 테스트수행인 : 김슬기 ## 알림 확인시 사라짐 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-24 - 테스트수행인 : 김슬기

게시글 상세