$$config title: ? 온라인 오픈마켓 기술설명서 keywords: - IT - 기술설명서 - Django - Python - MTV $$ # ? 개요 - 여성의류 오픈마켓 쇼핑몰 구현 - 주문 기능은 장바구니까지만 구현 (결제 미구현) # ? 원격 저장소 - [깃허브 리포지터리 바로가기](https://github.com/jiin-coder/megaMarket_test) # ? 사용된 기술 ## 형상 & 배포 관리 ``` - GitHub - Docker - Jenkins ``` ## 개발 환경 ``` - Anconda - Pycharm - SQLyog - MariaDB - Chrome - Windows 10 ``` ## 서비스 환경 ``` - NginX - MariaDB - Docker - CentOS 7 ``` ## 기술 스택 ``` - Django 4 - Python 3 - MariaDB - HTML / CSS3 / JavaScript - jQuery - Bootstrap 5 - tailwind ``` ## 기능 현황 | 기능| 구현 | 배포 | 테스트 | | --- | -- | --- | --- | | 상품 리스팅 | ✔️ | ✔️ | ✔️ | | 상품 리스팅 페이징 | ✔️ | ✔️ | ✔️ | | 키워드 검색 | ✔️ | ✔️ | ✔️ | | 질문 작성 | ✔️ | ✔️ | ✔️ | | 장바구니 | ✔️ | ✔️ | ✔️ | | 회원가입 | ✔️ | ✔️ | ✔️ | | 로그인 | ✔️ | ✔️ | ✔️ | | 로그아웃 | ✔️ | ✔️ | ✔️ | | 카카오톡 로그인 | ✔️ | ✔️ | ✔️ | ## Release # ? 요구사항 ## 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-0001 | 공통 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다.| 2/22 | 김지애 | 반영 | 0.01 | | RQ-0002 | 공통 | 하단 영역 | 사이트의 이름과 로고, 푸터가 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0003 | 공통 | 가운데 영역 | 검색바가 있다. - 내비게이션 하단 | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0004 | 공통 | 가운데 영역 | 내비게이션바에 상품리스트, 로그아웃, 마이페이지, 장바구니가 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0005 | 메인 화면 | 가운데 영역 | 환영 메세지가 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0006 | 상품목록 | 가운데 영역 | 페이지 한장 당 4개씩 상품이 나열된다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0007 | 상품상세 | 가운데 영역 | 위에서부터 상품 번호, 마켓명, 상품명, 가격이 기재되어 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0008 | 상품상세 | 가운데 영역 | 상품 소개란 하단에 상품 옵션이 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0009 | 상품상세 | 하단 영역 | 상품 상세 아래에 질문박스가 있다. 질문 작성 폼 밑에 질문 리스트가 있다. | 2/22 | 김지애 | 반영 | 0.01 | | RQ-0010 | 로그인 화면 | 가운데 영역 | 로그인 폼이 있다.| 2/22 | 김지애 | 반영 | 0.01 | | RQ-0011 | 로그인 화면 | 가운데 영역 | 카카오톡 로그인이 가능하다. - 로그인 폼 아래| 2/22 | 김지애 | 반영 | 0.01 | ## 회원 - 회원가입이 가능하다. - 로그인과 로그아웃이 가능하다. - 카카오톡 로그인이 가능하다. ## 상품 - 페이지 1장에 상품 4개씩 리스팅이 가능하다. - 옵션 선택이 가능하다. - 마켓번호와 마켓명, 상품명, 가격이 기재되어 있다. ## 장바구니 - 장바구니 품목추가가 가능하다. ## 검색 - 상품을 상품명을 통해 검색이 가능하다 ## 질문 - 상품 상세페이지에서 질문 작성이 가능하다 - 본인이 작성한 질문은 삭제가 가능하다 # ⚙️ 기능 ## 회원 - 회원가입 - 로그인 - 로그아웃 - 카카오톡 로그인 ## 상품 - 상품 리스팅 - 상품 리스팅 페이징 - 상품 키워드 검색 # 장바구니 - 장바구니 품목 추가 - 장바구니 품목 리스팅 - 장바구니 품목 수량 수정 - 장바구니 품목 삭제 ## 질문 - 상품에 질문 등록 - 본인이 질문 등록 / 수정 / 삭제 ## 검색 - 상품의 키워드로 상품 검색 # ? 주요 폴더 및 파일 - `accounts` : 회원 앱 - `base` : 프로젝트 설정 앱 - `cart` : 장바구니 앱 - `media` : 동적으로 발생하는 정적파일들을 담는 폴더 - `static` : 정적으로 발생하는 정적파일들을 담는 폴더 - `seed` : 시드 앱 - `node_modules` : node 패키지 - `products` : 상품 앱 - `qna` : QNA 앱 - `requirements` : 의존성 - `tags` : 태그 앱 - `.env` : 설정파일 - `package.json` : node 의존성 - `tailwind.config.js` : 테일윈드 설정 # 모델링 ## ERD ![ERD](https://i.postimg.cc/0kGPPSw-k/graphviz.png) # ? 기술설명 ## ✅ 메인화면 ![홈 PC버전](https://i.imgur.com/haze5tw.png) # ✅ 회원가입 ![desktop 기본 회원가입 화면](https://i.postimg.cc/VzHV0N8j/unknown.png) ## 소스코드 ```python {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

회원가입

{% endblock %} ``` ```python # accounts/forms.py class SignupForm(UserCreationForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['first_name'].required = True class Meta(UserCreationForm.Meta): model = User fields = ['username', 'email', 'first_name'] 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 ``` # ✅ 카카오톡 로그인 ![카카오톡 로그인](https://i.imgur.com/jrApbw5.png) ```python # accounts/models.py class User(AbstractUser): ... @staticmethod def login_with_kakao(request: HttpRequest, provider_accounts_id: int, provider_accounts_nickname: str, provider_accounts_thumbnail_image_url: str): provider_type_code = User.ProviderTypeCodeChoices.KAKAO qs: QuerySet = User.objects.filter(provider_type_code=provider_type_code, provider_accounts_id=provider_accounts_id) if not qs.exists(): username = provider_type_code + "__" + str(provider_accounts_id) name = provider_accounts_nickname if provider_accounts_nickname else username email = "" password = str(random.randint(1000, 9999)) user = User.join(username=username, email=email, password=password, name=name, provider_type_code=provider_type_code, provider_accounts_id=provider_accounts_id) if provider_accounts_thumbnail_image_url: provider_accounts_thumbnail_image_url_parsed = urlparse(provider_accounts_thumbnail_image_url) provider_accounts_thumbnail_image_file_name = os.path.basename( provider_accounts_thumbnail_image_url_parsed.path) response = urlopen(provider_accounts_thumbnail_image_url) io = BytesIO(response.read()) user.profile_img.save(provider_accounts_thumbnail_image_file_name, File(io)) else: user: User = qs.first() login(request, user) ``` # ✅ 상품 리스팅 & 검색 - 상단 내비게이션바에 위치한 검색창에서 상품 키워드로 상품 검색 가능 ![PC 게시물 리스팅](https://i.postimg.cc/sgVZ4WZw/unknown.png) ## 소스코드 ```html {% extends "layout.html" %} {% load humanize %} {%block content %}

상품리스트 상품

{% if request.GET.search_keyword or request.GET.product_cate_item_id %}

{% if request.GET.search_keyword %} 검색어 `{{request.GET.search_keyword}}` {% endif %} {% if request.GET.product_cate_item_id %} 카테고리 `{{product_cate_item_name}}` {% endif %}

{% endif %}

VIEW MORE
{{product.market.name}} {{product.market.review_point|floatformat:"1"}} {{product.display_name}} {{ product.sale_price|intcomma }}원 {{ product.price|intcomma }}원 {{ product.colors|safe }} {% if product.picked_users %} {% endif %}

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

{%endblock%} ``` ```python # proudcts/views.py # 일반사용자용 뷰 시작 # 상품 리스트 @require_GET def product_list(request: HttpRequest): # 카테고리 정보 product_cate_items = ProductCategoryItem.objects.all() # 필터요소 1, 검색어가 있다면 저장 search_keyword = request.GET.get('search_keyword', '') # 필터요소 2, 카테고리 아이템이 있다면 저장 product_cate_item_id = request.GET.get('product_cate_item_id', '') # 선택된 카테고리 아이템의 이름을 저장, 없으면 빈값 product_cate_item_name, = (product_cate_item.name for product_cate_item in product_cate_items if product_cate_item.id == int(product_cate_item_id)) if product_cate_item_id else tuple( ['']) # 페이징 page = request.GET.get('page', '1') products = Product \ .objects \ .prefetch_related('cate_item') \ .prefetch_related('product_reals') \ .prefetch_related('market') \ .order_by('-id') if request.user.is_authenticated: products = products \ .prefetch_related( Prefetch('product_picked_users', queryset=User.objects.filter(id=request.user.id), to_attr='picked_users')) if search_keyword: products = products.filter(display_name__icontains=search_keyword) if product_cate_item_id: products = products.filter(cate_item_id=product_cate_item_id) paginator = Paginator(products, 8) # 페이지당 10개씩 보여주기 products = paginator.get_page(page) return render(request, "products/product_list.html", { "products": products, "product_cate_item_name": product_cate_item_name, "product_cate_items": product_cate_items }) ``` # ✅ 상품 상세페이지 ![PC 게시글 상세페이지](https://i.imgur.com/cwSEA4R.png) ## 소스코드 ```python # proudcts/views.py # 상품 디테일 def _product_detail(request: HttpRequest, product_id): cart_add_form = ProductCartAddForm(product_id=product_id) product = get_object_or_404(Product, id=product_id) if request.method == "POST" and request.user.is_authenticated: form = QuestionForm(request.POST) if form.is_valid(): question = form.save(commit=False) question.content_type = ContentType.objects.get_for_model(product) question.object_id = product.id question.user = request.user question.save() messages.success(request, "질문이 등록되었습니다.") return redirect("products:detail", product_id=product.id) else: form = QuestionForm() form.errors product_reals = product.product_reals.order_by('option_1_display_name', 'option_2_display_name') questions = product.questions.order_by('-id') return render(request, "products/product_detail.html", { "product": product, "product_reals": product_reals, "questions": questions, "question_form": form, "cart_add_form": cart_add_form, }) # 상품 디테일 def product_detail(request: HttpRequest, product_id): return _product_detail(request, product_id) ``` # ✅ 장바구니 - 장바구니 품목 추가 - 장바구니 품목 리스팅 - 장바구니 품목 수량 수정 - 장바구니 품목 삭제 ![장바구니](https://i.imgur.com/Kvhmpff.png) ## 소스코드 ```html {% extends "layout.html" %} {% load humanize %} {%block content %}

장바구니

{{cart_item.product_real.product.display_name}}

{{cart_item.product_real.option_1_display_name}}

/

{{cart_item.product_real.option_2_display_name}}

\ {{ cart_item.product_real.product.sale_price|intcomma }}

{% csrf_token %} 삭제

총 가격 : \ {% widthratio cart_item.quantity 1 cart_item.product_real.product.sale_price as total_price %} {{total_price|intcomma}}

{%endblock%} ``` ```python # cart/forms.py # 장바구니 추가 class ProductCartAddForm(ModelForm): def __init__(self, *args, **kwargs): product_id: int = kwargs['product_id'] if 'product_id' in kwargs.keys() else 0 if product_id: del kwargs['product_id'] super().__init__(*args, **kwargs) self.fields['product_real'].label = "옵션" if product_id: product_reals = ProductReal.objects.filter(product_id=product_id) product_real_choices = [(i.id, f'{i.option_1_display_name} / {i.option_2_display_name}') for i in product_reals] self.fields['product_real'].choices = product_real_choices class Meta: model = CartItem fields = ['product_real', 'quantity'] ``` ```python # cart/views.py # 장바구니 품목 추가 @login_required @require_POST def add(request: HttpRequest): product_real: ProductReal = ProductReal.objects.get(id=request.POST.get('product_real')) form = ProductCartAddForm(request.POST) if form.is_valid(): cart_items_qs:QuerySet = CartItem.objects.filter(user=request.user, product_real = product_real) if cart_items_qs.exists(): old_cart_item = cart_items_qs.first() old_cart_item.quantity += int(form.cleaned_data['quantity']) old_cart_item.save() else: cart_item = form.save(commit=False) cart_item.user = request.user cart_item.save() messages.success(request, "장바구니에 추가되었습니다.") return redirect('products:detail', product_real.product.id) messages.error(request, form['quantity'].errors, 'danger') return redirect('products:detail', product_real.product.id) # 장바구니 리스트 @login_required @require_GET def list(request: HttpRequest): cart_items = CartItem.objects.filter(user=request.user) return render(request, "cart/list.html", { "cart_items": cart_items }) # 장바구니 내 선택된 품목들 삭제 @login_required @require_POST def delete_items(request: HttpRequest): ids = map(int, request.POST.get('ids').split(',')) cart_items = CartItem.objects.filter(id__in=ids) for cart_item in cart_items: if cart_item.user != request.user: raise PermissionError() cart_item.delete() messages.success(request, "해당 장바구니 품목들이 삭제되었습니다.") return redirect('cart:list') # 장바구니 품목 삭제 @login_required @require_GET def delete(request: HttpRequest, cart_item_id): cart_item = get_object_or_404(CartItem, id=cart_item_id) if cart_item.user != request.user: raise PermissionError() cart_item.delete() messages.success(request, "해당 장바구니 품목이 삭제되었습니다.") return redirect('cart:list') # 장바구니 수정 @login_required @require_POST def modify(request: HttpRequest, cart_item_id): cart_item = get_object_or_404(CartItem, id=cart_item_id) if cart_item.user != request.user: raise PermissionError() cart_item.quantity = int(request.POST.get('quantity')) cart_item.save() messages.success(request, "해당 장바구니 품목의 개수가 수정되었습니다.") return redirect('cart:list') ``` # ✅ 질문 작성/수정/삭제 - 로그인 후에만 질문 작성, 수정, 삭제 가능 - 내가 작성한 질문에만 수정, 삭제할 수 있도록 권한 부여 - 작성 , 수정, 삭제 완료 후 성공메시지 노출 ### 질문 작성 ![질문 작성](https://i.imgur.com/Yfbe4RC.png) ### 질문 수정 ![질문 수정](https://i.imgur.com/kAnqazO.png) ### 질문 삭제 ![질문 삭제](https://i.imgur.com/BR0rSAs.png) ## 소스코드 ```python # proudcts/views.py # 상품 상세에 질문페이지 포함 def _product_detail(request: HttpRequest, product_id): cart_add_form = ProductCartAddForm(product_id=product_id) product = get_object_or_404(Product, id=product_id) if request.method == "POST" and request.user.is_authenticated: form = QuestionForm(request.POST) if form.is_valid(): question = form.save(commit=False) question.content_type = ContentType.objects.get_for_model(product) question.object_id = product.id question.user = request.user question.save() messages.success(request, "질문이 등록되었습니다.") return redirect("products:detail", product_id=product.id) else: form = QuestionForm() form.errors product_reals = product.product_reals.order_by('option_1_display_name', 'option_2_display_name') questions = product.questions.order_by('-id') return render(request, "products/product_detail.html", { "product": product, "product_reals": product_reals, "questions": questions, "question_form": form, "cart_add_form": cart_add_form, }) def question_create(request: HttpRequest, product_id): return _product_detail(request, product_id) # 질문 삭제 @login_required def question_delete(request: HttpRequest, product_id, question_id): question = get_object_or_404(Question, id=question_id) if request.user != question.user: raise exceptions.PermissionDenied() question.delete() messages.success(request, "질문이 삭제되었습니다.") return redirect("products:detail", product_id=product_id) # 질문 수정 def question_modify(request: HttpRequest, product_id, question_id): product = get_object_or_404(Product, id=product_id) question = get_object_or_404(Question, id=question_id) if request.method == "POST": form = QuestionForm(request.POST, instance=question) if form.is_valid(): form.save() messages.success(request, "질문이 수정되었습니다.") return redirect("products:detail", product_id=product_id) else: form = QuestionForm(None, instance=question) return render(request, "products/question_modify.html", { "product": product, "question": question, "question_form": form, }) ``` # ? 테스트 내역 ### 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 회원가입시 아이디, 이메일 중복체크 및 비밀번호 재확인 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 로그아웃 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 질문 작성, 수정, 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 장바구니에 품목 추가, 수정 삭제 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ### 상품명 키워드 검색 - 테스트통과 : 통과 - 테스트날짜 : 2022-02-23 - 테스트수행인 : 김지애 ## 이상 포트폴리오 기술 설명을 마치겠습니다. 긴 글 읽어 주셔서 감사합니다.