From c53be6c9f575af7e6b50016f7b4033abc0b9b770 Mon Sep 17 00:00:00 2001
From: yamat47 <yamat47.thirddown@gmail.com>
Date: Sun, 11 Aug 2024 16:57:18 +0900
Subject: [PATCH] Add notice list to media home.

---
 app/app/assets/stylesheets/media.css          |  2 ++
 app/app/assets/stylesheets/media/button.css   | 16 +++++++++++++
 app/app/assets/stylesheets/media/home.css     | 20 ++++++++++++++++
 app/app/controllers/media/homes_controller.rb |  8 ++++++-
 app/app/views/media/homes/show.html.haml      | 23 +++++++++++++++++++
 5 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 app/app/assets/stylesheets/media/button.css
 create mode 100644 app/app/assets/stylesheets/media/home.css

diff --git a/app/app/assets/stylesheets/media.css b/app/app/assets/stylesheets/media.css
index d56460a..aa42e6f 100644
--- a/app/app/assets/stylesheets/media.css
+++ b/app/app/assets/stylesheets/media.css
@@ -15,3 +15,5 @@
 @import url('media/teams.css');
 @import url('media/notice-list.css');
 @import url('media/notice.css');
+@import url('media/home.css');
+@import url('media/button.css');
diff --git a/app/app/assets/stylesheets/media/button.css b/app/app/assets/stylesheets/media/button.css
new file mode 100644
index 0000000..b30220b
--- /dev/null
+++ b/app/app/assets/stylesheets/media/button.css
@@ -0,0 +1,16 @@
+.media-button {
+  padding: 0.5rem 1rem;
+  border: solid 1px var(--color-gray-500);
+  border-radius: var(--button-border-radius);
+  width: fit-content;
+  display: flex;
+  gap: 1.0rem;
+  align-items: center;
+  color: var(--color-gray-500);
+  font-size: 0.875rem;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-gray-100);
+  }
+}
diff --git a/app/app/assets/stylesheets/media/home.css b/app/app/assets/stylesheets/media/home.css
new file mode 100644
index 0000000..777f58f
--- /dev/null
+++ b/app/app/assets/stylesheets/media/home.css
@@ -0,0 +1,20 @@
+.media-home {
+  width: 90vw;
+  margin-inline: auto;
+
+  @media (min-width: 768px) {
+    padding-block: 4rem;
+    width: 48rem;
+  }
+}
+
+.media-home-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.media-home-section-button {
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/app/app/controllers/media/homes_controller.rb b/app/app/controllers/media/homes_controller.rb
index bdabb0f..ad0ff5a 100644
--- a/app/app/controllers/media/homes_controller.rb
+++ b/app/app/controllers/media/homes_controller.rb
@@ -2,6 +2,12 @@
 
 module Media
   class HomesController < ApplicationController
-    def show; end
+    NOTICES_LIMIT = 3
+
+    def show
+      @notices = Notice.only_published
+                       .published_at_ordered
+                       .limit(NOTICES_LIMIT)
+    end
   end
 end
diff --git a/app/app/views/media/homes/show.html.haml b/app/app/views/media/homes/show.html.haml
index a172f18..458a057 100644
--- a/app/app/views/media/homes/show.html.haml
+++ b/app/app/views/media/homes/show.html.haml
@@ -4,3 +4,26 @@
 .hero-container
   - images.each do |image|
     = image_tag image, class: 'hero-image'
+
+.media-home
+  .media-home__section
+    .media-home-section
+      .media-home-section__title
+        .media-subheader
+          最新のお知らせ
+      .media-home-section__content
+        .media-notice-list
+          - @notices.each do |notice|
+            .media-notice-list__item
+              = link_to notice_path(notice.universal_id), class: 'media-notice-list-item' do
+                .media-notice-list-item-title
+                  = notice.title
+                .media-notice-list-item-date
+                  = l notice.published_at, format: :long_kanji
+                .media-notice-list-item-button
+                  = image_tag 'icon-right-arrow.svg'
+      .media-home-section__button
+        .media-home-section-button
+          = link_to notices_path, class: 'media-button' do
+            %span 一覧を見る
+            = image_tag 'icon-right-arrow.svg'