feat: notification页面

src/views/notifications/components/NotificationListItem.vue

@@ -0,0 +1,136 @@
+<template>
+  <article class="notification-item" :class="{ expanded: item.isExpanded, unread: item.isUnread }">
+    <button type="button" class="notification-trigger" @click="handleToggle">
+      <span class="status-dot" :class="{ visible: item.isUnread }" />
+
+      <div class="notification-main">
+        <h3 class="notification-title">{{ item.title }}</h3>
+        <p class="notification-date">{{ item.date }}</p>
+      </div>
+
+      <span class="notification-arrow" :class="arrowClasses" />
+    </button>
+
+    <div v-if="item.isExpanded" class="notification-content">
+      {{ item.content }}
+    </div>
+  </article>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NotificationRecord } from '../types'
+
+const props = defineProps<{
+  item: NotificationRecord
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: NotificationRecord['id']]
+}>()
+
+const arrowClasses = computed(() => ({
+  expanded: props.item.isExpanded
+}))
+
+const handleToggle = () => {
+  emit('toggle', props.item.id)
+}
+</script>
+
+<style lang="less" scoped>
+.notification-item {
+  border-bottom: 0.05rem solid #ded8d2;
+
+  &.expanded {
+    .notification-title {
+      color: #585858;
+      font-family: 'KaiseiOpti-Medium';
+    }
+  }
+}
+
+.notification-trigger {
+  width: 100%;
+  padding: 2rem 0;
+  display: grid;
+  grid-template-columns: 0.8rem minmax(0, 1fr) 2.4rem;
+  align-items: center;
+  gap: 2.4rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.status-dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background: transparent;
+  transition: background-color 0.2s ease;
+
+  &.visible {
+    background: #232323;
+  }
+}
+
+.notification-main {
+  min-width: 0;
+}
+
+.notification-title {
+  margin: 0;
+  color: #232323;
+  font-size: 1.6rem;
+  line-height: 1.4;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.notification-date {
+  margin: 0.8rem 0 0;
+  color: #9f9f9f;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.notification-arrow {
+  width: 0.9rem;
+  height: 0.9rem;
+  justify-self: end;
+  border-right: 0.1rem solid #8f8f8f;
+  border-bottom: 0.1rem solid #8f8f8f;
+  transform: rotate(-45deg);
+  transition: transform 0.2s ease, border-color 0.2s ease;
+
+  &.expanded {
+    transform: rotate(45deg);
+  }
+}
+
+.notification-content {
+  padding: 0 5.6rem 2.4rem 3.2rem;
+  color: #585858;
+  font-size: 1.4rem;
+  line-height: 2;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+@media (max-width: 768px) {
+  .notification-trigger {
+    gap: 1.6rem;
+    padding: 1.8rem 0;
+    grid-template-columns: 0.8rem minmax(0, 1fr) 1.8rem;
+  }
+
+  .notification-title {
+    font-size: 1.5rem;
+  }
+
+  .notification-content {
+    padding: 0 3rem 2rem 2.4rem;
+    font-size: 1.3rem;
+    line-height: 1.8;
+  }
+}
+</style>

src/views/notifications/components/NotificationsList.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="notifications-panel">
+    <div class="notifications-toolbar">
+      <div class="unread-summary">
+        <span class="unread-label">UNREAD</span>
+        <span class="unread-count">{{ unreadCount }}</span>
+      </div>
+
+      <button
+        type="button"
+        class="mark-all-button"
+        :disabled="unreadCount === 0"
+        @click="emit('markAllAsRead')"
+      >
+        Mark all as read
+      </button>
+    </div>
+
+    <div class="notifications-items">
+      <NotificationListItem
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+        @toggle="emit('toggleItem', $event)"
+      />
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import NotificationListItem from './NotificationListItem.vue'
+import type { NotificationRecord } from '../types'
+
+defineProps<{
+  items: NotificationRecord[]
+  unreadCount: number
+}>()
+
+const emit = defineEmits<{
+  toggleItem: [id: NotificationRecord['id']]
+  markAllAsRead: []
+}>()
+</script>
+
+<style lang="less" scoped>
+.notifications-panel {
+  width: 100%;
+}
+
+.notifications-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 4rem;
+}
+
+.unread-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.3rem;
+}
+
+.unread-label {
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  letter-spacing: 0.04em;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.unread-count {
+  min-width: 3.1rem;
+  height: 2.4rem;
+  padding: 0 0.8rem;
+  border-radius: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #232323;
+  color: #ffffff;
+  font-size: 1.4rem;
+  line-height: 1;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.mark-all-button {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  font-family: 'KaiseiOpti-Regular';
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+}
+
+@media (max-width: 768px) {
+  .notifications-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 2.8rem;
+  }
+}
+</style>