aタグをLinkに

mehm8128 · Mar 23, 2024 · 8766df6 · 8766df6 · mehm8128 · Mar 23, 2024
1 parent fddcae8
commit 8766df6
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 14 deletions.
diff --git a/workspaces/app/src/features/book/components/BookCard.tsx b/workspaces/app/src/features/book/components/BookCard.tsx
@@ -42,7 +42,7 @@ const BookCard: React.FC<Props> = ({ book }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${book.id}`}>
+    <_Wrapper to={`/books/${book.id}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={128} objectFit="cover" src={imageUrl} width={192} />

diff --git a/workspaces/app/src/features/book/components/BookListItem.tsx b/workspaces/app/src/features/book/components/BookListItem.tsx
@@ -44,7 +44,7 @@ export const BookListItem: React.FC<Props> = ({ book }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/features/episode/components/EpisodeListItem.tsx b/workspaces/app/src/features/episode/components/EpisodeListItem.tsx
@@ -40,7 +40,7 @@ export const EpisodeListItem: React.FC<Props> = ({ bookId, episodeId }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${bookId}/episodes/${episode.id}`}>
+      <_Link to={`/books/${bookId}/episodes/${episode.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/features/feature/components/FeatureCard.tsx b/workspaces/app/src/features/feature/components/FeatureCard.tsx
@@ -53,7 +53,7 @@ const FeatureCard: React.FC<Props> = ({ book }) => {
   const authorImageUrl = useImage({ height: 32, imageId: book.author.image.id, width: 32 });
 
   return (
-    <_Wrapper href={`/books/${book.id}`}>
+    <_Wrapper to={`/books/${book.id}`}>
       {imageUrl != null && (
         <_ImgWrapper>
           <Image alt={book.image.alt} height={96} objectFit="cover" src={imageUrl} width={96} />

diff --git a/workspaces/app/src/features/ranking/components/RankingCard.tsx b/workspaces/app/src/features/ranking/components/RankingCard.tsx
@@ -48,7 +48,7 @@ const RankingCard: React.FC<Props> = ({ book }) => {
 
   return (
     <_Wrapper>
-      <_Link href={`/books/${book.id}`}>
+      <_Link to={`/books/${book.id}`}>
         <Spacer height={Space * 1.5} />
         <Flex align="flex-start" gap={Space * 2.5} justify="flex-start">
           {imageUrl != null && (

diff --git a/workspaces/app/src/foundation/components/Link.tsx b/workspaces/app/src/foundation/components/Link.tsx
@@ -1,12 +1,14 @@
+import type { ComponentProps } from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+
 type Props = {
   children: React.ReactNode;
-  to?: string;
-} & JSX.IntrinsicElements['a'];
+} & ComponentProps<typeof ReactLink>;
 
 export const Link: React.FC<Props> = ({ children, to, ...rest }) => {
   return (
-    <a href={to} {...rest}>
+    <ReactLink to={to} {...rest}>
       {children}
-    </a>
+    </ReactLink>
   );
 };
diff --git a/workspaces/app/src/pages/BookDetailPage/index.tsx b/workspaces/app/src/pages/BookDetailPage/index.tsx
@@ -82,7 +82,7 @@ const BookDetailPage: React.FC = () => {
 
           <Spacer height={Space * 1} />
 
-          <_AuthorWrapper href={`/authors/${book.author.id}`}>
+          <_AuthorWrapper to={`/authors/${book.author.id}`}>
             {auhtorImageUrl != null && (
               <_AvatarWrapper>
                 <Image alt={book.author.name} height={32} objectFit="cover" src={auhtorImageUrl} width={32} />

diff --git a/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx b/workspaces/app/src/pages/TopPage/internal/CoverSection.tsx
@@ -33,7 +33,7 @@ export const CoverSection: React.FC = () => {
   return (
     <_Wrapper>
       <HeroImage />
-      <_SearchLink href="/search">
+      <_SearchLink to="/search">
         <SearchIcon height={24} style={{ color: Color.MONO_A }} width={24} />
         <Text color={Color.MONO_A} typography={Typography.NORMAL16}>
           検索

diff --git a/workspaces/app/src/pages/TopPage/internal/HeroImage.tsx b/workspaces/app/src/pages/TopPage/internal/HeroImage.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, TextureLoader, WebGLRenderer } from 'three';
 
-
 const _Wrapper = styled.div`
   aspect-ratio: 16 / 9;
   width: 100%;
@@ -114,7 +113,13 @@ void main() {
 
   return (
     <_Wrapper>
-      <_Image ref={imageRef} alt="Cyber TOON" />
+      <_Image
+        ref={imageRef}
+        alt="Cyber TOON"
+        height={(4096 / window.devicePixelRatio / 16) * 9}
+        src="/assets/output.jpg"
+        width={4096 / window.devicePixelRatio}
+      />
     </_Wrapper>
   );
 };
diff --git a/workspaces/app/src/routes.tsx b/workspaces/app/src/routes.tsx
@@ -33,7 +33,7 @@ export const Router: React.FC = () => {
         element={
           <ActionLayout
             leftContent={
-              <_BackToTopButton href={'/'}>
+              <_BackToTopButton to="/">
                 <ArrowBackIcon height={32} style={{ color: Color.MONO_100 }} width={32} />
                 <Text color={Color.MONO_100} typography={Typography.NORMAL16} weight="bold">
                   トップへ戻る