Angular : Email Client - 2-1. 이메일 모듈작성 - 레이아웃 만들기

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다

  1-1 1부는 인증에 관련된 부분을 다루었다.

  1-2 2부는 REST서비스를 제공하는 서버를 이용하여 email을 보내고 받는 방법에 대해서 작성한다.

 

2. 우선 생각나는 대로 컴포넌트를 생성했다.

  2-1 왼쪽에 30% 공간에 메일 작성버튼 EmailCompose과 메일 목록이 표시될 EmailList컴포넌트를 생성한다.

  2-2 오른쪽에 70% 공간을 차지할 Email 내용 표시 공간 EmailView 컴포넌트를 생성한다.

  2-3 오른쪽에 위치할 특정메일 선택시 보여줄 EmailContent 컴포넌트를 생성한다.

  2-4 이메일 데이터에 대한 요청을 수행할 Email 서비스는 가장 처음 포스트에서 이미 생성하였다.

  2-5 아래의 명령어를 실행하니 모듈이 2개가 있다고 생성이 안되었다.

    2-5-1 --skip-import 옵션은 module에 import하는 부분을 자동으로 해주지 않아 일일히 다 선언하고 추가해야 한다.

 

 

3. 차례대로 template을 작성한다.

  3-0 전체를 감싸는 레이아웃인 home 컴포넌트를 작성한다.

    3-0-1 30:70의 크기로 분할되었고 우측의 컴포넌트는 url에 따라 달라지도록 라우팅처리하였다.

    3-0-2 좌측은 기본적으로 메일 작성 버튼과 리스트를 표출한다.

 

<div class="row">
  <div class="col-sm-4">
    <app-email-compose></app-email-compose>
    <app-email-list></app-email-list>
  </div>
  <div class="col-sm-8">
    <router-outlet></router-outlet>
  </div>
</div>

 

  3-1 이메일 모듈 내의 라우팅 테이블를 정리한다.

    3-1-1 우선 메일 /inbox로 url 이 지정되면 우측 페이지에 EmailView 컴포넌트를 표출하게 하였다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EmailViewComponent } from './email-view/email-view.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [{ path: '', component: EmailViewComponent }],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class EmailRoutingModule {}

 

  3-2 메일 리스트 template를 다음과 같이 작성한다.

    3-2-1 카드를 사용하여 전체를 감싸고 이메일리스트를 보여 준다.

    3-2-2 여기에는 하드코딩을 하여 레이아웃 보여주기 용으로 작성하였다. 나중에 ngFor로 바꿀거다.

 

<div class="card">
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
  <div class="card-body py-1">
    <h6 class="card-title mb-0 trim">Welcome  to My website</h6>
    <small class="card-text trim">heops79@gmail.com</small>
    <hr class="mt-1 mb-0">
  </div>
</div>

 

  3-3 메일 Compose 컴포넌트는 버튼 하나만 되어 있는 단순한 컴포넌트이다.

    3-3-1 버튼을 누르면 메일작성 modal 팝업되도록 작성할 예정이다.

 

<button class="mb-1 p-2 btn-block btn-secondary">Compose</button>

 

  3-4 이제 오른쪽 이메일 모듈 내의 기본 라우팅으로 표출될 EmailView template을 작성한다.

    3-4-1 fa fa-envelope은 font awesome의 아이콘이다.

 

<div class="crad text-center">
  <i class="display-2 fa fa-envelope mt-5"></i>
  <h3 class="mb-5">Select an Email to get started</h3>
</div>

 

  3-5 이메일 모듈에 여기에서 작성한 모듈이 모두 선언되어 있어야 정상적으로 동작한다.

    3-5-1 email.module.ts 파일

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { EmailRoutingModule } from './email-routing.routing.module';
import { EmailListComponent } from './email-list/email-list.component';
import { EmailComposeComponent } from './email-compose/email-compose.component';
import { EmailViewComponent } from './email-view/email-view.component';

@NgModule({
  declarations: [
    HomeComponent,
    EmailListComponent,
    EmailComposeComponent,
    EmailViewComponent,
  ],
  imports: [CommonModule, EmailRoutingModule],
})
export class EmailModule {}

 

4. 결과화면 표출하기

 

  4-1 지금까지 한 것들 - 로그인 후 /inbox로 진입을 실행한 화면 

 

  4-2 개인적으로 메뉴바가 dark theme이 좋은 것 같다.

    4-2-1 app.component.html에 약간 수정했다.

 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
  <a class="navbar-brand" [routerLink]="'.'">
    EM<i class="fas fa-paper-plane bg-light text-dark m-0"></i>IL
  </a>

  <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
  <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
    &#9776;
  </button>

  <!-- Step 2: Add the ngbCollapse directive to the element below. -->
  <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'/inbox'" (click)="isMenuCollapsed = true"
          [routerLinkActive]="'active'">Inbox</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'/auth/signOut'" (click)="isMenuCollapsed = true"
          [routerLinkActive]="'active'" *ngIf="signedIn$ | async">Sign Out</a>
      </li>
      <ng-container *ngIf="!(signedIn$ | async)">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'/auth/signUp'" (click)="isMenuCollapsed = true"
            [routerLinkActive]="'active'">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'/auth/signIn'" (click)="isMenuCollapsed = true"
            [routerLinkActive]="'active'">Sign In</a>
        </li>
      </ng-container>
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>