Merge pull request #79 from INxST/feature/#43/fix-detail

Feature/#43/fix detail

.vscode/settings.json

@@ -1,7 +1,3 @@
 {
-  "cSpell.words": [
-    "astro",
-    "Sato",
-    "Taiki"
-  ]
-}
+  "cSpell.words": ["astro", "Sato", "Taiki"]
+}

README.md

@@ -13,7 +13,8 @@
 
 ### Node.jsのバージョンを変更する
 
-バージョン管理ツールインストール後、Node.jsのバージョンを[.node-version](.node-version)指定の`20.9.0`に変更してください。
+バージョン管理ツールインストール後、Node.jsのバージョン
+を[.node-version](.node-version)指定の`20.9.0`に変更してください。
 
 ### pnpmをinstallする
 
@@ -49,44 +50,39 @@ pnpm build
 
 ## 更新方法
 
-| 対象箇所 | 更新方法 |
-| ---- | ---- |
-| ヘッダーリンク ![ヘッダーリンク](/docs/header.png) | [/src/data/headerLinks.ts](/src/data/headerLinks.ts)の内容を変更する |
-| メニューリンク ![メニューリンク](/docs/menu.png) | [/src/data/menus.ts](/src/data/menus.ts)の内容を変更する |
-| フッターリンク ![フッターリンク](/docs/footer.png) | [/src/data/footerLinks.ts](/src/data/footerLinks.ts)の内容を変更する |
-| SNSリンク(メニュー・フッター・私について > PROFILE) ![メニュー > SNSリンク](/docs/sns-menu.png)![フッター > SNSリンク](/docs/sns-footer.png)![私について > PROFILE > SNSリンク](/docs/sns-about.png) | [/src/data/snsLinks.ts](/src/data/snsLinks.ts)の内容を変更する |
-| TOP 私について 画像 ![TOP 私について 画像](/docs/top-about.png) | [/src/data/parallaxGalleryItems.ts](/src/data/parallaxGalleryItems.ts)の内容を変更する |
-| 私について スライド画像 ![私について スライド画像](/docs/about-slide.png) | [/src/data/slides.ts](/src/data/slides.ts)の内容を変更する |
-| 私について CAREER ![私について CAREER](/docs/about-career.png) | [/src/data/timelines.ts](/src/data/timelines.ts)の内容を変更する |
-| 制作実績 FILTER ![制作実績 FILTER](/docs/works-filter.png) | [/src/data/filters.ts](/src/data/filters.ts)の内容を変更する |
+| 対象箇所                                                                                                                                                                                             | 更新方法                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| ヘッダーリンク ![ヘッダーリンク](/docs/header.png)                                                                                                                                                   | [/src/data/headerLinks.ts](/src/data/headerLinks.ts)の内容を変更する                   |
+| メニューリンク ![メニューリンク](/docs/menu.png)                                                                                                                                                     | [/src/data/menus.ts](/src/data/menus.ts)の内容を変更する                               |
+| フッターリンク ![フッターリンク](/docs/footer.png)                                                                                                                                                   | [/src/data/footerLinks.ts](/src/data/footerLinks.ts)の内容を変更する                   |
+| SNSリンク(メニュー・フッター・私について > PROFILE) ![メニュー > SNSリンク](/docs/sns-menu.png)![フッター > SNSリンク](/docs/sns-footer.png)![私について > PROFILE > SNSリンク](/docs/sns-about.png) | [/src/data/snsLinks.ts](/src/data/snsLinks.ts)の内容を変更する                         |
+| TOP 私について 画像 ![TOP 私について 画像](/docs/top-about.png)                                                                                                                                      | [/src/data/parallaxGalleryItems.ts](/src/data/parallaxGalleryItems.ts)の内容を変更する |
+| 私について スライド画像 ![私について スライド画像](/docs/about-slide.png)                                                                                                                            | [/src/data/slides.ts](/src/data/slides.ts)の内容を変更する                             |
+| 私について CAREER ![私について CAREER](/docs/about-career.png)                                                                                                                                       | [/src/data/timelines.ts](/src/data/timelines.ts)の内容を変更する                       |
+| 制作実績 FILTER ![制作実績 FILTER](/docs/works-filter.png)                                                                                                                                           | [/src/data/filters.ts](/src/data/filters.ts)の内容を変更する                           |
 
 ### 実績の更新について
 
 #### 実績の追加
 
-[/src/pages/works配下](/src/pages/works/)に拡張子`astro`でファイルを作成することでページが追加されます。
+[/src/pages/works配下](/src/pages/works/)に拡張子`astro`でファイルを作成すること
+でページが追加されます。
 
 #### 一覧での表示設定
 
 [/src/data/works.ts](/src/data/works.ts)の内容を更新することで設定できます。
 
 ```ts
   {
-    title: '医療従事者サイト 1',
-    href: '/works/detail/',
+    slug: 'textile-manufacturer-site',
+    title: '繊維メーカー',
     year: '2021',
-    categories: ['Web Development'],
-    tags: ['Fashion Design'],
-    image: 'https://placehold.jp/464x560.png', // 制作実績用画像
+    categories: ['PRIVATE WORKS'],
+    tags: ['ART DIRECTION', 'WEB DESIGN'],
+    image: '/detail/textile-manufacturer-site/sample.jpg', // 制作実績用画像
+    mv: '/detail/textile-manufacturer-site/sample.jpg', // 詳細用画像
+    mvSp: '/detail/textile-manufacturer-site/sample.jpg', // 詳細用画像(SP)
     isTop: true, // `true`の場合TOPページに表示
-    imageTop: 'https://placehold.jp/1200x480.png', // TOPページ表示用画像
+    imageTop: '/detail/textile-manufacturer-site/sample.jpg', // TOPページ表示用画像
   },
 ```
-
-##### 制作実績での出力イメージ
-
-![制作実績での出力イメージ](/docs/works.png)
-
-##### TOPページでの出力イメージ
-
-![TOPページでの出力イメージ](/docs/top-works.png)

src/components/DetailImage.astro

@@ -1,15 +1,19 @@
 ---
 import cn from '@/libs/cn';
 interface Props {
-  column?: number;
+  row?: number;
+  columnSp?: number;
 }
-const { column } = Astro.props;
+const { row, columnSp } = Astro.props;
 const className = cn(
-  'md:h-full flex flex-col flex-wrap [&>li]:w-full md:[&>li]:w-auto gap-4 md:gap-10 [&_picture]:block md:[&_picture]:h-full md:[&_img]:h-full md:[&_video]:h-full',
+  'md:h-full flex flex-wrap md:[&>li]:w-auto gap-4 md:gap-10 [&_picture]:block md:[&_picture]:h-full md:[&_img]:h-full md:[&_video]:h-full',
   {
-    'md:flex-col': column,
-    'md:[&>li]:h-full': !column,
-    'md:[&>li]:h-[calc(50%-1.25rem)]': column === 2,
+    'md:flex-col': row,
+    'md:[&>li]:h-full': !row,
+    'md:[&>li]:h-[calc(50%-1.25rem)]': row === 2,
+    'flex-col': !columnSp,
+    '[&>li]:w-full': !columnSp,
+    '[&>li]:w-[calc(50%-0.5rem)]': columnSp === 2,
   }
 );
 ---

src/components/DetailInfo.astro

@@ -0,0 +1,55 @@
+---
+import type { Work } from '@/types/Work';
+interface Props {
+  work?: Work;
+}
+const { work } = Astro.props;
+---
+
+<section
+  class="ts-horizontal-scroll-item md:mr-[41rem]
+flex flex-col justify-end items-start md:pb-[7.5rem]
+mt-28 md:mt-0 px-5 md:px-0"
+>
+  <h1 class="md:w-1/2 flex flex-col gap-4">
+    <span class="text-[2rem] md:text-5xl font-semibold">{work?.title}</span>
+    {
+      work?.categories.map(category => (
+        <span class="font-serif-en md:text-lg">{category}</span>
+      ))
+    }
+  </h1>
+
+  <div
+    class="md:w-1/2 mt-16 md:mt-24 flex flex-col md:flex-row gap-4 md:gap-20"
+  >
+    <p class="flex flex-col gap-2">
+      <span class="text-gray">ROLE</span>
+      <span>
+        {
+          work?.tags.map((tag, i) => (
+            <span class="-ml-1">
+              {i !== 0 && i < work.tags.length && <span>&comma;&nbsp;</span>}
+              {tag}
+            </span>
+          ))
+        }
+      </span>
+    </p>
+
+    <p class="flex flex-col gap-2">
+      <span class="text-gray">YEAR</span>
+      <span>{work?.year}</span>
+    </p>
+  </div>
+</section>
+
+<picture class="ts-horizontal-scroll-item mt-9 md:mt-0
+block">
+  <source
+    srcset={work?.mv}
+    media="(min-width: 768px)"
+    class="ts-image-white-in md:h-full"
+  />
+  <img src={work?.mvSp} alt="" class="ts-image-white-in md:h-full" />
+</picture>

src/components/NextWork.astro

@@ -0,0 +1,49 @@
+---
+import type { Work } from '@/types/Work';
+
+interface Props {
+  work: Work;
+}
+const { work } = Astro.props;
+---
+
+<section
+  class="ts-horizontal-scroll-item flex justify-end items-end md:pl-[34rem] md:pr-20 box-content"
+>
+  <div class="pt-24 md:py-[8.125rem] px-5 md:px-0">
+    <p class="md:text-lg font-serif-en">(NEXT PROJECT)</p>
+    <h2 class="text-[2rem] md:text-[2.625rem] font-medium">
+      {work.title}
+    </h2>
+  </div>
+</section>
+
+<picture class="ts-horizontal-scroll-item block mt-9 md:mt-0">
+  <a
+    href={`/works/${work.slug}/`}
+    aria-label={`${work.title}を見る`}
+    class="ts-crossing-link block h-full relative"
+  >
+    <img
+      src={work.image}
+      aria-label={`${work.title}を見る`}
+      class="ts-image-white-in md:h-full"
+    />
+
+    <span
+      class="bg-mine-shaft flex md:hidden justify-center items-center absolute bottom-[20px] right-5 rounded-full w-[40px] h-[40px]"
+    >
+      <svg
+        width="14"
+        height="10"
+        viewBox="0 0 14 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.91412 0.679339C6.91412 0.679339 7.99884 2.63402 8.2563 4.37282L0.731445 4.7742V5.34764L8.24902 5.74902C7.96468 7.46346 6.78603 9.32056 6.78603 9.32056C6.78603 9.32056 10.3661 5.54406 13.6435 5.05602C10.3758 4.56308 6.91412 0.679199 6.91412 0.679199V0.679339Z"
+          class="fill-taupe-gray"></path>
+      </svg>
+    </span>
+  </a>
+</picture>

src/components/WorksGallery/Item.astro

@@ -11,7 +11,7 @@ const { item, number } = Astro.props;
   class="ts-image-link image-link [&:not(:last-child)>a]:pb-9 md:[&:not(:last-child)>a]:pb-0 md:[&:not(:first-child)>a]:pt-14 md:contents-right"
 >
   <a
-    href={item.href}
+    href={`/works/${item.slug}/`}
     class="flex flex-col md:flex-row gap-4 md:gap-16 md:pl-[10%] border-t md:border-none border-silver"
   >
     <div class="flex md:hidden justify-between pt-3">

src/components/WorksSlide/index.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 const WorksSlide = ({ title, titleEn, items }: Props) => {
-  const [selectedOption, setSelectedOption] = useState('All');
+  const [selectedOption, setSelectedOption] = useState('ALL');
   const [open, setOpen] = useState(false);
   const wrapper = useRef<HTMLDivElement | null>(null);
   const container = useRef<HTMLUListElement | null>(null);
@@ -39,22 +39,22 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
           {items.map((item, i) => {
             return (
               <li
-                key={`${item.href}-${i}`}
+                key={`${item.slug}-${i}`}
                 className="h-full aspect-works-slide 
                 pt-5 pb-6 border-l peer-last:border-r last-of-type:border-r border-silver 
                 bg-gray-texture px-12 whitespace-nowrap max-w-full
                 transition-all duration-[1500ms] animate-text-focus-in
                 data-[hidden]:animate-text-blur-out data-[hidden]:max-w-0 data-[hidden]:px-0"
                 data-tags={item.tags.join(' ')}
                 data-hidden={
-                  selectedOption !== 'All' &&
+                  selectedOption !== 'ALL' &&
                   !item.tags.includes(selectedOption)
                     ? true
                     : null
                 }
               >
                 <a
-                  href={item.href}
+                  href={`/works/${item.slug}/`}
                   className="ts-image-link flex flex-col h-full"
                 >
                   <div className="flex flex-1">
@@ -69,7 +69,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                       <ul className="flex flex-wrap gap-4">
                         {item.categories.map((category, i) => {
                           return (
-                            <li key={`${item.href}-${category}-${i}`}>
+                            <li key={`${item.slug}-${category}-${i}`}>
                               {category}
                             </li>
                           );
@@ -84,7 +84,7 @@ const WorksSlide = ({ title, titleEn, items }: Props) => {
                     </h2>
                     <ul className="flex flex-wrap gap-x-4 gap-y-2 font-serif-en mt-6 text-gray">
                       {item.tags.map((tag, i) => {
-                        return <li key={`${item.href}-${tag}-${i}`}>{tag}</li>;
+                        return <li key={`${item.slug}-${tag}-${i}`}>{tag}</li>;
                       })}
                     </ul>
                   </div>

src/data/filters.ts

@@ -1,10 +1,11 @@
 const filters = [
-  'All',
-  'Art Direction',
-  'Web Design',
-  'Graphic Design',
-  'Logo Design',
-  'Fashion Design',
+  'ALL',
+  'ART DIRECTION',
+  'WEB DESIGN',
+  'GRAPHIC DESIGN',
+  'LOGO DESIGN',
+  'FASHION DESIGN',
+  'CODING',
 ];
 
 export default filters;