Giter Site home page Giter Site logo

dinb1242 / military-count-down Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 2.12 MB

A military discharge date calculator and company wiki toy project.

Home Page: military-count-down-rnby.vercel.app

JavaScript 0.77% TypeScript 98.94% CSS 0.02% Dockerfile 0.08% Shell 0.19%
nextjs tailwindcss react tailwind vercel nestjs

military-count-down's Introduction

military-count-down

Description

A military discharge date calculator and company wiki toy project for myself and coworkers for fun.

This project consists of the left days of military duty and some wiki about the company where I worked as a skilled industrial personnel agent.

Developed using

TypeScript Next.js Nest.js Docker Nginx
Cloudflare R2 PostgreSQL Prisma TailwindCSS

Pre-requisites

  • Git
  • Docker
  • Docker Compose
  • Cloudflare R2

Installiation

Summary

  1. Clone repository.
  2. Modify datasource (docker-compose.yml and .env both)
  3. Create new docker network named military-count-down
  4. Docker compose build and execute

Detail

  1. Clone this repository using the command below where you want.
>> git clone https://github.com/dinb1242/military-count-down.git
  1. Move to the directory where you have cloned, find docker-compose.yml, and modify the postgreSQL db, username, and password what you want to use.

    You have to modify .env file too (datasource such as DB, username, password in this file must match up with db.environment in docker-compose.yml)
>> cd ./military-count-down
  # docker-compose.yml
  # Modify the db.environment.
  db:
    container_name: military-count-down-postgres
    image: postgres:15
    environment:
      - POSTGRES_DB=local
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=password
    ports:
      - "5432:5432"
    networks:
      - military-count-down

  1. Move to the server directory, create .env file to specify the postgreSQL datasource and fill in the below code.

    Note that the datasource must match up with db.environment in docker-compose.yml
# Create .env in server directory.
>> cd ./server
>> touch .env
# .env
DATABASE_URL="postgresql://username:password@db:5432/db_name?schema=schema_name"
JWT_KEY=A_JWT_key_what_you_want_to_use

  1. Before execute the docker compose command, you have to create a new docker network named military-count-down by typing the command below.

    Otherwise, you can just remove docker compose network setting by modifying networks property in docker-compose.yml. (If you decide this way, you can skip this step.)

    To create a docker network, execute the command below.
>> docker network create military-count-down

  1. Move to the root directory and type the command below to set up the whole projects.
# Move to the root directory and build.
>> cd ..
>> docker compose up --build -d

  1. Once the docker compose command finished, you can check the status using the command below.
>> docker compose ps
# Results
NAME                           COMMAND                  SERVICE             STATUS              PORTS
military-count-down-postgres   "docker-entrypoint.s…"   db                  running             0.0.0.0:5432->5432/tcp, :::5432->5432/tcp
military-count-down-server-1   "/bin/sh -c ./entryp…"   server              running             0.0.0.0:8080->8080/tcp, :::8080->8080/tcp
military-count-down-web-1      "npm run start"          web                 running             0.0.0.0:3000->3000/tcp, :::3000->3000/tcp

  1. If some containers are not running, then you can run those by using the command below.
>> docker compose start # Whole containers will be started.
>> docker compose start [service name] # [service name] container will be starte.

Features

military-count-down's People

Contributors

caramellang avatar dinb1242 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

caramellang

military-count-down's Issues

[bug] Coworker 수정 시, 태그 전체 삭제 이슈

Coworker 수정 시, 태그를 추가할 경우 태그가 사라지는 문제가 발생함.

<재현>

  1. 기존에 3개의 태그가 있다고 가정한다. 각 태그의 인덱스는 [0, 1, 2] 이다.
  2. Coworker 저장 이후, 이를 수정하는 페이지에 진입한다.
  3. 해당 페이지에서 새로운 태그를 2개 더 추가한다.
  4. 이때, 새로 추가된 태그 중 첫 번째 태그를 지우면, 기존 0번째 태그도 함께 지워진다. 이는 반대의 경우도 마찬가지이다.

<문제 원인>
기존 태그랑 배열이 꼬이는 현상이 발생하는 것으로 추측된다.

<해결 방법>
새로 추가되는 태그 자체에 랜덤 문자열을 아이디로 사용한다.

[feature - 미정] 본인 인증 기능 개발 및 OAuth

[기능]

  • 이메일 또는 휴대번호 인증 번호를 통해 본인인증을 수행할 수 있다.
  • OAuth 를 활용하여 사이트 내 회원가입이 아니더라도, 카카오, 네이버 등의 계정과 연동하여 사용할 수 있다.
  • 네이버 계정 연동 시, 네이버 계정 뒤에 @naver.com 을 추가하여 기존재하는 계정이 있는지 체크한다.
  • 카카오 계정 연동 시, 카카오 이메일을 활용하여 기존재하는 계정이 있는지 체크한다.
  • 기존재하는 계정이 있을 경우, 음.. 어쩌지 통합해야하나.. 방법을 좀 더 구상해봐야 할 것 같다.

[feature] 위키 템플릿 관리자 페이지 생성

[기능]

  • 관리자페이지 내에서 특정 위키에 대한 초기 템플릿을 지정할 수 있다.
  • 가령, Coworker 생성 시, 이에 해당하는 Default 위키 템플릿이 자동으로 삽입될 수 있도록 한다.

[feature] 리비전 복구 기능 개발 및 보완

[기능]

  • 각 위키 내에 위치한 특정 시점으로 리비전을 복구시킬 수 있다.
  • 리비전 복구는 데이터베이스 내에 되돌린 시점이 최신 버전으로 기록된다. (또한, 특정 일자 기준으로 복구되었다는 것을 페이지에 표시할 수 있어야 한다.)

[enhancement] Coworker, Project 등 제거 시, DB 내 파일 제거 및 R2 파일 제거 필요

생성된 Coworker, Project 를 제거할 때, 연관관계로 지정된 File 이 제거되지 않는 문제를 발견하였다. CASCADE 를 통해 함께 제거될 수 있도록 한다.

이와 더불어, 삭제되는 파일 또한 R2 에서 제거되도록 처리한다.

근데 마크다운 작성 시 포함되는 이미지는 어떻게 처리해야할까?
=> 해당 마크다운 내용을 뜯어서 이미지 주소를 정제한 다음, R2 에서 제거를 해야할까?

[feature] 권한 기능 개발 및 관리자 기능 개발

관리자 대시보드를 개발한다.
또한, 일반 유저인지, 관리자인지에 대한 권한을 분기한다.

[기능]

  • - 관리자 대시보드를 개발한다.
  • - 대시보드에는 현재 가입한 사용자들의 목록을 조회할 수 있으며, 정보 또한 수정할 수 있다.
  • - 각 사용자가 작성한 게시글, Wiki 목록을 열람할 수 있다.
  • - 일일 접속자 및 접속 로그를 파악할 수 있다.
  • - 각 사용자에 대하여 권한을 부여할 수 있다. (관리자/일반)
  • - 정지현은 관리자 권한이 부여된 상태여야한다.

[상세]

  • - 대시보드에는 전체 유저 가입 수, 전체/최근 7일/월 별 접속자 로그를 확인할 수 있다.
  • - 유저 관리 탭은 유저를 출력한다. 이때, 각 유저들은 테이블 형태로 출력한다. 각 테이블에는 유저 번호, 권한, 실명, 이메일, 휴대번호, 가입 일시 등이 있으며, 상세 탭을 통해 해당 유저에 대한 정보를 수정(비밀번호 변경, 권한 부여 외 메타 데이터 등)할 수 있다.

[구현]

  • 유저 스키마에 isAdmin 필드를 생성한다. (default: false)
  • Custom decorator 를 정의하여 관리자 기능일 경우에 컨트롤러의 상단에 붙여서 사용할 수 있다.
  • isAdmin 필드는 JWT 의 Claim 으로 정의하여 사용할 수 있도록 한다.

[feature] 공지사항 및 건의 게시판 개발

[공지사항 기능]

  • 공지사항은 관리자 페이지에서 작성할 수 있다.
  • 공지사항 작성은 마크다운을 이용한다.
  • 공지사항에는 댓글을 작성할 수 없다. 오직 열람만 가능하다.

[건의게시판 기능]

  • 건의 게시판은 본 어플리케이션을 위해 필요한 추가 기능에 대한 요청을 전달받을 수 있다.
  • 건의 게시판은 미답변/답변 과 같은 상태를 나타낼 수 있다.

[bug] TUI 에디터 내 하이퍼링크는 해결함. But Viewer 단에서 미동작

  • 에디터에서는 수정되어서 정상 동작하나, Viewer 단에서는 initMarkdown 으로 불러올 시 하이퍼링크 동작 안 함

  • Editor 에서 마크다운 저장 시 동작 확인 필요

  • 데이터베이스 내 저장 시 HTML 로 저장한 후, Viewer 에서 불러올 때 HTML 형식을 박아넣을지에 대한 고려 필요 => 그렇다면 위키 수정 시 에디터에 붙여 넣을 때에도 그렇게 해도 괜찮은건가?

[feature] 게시글 제거 제한

Coworker 혹은 Project 제거 시, 해당 게시글을 작성한 사람이 아닐 경우 게시글을 제거하지 못 하도록 처리한다.

[기능]

  • 게시글은 작성한 사람만 수정/삭제할 수 있다. 단, 위키는 누구나 자유롭게 수정이 가능하다.
  • 게시글을 작성한 사람이 아닐 경우, 더보기 버튼을 숨긴다.
  • 각 게시글 하단에 조그맣게 최초 작성자에 대한 텍스트를 표기한다. (이름 혹은 이메일)
  • 관리자일 경우, 각 게시글 작성자 여부에 관계 없이 자유롭게 수정 및 삭제가 가능하다.

[feature] 개발 및 운영 환경 분리

개발 및 운영 환경에 따라 다른 환경 변수를 활용할 수 있도록 처리한다.

[처리 대상]

  • 백엔드 Datasource
  • 프론트엔드 API Constant (.env 를 통해 엔드포인트를 관리하도록 변경한다. 또는, Axios Interceptor 에서 바로 환경 변수를 불러다가 사용한다.)

[bug] 이미지 용량 1메가 넘어갈 시 오동작 이슈

[재현 방법]

  1. Coworker 내 프로필 사진 업로드 시, 1메가를 초과하는 이미지 파일을 선택한다.
  2. 그 상태로 저장한다.
  3. 저장되지 않고, 내부적으로 오류가 발생하는 것으로 보인다.

[해결 방법]

  • Multer option 을 통해 파일 크기 제한을 건다.
  • 파일 크기 제한을 해제하고, 컨트롤러 단 혹은 비즈니스 로직 단에서 예외를 발생시킨다.

[bug] 크롬 브라우저 내 scrollToTop 이슈

[재현]

  1. 크롬 브라우저로 접속한다.
  2. 스크롤이 존재하는 위키로 이동하여 우측 하단 최상단으로 이동 버튼을 클릭한다.

[문제]

  • 크롬 브라우저 내에서 top: 0 으로 지정한 동작이 올바르게 작동하지 않음.
  • 올라가는 도중 멈춰버림

[feature] Guest 권한 추가

[기능]

  • Guest 계정을 위한 기능
  • Guest 계정은 Read 만 가능하다.
  • Guest 계정은 모든 페이지에 접근 가능하나, 쓰기 동작이 필요한 페이지의 경우, 관련 Alert 를 표시할 수 있도록 한다.

[Bug] 위키 작성 중, 게시글 삭제 시 500 INTERNAL SERVER ERROR

[재현]

  1. 특정 게시글(Coworker, Project 등)에 대한 위키 작성 화면에 진입한다.
  2. 해당 게시글을 제거한다. (데이터베이스에서 영구 제거된다.)
  3. 삭제된 게시글에 대한 위키 작성 화면에서 저장 버튼을 클릭한다.
  4. 삭제된 게시글에 대한 위키를 작성할 수 없어 500 예외가 발생한다.

[해결 방법]

  • 위키 저장 시점에 해당 게시글이 존재하는지 확인한다. 삭제된 게시글일 경우, 예외 모달을 발생시키고, 기존 게시글 목록 화면으로 이동시킨다.
  • 모든 게시글에 대하여 status 필드를 두어, 실제 게시글이 삭제되었을 경우 -1 로 변환하여 데이터는 보존되도록 처리한다.

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.