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>