Merge pull request #137 from woowa-techcamp-2021/develop

v0.5 release

backend/src/app.ts

@@ -14,10 +14,12 @@ app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
 
 app.use('/dist', express.static(path.join(__dirname, '../../frontend/dist')));
-app.get('/', (req, res) => res.sendFile(path.join(__dirname, '../../frontend/dist/index.html')));
+app.get('/', (_, res) => res.sendFile(path.join(__dirname, '../../frontend/dist/index.html')));
 
 app.use('/api', apiRouter);
 
+app.use((_, res) => res.status(404).redirect('/'));
+
 app.use(errorMiddleware);
 
 export default app;

frontend/src/assets/styles/colors.ts

@@ -1,5 +1,7 @@
 const colors = {
-  primary: '#2AC1BC'
+  primary: '#2AC1BC',
+  offWhite: '#FCFCFC',
+  titleActive: '#1E2222'
 };
 
 export default colors;

frontend/src/ui-elements/cash-history/monthly-cash-history/index.ts

@@ -40,12 +40,14 @@ class MonthlyCashHistoryUIElement extends UIElement {
         return;
       }
       const $date = document.createElement('div');
+      const { date, day, income, expenditure } = cashHistoriesInDay;
+
       $date.innerHTML = `
         <div class="monthly-cash-history__header">
-          <div class="">${cashHistoriesInDay.month}월 ${cashHistoriesInDay.date}일</div>
-          <div class="monthly-cash-history__day">${getDayString(cashHistoriesInDay.day)}</div>
-          <div class="monthly-cash-history__income">수입 ${formatNumber(cashHistoriesInDay.income)}</div>
-          <div class="monthly-cash-history__expenditure">지출 ${formatNumber(cashHistoriesInDay.expenditure)}</div>
+          <div class="">${cashHistoriesInDay.month}월 ${date}일</div>
+          <div class="monthly-cash-history__day">${getDayString(day)}</div>
+          ${income > 0 ? `<div class="monthly-cash-history__income">수입 ${formatNumber(income)}</div>` : ''}
+          ${expenditure > 0 ? `<div class="monthly-cash-history__expenditure">지출 ${formatNumber(expenditure)}</div>` : ''}
         </div>
       `;
       $container.appendChild($date);

frontend/src/ui-elements/color-picker/index.css

@@ -0,0 +1,54 @@
+.color-picker {
+  width: 100%;
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px 0;
+}
+
+.color-picker__palette {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 45%;
+}
+
+.color-picker__color {
+  width: 25px;
+  height: 25px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.color-picker__input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.color-picker__color-hex {
+  background-color: var(--background);
+  width: 120px;
+  height: 30px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  outline: none;
+}
+
+.color-picker__current {
+  width: 25px;
+  height: 25px;
+  border-radius: 8px;
+}
+
+.color-picker__refresh {
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  font-size: var(--bold-medium);
+  font-weight: bold;
+}

frontend/src/ui-elements/color-picker/index.ts

@@ -0,0 +1,129 @@
+import colors from '../../assets/styles/colors';
+import UIElement from '../../core/ui-element';
+import { generateRandomColor } from '../../utils/color';
+
+import './index.css';
+
+const COLOR_COUNT = 5;
+
+class ColorPickerUIElement extends UIElement {
+  private colors: string[] = [];
+  private $palette?: HTMLElement;
+  private $colorInput?: HTMLInputElement;
+  private $refreshButton?: HTMLElement;
+
+  constructor ($target: HTMLElement) {
+    super($target, {
+      className: 'color-picker'
+    });
+  }
+
+  get value (): string | undefined {
+    return this.$colorInput?.value;
+  }
+
+  clear (): void {
+    if (this.$colorInput !== undefined) {
+      this.$colorInput.value = '';
+    }
+  }
+
+  private assignColors () {
+    this.colors = [];
+
+    for (let i = 0; i < COLOR_COUNT; i += 1) {
+      this.colors.push(generateRandomColor());
+    }
+  }
+
+  private renderPalette () {
+    if (this.$palette === undefined) {
+      return;
+    }
+
+    this.$palette.innerHTML = this.colors.map((color) => {
+      return `
+        <div data-color=${color} class="color-picker__color" style="background-color: ${color}"></div>
+      `;
+    }).join('');
+  }
+
+  protected render (): void {
+    this.assignColors();
+  }
+
+  private getFontColorByBackground (color: string): string | undefined {
+    const RGB_SUM_STD = 600;
+
+    if (!color.match(/^#(?:[0-9a-f]{3}){1,2}$/i)) {
+      return;
+    }
+
+    const r = parseInt(color.substring(1, 3), 16);
+    const g = parseInt(color.substring(3, 5), 16);
+    const b = parseInt(color.substring(5, 7), 16);
+
+    if (r + g + b < RGB_SUM_STD) {
+      return colors.offWhite;
+    }
+
+    return colors.titleActive;
+  }
+
+  private setCurrentColor (color: string) {
+    if (this.$colorInput !== undefined && this.$refreshButton) {
+      this.$colorInput.value = color;
+      this.$refreshButton.style.backgroundColor = color;
+      const fontColor = this.getFontColorByBackground(color);
+      fontColor && this.$refreshButton.style.setProperty('color', fontColor);
+    }
+  }
+
+  private onPaletteClicked (e: Event) {
+    const target = e.target as HTMLElement;
+    const { color } = target.dataset;
+    if (color === undefined) {
+      return;
+    }
+
+    this.setCurrentColor(color);
+  }
+
+  private onColorInput (e: Event) {
+    const { value } = e.target as HTMLInputElement;
+    this.setCurrentColor(value);
+  }
+
+  private onRefreshClicked () {
+    this.assignColors();
+    this.renderPalette();
+  }
+
+  protected addListener (): void {
+    this.$palette?.addEventListener('click', this.onPaletteClicked.bind(this));
+    this.$colorInput?.addEventListener('input', this.onColorInput.bind(this));
+    this.$refreshButton?.addEventListener('click', this.onRefreshClicked.bind(this));
+  }
+
+  protected mount (): void {
+    this.$palette = document.createElement('div');
+    this.$palette.className = 'color-picker__palette';
+    this.$element.appendChild(this.$palette);
+    this.renderPalette();
+
+    const $colorInputWrapper = document.createElement('div');
+    $colorInputWrapper.className = 'color-picker__input-wrapper';
+    this.$element.appendChild($colorInputWrapper);
+
+    this.$colorInput = document.createElement('input');
+    this.$colorInput.className = 'color-picker__color-hex';
+    $colorInputWrapper.appendChild(this.$colorInput);
+
+    this.$refreshButton = document.createElement('div');
+    this.$refreshButton.className = 'color-picker__refresh color-picker__color';
+    this.$refreshButton.innerHTML = 'RE';
+    $colorInputWrapper.appendChild(this.$refreshButton);
+  }
+}
+
+export default ColorPickerUIElement;

frontend/src/ui-elements/input-modal/index.css

@@ -1,7 +1,39 @@
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes modal-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
 .input-modal-wrapper.disappear {
   visibility: hidden;
 }
 
+.input-modal-wrapper.appear .input-modal {
+  animation: modal-fade-in 0.3s;
+}
+
+.input-modal-wrapper.disappear .input-modal {
+  animation: modal-fade-out 0.3s;
+}
+
 .input-modal-wrapper {
   position: fixed;
   width: 100vw;
@@ -24,14 +56,16 @@
   border-radius: 10px;
   display: flex;
   flex-direction: column;
-  padding: 36px;
+  padding: 28px 24px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1), 0px 4px 20px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
 }
 
 .input-modal h1 {
   color: var(--title-active);
 }
 
-.input-modal input {
+.input-modal__input  {
   border: 1px solid var(--line);
   padding: 12px;
   border-radius: 8px;
@@ -51,4 +85,22 @@
   align-items: center;
   margin-top: 40px;
   justify-content: space-between;
+}
+
+.input-modal__button {
+  cursor: pointer;
+  font-size: var(--bold-medium);
+  color: var(--body);
+}
+
+.input-modal__button:hover {
+  color: var(--label);
+}
+
+.input-modal__button--confirm {
+  color: var(--primary3);
+}
+
+.input-modal__button--confirm:hover {
+  color: var(--primary2);
 }

frontend/src/ui-elements/input-modal/index.ts

@@ -1,4 +1,5 @@
 import UIElement from '../../core/ui-element';
+import ColorPickerUIElement from '../color-picker';
 
 import './index.css';
 
@@ -21,7 +22,7 @@ class InputModal extends UIElement {
   private $confirmButton?: HTMLElement;
   private $cancelButton?: HTMLElement;
   private $input?: HTMLInputElement;
-  private $colorInput?: HTMLInputElement;
+  private colorPicker?: ColorPickerUIElement;
 
   constructor ($target: HTMLElement, {
     title,
@@ -45,18 +46,24 @@ class InputModal extends UIElement {
   }
 
   private onConfirmClicked () {
-    this.confirm(this.value ?? this.$input?.value ?? '', this.$colorInput?.value ?? '');
-    this.close();
+    this.confirm(this.value ?? this.$input?.value ?? '', this.colorPicker?.value ?? '');
   }
 
   open (value?: string, label?: string): void {
     this.$element.classList.remove('disappear');
+    this.$element.classList.add('appear');
     this.value = value;
     label && this.$input?.setAttribute('value', label);
   }
 
   close (): void {
+    this.$element.classList.remove('appear');
     this.$element.classList.add('disappear');
+    if (this.$input !== undefined) {
+      this.$input.value = '';
+    }
+
+    this.colorPicker?.clear();
   }
 
   private onCancelClicked () {
@@ -84,10 +91,8 @@ class InputModal extends UIElement {
     $inputModal.appendChild(this.$input);
 
     if (this.hasColorPickerInput) {
-      this.$colorInput = document.createElement('input');
-      this.$colorInput.className = 'input-modal__input';
-      this.$colorInput.placeholder = '색상을 입력해주세요 (#ffffff)';
-      $inputModal.appendChild(this.$colorInput);
+      this.colorPicker = new ColorPickerUIElement($inputModal);
+      this.colorPicker.build();
     }
 
     const $buttonWrapper = document.createElement('div');

frontend/src/utils/color.ts

@@ -0,0 +1,3 @@
+export const generateRandomColor = (): string => {
+  return `#${(0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6)}`;
+};