今日の開発内容

• ログアウト機能追加
• アイコン押下時の波紋アニメーション追加

ログアウト機能

@aws-sdk/client-cognito-identity-provider の以下クラスを用いてログアウト機能を追加した。

GlobalSignOutCommand

Next.js に組み込んだコードは以下。アクセストークンはローカルストレージから取得する。

const config = {
  region: process.env.NEXT_PUBLIC_AWS_REGION || 'ap-northeast-1',
};

const signOut = async () => {
  const client = new CognitoIdentityProviderClient(config);

  const accessToken = localStorage.getItem('kokoehonAccessToken');

  if (!accessToken) return;

  const command = new GlobalSignOutCommand({ AccessToken: accessToken });

  return client.send(command);
};

波紋アニメーション

onClick

属性で

createRipple

関数を呼び出す。

<div className={styles.iconWrapper} onClick={createRipple}>
  <Link href="/">
    <HomeIcon />
  </Link>
  <span className={styles.tooltipText}>ホーム</span>
</div>

createRipple

は、

<span>

タグを追加し、

className

で波紋アニメーションを実装したクラス名

.ripple

を渡す。

import styles from './createRipple.module.css';

export const createRipple = (event: React.MouseEvent) => {
  const button = event.currentTarget;

  const ripple = document.createElement('span');
  ripple.className = styles.ripple;

  button.appendChild(ripple);

  ripple.addEventListener('animationend', () => {
    ripple.remove();
  });
};

以下は波紋アニメーションを実装した

.ripple

クラス。

• border-radius: 50%;

  : 要素を円形にし、波紋を丸く描く

• animation: ripple 0.3s ease-out;

  : @keyframes ripple で定義したアニメーションのトランジション

• transform: translate(-50%, -50%) scale(4);

  : 波紋を 4 倍のサイズに拡大

• opacity: 0;

  : 完全に見えなくさせることでフェードアウトする

.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(0);
  animation: ripple 0.3s ease-out;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

以下のような波紋が広がるアニメーションが表示される。

参考

• GlobalSignOutCommand