Merge pull request #186 from Team-odongdong/feature/profile

uuid를 통한 화장실 수정과 등록 목록 조회

src/frontend/src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { RegisteredBathroomItemComponent } from './components/registered-bathroom-item/registered-bathroom-item.component';
 
 const routes: Routes = [
   {
@@ -8,8 +9,18 @@ const routes: Routes = [
       import('./tabs/tabs.module').then((m) => m.TabsPageModule),
   },
   {
-    path: 'edit-bathroom',
-    loadChildren: () => import('./pages/edit-bathroom/edit-bathroom.module').then( m => m.EditBathroomPageModule)
+    path: 'edit-bathroom/:id',
+    loadChildren: () =>
+      import('./pages/edit-bathroom/edit-bathroom.module').then(
+        (m) => m.EditBathroomPageModule
+      ),
+  },
+  {
+    path: 'registered-list',
+    loadChildren: () =>
+      import('./pages/registered-list/registered-list.module').then(
+        (m) => m.RegisteredListPageModule
+      ),
   },
 ];
 @NgModule({

src/frontend/src/app/components/registered-bathroom-item/registered-bathroom-item.component.html

@@ -0,0 +1,21 @@
+<div class="item__container" [ngClass]="isRegistered ? null : 'not-registered'">
+  <div class="item__labels">
+    <p class="title">{{ bathroomInfo.title }}</p>
+    <p *ngIf="isRegistered" class="address">{{ addressFull }}</p>
+    <p *ngIf="!isRegistered" class="address__waiting">
+      등록 대기중인 화장실입니다.
+    </p>
+  </div>
+  <div class="item__buttons">
+    <ion-img
+      [ngClass]="isRegistered ? 'pointer' : 'disabled'"
+      src="{{ editImageUrl }}"
+      (click)="editBathroom()"
+    ></ion-img>
+    <ion-img
+      [ngClass]="!isRegistered ? 'pointer' : 'disabled'"
+      src="{{ deleteImageUrl }}"
+      (click)="deleteBathroom()"
+    ></ion-img>
+  </div>
+</div>

src/frontend/src/app/components/registered-bathroom-item/registered-bathroom-item.component.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RegisteredBathroomItemComponent } from './registered-bathroom-item.component';
+
+@NgModule({
+    imports: [CommonModule, FormsModule, IonicModule],
+    declarations: [RegisteredBathroomItemComponent],
+    exports: [RegisteredBathroomItemComponent],
+})
+export class RegisteredBathroomItemComponentModule {}

src/frontend/src/app/components/registered-bathroom-item/registered-bathroom-item.component.scss

@@ -0,0 +1,53 @@
+p {
+    margin: 0;
+}
+
+.item {
+    &__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        height: 5rem;
+
+        padding: 1rem;
+    }
+
+    &__labels {
+    }
+
+    &__buttons {
+        display: flex;
+        gap: 0.8125rem;
+    }
+}
+
+.title {
+    font-size: 16px;
+    font-weight: bold;
+    color: var(--bg_black);
+}
+
+.address {
+    font-size: 14px;
+    color: var(--outline_gray);
+
+    margin-top: 0.25rem;
+
+    &__waiting {
+        color: var(--error_red);
+    }
+}
+
+.not-registered {
+    background-color: var(--error_container_red);
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.disabled {
+    cursor: default;
+    pointer-events: none;
+}

src/frontend/src/app/components/registered-bathroom-item/registered-bathroom-item.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { RegisteredBathroomItemComponent } from './registered-bathroom-item.component';
+
+describe('RegisteredBathroomItemComponent', () => {
+  let component: RegisteredBathroomItemComponent;
+  let fixture: ComponentFixture<RegisteredBathroomItemComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisteredBathroomItemComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegisteredBathroomItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/components/registered-bathroom-item/registered-bathroom-item.component.ts

@@ -0,0 +1,81 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NavigationExtras } from '@angular/router';
+import { AlertController, NavController } from '@ionic/angular';
+import { BathroomDetailInfo } from 'src/app/types/bathroomInfo';
+
+@Component({
+  selector: 'app-registered-bathroom-item',
+  templateUrl: './registered-bathroom-item.component.html',
+  styleUrls: ['./registered-bathroom-item.component.scss'],
+})
+export class RegisteredBathroomItemComponent implements OnInit {
+  @Input() isRegistered: boolean;
+  @Input() bathroomInfo: BathroomDetailInfo;
+
+  public editImageUrl: string;
+  public deleteImageUrl: string;
+
+  public addressFull: string = '';
+
+  constructor(
+    public navController: NavController,
+    public alertController: AlertController
+  ) {}
+
+  ngOnInit() {
+    this.setImages();
+    this.makeFullAddress();
+  }
+
+  setImages() {
+    if (this.isRegistered) {
+      this.editImageUrl = '../../../assets/svgs/edit-blue.svg';
+      this.deleteImageUrl = '../../../assets/svgs/delete-gray.svg';
+    } else {
+      this.editImageUrl = '../../../assets/svgs/edit-gray.svg';
+      this.deleteImageUrl = '../../../assets/svgs/delete-red.svg';
+    }
+  }
+
+  makeFullAddress() {
+    this.addressFull =
+      this.bathroomInfo.address + ' ' + this.bathroomInfo.addressDetail;
+  }
+
+  editBathroom() {
+    const props: NavigationExtras = {
+      state: {
+        bathroomInfo: this.bathroomInfo,
+      },
+    };
+    this.navController.navigateForward(
+      `/edit-bathroom/${this.bathroomInfo.id}`,
+      props
+    );
+  }
+
+  deleteBathroom() {
+    this.showDeleteAlert();
+  }
+
+  async showDeleteAlert() {
+    const alert = await this.alertController.create({
+      header: '화장실을 삭제하시겠어요?',
+      buttons: [
+        {
+          text: '삭제하기',
+          handler: () => {
+            console.log('삭제 확인');
+          },
+        },
+        {
+          text: '취소',
+          handler: () => {
+            console.log('취소');
+          },
+        },
+      ],
+    });
+    await alert.present();
+  }
+}

src/frontend/src/app/pages/edit-bathroom/edit-bathroom.module.ts

@@ -2,19 +2,22 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, NavParams } from '@ionic/angular';
 
 import { EditBathroomPageRoutingModule } from './edit-bathroom-routing.module';
 
 import { EditBathroomPage } from './edit-bathroom.page';
+import { TimePickerComponentModule } from 'src/app/components/time-picker/time-picker.component.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    EditBathroomPageRoutingModule
+    EditBathroomPageRoutingModule,
+    TimePickerComponentModule,
   ],
-  declarations: [EditBathroomPage]
+  providers: [NavParams],
+  declarations: [EditBathroomPage],
 })
 export class EditBathroomPageModule {}

src/frontend/src/app/pages/edit-bathroom/edit-bathroom.page.html

@@ -1,13 +1,93 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>edit-bathroom</ion-title>
+    <ion-buttons>
+      <ion-button slot="start" (click)="goBack()">
+        <ion-icon name="chevron-back-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>화장실 정보 수정</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">edit-bathroom</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <div class="empty-space__10"></div>
+
+  <ion-label class="input__label">화장실 이름</ion-label>
+  <div class="input__container">
+    <ion-input
+      id="bathroom-name"
+      placeholder="화장실 이름을 입력하세요"
+      clear-input="true"
+      [(ngModel)]="bathroomName"
+    ></ion-input>
+    <ion-img
+      *ngIf="!isValid"
+      src="../../../assets/svg/map/warning.svg"
+    ></ion-img>
+    <ion-label *ngIf="!isValid">화장실 이름을 입력하세요</ion-label>
+  </div>
+
+  <div class="empty-space__20"></div>
+
+  <ion-label class="input__label">위치</ion-label>
+  <div class="input__container">
+    <ion-input
+      class="input__address"
+      placeholder="주소를 입력하세요."
+      [(ngModel)]="bathroomAddress"
+    ></ion-input>
+    <ion-input
+      placeholder="상세주소를 입력하세요."
+      [(ngModel)]="bathroomAddressDetail"
+    ></ion-input>
+  </div>
+
+  <div class="empty-space__20"></div>
+
+  <div class="operation-time__label">
+    <ion-label class="input__label">운영 시간</ion-label>
+    <div class="operation-time__checkbox">
+      <p>24시간 인가요?</p>
+      <ion-checkbox
+        slot="end"
+        checked="{{ is24hours }}"
+        (ionChange)="checkIs24hours()"
+      ></ion-checkbox>
+    </div>
+  </div>
+  <div class="empty-space__10"></div>
+  <div *ngIf="!is24hours">
+    <app-time-picker
+      (startTime)="onStartTimeChanged($event)"
+      (endTime)="onEndTimeChanged($event)"
+    ></app-time-picker>
+  </div>
+
+  <div class="empty-space__20"></div>
+
+  <ion-label class="input__label">기타 사항</ion-label>
+  <div class="empty-space__5"></div>
+  <div class="unisex__container">
+    <p>남녀 공용 화장실이라면 체크해주세요!</p>
+    <ion-checkbox
+      slot="end"
+      checked="{{isUnisex}}"
+      (ionChange)="checkIsUnisex()"
+    ></ion-checkbox>
+  </div>
+
+  <div class="unisex__container">
+    <p>화장실이 잠겨있다면 체크해주세요!</p>
+    <ion-checkbox
+      slot="end"
+      checked="{{isLocked === 'Y'}}"
+      (ionChange)="checkIsLocked()"
+    ></ion-checkbox>
+  </div>
+
+  <div class="empty-space__20"></div>
+
+  <ion-button class="submit" expand="block" (click)="onClickSaveButton()"
+    >저장하기</ion-button
+  >
 </ion-content>