choikeunyoung/Final_Project

HTML

수상내역

웹사이트 주소

NES : Never Ending Story의 준말로, 예술전공 학생들의 졸업작품 판매를 시작으로 예술가로서의 삶이 시작되기를 장려하는 뜻.

목차

웹 서비스 소개
기술 스택
주요 기능
특이사항
개발 팀 소개
개발 기간 및 일정
프로젝트 후기

1. 서비스 소개

입장시 로딩 페이지

젤 처음 홈페이지에 접속했을 때 팀명 NES 를 JS로 3초안에 글자가 써지도록 띄워준 후 페이지를 이동시킨다.

회원 가입 후 로그인

정해진 양식의 회원가입을 진행하는데 아이디 중복확인을 통해서 아이디가 존재하는지 여부를 확인한다.
가입 양식을 작성하고 이메일 인증을 통해서 실제 이메일로 인증번호를 보내 인증번호를 입력하지 않을 경우 가입할 수 없다.
양식대로 가입을 완료했으면 로그인을 진행하고 로그인이 끝나면 미술관의 컨셉에 맞도록 티켓을 뽑는 홈페이지로 이동시킨다.
티켓 출력버튼을 누르고 "Take a ticket"을 누른 후 티켓을 클릭하면 카테고리 목록 사이트를 보여준다.

테마별 카테고리 페이지

각 테마별로 색상을 지정하여 스크롤이 이동하면서 그 테마의 위치에 올 경우 배경의 색상을 변화를 주는 것을 구현함
좌우 스크롤로 이동 가능함

메인 페이지 및 네브바

테마별 페이지에서 왼쪽 NES를 클릭하여 네브바를 펼칠 수 있고 각 테마별로 이동시 무슨 테마로 이동되는지 화면에 띄워준 후 이동한다.

쪽지 보내기

유저 프로필 페이지의 비행기 모양을 클릭하여 유저에게 쪽지를 보낼 수 있다.
받은 유저는 쪽지함에 받은 편지라는 항목이 생기고 보낸 유저의 경우 보낸 편지함에 목록이 생성된다.

프로필에 작품 담기 및 댓글 비동기

작품을 저장하여 내 프로필 페이지에서 자유롭게 볼 수 있고 또한 작품에 댓글작성을 통하여 댓글을 작성할 수 있다.

최근 본 작품 및 작품 구매 페이지

최근에 본 작품들도 열람할 수 있으며 내가 원하는 작품들을 구매할 수 있는 페이지를 구현했다.
작품 가격에있어서 가격흥정도 작가와 가능하도록 문의하기를 통해서 가격을 작가와 상의할 수 있도록 구현했다.
구매를 누르면 사용자의 기본정보를 가져와서 연락처를 입력한 후 이노시스 API를 통해서 결제가 진행되도록 구현했다.

2. 기술 스택

Frontend	Backend	Cooperation	Release
HTML5	Python	Git	S3
CSS3	Django	GitHub	Elastic beanstalk
Bootstrap	SQLite	Notion
JavaScript	PostgreSQL	Discord
	Redis

3. 주요 기능

회원 가입
로그인
CRUD
작가 인증을 통한 작품 등록
작품들 구매 및 흥정 가능
이노시스 API를 통한 결제 진행
쪽지 기능을 통한 소통기능 구현
모바일 페이지를 고려한 반응형

4. 팀원 및 참고 자료

김예린 - 팀장(BE)

ererink - Overview

최근영 - 팀원(FE)

choikeunyoung - Overview

백솔비 - 팀원(FE)

hae-on - Overview

문현동 - 팀원(BE)

mhd329 - Overview

이명학 - 팀원(BE)

Emhaki - Overview

페이지 구성 Figma

모델 ERD 구성

기획서

5. 개발 중 이슈

깃허브 칸반보드 이용하여 진행

6. 개발 기간 및 일정

**개발 기간 : 11.24 (목) ~ 12.14 (수)

7. 내가 한 작업들

JQuery코드를 복사해와서 좌우 스크롤에 따른 Background Color를 적용
Vanilla JS로 구현해볼려고 헀지만 JS에 대한 이해가 부족하여 인터넷 검색을 통해서 JQuery 코드를 복사해온 것이 아쉽다.

회원가입 페이지 반응형 제작 및 DB에 같은 아이디가 들어갈 수 없도록 중복확인 기능 구현

프로필 페이지 반응형 제작

8. 프로젝트 후기

부족하지만 짧은 기간동안 반응형 웹페이지를 고려해 작업하는데 몰두헀던 것 같다.
Vanilla JS로 좌우스크롤을 구현하고싶었지만 JS 숙련도 부족으로 인하여 JQuery사용법도 모른채 인터넷 코드를 그대로 사용한 것이 아쉬웠다.
기회가 된다면 Vanila JS에 대해서 좀 더 공부를 해본 후 좌우 스크롤에대해서 다시 도전해보고 싶다.
세번 진행한 프로젝트 중에서 제일 CSS적인 요소를 많이 건들여본 프로젝트 같고 또한 BEM 표기법으로 구현할려고 노력했다.
반응형 웹페이지를 "PX"마다 조정하여 진행하였지만 다른 웹사이트를 보면 테블릿, 휴대폰 등으로 나눠서 진행하는 것을보고 많이 부족하고 공부할 것이 많다는 것을 느꼈다.
모든 팀원들이 대부분의 시간을 쏟아부어가며 만들어낸 페이지로 완성도는 처음 기획했던 것 그대로 기획이 된 것 같아서 최종 프로젝트에서 좋은 경험을 하고 교육을 끝마친 것 같다.