From 2d6e4213f805c184d70045909abd130589b948fa Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Thu, 28 Mar 2024 15:19:04 +0900 Subject: [PATCH 1/9] save --- .../_components/layouts/FFProfileCard.tsx | 86 +++++++++++++++++++ .../(public)/[username]/followers/page.tsx | 4 +- 2 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx new file mode 100644 index 00000000..bc5f3c0b --- /dev/null +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -0,0 +1,86 @@ +'use client'; +import FollowButton from '@/app/(menu)/(public)/[username]/_components/elements/FollowButton'; +import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/UserIcon'; +import { UserWithFollows } from '@cuculus/cuculus-api'; +import { Box, Typography, styled } from '@mui/material'; + +const Flex = styled(Box)` + display: flex; + flex-wrap: nowrap; +`; + +const VFlex = styled(Flex)` + flex-direction: column; +`; + +const HFlex = styled(Flex)` + flex-direction: row; +`; + +const HFlexS = styled(Flex)` + flex-direction: row; + justify-content: space-between; +`; + +const DisplayName = styled(Typography)` + word-wrap: break-word; + font-weight: bold; + font-size: 20px; +`; + +const UserName = styled(Typography)` + color: #8899a6; + font-size: 15px; +`; + +const Avater = styled(UserIcon)` + aspect-ratio: 1; + height: 60px; + width: 60px; + margin: auto 10px; +`; + +const Bio = styled(Typography)` + white-space: pre-wrap; + margin-bottom: 12px; +`; + +type FFProfileCardProps = { + displayName: string; + userName: string; + profileAvatarImageUrl: string; + bio: string; + authId: number | undefined; +} & UserWithFollows; + +export default function FFProfileCard({ + displayname, + username, + profileImageUrl, + bio, + authId, + id, +}: FFProfileCardProps) { + const isMe = id === authId; + return ( +
+ + + + + + {displayname}ユーザー表示名 + @{username}usernoid + + {/* {authId && !isMe && } */} + + + + {bio} + 1234567890aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあああああああああああああああああああああああああああああ + + + +
+ ); +} diff --git a/src/app/(menu)/(public)/[username]/followers/page.tsx b/src/app/(menu)/(public)/[username]/followers/page.tsx index acda81f8..745e770b 100644 --- a/src/app/(menu)/(public)/[username]/followers/page.tsx +++ b/src/app/(menu)/(public)/[username]/followers/page.tsx @@ -1,10 +1,12 @@ +import FFProfileCard from '@/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard'; import ComingSoon from '@/app/(menu)/_components/main/ComingSoon'; import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn'; export default function page({}: { params: { userName: string } }) { return ( - + + {/* */} ); } From e79def56c02980256e77d0906c1d5b50682f9f89 Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Thu, 28 Mar 2024 16:03:01 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=E3=81=96=E3=81=A3=E3=81=8F=E3=82=8A?= =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E7=A2=BA=E8=AA=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/layouts/FFProfileCard.tsx | 41 +++++++++++++++---- .../(public)/[username]/followers/page.tsx | 16 ++++++++ 2 files changed, 49 insertions(+), 8 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index bc5f3c0b..13082782 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -4,6 +4,12 @@ import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/User import { UserWithFollows } from '@cuculus/cuculus-api'; import { Box, Typography, styled } from '@mui/material'; +const UnselectableCard = styled('div')` + border-bottom: 1px solid ${({ theme }) => theme.palette.grey[100]}; + background-color: ${({ theme }) => theme.palette.background.paper}; + color: rgba(0, 0, 0, 0.87); +`; + const Flex = styled(Box)` display: flex; flex-wrap: nowrap; @@ -22,6 +28,10 @@ const HFlexS = styled(Flex)` justify-content: space-between; `; +const FillFlex = styled(Box)` + flex-grow: 1; +`; + const DisplayName = styled(Typography)` word-wrap: break-word; font-weight: bold; @@ -35,14 +45,27 @@ const UserName = styled(Typography)` const Avater = styled(UserIcon)` aspect-ratio: 1; - height: 60px; - width: 60px; + height: 64px; + width: 64px; margin: auto 10px; + margin-top: 0; + + ${({ theme }) => theme.breakpoints.down('desktop')} { + margin: auto 10px; + margin-top: 0; + height: 64px; + width: 64px; + } `; const Bio = styled(Typography)` white-space: pre-wrap; margin-bottom: 12px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; `; type FFProfileCardProps = { @@ -63,7 +86,7 @@ export default function FFProfileCard({ }: FFProfileCardProps) { const isMe = id === authId; return ( -
+ @@ -75,12 +98,14 @@ export default function FFProfileCard({ {/* {authId && !isMe && } */} - - {bio} - 1234567890aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaあああああああああああああああああああああああああああああ - + + + {bio} + あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ + + -
+ ); } diff --git a/src/app/(menu)/(public)/[username]/followers/page.tsx b/src/app/(menu)/(public)/[username]/followers/page.tsx index 745e770b..f9cd6181 100644 --- a/src/app/(menu)/(public)/[username]/followers/page.tsx +++ b/src/app/(menu)/(public)/[username]/followers/page.tsx @@ -5,6 +5,22 @@ import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn'; export default function page({}: { params: { userName: string } }) { return ( + + + + + + + + + + + + + + + + {/* */} From dd3be0cda5ffca0e0a634aa9c045aa44156714f7 Mon Sep 17 00:00:00 2001 From: takecchi Date: Fri, 29 Mar 2024 01:04:35 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AD=E3=83=BC?= =?UTF-8?q?=E4=B8=80=E8=A6=A7=E8=A1=A8=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[username]/_components/Following.tsx | 14 +++++ .../_components/layouts/FollowList.tsx | 44 +++++++++++++++ .../(public)/[username]/following/page.tsx | 36 +++++++++++-- src/swr/client/follows.ts | 53 +++++++++++++++++++ 4 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 src/app/(menu)/(public)/[username]/_components/Following.tsx create mode 100644 src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx create mode 100644 src/swr/client/follows.ts diff --git a/src/app/(menu)/(public)/[username]/_components/Following.tsx b/src/app/(menu)/(public)/[username]/_components/Following.tsx new file mode 100644 index 00000000..c749002e --- /dev/null +++ b/src/app/(menu)/(public)/[username]/_components/Following.tsx @@ -0,0 +1,14 @@ +'use client'; + +import FollowList from '@/app/(menu)/(public)/[username]/_components/layouts/FollowList'; +import { useFollowing } from '@/swr/client/follows'; +import { UserWithFollows } from '@cuculus/cuculus-api'; + +/** + * フォロー一覧表示コンポーネント + * @param user + * @constructor + */ +export default function Following({ user }: { user: UserWithFollows }) { + return ; +} diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx new file mode 100644 index 00000000..7877a1ec --- /dev/null +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx @@ -0,0 +1,44 @@ +import { SWRInfiniteResponse } from 'swr/infinite'; +import { FollowList } from '@cuculus/cuculus-api'; +import { CircularProgress } from '@mui/material'; + +type Props = { + follows: SWRInfiniteResponse; +}; + +/** + * フォロー/フォロワーリスト + * @param follows + * @constructor + */ +export default function FollowList({ follows }: Props) { + const { data, isLoading, size, setSize } = follows; + + if (isLoading) { + return ( +
+ +
+ ); + } + + return ( + <> +
現在のページ: {size}
+ + {data?.map((follow, index) => ( +
+ {follow?.users.map((user) => ( +
ユーザー名:{user.name}
+ ))} +
+ ))} + + ); +} diff --git a/src/app/(menu)/(public)/[username]/following/page.tsx b/src/app/(menu)/(public)/[username]/following/page.tsx index acda81f8..08a45a79 100644 --- a/src/app/(menu)/(public)/[username]/following/page.tsx +++ b/src/app/(menu)/(public)/[username]/following/page.tsx @@ -1,10 +1,40 @@ -import ComingSoon from '@/app/(menu)/_components/main/ComingSoon'; import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn'; +import { cache } from 'react'; +import { usersApi } from '@/libs/cuculus-client'; +import { notFound } from 'next/navigation'; +import Following from '@/app/(menu)/(public)/[username]/_components/Following'; + +type Params = { params: { username: string } }; + +const getUser = cache(async (username: string) => { + try { + return await usersApi.getUserByUsername( + { username }, + { + next: { + revalidate: 300, + }, + }, + ); + } catch { + return undefined; + } +}); + +/** + * フォロー一覧ページ + * @param params + */ +export default async function page({ params }: Params) { + const username = decodeURIComponent(params.username); + const user = await getUser(username); + if (!user) { + notFound(); + } -export default function page({}: { params: { userName: string } }) { return ( - + ); } diff --git a/src/swr/client/follows.ts b/src/swr/client/follows.ts new file mode 100644 index 00000000..0d89ffba --- /dev/null +++ b/src/swr/client/follows.ts @@ -0,0 +1,53 @@ +import { useAuth } from '@/swr/client/auth'; +import { usersApi } from '@/libs/cuculus-client'; +import { getAuthorizationHeader } from '@/libs/auth'; +import useSWRInfinite from 'swr/infinite'; +import { FollowList } from '@cuculus/cuculus-api'; + +// FIXME 確認用に一旦10件にしている +const LIMIT = 10; + +type SWRKey = { + key: string; + authId?: number; + userId: number; + nextUntil?: Date; +}; + +/** + * フォロー一覧の取得 + * @param userId + */ +export const useFollowing = (userId: number) => { + const { data: authId } = useAuth(); + return useSWRInfinite< + FollowList | undefined, + Error, + (index: number, prev: FollowList | undefined) => SWRKey | null + >( + (index, previousPageData) => { + // 取得結果が空の場合は次のページがないと判断して終了 + if (previousPageData && !previousPageData.users.length) { + return null; + } + return { + key: 'useFollowing', + authId, + userId, + nextUntil: previousPageData?.nextUntil, + }; + }, + async (args) => { + try { + return await usersApi.getUserFollowing( + { id: args.userId, until: args.nextUntil, limit: LIMIT }, + { + headers: await getAuthorizationHeader(authId), + }, + ); + } catch (error) { + throw error; + } + }, + ); +}; From 78cb8783e530abbb45a16ee4a71a49994abb73bd Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Fri, 29 Mar 2024 15:05:13 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E3=82=A2=E3=82=AB=E3=82=A6=E3=83=B3?= =?UTF-8?q?=E3=83=88=E6=83=85=E5=A0=B1=E3=81=AE=E5=8F=96=E3=82=8A=E8=BE=BC?= =?UTF-8?q?=E3=81=BF=E6=88=90=E5=8A=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/layouts/FFProfileCard.tsx | 28 ++++++++++--------- .../_components/layouts/FollowList.tsx | 14 ++++++++-- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index 13082782..9bc5b6d8 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -38,6 +38,10 @@ const DisplayName = styled(Typography)` font-size: 20px; `; +const ButtonArea = styled(Box)` + hight: 20px; +`; + const UserName = styled(Typography)` color: #8899a6; font-size: 15px; @@ -68,8 +72,8 @@ const Bio = styled(Typography)` -webkit-box-orient: vertical; `; -type FFProfileCardProps = { - displayName: string; +type Props = { + name: string; userName: string; profileAvatarImageUrl: string; bio: string; @@ -77,13 +81,13 @@ type FFProfileCardProps = { } & UserWithFollows; export default function FFProfileCard({ - displayname, - username, + name, + userName, profileImageUrl, bio, authId, id, -}: FFProfileCardProps) { +}: Props) { const isMe = id === authId; return ( @@ -92,17 +96,15 @@ export default function FFProfileCard({ - {displayname}ユーザー表示名 - @{username}usernoid + {name} + @{userName} - {/* {authId && !isMe && } */} - + + + - - {bio} - あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ - + {bio} diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx index 7877a1ec..c6bca136 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx @@ -1,6 +1,7 @@ import { SWRInfiniteResponse } from 'swr/infinite'; import { FollowList } from '@cuculus/cuculus-api'; import { CircularProgress } from '@mui/material'; +import FFProfileCard from '@/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard'; type Props = { follows: SWRInfiniteResponse; @@ -32,10 +33,17 @@ export default function FollowList({ follows }: Props) { <>
現在のページ: {size}
- {data?.map((follow, index) => ( + {data?.map((follows, index) => (
- {follow?.users.map((user) => ( -
ユーザー名:{user.name}
+ {follows?.users.map((User, index) => ( + ))}
))} From 7c8190c2a6a3ab26d9848097c10f700ae003bd31 Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Fri, 29 Mar 2024 16:14:10 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=E4=BD=9C=E6=A5=AD=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/layouts/FFProfileCard.tsx | 7 +- .../_components/layouts/FollowList.tsx | 4 +- .../(public)/[username]/followers/page.tsx | 70 +++++++++++++------ 3 files changed, 52 insertions(+), 29 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index 9bc5b6d8..32dbe931 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -75,9 +75,8 @@ const Bio = styled(Typography)` type Props = { name: string; userName: string; - profileAvatarImageUrl: string; + profileImageUrl: string; bio: string; - authId: number | undefined; } & UserWithFollows; export default function FFProfileCard({ @@ -85,10 +84,8 @@ export default function FFProfileCard({ userName, profileImageUrl, bio, - authId, id, }: Props) { - const isMe = id === authId; return ( @@ -99,6 +96,8 @@ export default function FFProfileCard({ {name} @{userName} + {/* フォローされてるか表示 */} + {/* */} diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx index c6bca136..84e6f7a0 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx @@ -35,9 +35,9 @@ export default function FollowList({ follows }: Props) { {data?.map((follows, index) => (
- {follows?.users.map((User, index) => ( + {follows?.users.map((User, number) => ( ; +}; + +/** + * フォロー/フォロワーリスト + * @param follows + * @constructor + */ +export default function FollowList({ follows }: Props) { + const { data, isLoading, size, setSize } = follows; + + if (isLoading) { + return ( +
+ +
+ ); + } + return ( - - - - - - - - - - - - - - - - - - - {/* */} - + <> +
現在のページ: {size}
+ + {data?.map((follows, index) => ( +
+ {follows?.users.map((User, number) => ( + + ))} +
+ ))} + ); } From 7cac4dbcacc332918ce7ef904ba42869cf5fc56d Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Fri, 29 Mar 2024 16:17:12 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=E4=BD=9C=E6=A5=AD=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(public)/[username]/followers/page.tsx | 74 ++++++++----------- 1 file changed, 31 insertions(+), 43 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/followers/page.tsx b/src/app/(menu)/(public)/[username]/followers/page.tsx index 84e6f7a0..58b923bf 100644 --- a/src/app/(menu)/(public)/[username]/followers/page.tsx +++ b/src/app/(menu)/(public)/[username]/followers/page.tsx @@ -1,52 +1,40 @@ -import { SWRInfiniteResponse } from 'swr/infinite'; -import { FollowList } from '@cuculus/cuculus-api'; -import { CircularProgress } from '@mui/material'; -import FFProfileCard from '@/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard'; +import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn'; +import { cache } from 'react'; +import { usersApi } from '@/libs/cuculus-client'; +import { notFound } from 'next/navigation'; +import Following from '@/app/(menu)/(public)/[username]/_components/Following'; -type Props = { - follows: SWRInfiniteResponse; -}; +type Params = { params: { username: string } }; + +const getUser = cache(async (username: string) => { + try { + return await usersApi.getUserByUsername( + { username }, + { + next: { + revalidate: 300, + }, + }, + ); + } catch { + return undefined; + } +}); /** - * フォロー/フォロワーリスト - * @param follows - * @constructor + * フォロワー一覧ページ + * @param params */ -export default function FollowList({ follows }: Props) { - const { data, isLoading, size, setSize } = follows; - - if (isLoading) { - return ( -
- -
- ); +export default async function page({ params }: Params) { + const username = decodeURIComponent(params.username); + const user = await getUser(username); + if (!user) { + notFound(); } return ( - <> -
現在のページ: {size}
- - {data?.map((follows, index) => ( -
- {follows?.users.map((User, number) => ( - - ))} -
- ))} - + + {/* */} + ); } From a6176235a9cfda50f6ab699718e0bd0021a7f09c Mon Sep 17 00:00:00 2001 From: ayumu akimoto Date: Fri, 29 Mar 2024 17:07:59 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=E4=BD=9C=E6=A5=AD=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[username]/_components/layouts/FFProfileCard.tsx | 6 +++--- .../(public)/[username]/_components/layouts/FollowList.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index 32dbe931..d03a5af7 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -74,14 +74,14 @@ const Bio = styled(Typography)` type Props = { name: string; - userName: string; + username: string; profileImageUrl: string; bio: string; } & UserWithFollows; export default function FFProfileCard({ name, - userName, + username, profileImageUrl, bio, id, @@ -94,7 +94,7 @@ export default function FFProfileCard({ {name} - @{userName} + @{username} {/* フォローされてるか表示 */} {/* */} diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx index 84e6f7a0..c147f126 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FollowList.tsx @@ -39,7 +39,7 @@ export default function FollowList({ follows }: Props) { Date: Fri, 29 Mar 2024 17:18:57 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Props=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(public)/[username]/_components/layouts/FFProfileCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index d03a5af7..802f5277 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -1,7 +1,6 @@ 'use client'; import FollowButton from '@/app/(menu)/(public)/[username]/_components/elements/FollowButton'; import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/UserIcon'; -import { UserWithFollows } from '@cuculus/cuculus-api'; import { Box, Typography, styled } from '@mui/material'; const UnselectableCard = styled('div')` @@ -73,11 +72,12 @@ const Bio = styled(Typography)` `; type Props = { + id: number; name: string; username: string; profileImageUrl: string; bio: string; -} & UserWithFollows; +}; export default function FFProfileCard({ name, From 53fdaf2e86e02633d7e3e2a6c005749ad8a8268f Mon Sep 17 00:00:00 2001 From: AyumuAkimoto Date: Fri, 5 Apr 2024 12:53:54 +0900 Subject: [PATCH 9/9] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E5=BE=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[username]/_components/layouts/FFProfileCard.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx index 802f5277..f915dbda 100644 --- a/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx +++ b/src/app/(menu)/(public)/[username]/_components/layouts/FFProfileCard.tsx @@ -16,6 +16,7 @@ const Flex = styled(Box)` const VFlex = styled(Flex)` flex-direction: column; + width: 100%; `; const HFlex = styled(Flex)` @@ -38,7 +39,8 @@ const DisplayName = styled(Typography)` `; const ButtonArea = styled(Box)` - hight: 20px; + width: 100%; + text-align: right; `; const UserName = styled(Typography)` @@ -50,12 +52,10 @@ const Avater = styled(UserIcon)` aspect-ratio: 1; height: 64px; width: 64px; - margin: auto 10px; - margin-top: 0; + margin: 0 10px auto; ${({ theme }) => theme.breakpoints.down('desktop')} { - margin: auto 10px; - margin-top: 0; + margin: 0 10px auto; height: 64px; width: 64px; }