Giter Club home page Giter Club logo

idu-market-next's Introduction

💻 IDU Used Articles Market (IUAM)

인덕대학교 학생들을 위한 중고 마켓 서비스

개발 일자 : 2021.03.01 ~



📺 실제 서비스 사진

URL: https://idu-market.shop

image




👨‍💻 기술 스택

FrontEnd

BackEnd

Cloud

Cooperation



  우아한 애자일

회장


박우림
회장
전순구
부회장

프론트엔드 개발자


전민재
프런트 개발 (팀장)
전상준
프런트 개발자

백엔드 개발자


박우림
백엔드 개발 (팀장)
전순구
백엔드 개발자
김지원
백엔드 개발자


📕 기능 구현 목록

  • 기본적인 CRUD 기능 구현
    • AWS S3를 통한 이미지 업로드 포함
  • 인증 기능 구현
    • 회원가입
      • bcrypt를 이용하여 비밀번호 해시암호화
      • salt와 함께 DB에 저장한다. -> salt는 비밀번호 복호화 시에도 사용된다.
    • 로그인
      • JWT 이용
      • HS256 알고리즘 사용
      • 로그인 유효시간 24시간
    • 아이디 찾기
      • 사용자가 입력한 이름 & 이메일을 인증한 후 해당 이메일로 아이디 발송
    • 비밀번호 찾기
      • 사용자가 입력한 아이디 & 이메일을 인증한 후 해당 이메일로 비밀번호 변경 URL 발송
      • 비밀번호 변경 페이지의 URL은 랜덤한 토큰값 사용
        • 토큰 유효시간 24시간
        • 비밀번호가 변경되면 토큰이 삭제된다. -> 동일한 토큰으로 비번 변경은 1회만 가능.
        • URL을 전달받은 회원만 비번 변경이 가능하다.
  • 알림 기능 구현
    • 거래 완료
    • 댓글
    • 대댓글
    • 모든 알림은 이메일을 통해 사용자에게 전송된다.
  • 관심목록, 판매 목록, 구매 목록 구현
  • 프로필 구현
  • 무한 스크롤 구현
  • 댓글(대댓글) 기능 구현
  • 판매중, 예약중, 거래완료 등 상태를 통한 거래 진행 상황 기능 구현


📄 Git Flow

git flow



📄 DB ERD

ERD



📄 커밋 전략

image



📄 협업

  1. 협업 도구: Git, GitHub, Kakao work
    • GitHub에 Event(PR, Commit 등) 가 발생하면 kakao work로 알림이 간다.
    • 비대면으로 개발을 할 때에도 서로 어떠한 작업을 하고 있는지 kakao work로 알 수 있도록 하였다.
  2. 협업 방법: 애자일
    • 데일리 스크럼:
      • 주 5일, 매일 오전 10시에 "어제 뭐 했고, 오늘은 무엇을 하겠다" 와 같이 나눈 후 각자 개발에 착수했다.
      • 기능 구현을 시작할 때나 완료하였을 때는 기술 스택은 어떤 것을 사용했고, 왜 사용했는지 등에 대해 구체적으로 나누었으며, 더 좋은 방안은 없는지 팀원들의 피드백을 수렴했다.
    • 스프린트:
      • GitHub의 Issue를 활용.
      • 개개인이 주도적으로 자신의 개발 프로세스를 선정하고 스프린트(Issue) 를 작성했다.
      • 각 스프린트 는 프로젝트 칸반보드의 ToDo가 되었으며, 이를 각 팀원이 직접 오늘 할 일을 지정하여 In Progress로 옮겨 작업하였다.
      • 팀원이 미처 발견하지 못한 Issue가 있을 경우에는 회장 박우림이 최종 스프린트를 작성하였다.
    • 기술 공유:
      • 스프린트로 작성된 Issue에 어떻게 구현하였는지 기록함으로써 팀원이 함께 성장할 수 있었으며, 이러한 자료는 후배 기수들에게도 좋은 자료와 모범이 될 수 있었다.
      • 테크톡을 2주에 1번씩 진행하였다.
        • 개개인이 CS지식을 전문가가 될 정도로 공부한 뒤 강의하기 때문에 팀원 모두가 보다 효율적으로 다양한 CS 지식을 습득할 수 있었다.

협업1 협업2



🖼 기술 아키텍처

프로덕트 서버의 기술 아키텍쳐

  • 개발 서버도 아래와 동일하나 MariaDB가 별도로 분리되어있지 않고, 하나의 인스턴스로 운영된다는 것이 다르다.
  • Jenkins와 Docker를 사용하여 배포 자동화를 구현하였다.

image

idu-market-next's People

Contributors

jeonsoongu avatar jsj1510 avatar ssi02014 avatar woorim960 avatar

Stargazers

avatar avatar

Watchers

avatar

Forkers

jeonsoongu jsj1510 kimjiwonpg98 soonki-98 cbwdg

idu-market-next's Issues

[authPage] Auth Page

목적

Home Page 구현

구현 기능

  • Login Page
    • UI
    • 기능
  • Register Page
    • UI
    • 기능
  • Find ID Page
    • UI
    • 기능
  • Find Password Page
    • UI
    • 기능

  • Login Check 기능
  • Logout 기능

[editor] editor issue fix

목적

자유게시판, 공지 게시판에 image upload 추가

구현 기능

  • 자유게시판 image upload 추가 및 유효성 검사
  • 공지게시판 image upload 추가 및 유효성 검사

[CICD] next.js 배포자동화 구현

목적

번거로움을 줄이기 위해

구현 기능

  • Linux에 배포시 정상 동작되는지 확인
    • 된다면 환경변수파일 .env.production을 인식하도록 구현
  • Dockerfile 만들기
  • 도커 이미지 만들기
  • AWS EC2에 Jenkins 설치
  • Jenkins를 구동하여 프로젝트만을 위한 설정
  • 깃헙에 Master로 Push할 경우 자동으로 AWS EC2로 배포되도록 구현

참고 자료

IDU-백엔드 배포자동화 구현방법

[errorFix] Error Fix

목적

알림 이슈 수정

구현 기능

  • 알림 link 누를 때 에러나는 부분 fix

[layout] Layout

목적

데스크탑에서 UI Layout 스타일 수정

구현 기능

  • Home Page Layout
  • Login Page Layout
  • Board List Layout
  • Market List Layout

[homePage] Home Page

목적

Home Page 구현

구현 기능

  • Header UI
  • Footer UI
  • Function Section UI
  • Articles Section UI
  • Introduce Section UI
  • Notice Section UI
  • Main Banner UI

[boards] 게시판 최신화

목적

게시판 돌아올 때마다 최신 정보 가져오기

구현 내역

  • 마켓, 게시판 페이지 렌더링할 때마다 최신정보 가져오기

[Naver, Googloe] 검색 엔진 등록

목적

네이버 및 구글 검색 엔진에 IDU-MARKET 등록

구현

  • 네이버 및 구글 웹마스터 도구에서 사이트 소유 확인하기
  • mainpage에 사이트 소유 확인 HTML 메타 태그 추가하기
  • 검색엔진에 걸리도록 robots.txt 및 simtemap.xml 추가

참고

  1. robots.txt는 모든 검색 로봇이 검색될 수 있도록 구성함.
    ** 생성 페이지와 수정 페이지는 바로 접근하면 안되기 때문에 DisAllow를 이용해서 차단함.
  2. 네이버는 아직 수집이 안되 검색이 되지 않는다.

참고 자료

[register] 회원가입 정규식 및 에러메시지 수정

목적

회원가입 정규식 및 에러메시지 수정

기능

  • id 정규식 , 에러 및 안내 메시지 수정
  • 비밀번호 다를 시 다르다고 에러메시지가 뜨지않는 에러
  • 모든 인풋 에러시 커서를 해당 위치로 이동하고, 빨간색으로 메세지 색 변경

[kakao] 카카오 Oauth 구현

목적

신뢰있는 서비스 구현을 위함 & 편의성 증가

구현

  • 로그인 화면에 카카오로 로그인하기 버튼 추가
  • 카카오로 로그인하기 버튼 클릭시 카카오 Oauth API 함수 실행
    • 로그인시 '이메일', '닉네임', '프로필 사진', '메시지 전송' 동의 구하기
  • 로그인 성공시 '이메일'로 서버에 "로그인 여부 토큰" 생성하도록 요청하기
    • '서버단'에서 로그인에 성공하면 자동으로 "로그인 여부 토큰"을 생성하도록 되어있을 것임.
      따라서 별도의 API를 생성해주면, 이를 요청하면 된다.
    • 추가로, 모든 화면 이동시 로그인 여부를 체크하는데, 그때마다 '이메일'로 로그인 여부 체크하면 됨.

참고

  1. 로그인시 '카톡 메시지 전송' 동의를 구하는 이유

댓글이 달리거나, 판매/구매 등의 이벤트 발생시 카톡메시지를 보내기 위함.
참고: 카카오 메시지 전송 API를 이용하면 무료로 카톡을 보낼 수 있다.

  1. 각 이벤트 발생시의 카톡 전송 기능 구현은 v1.1.0 출시 이후 진행.

각 이벤트 발생시 서버단에서 카카오 유저면 카카오톡 알림도 함께 전송하도록 구현해야한다.
이는 프런트단에서 단순히 카카오 API 요청으로 구현할 수도 있으므로, 프런트와 백단의 논의가 필요하다.

참고 자료

[watchlist] WatchList

목적

Watchlist Add, Delete 기능 구현

구현 기능

  • Watchlist
    • UI
    • 기능
    • DetailTop에 Watchlist Add Component 추가

[boards]Boards

목적

Boards 구현

구현 기능

  • Market Board List

    • Book
    • Device
    • Clothes

  • Basic Board List 구현

    • Notice
    • Freeboard

  • Search Page 구현

    • UI
    • 기능

  • Board Write

    • UI
    • 기능

[api] 모든 API 헤더 api-key값 추가

목적

[api] 모든 API 헤더 api-key값 추가

기능

  • 모든 API 헤더 api-key값 추가

21.07.11(일) - 박우림

  • 공지&자유 게시판 수정 API에 api-key 추가
  • 조회수 업데이트 API에 api-key 추가
  • 이미시 수정/삭제 가능하도록 API 수정
  • api-key 헤더를 환경변수로 숨김 처리

21.07.12(월) - 박우림

  • 댓글 삭제 API에 api-key 추가
  • 수정시 업로드된 이미지가 없어도 기본적으로 "없는" 이미지가 'imageForm'에 삽입되는 문제 해결

[image]Image

목적

Image Upload 기능 구현

구현 기능

  • Image Upload UI
  • Image Upload 기능 구현
    • S3 이미지 Upload

[etc] Etc

목적

기타 게시판

구현 기능

  • 기타 게시판 UI
  • 기타 게시판 기능

[meta] Meta

목적

Meta Tag 등록

메타 태그

  <meta
    name="description"
    content="인덕대학교 학생들을 위한 중고 마켓 서비스(IUAM)"
  />
  <meta
    name="keywords"
    content="인덕대, 인덕대학교, 중고마켓, IUAM, 장터, 마켓, 중고, IDU, IDU마켓, 인덕, 대학생, 대학교, 시장, 거래, 플랫폼, 웹사이트, 웹, 앱, 우아한애자일, 우애, idu used article market, market, 자유게시판, 공지게시판, iuam"
  />

  {/* 페이스북 */}
  <meta property="og:type" content="website" />
  <meta property="og:title" content="IUAM(Idu Used Articles Market)" />
  <meta
    property="og:description"
    content="인덕대학교 학생들을 위한 중고 마켓 서비스(IUAM)"
  />
  <meta
    property="og:image"
    content="https://wooahan-agile.s3.ap-northeast-2.amazonaws.com/HomePage/favicon.png"
  />
  <meta property="og:url" content="https://idu-market.shop/" />

  {/* 트위터 */}
  <meta property="twitter:card" content="summary" />
  <meta
    property="twitter:title"
    content="IUAM(Idu Used Articles Market)"
  />
  <meta property="twitter:url" content="https://idu-market.shop/" />
  <meta
    property="twitter:description"
    content="인덕대학교 학생들을 위한 중고 마켓 서비스(IUAM)"
  />
  <meta
    property="twitter:image"
    content="https://wooahan-agile.s3.ap-northeast-2.amazonaws.com/HomePage/favicon.png"
  />

[error] Error

목적

Error Issue Fix

구현 기능

  • 거래 완료 issue
  • 댓글, 답글 수정 할 때 <br /> issue

[profile] Profile

목적

Profile 구현

구현 기능

  • Profile
    • UI
    • 정보 불러오기
    • Image Update

[setUp] Set Up

목적

Set Up

구현 기능

  • Next.js Set Up
  • Sass Set Up
  • Redux Set Up

[admin] Admin

목적

관리자 기능 구현

구현 기능

  • 관리자 닉네임 색깔 변경

[image] Image

목적

NHN 이미지 기능 구현

기능 구현

  • NHN Image 저장소로 이미지 업로드 기능
  • NHN Image 저장소에서 이미지 제거 기능
  • Detail Page에서 이미지 출력

[boardDetail]BoardDetail

목적

BoardDetail UI 및 기능 구현

구현 기능

  • BoardDetail UI 및 기능 구현
    • 기본 UI
    • Image Slider
    • Comment

[validation] Validation

목적

관심목록, 판매 목록, 구매 목록 유효성 검사

구현 기능

  • 관심 목록 유효성 검사
  • 판매 목록 유효성 검사
  • 구매 목록 유효성 검사

[Env] Next.js 도커 컨테이너 내부에 env 파일이 적재되지 않고도 배포할 수 있도록 구현

목적

도커 허브에 배포되기 때문에 환경변수가 이미지 내에 적재되어 있다면 외부 해킹의 원인이 될 수 있음.

구현 기능

  • .env.production 파일을 도커 이미지를 빌드할 때 추가하지 않도록 구현
  • .env.production 파일 없이 만들어진 이미지를 run할 때 로컬의 환경변수를 적용할 수 있도록 구현

참고

  1. Next.js 자체를 빌드하는 과정에서 .env.production 파일을 찾고 함께 빌드하게된다.
  2. 이미지는 이미 Next.js가 빌드된 상태의 것이어야 한다.
  3. 그렇다면, 이미지를 만드는 과정에서 Next.js가 빌드가 되어야 한다는 것.
  4. 문제는 이미지를 만드는 도커 내에서 .env.production 파일이 존재해야 Next.js가 빌드를 수행할 수 있다는 것.
  5. 즉, Next.js가 빌드 될 때 로컬에 존재하는 .env.production 파일을 읽어들일 수 있도록 구현해야 한다.
  6. 따라서, 이미지를 만드는 과정에서 로컬의 환경변수와 이미지를 연결시켜줘야 한다.
  7. 컨테이너를 구동(run) 할 때는 Volume을 사용하여 로컬 파일과 연동하므로, Volume 관련 설정을 찾아보면 가능할 것이라 판단된다.

[saleList] Sale List

목적

판매 목록 구현

구현 기능

  • 판매목록 구현
    • UI
    • 기능 구현

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.