From 59f54d2adf9efe58f078a0fcae6f2f361169de0a Mon Sep 17 00:00:00 2001
From: Ayumi Kumano <kumayuzuki@gmail.com>
Date: Tue, 15 Oct 2024 21:59:30 +0900
Subject: [PATCH 1/5] feat: implement for PostTags component

---
 .../service-site/src/contents/posts/1/en.mdx  | 19 ++++++++++++++
 .../PostDetailPage/PostDetailPage.module.css  |  3 +++
 .../PostDetailPage/PostDetailPage.tsx         |  2 ++
 .../components/PostTags/PostTags.module.css   |  8 ++++++
 .../components/PostTags/PostTags.stories.tsx  | 25 +++++++++++++++++++
 .../posts/components/PostTags/PostTags.tsx    | 25 +++++++++++++++++++
 .../posts/components/PostTags/index.ts        |  1 +
 7 files changed, 83 insertions(+)
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.stories.tsx
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostTags/index.ts

diff --git a/frontend/apps/service-site/src/contents/posts/1/en.mdx b/frontend/apps/service-site/src/contents/posts/1/en.mdx
index 27bc93eaf..cdf5621c9 100644
--- a/frontend/apps/service-site/src/contents/posts/1/en.mdx
+++ b/frontend/apps/service-site/src/contents/posts/1/en.mdx
@@ -7,6 +7,25 @@ tags:
   - Innovation
   - Agility
   - Disruption
+  - No-Code
+  - App Development
+  - Non-Programmers
+  - Tools
+  - Business
+  - UX Design
+  - Platforms
+  - Prototyping
+  - Efficiency
+  - Scalability
+  - Automation
+  - Data Management
+  - Leadership
+  - Startups
+  - Rapid Development
+  - Cost Reduction
+  - Education
+  - User Experience
+  - AI Integration
 categories:
   - No-Code
   - Technology
diff --git a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
index 4b8d4ae38..567d76564 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
@@ -49,4 +49,7 @@
 
 .right {
   width: 274px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-10, 40px);
 }
diff --git a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
index cbb71b5a0..dfa7fca2b 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
@@ -1,6 +1,7 @@
 import { type Lang, fallbackLang } from '@/features/i18n'
 import { PostCategories } from '@/features/posts/components/PostCategories'
 import { PostHero } from '@/features/posts/components/PostHero'
+import { PostTags } from '@/features/posts/components/PostTags'
 import { MDXContent } from '@/libs/contentlayer'
 import { notFound } from 'next/navigation'
 import type { FC } from 'react'
@@ -50,6 +51,7 @@ export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
           <PostCategories
             categories={post.categories.map((category) => ({ name: category }))}
           />
+          <PostTags tags={post.tags.map((tag) => ({ name: tag }))} />
         </div>
       </div>
     </article>
diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
new file mode 100644
index 000000000..522df705e
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
@@ -0,0 +1,8 @@
+.list {
+  margin-top: var(--spacing-5, 20px);
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-4, 16px);
+  flex-wrap: wrap;
+  row-gap: var(--spacing-3, 12px);
+}
diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.stories.tsx b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.stories.tsx
new file mode 100644
index 000000000..5c4ac2475
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import type { ComponentProps } from 'react'
+import { PostTags } from './PostTags'
+
+type Props = ComponentProps<typeof PostTags>
+const StoryComponent = (props: Props) => {
+  return <PostTags {...props}>Categories</PostTags>
+}
+
+export default {
+  component: StoryComponent,
+} satisfies Meta<typeof StoryComponent>
+
+export const Default: StoryObj<typeof StoryComponent> = {
+  args: {
+    tags: [
+      { name: 'No-Code' },
+      { name: 'Technology' },
+      { name: 'DX' },
+      { name: 'Innovation' },
+      { name: 'Startups' },
+    ],
+  },
+}
diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
new file mode 100644
index 000000000..c05d714f1
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
@@ -0,0 +1,25 @@
+import { Badge } from '@/components/Badge'
+import type { PropsWithChildren } from 'react'
+import { LinkHeading } from '../LinkHeading'
+import styles from './PostTags.module.css'
+
+type Props = PropsWithChildren<{
+  href?: string | undefined
+  tags: Array<{ name: string }>
+}>
+
+export const PostTags = ({ href = '/', tags }: Props) => {
+  return (
+    <div>
+      {/* FIXME: Add href props after implementing tags single page */}
+      <LinkHeading href={href}>Tags</LinkHeading>
+      <ul className={styles.list}>
+        {tags?.map((tag) => (
+          <li key={tag.name}>
+            <Badge type="outline">{tag.name}</Badge>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/index.ts b/frontend/apps/service-site/src/features/posts/components/PostTags/index.ts
new file mode 100644
index 000000000..2203a5ed0
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/index.ts
@@ -0,0 +1 @@
+export * from './PostTags'

From f74a6698d83203104f5816b8e658510a5a7bd824 Mon Sep 17 00:00:00 2001
From: Ayumi Kumano <kumayuzuki@gmail.com>
Date: Wed, 16 Oct 2024 18:13:23 +0900
Subject: [PATCH 2/5] refactor: not use LinkHeading

---
 .../posts/components/PostTags/PostTags.module.css    | 12 ++++++++++++
 .../features/posts/components/PostTags/PostTags.tsx  |  6 ++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
index 522df705e..12572e458 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.module.css
@@ -1,3 +1,15 @@
+.title {
+  display: inline-block;
+  font-family: var(--message-font, Montserrat);
+  font-size: var(--font-size-6, 16px);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--link-default, #bebfc1);
+  height: 24px;
+  padding: 1px 0;
+  gap: var(--spacing-1, 4px);
+}
+
 .list {
   margin-top: var(--spacing-5, 20px);
   display: flex;
diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
index c05d714f1..81140c10e 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
@@ -1,6 +1,5 @@
 import { Badge } from '@/components/Badge'
 import type { PropsWithChildren } from 'react'
-import { LinkHeading } from '../LinkHeading'
 import styles from './PostTags.module.css'
 
 type Props = PropsWithChildren<{
@@ -8,11 +7,10 @@ type Props = PropsWithChildren<{
   tags: Array<{ name: string }>
 }>
 
-export const PostTags = ({ href = '/', tags }: Props) => {
+export const PostTags = ({ tags }: Props) => {
   return (
     <div>
-      {/* FIXME: Add href props after implementing tags single page */}
-      <LinkHeading href={href}>Tags</LinkHeading>
+      <p className={styles.title}>Tags</p>
       <ul className={styles.list}>
         {tags?.map((tag) => (
           <li key={tag.name}>

From a7a1739891807d447e64697d753bb5f41f837cf3 Mon Sep 17 00:00:00 2001
From: Ayumi Kumano <kumayuzuki@gmail.com>
Date: Wed, 16 Oct 2024 18:25:40 +0900
Subject: [PATCH 3/5] refactor: import PostTags to
 features/post.components/index.ts

---
 .../apps/service-site/src/features/posts/components/index.ts     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/apps/service-site/src/features/posts/components/index.ts b/frontend/apps/service-site/src/features/posts/components/index.ts
index 1d5b3a498..024e6f3f5 100644
--- a/frontend/apps/service-site/src/features/posts/components/index.ts
+++ b/frontend/apps/service-site/src/features/posts/components/index.ts
@@ -7,6 +7,7 @@ export * from './NavPreviousPost'
 export * from './TableOfContents'
 export * from './PostHero'
 export * from './PostCategories'
+export * from './PostTags'
 
 export * from './PostDetailPage'
 export * from './PostListPage'

From 453c0824e79764e5782e3903168d7988827709ba Mon Sep 17 00:00:00 2001
From: kumano ayumi <ayumi.kumano@route06.co.jp>
Date: Thu, 17 Oct 2024 14:19:30 +0900
Subject: [PATCH 4/5] Update
 frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx

Co-authored-by: Hirotaka Miyagi <31152321+MH4GF@users.noreply.github.com>
---
 .../src/features/posts/components/PostTags/PostTags.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
index 81140c10e..0449eb1d8 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
@@ -12,7 +12,7 @@ export const PostTags = ({ tags }: Props) => {
     <div>
       <p className={styles.title}>Tags</p>
       <ul className={styles.list}>
-        {tags?.map((tag) => (
+        {tags.map((tag) => (
           <li key={tag.name}>
             <Badge type="outline">{tag.name}</Badge>
           </li>

From f4c78bd342f3336e947510d4b9bc2acc45ec5252 Mon Sep 17 00:00:00 2001
From: kumano ayumi <ayumi.kumano@route06.co.jp>
Date: Thu, 17 Oct 2024 14:21:10 +0900
Subject: [PATCH 5/5] Update
 frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx

Co-authored-by: Hirotaka Miyagi <31152321+MH4GF@users.noreply.github.com>
---
 .../src/features/posts/components/PostTags/PostTags.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
index 0449eb1d8..7a39dc6d3 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
+++ b/frontend/apps/service-site/src/features/posts/components/PostTags/PostTags.tsx
@@ -3,7 +3,6 @@ import type { PropsWithChildren } from 'react'
 import styles from './PostTags.module.css'
 
 type Props = PropsWithChildren<{
-  href?: string | undefined
   tags: Array<{ name: string }>
 }>