From 500472b6cd8930add19afb7b726544b908844ad0 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 5 Jan 2024 17:07:00 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20MemberImage=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MemberImage/MemberImage.stories.tsx | 19 +++++++++++++++ .../Members/MemberImage/MemberImage.tsx | 23 +++++++++++++++++++ src/components/Members/index.ts | 1 + 3 files changed, 43 insertions(+) create mode 100644 src/components/Members/MemberImage/MemberImage.stories.tsx create mode 100644 src/components/Members/MemberImage/MemberImage.tsx diff --git a/src/components/Members/MemberImage/MemberImage.stories.tsx b/src/components/Members/MemberImage/MemberImage.stories.tsx new file mode 100644 index 000000000..c9cc43771 --- /dev/null +++ b/src/components/Members/MemberImage/MemberImage.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import MemberImage from './MemberImage'; + +const meta: Meta = { + title: 'members/MemberImage', + component: MemberImage, + args: { + src: 'https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34', + alt: '펀잇님의 프로필 사진', + width: 45, + height: 45, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx new file mode 100644 index 000000000..e20797f6d --- /dev/null +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -0,0 +1,23 @@ +import type { CSSProp } from 'styled-components'; +import styled from 'styled-components'; + +interface MemberImageProps { + src: string; + alt: string; + width: number; + height: number; + css?: CSSProp; +} + +const MemberImage = ({ src, alt, width, height, css }: MemberImageProps) => { + return ; +}; + +export default MemberImage; + +const StyledMemberImage = styled.img` + border: 2px solid ${({ theme }) => theme.colors.primary}; + border-radius: 50%; + background: ${({ theme }) => theme.backgroundColors.default}; + ${({ css }) => css}; +`; diff --git a/src/components/Members/index.ts b/src/components/Members/index.ts index 4e31460ee..2080b25c6 100644 --- a/src/components/Members/index.ts +++ b/src/components/Members/index.ts @@ -3,3 +3,4 @@ export { default as MemberReviewList } from './MemberReviewList/MemberReviewList export { default as MemberRecipeList } from './MemberRecipeList/MemberRecipeList'; export { default as MemberModifyInput } from './MemberModifyInput/MemberModifyInput'; export { default as MemberReviewItem } from './MemberReviewItem/MemberReviewItem'; +export { default as MemberImage } from './MemberImage/MemberImage'; From a3ec7f8c44d9f8d80b2bf3ed2965da0cc5badd32 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 5 Jan 2024 17:07:56 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=EC=9D=98=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=93=A4=EC=9D=84=20Member?= =?UTF-8?q?Image=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Members/MembersInfo/MembersInfo.tsx | 20 ++++++++++------- .../RecipeRankingItem/RecipeRankingItem.tsx | 9 ++------ .../Recipe/CommentItem/CommentItem.tsx | 8 ++----- .../Recipe/RecipeItem/RecipeItem.tsx | 22 +++++++++---------- .../Review/BestReviewItem/BestReviewItem.tsx | 9 ++------ .../Review/ReviewItem/ReviewItem.tsx | 15 +++++++------ src/pages/RecipeDetailPage.tsx | 8 ++----- src/pages/ReviewDetailPage.tsx | 15 +++++++------ 8 files changed, 46 insertions(+), 60 deletions(-) diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index 1b2e94839..55e0ea8c0 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -2,6 +2,8 @@ import { Button, Heading, Link, theme } from '@fun-eat/design-system'; import { Link as RouterLink } from 'react-router-dom'; import styled from 'styled-components'; +import MemberImage from '../MemberImage/MemberImage'; + import { SvgIcon } from '@/components/Common'; import { PATH } from '@/constants/path'; import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members'; @@ -23,7 +25,16 @@ const MembersInfo = () => { return ( - + {nickname} 님 @@ -55,10 +66,3 @@ const MemberModifyLink = styled(Link)` margin-left: 5px; transform: translateY(1px); `; - -const MembersImage = styled.img` - margin-right: 16px; - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - object-fit: cover; -`; diff --git a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx index 308f2d3fd..26362d02e 100644 --- a/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx +++ b/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import RecipePreviewImage from '@/assets/plate.svg'; import { SvgIcon } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import type { RecipeRanking } from '@/types/ranking'; import { getRelativeDate } from '@/utils/date'; @@ -59,7 +60,7 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => { - + {nickname} 님 @@ -114,9 +115,3 @@ const AuthorWrapper = styled.div` align-items: center; height: 100%; `; - -const AuthorImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - object-fit: cover; -`; diff --git a/src/components/Recipe/CommentItem/CommentItem.tsx b/src/components/Recipe/CommentItem/CommentItem.tsx index 847194b75..121af50c6 100644 --- a/src/components/Recipe/CommentItem/CommentItem.tsx +++ b/src/components/Recipe/CommentItem/CommentItem.tsx @@ -1,6 +1,7 @@ import { Divider, Spacing, Text, useTheme } from '@fun-eat/design-system'; import styled from 'styled-components'; +import { MemberImage } from '@/components/Members'; import type { Comment } from '@/types/recipe'; import { getFormattedDate } from '@/utils/date'; @@ -15,7 +16,7 @@ const CommentItem = ({ recipeComment }: CommentItemProps) => { return ( <> - +
{author.nickname} 님 @@ -40,11 +41,6 @@ const AuthorWrapper = styled.div` align-items: center; `; -const AuthorProfileImage = styled.img` - border: 1px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; -`; - const CommentContent = styled(Text)` margin: 16px 0; `; diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx index f7e7f229f..8a226070a 100644 --- a/src/components/Recipe/RecipeItem/RecipeItem.tsx +++ b/src/components/Recipe/RecipeItem/RecipeItem.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import PreviewImage from '@/assets/plate.svg'; import { SvgIcon } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import type { MemberRecipe, Recipe } from '@/types/recipe'; import { getFormattedDate } from '@/utils/date'; @@ -30,7 +31,15 @@ const RecipeItem = ({ recipe, isMemberPage = false }: RecipeItemProps) => { ) : ( )} - {author && } + {author && ( + + )} )} @@ -76,17 +85,6 @@ const RecipeImage = styled.img` object-fit: cover; `; -const ProfileImage = styled.img` - position: absolute; - bottom: -20px; - right: 16px; - width: 60px; - height: 60px; - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - background-color: ${({ theme }) => theme.backgroundColors.default}; -`; - const RecipeInfoWrapper = styled.div` position: relative; display: flex; diff --git a/src/components/Review/BestReviewItem/BestReviewItem.tsx b/src/components/Review/BestReviewItem/BestReviewItem.tsx index 5e66dcbbb..6fa84835a 100644 --- a/src/components/Review/BestReviewItem/BestReviewItem.tsx +++ b/src/components/Review/BestReviewItem/BestReviewItem.tsx @@ -2,6 +2,7 @@ import { Spacing, Text, useTheme } from '@fun-eat/design-system'; import styled from 'styled-components'; import { SvgIcon } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import { useBestReviewQuery } from '@/hooks/queries/rank'; interface BestReviewItemProps { @@ -29,7 +30,7 @@ const BestReviewItem = ({ productId }: BestReviewItemProps) => { - +
{userName} 님 @@ -82,12 +83,6 @@ const ReviewerInfoWrapper = styled.div` column-gap: 10px; `; -const ReviewerImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - object-fit: cover; -`; - const FavoriteWrapper = styled.div` display: flex; gap: 8px; diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx index bbd38647e..5b9ef5e8d 100644 --- a/src/components/Review/ReviewItem/ReviewItem.tsx +++ b/src/components/Review/ReviewItem/ReviewItem.tsx @@ -5,6 +5,7 @@ import styled from 'styled-components'; import ReviewFavoriteButton from '../ReviewFavoriteButton/ReviewFavoriteButton'; import { SvgIcon, TagList } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import type { Review } from '@/types/review'; import { getRelativeDate } from '@/utils/date'; @@ -23,7 +24,13 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => { - +
{userName} @@ -80,12 +87,6 @@ const RebuyBadge = styled(Badge)` font-weight: ${({ theme }) => theme.fontWeights.bold}; `; -const ReviewerImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - object-fit: cover; -`; - const RatingIconWrapper = styled.div` display: flex; align-items: center; diff --git a/src/pages/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage.tsx index 4b4fbb666..2388eca26 100644 --- a/src/pages/RecipeDetailPage.tsx +++ b/src/pages/RecipeDetailPage.tsx @@ -6,6 +6,7 @@ import styled from 'styled-components'; import RecipePreviewImage from '@/assets/plate.svg'; import { ErrorBoundary, ErrorComponent, Loading, SectionTitle } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe'; import { useRecipeDetailQuery } from '@/hooks/queries/recipe'; import { getFormattedDate } from '@/utils/date'; @@ -40,7 +41,7 @@ export const RecipeDetailPage = () => { - +
{author.nickname} 님 {getFormattedDate(createdAt)} @@ -124,11 +125,6 @@ const AuthorWrapper = styled.div` align-items: center; `; -const AuthorProfileImage = styled.img` - border: 1px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; -`; - const RecipeUsedProductsWrapper = styled.div` padding: 20px; border-radius: 8px; diff --git a/src/pages/ReviewDetailPage.tsx b/src/pages/ReviewDetailPage.tsx index 9cc209bf5..5681e5b12 100644 --- a/src/pages/ReviewDetailPage.tsx +++ b/src/pages/ReviewDetailPage.tsx @@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'; import styled from 'styled-components'; import { SectionTitle, SvgIcon, TagList } from '@/components/Common'; +import { MemberImage } from '@/components/Members'; import { PATH } from '@/constants/path'; import { useReviewDetailQuery } from '@/hooks/queries/review'; import { getRelativeDate } from '@/utils/date'; @@ -35,7 +36,13 @@ export const ReviewDetailPage = () => { - +
{userName} @@ -100,12 +107,6 @@ const RebuyBadge = styled(Badge)` font-weight: ${({ theme }) => theme.fontWeights.bold}; `; -const ReviewerImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - object-fit: cover; -`; - const RatingIconWrapper = styled.div` display: flex; align-items: center; From 0a15c1722d9129440fe7f24f20a6ffbc92fdacaa Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Fri, 5 Jan 2024 17:41:47 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=20=EC=8B=9C=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=EB=A1=9C=20=EB=8C=80=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/defaultProfile.png | Bin 0 -> 2506 bytes .../MemberImage/MemberImage.stories.tsx | 9 ++++++-- .../Members/MemberImage/MemberImage.tsx | 20 ++++++++++++++---- 3 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 src/assets/defaultProfile.png diff --git a/src/assets/defaultProfile.png b/src/assets/defaultProfile.png new file mode 100644 index 0000000000000000000000000000000000000000..76a16709c888923d9abc641e8fbc459263cbebcd GIT binary patch literal 2506 zcmV;*2{rbKP)cv00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPK~#7F?d#XC^!f8=`ts#V0~R|9S%AroQ#9mPS65r4Y`0-1JInvr z@OZJz_Xe5tAMV-;0u!jSlzWzzmf(8}AnEsETz;eqg;2O0lOlq(2Hv64bPazVJa{nb zLskIyylN{9^?IGYeft(fR-nDTeKd*|amB>_hCG^p^MW88<}$>CTw8Hfo5`9H9~HJE z>>;lBUWy5B0;cm^w&6mAck^+j%#{?ST!~W=o{4QsV1S+HIXG{Mh`3UYDG@WMZ0lZ} z3Y6c_tkP_{4T_GqQjYb3tkwmUdm%8KCpi{*EH#NLW$T$(WwR|Y18%Dl&O5a@7i69N z3gFrf?arx4ge&v7-@Q1Im>X->tg*iZMoT5AD8na)Jfk8J-*;3jwBubv9;--LfPG@1 zloch?;x`>oRq1BJ{9&D>0EC}GQdX6S+iwC^B`AltO@xya6e49MiFg??k(GA9?%pMJ zA+kLFKobWnnPJiZ7K(7cI+J*(K$Z*EGK#>OH_4gFY1P2UqdXyDooQMV$u*fS)qp$< zB58u%hUtF-sVSKx;A?rq0R~H>UdX%1C(Sr?=n$y_l1}n|5DmF&TB|Uh5AGz5jEvC4#6;7za=A?7zY}nv=9co;uRD9p-?(U{WqqW}A zhIO~&Ogayct{(;m2Lmeugu@2ZW1!KIM&RLwG*VuG^s$MrVJR01S~5DGV6F|VZJ0;= zTdskGB;(k~Q0wXG>6YFR z&OsJ?ke!>GOKj}}P_w5G^C%sv*d)zBniiWg3xdcC{uw0EMFg@))v_l4;UtV9&!|&# zV*zBhZQCZYAT#m5$NGCO~Siy3%DyX-ARf{QNxK zxN(EdoH>&;?Nh}cJH-Qk%py-Wn6&_+QOLe|^G5Wv9zA*_h$jJa6P~Ckr^W7RiWI?3 zLTtJKg6Gel7o=Gg#g+ujO?aY~g<7h{>-6c=`|I@MAK>GI{v_OOdHDIYiFWFA*py7r_SPr{f`!ZrL@bq<## z{_x>Lp_WcKRoz#R7nao35j^eXfve&r0lKXn#>e4iV z5lCMG?HdH$;4BR7*|Vo5V=23zVaCg?#!iGTr)AO=-etDFR{~_WZ{JQEH*OT?Xt(d* zzYjB7=nsssr|--9as-Bzm<6N!EU z020TvTrB0YR)D29Y(T=V7P&iFEf$N)$qKDMdcYxNo?Q+6H>M31Fdl1F1om}n=B`QV zxXDs2QUav!ToGv?zWGr|d$!}=l00_zrJsnWU$o1}ou2y0l&pxBvhE07*qoM6N<$f;950aR2}S literal 0 HcmV?d00001 diff --git a/src/components/Members/MemberImage/MemberImage.stories.tsx b/src/components/Members/MemberImage/MemberImage.stories.tsx index c9cc43771..e644e9390 100644 --- a/src/components/Members/MemberImage/MemberImage.stories.tsx +++ b/src/components/Members/MemberImage/MemberImage.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import MemberImage from './MemberImage'; +import DefaultMemberImage from '../../../assets/defaultProfile.png'; const meta: Meta = { title: 'members/MemberImage', @@ -8,8 +9,6 @@ const meta: Meta = { args: { src: 'https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34', alt: '펀잇님의 프로필 사진', - width: 45, - height: 45, }, }; @@ -17,3 +16,9 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const Error: Story = { + args: { + src: DefaultMemberImage, + }, +}; diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index e20797f6d..c1cf23bb1 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -1,16 +1,27 @@ +import { useState } from 'react'; import type { CSSProp } from 'styled-components'; import styled from 'styled-components'; +import DefaultMemberImage from '@/assets/defaultProfile.png'; + interface MemberImageProps { src: string; alt: string; - width: number; - height: number; + width?: number; + height?: number; css?: CSSProp; } -const MemberImage = ({ src, alt, width, height, css }: MemberImageProps) => { - return ; +const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => { + const [imageSrc, setImageSrc] = useState(src); + + const handleImageError = () => { + setImageSrc(DefaultMemberImage); + }; + + return ( + + ); }; export default MemberImage; @@ -19,5 +30,6 @@ const StyledMemberImage = styled.img` border: 2px solid ${({ theme }) => theme.colors.primary}; border-radius: 50%; background: ${({ theme }) => theme.backgroundColors.default}; + object-fit: cover; ${({ css }) => css}; `; From b5a50bb255d9e5cde7b2b94f8d8c1337bd8363c4 Mon Sep 17 00:00:00 2001 From: TaeeunKim Date: Wed, 10 Jan 2024 01:11:51 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EC=83=81=ED=83=9C=EB=A5=BC=20boole?= =?UTF-8?q?an=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MemberImage/MemberImage.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index c1cf23bb1..c3dd9f98e 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -13,14 +13,21 @@ interface MemberImageProps { } const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => { - const [imageSrc, setImageSrc] = useState(src); + const [isError, setIsError] = useState(false); const handleImageError = () => { - setImageSrc(DefaultMemberImage); + setIsError(true); }; return ( - + ); };