From 99b64c9a5db88232cdf08cf2614e889984b2dc08 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 12:52:48 +0900 Subject: [PATCH 01/28] =?UTF-8?q?refactor:=20memberImage=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EB=B0=8F=20props=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/defaultProfile.png | Bin 2506 -> 16739 bytes .../Members/MemberImage/MemberImage.tsx | 21 +++++------------- .../Members/MemberImage/memberImage.css.ts | 6 +++++ 3 files changed, 11 insertions(+), 16 deletions(-) create mode 100644 src/components/Members/MemberImage/memberImage.css.ts diff --git a/src/assets/defaultProfile.png b/src/assets/defaultProfile.png index 76a16709c888923d9abc641e8fbc459263cbebcd..a41a7c27a52897e7052eb35c0b4995787f3412b4 100644 GIT binary patch literal 16739 zcmV)qK$^daP)@~0drDELIAGL9O(c600d`2O+f$vv5yPR_U79(7b!CJYS`ObYthKVJtw)&cec`6^#-@>t7>1EI%H*G&`dJ*CsMcRU0 zZHVByh>+k0pqK7SMyGGPylvb17rWf_WP~lWGI@PPiWm-mp|H8 zUGBEYF3bDvnAYeg1++bI+6%Q6yUGwjgapH(cKa^hI@vuRl`nUO_f9`)6w2SZ2QK^W z*-VHC3HqUS{MoVagF^$&rk~Bm6Jl1Apnuo@wtV31Y-05FtYf~!t^(jW)unfWzJtjY+eaSE*NT8qJl@G5^ z7Jo$Tu@<5x>4BeV1%LGvrV*w!39i}w*o6qf2to#@eaCb;6{al-BBsxDfc6v;#6$}7 zY}RQ<0wa^tFM%%o2}CdrAg6-e|4=w*uudxy=x2AWgWvyhWcQzj(6CG7)F%;!m^LKP zPyaw{|G>0zxFQ&i@bneJo&^1cEVBDYl%E*_@ej1`gi~^!4Pgvr{&f0JAVPqd1PNg3 zzfb|qFhSU!1p3JzJPJ*JDiZab(I|w|@wnCIQCO0|NPCEA|FZ+u`w3x10%iYqdw+@m z)14!jMQDRPu)``DHEc-GAN_q_PJnfYV0OZ0drVvXm(RdtgarwV+#mn@vqAs&`*paz ze)PKi=;-mHug|BxZ?kD|I&FxOo6BKGMoKhhB`k<1SWbeOPJqVNKGe7NqOnEpTYAyb z;YLTd7rh>zy6+P*5W)etTqJ>ANMJ*HN(|DIqmdBfKvsGz=BCA9PHK$!kzp<9O$|&Y zf~6#wsRZD{Z*1#BMO_!J)O4bSzZcqGGmdEJVQ+nlv<<<=Oti8ezG!avSlID)QOFDz~#JV-UNgNT|GXuipkU{3%{aPPLalLTqtWp zL;vZ*pZD~U5Dsiwk&bN}=3@QQG(`@c8Z!0g`u5>!xm789 zKQYdwcIULDXxzJHo|rI6viOtKf*%2H{ScoZAm&lPZ#+i8_!+;}gdiF}A{)xA6?bjU!l!PUr~HN}=M3{3LQDixNzk7LePX&3z#}Hh zh4OY3eo~89_LnOYXkhVgUX_7|w=cj_vELo`VQ()Nz3!E@?v{I5_`YsAN;+l1_sC

rpTEqt$6yi61;b;M(yx4LvCL;7mw`7mj##_ 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 diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index c3dd9f98..75ff16ce 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -1,18 +1,15 @@ import { useState } from 'react'; -import type { CSSProp } from 'styled-components'; -import styled from 'styled-components'; import DefaultMemberImage from '@/assets/defaultProfile.png'; +import { container } from './memberImage.css'; interface MemberImageProps { src: string; - alt: string; width?: number; height?: number; - css?: CSSProp; } -const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => { +const MemberImage = ({ src, width = 48, height = 48 }: MemberImageProps) => { const [isError, setIsError] = useState(false); const handleImageError = () => { @@ -20,23 +17,15 @@ const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProp }; return ( - ); }; export default MemberImage; - -const StyledMemberImage = styled.img` - border: 2px solid ${({ theme }) => theme.colors.primary}; - border-radius: 50%; - background: ${({ theme }) => theme.backgroundColors.default}; - object-fit: cover; - ${({ css }) => css}; -`; diff --git a/src/components/Members/MemberImage/memberImage.css.ts b/src/components/Members/MemberImage/memberImage.css.ts new file mode 100644 index 00000000..d36c252e --- /dev/null +++ b/src/components/Members/MemberImage/memberImage.css.ts @@ -0,0 +1,6 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + borderRadius: '50%', + objectFit: 'cover', +}); From d694368f51af877312ca80b1dea420c3eba12690 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 14:19:05 +0900 Subject: [PATCH 02/28] =?UTF-8?q?refactor:=20memberInfo=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EB=B0=8F=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Members/MemberImage/MemberImage.tsx | 3 +- ...nfo.stories.tsx => MemberInfo.stories.tsx} | 0 .../Members/MembersInfo/MembersInfo.tsx | 55 +++++++------------ .../Members/MembersInfo/memberInfo.css.ts | 24 ++++++++ 4 files changed, 47 insertions(+), 35 deletions(-) rename src/components/Members/MembersInfo/{MyPageInfo.stories.tsx => MemberInfo.stories.tsx} (100%) create mode 100644 src/components/Members/MembersInfo/memberInfo.css.ts diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index 75ff16ce..5dc0e5df 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -1,8 +1,9 @@ import { useState } from 'react'; -import DefaultMemberImage from '@/assets/defaultProfile.png'; import { container } from './memberImage.css'; +import DefaultMemberImage from '@/assets/defaultProfile.png'; + interface MemberImageProps { src: string; width?: number; diff --git a/src/components/Members/MembersInfo/MyPageInfo.stories.tsx b/src/components/Members/MembersInfo/MemberInfo.stories.tsx similarity index 100% rename from src/components/Members/MembersInfo/MyPageInfo.stories.tsx rename to src/components/Members/MembersInfo/MemberInfo.stories.tsx diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index 3387d60e..8b68d45c 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -1,12 +1,12 @@ -import { Button, Heading, Link, theme } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; +import { Link } from 'react-router-dom'; +import { logoutButton, modifyButton, wrapper } from './memberInfo.css'; import MemberImage from '../MemberImage/MemberImage'; -import { SvgIcon } from '@/components/Common'; +import { SvgIcon, Text } from '@/components/Common'; import { PATH } from '@/constants/path'; import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members'; +import { vars } from '@/styles/theme.css'; const MembersInfo = () => { const { data: member } = useMemberQuery(); @@ -23,46 +23,33 @@ const MembersInfo = () => { }; return ( - - + <> + + {/* 디자인 확정 후 spacing 추가 */} +

- - {nickname} 님 - - - - - - - +
+ + {nickname} + + + + +
+ ); }; export default MembersInfo; - -const MembersInfoContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -`; - -const MemberInfoWrapper = styled.div` - display: flex; - align-items: center; -`; - -const MemberModifyLink = styled(Link)` - margin-left: 5px; - transform: translateY(1px); -`; diff --git a/src/components/Members/MembersInfo/memberInfo.css.ts b/src/components/Members/MembersInfo/memberInfo.css.ts new file mode 100644 index 00000000..7771c69f --- /dev/null +++ b/src/components/Members/MembersInfo/memberInfo.css.ts @@ -0,0 +1,24 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const container = style({}); + +export const logoutButton = style({ + float: 'right', +}); + +export const wrapper = style({ + display: 'flex', + alignItems: 'center', +}); + +export const modifyButton = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 17, + height: 17, + marginLeft: 5, + background: vars.colors.icon.default, + borderRadius: '50%', +}); From 06c23259a6e960b3a7dc46f5b1e4678a3a5a9704 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 15:02:35 +0900 Subject: [PATCH 03/28] =?UTF-8?q?feat:=20postCounterBox=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PostCounterBox/PostCounterBox.stories.tsx | 17 ++++++++++ .../Members/PostCounterBox/PostCounterBox.tsx | 34 +++++++++++++++++++ .../PostCounterBox/postCounterBox.css.ts | 26 ++++++++++++++ src/components/Members/index.ts | 1 + 4 files changed, 78 insertions(+) create mode 100644 src/components/Members/PostCounterBox/PostCounterBox.stories.tsx create mode 100644 src/components/Members/PostCounterBox/PostCounterBox.tsx create mode 100644 src/components/Members/PostCounterBox/postCounterBox.css.ts diff --git a/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx b/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx new file mode 100644 index 00000000..60bc8ccd --- /dev/null +++ b/src/components/Members/PostCounterBox/PostCounterBox.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import PostCounterBox from './PostCounterBox'; + +const meta: Meta = { + title: 'members/PostCounterBox', + component: PostCounterBox, + args: { + recipeCount: 5, + reviewCount: 10, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Members/PostCounterBox/PostCounterBox.tsx b/src/components/Members/PostCounterBox/PostCounterBox.tsx new file mode 100644 index 00000000..4de05077 --- /dev/null +++ b/src/components/Members/PostCounterBox/PostCounterBox.tsx @@ -0,0 +1,34 @@ +import { border, box, container } from './postCounterBox.css'; + +import { Text } from '@/components/Common'; + +interface PostCounterBoxProps { + recipeCount: number; + reviewCount: number; +} + +const PostCounterBox = ({ recipeCount, reviewCount }: PostCounterBoxProps) => { + return ( +
+
+ + 작성한 꿀조합 + + + {recipeCount}개 + +
+
+
+ + 작성한 리뷰 + + + {reviewCount}개 + +
+
+ ); +}; + +export default PostCounterBox; diff --git a/src/components/Members/PostCounterBox/postCounterBox.css.ts b/src/components/Members/PostCounterBox/postCounterBox.css.ts new file mode 100644 index 00000000..7bc6e059 --- /dev/null +++ b/src/components/Members/PostCounterBox/postCounterBox.css.ts @@ -0,0 +1,26 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const container = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 335, + height: 80, + + background: vars.colors.border.light, +}); + +export const box = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', +}); + +export const border = style({ + width: 1, + height: 53, + margin: '0 49.5px', + background: vars.colors.border.default, +}); diff --git a/src/components/Members/index.ts b/src/components/Members/index.ts index 2080b25c..7e5608e4 100644 --- a/src/components/Members/index.ts +++ b/src/components/Members/index.ts @@ -4,3 +4,4 @@ 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'; +export { default as PostCounterBox } from './PostCounterBox/PostCounterBox'; From 43247e343444baffafa7c79c98c8c3c35a8c95d8 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 15:22:02 +0900 Subject: [PATCH 04/28] =?UTF-8?q?refactor:=20memberPage=20=EB=A7=88?= =?UTF-8?q?=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/SectionHeader/SectionHeader.tsx | 1 + .../Common/SectionHeader/sectionHeader.css.ts | 1 - src/components/Common/index.ts | 1 + .../PostCounterBox/postCounterBox.css.ts | 2 +- src/pages/MemberPage.tsx | 40 ------------------- src/pages/MemberPage/MemberPage.tsx | 37 +++++++++++++++++ src/pages/MemberPage/memberPage.css.ts | 5 +++ src/router/index.tsx | 2 +- 8 files changed, 46 insertions(+), 43 deletions(-) delete mode 100644 src/pages/MemberPage.tsx create mode 100644 src/pages/MemberPage/MemberPage.tsx create mode 100644 src/pages/MemberPage/memberPage.css.ts diff --git a/src/components/Common/SectionHeader/SectionHeader.tsx b/src/components/Common/SectionHeader/SectionHeader.tsx index 7c65dfb1..1dd218c2 100644 --- a/src/components/Common/SectionHeader/SectionHeader.tsx +++ b/src/components/Common/SectionHeader/SectionHeader.tsx @@ -13,6 +13,7 @@ interface SectionHeaderProps { const SectionHeader = ({ name, link, state }: SectionHeaderProps) => { return (
+ {/* Heading 컴포넌트로 교체 weight bold */}

{name}

{link && ( diff --git a/src/components/Common/SectionHeader/sectionHeader.css.ts b/src/components/Common/SectionHeader/sectionHeader.css.ts index 4c53627a..bb1af404 100644 --- a/src/components/Common/SectionHeader/sectionHeader.css.ts +++ b/src/components/Common/SectionHeader/sectionHeader.css.ts @@ -3,7 +3,6 @@ import { style } from '@vanilla-extract/css'; export const container = style({ display: 'flex', justifyContent: 'space-between', - padding: '0 20px', }); export const title = style({ diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index ef1d5042..7e440353 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -25,3 +25,4 @@ export { default as PageHeader } from './PageHeader/PageHeader'; export { default as Badge } from './Badge/Badge'; export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; +export { default as TopBar } from './TopBar/TopBar'; diff --git a/src/components/Members/PostCounterBox/postCounterBox.css.ts b/src/components/Members/PostCounterBox/postCounterBox.css.ts index 7bc6e059..4af88f30 100644 --- a/src/components/Members/PostCounterBox/postCounterBox.css.ts +++ b/src/components/Members/PostCounterBox/postCounterBox.css.ts @@ -5,7 +5,7 @@ export const container = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', - width: 335, + width: '100%', height: 80, background: vars.colors.border.light, diff --git a/src/pages/MemberPage.tsx b/src/pages/MemberPage.tsx deleted file mode 100644 index 58aa6d8e..00000000 --- a/src/pages/MemberPage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Spacing } from '@fun-eat/design-system'; -import { useQueryErrorResetBoundary } from '@tanstack/react-query'; -import { Suspense } from 'react'; -import styled from 'styled-components'; - -import { ErrorBoundary, ErrorComponent, Loading, NavigableSectionTitle } from '@/components/Common'; -import { MembersInfo, MemberReviewList, MemberRecipeList } from '@/components/Members'; -import { PATH } from '@/constants/path'; - -export const MemberPage = () => { - const { reset } = useQueryErrorResetBoundary(); - - return ( - - }> - - - - - - - }> - - - - - - - }> - - - - - - ); -}; - -const MemberPageContainer = styled.div` - padding: 20px 20px 0; -`; diff --git a/src/pages/MemberPage/MemberPage.tsx b/src/pages/MemberPage/MemberPage.tsx new file mode 100644 index 00000000..eeac7a0b --- /dev/null +++ b/src/pages/MemberPage/MemberPage.tsx @@ -0,0 +1,37 @@ +import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { Suspense } from 'react'; + +import { container } from './memberPage.css'; + +import { ErrorBoundary, ErrorComponent, Loading, SectionHeader, TopBar } from '@/components/Common'; +import { MembersInfo, PostCounterBox } from '@/components/Members'; +import { PATH } from '@/constants/path'; + +export const MemberPage = () => { + const { reset } = useQueryErrorResetBoundary(); + + return ( +
+ + + + + +
+ + }> + + +
+ + +
+ + +
+ + }>{/* 여기에 저장한 꿀조합 컴포넌트 */} + +
+ ); +}; diff --git a/src/pages/MemberPage/memberPage.css.ts b/src/pages/MemberPage/memberPage.css.ts new file mode 100644 index 00000000..4f39f626 --- /dev/null +++ b/src/pages/MemberPage/memberPage.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + padding: '0 20px', +}); diff --git a/src/router/index.tsx b/src/router/index.tsx index 8f0e1be1..daf764ee 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -21,7 +21,7 @@ const router = createBrowserRouter([ { path: PATH.MEMBER, async lazy() { - const { MemberPage } = await import(/* webpackChunkName: "MemberPage" */ '@/pages/MemberPage'); + const { MemberPage } = await import(/* webpackChunkName: "MemberPage" */ '@/pages/MemberPage/MemberPage'); return { Component: MemberPage }; }, }, From 380db1a88a7b24e65e8d1eb20e8919264053d954 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 16:33:27 +0900 Subject: [PATCH 05/28] =?UTF-8?q?feat:=20memberPostPage=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/index.ts | 5 +++ src/pages/MemberPostPage/MemberPostPage.tsx | 44 +++++++++++++++++++ .../MemberPostPage/memberPostPage.css.ts | 5 +++ src/router/index.tsx | 17 ++----- src/types/common.ts | 1 + 5 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 src/pages/MemberPostPage/MemberPostPage.tsx create mode 100644 src/pages/MemberPostPage/memberPostPage.css.ts diff --git a/src/constants/index.ts b/src/constants/index.ts index f88997f9..56c1505a 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -59,6 +59,11 @@ export const CATEGORY_TYPE = { STORE: 'store', } as const; +export const POST_TYPE = { + REVIEW: 'review', + RECIPE: 'recipe', +} as const; + export const IMAGE_MAX_SIZE = 5 * 1024 * 1024; export const ENVIRONMENT = window.location.href.includes('dev') diff --git a/src/pages/MemberPostPage/MemberPostPage.tsx b/src/pages/MemberPostPage/MemberPostPage.tsx new file mode 100644 index 00000000..14b5c3f7 --- /dev/null +++ b/src/pages/MemberPostPage/MemberPostPage.tsx @@ -0,0 +1,44 @@ +import { useQueryErrorResetBoundary } from '@tanstack/react-query'; +import { Suspense, useRef } from 'react'; +import { useLocation } from 'react-router-dom'; + +import { container } from './memberPostPage.css'; + +import { ErrorBoundary, ErrorComponent, Loading, TabMenu, TopBar } from '@/components/Common'; +import { MemberRecipeList, MemberReviewList } from '@/components/Members'; +import { POST_TYPE } from '@/constants'; +import { useTabMenu } from '@/hooks/common'; +import type { MemberPostVariant, Tab } from '@/types/common'; + + +const TAB_MENUS: Tab[] = [ + { value: POST_TYPE.RECIPE, label: '꿀조합' }, + { value: POST_TYPE.REVIEW, label: '리뷰' }, +]; + +export const MemberPostPage = () => { + const { state: prevCategory } = useLocation(); + const { selectedTabMenu, handleTabMenuClick } = useTabMenu(prevCategory ?? POST_TYPE.RECIPE); + const { reset } = useQueryErrorResetBoundary(); + const memberRecipeRef = useRef(null); + + return ( + <> + + + + + + +
+ + }> + {selectedTabMenu === TAB_MENUS[0].value ? : } + + + {/* 스크롤 버튼 문제 해결 후 주석 해제 */} + {/* */} +
+ + ); +}; diff --git a/src/pages/MemberPostPage/memberPostPage.css.ts b/src/pages/MemberPostPage/memberPostPage.css.ts new file mode 100644 index 00000000..4f39f626 --- /dev/null +++ b/src/pages/MemberPostPage/memberPostPage.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + padding: '0 20px', +}); diff --git a/src/router/index.tsx b/src/router/index.tsx index daf764ee..50428a6e 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -35,21 +35,12 @@ const router = createBrowserRouter([ }, }, { - path: `${PATH.MEMBER}/review`, + path: `${PATH.MEMBER}/post`, async lazy() { - const { MemberReviewPage } = await import( - /* webpackChunkName: "MemberReviewPage" */ '@/pages/MemberReviewPage' + const { MemberPostPage } = await import( + /* webpackChunkName: "MemberPostPage" */ '@/pages/MemberPostPage/MemberPostPage' ); - return { Component: MemberReviewPage }; - }, - }, - { - path: `${PATH.MEMBER}/recipe`, - async lazy() { - const { MemberRecipePage } = await import( - /* webpackChunkName: "MemberRecipePage" */ '@/pages/MemberRecipePage' - ); - return { Component: MemberRecipePage }; + return { Component: MemberPostPage }; }, }, ], diff --git a/src/types/common.ts b/src/types/common.ts index fe8fbdf7..17fadf36 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -11,6 +11,7 @@ import type { import type { PATH } from '@/constants/path'; export type CategoryVariant = 'food' | 'store'; +export type MemberPostVariant = 'recipe' | 'review'; export type Food = (typeof CATEGORY_TYPE)['FOOD']; export type Store = (typeof CATEGORY_TYPE)['STORE']; From c505f7b307d352bd01521a71c3867648e449b37f Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 17:29:29 +0900 Subject: [PATCH 06/28] =?UTF-8?q?feat:=20starRating=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/StarRating/StarRating.stories.tsx | 17 +++++++++ .../Common/StarRating/StarRating.tsx | 37 +++++++++++++++++++ .../Common/StarRating/starRating.css.ts | 23 ++++++++++++ src/components/Common/index.ts | 1 + .../Review/ReviewItem/ReviewItem.tsx | 35 ++---------------- .../Review/ReviewItem/reviewItem.css.ts | 22 ----------- 6 files changed, 81 insertions(+), 54 deletions(-) create mode 100644 src/components/Common/StarRating/StarRating.stories.tsx create mode 100644 src/components/Common/StarRating/StarRating.tsx create mode 100644 src/components/Common/StarRating/starRating.css.ts diff --git a/src/components/Common/StarRating/StarRating.stories.tsx b/src/components/Common/StarRating/StarRating.stories.tsx new file mode 100644 index 00000000..cfe92333 --- /dev/null +++ b/src/components/Common/StarRating/StarRating.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import StarRating from './StarRating'; + +const meta: Meta = { + title: 'common/StarRating', + component: StarRating, + args: { + rating: 4.5, + createdAt: '2021-09-01T00:00:00.000Z', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Common/StarRating/StarRating.tsx b/src/components/Common/StarRating/StarRating.tsx new file mode 100644 index 00000000..c773bf2c --- /dev/null +++ b/src/components/Common/StarRating/StarRating.tsx @@ -0,0 +1,37 @@ +import { date, ratingInfo, ratingNumber, ratingWrapper } from './starRating.css'; +import SvgIcon from '../Svg/SvgIcon'; +import Text from '../Text/Text'; + +import { vars } from '@/styles/theme.css'; +import { getRelativeDate } from '@/utils/date'; + +interface StarRatingProps { + rating: number; + createdAt: string; +} + +const StarRating = ({ rating, createdAt }: StarRatingProps) => { + return ( +
+
+ + {rating.toFixed(1)} + + {Array.from({ length: 5 }, (_, index) => ( + + ))} +
+ + {getRelativeDate(createdAt)} + +
+ ); +}; + +export default StarRating; diff --git a/src/components/Common/StarRating/starRating.css.ts b/src/components/Common/StarRating/starRating.css.ts new file mode 100644 index 00000000..17692480 --- /dev/null +++ b/src/components/Common/StarRating/starRating.css.ts @@ -0,0 +1,23 @@ +import { vars } from '@/styles/theme.css'; +import { style } from '@vanilla-extract/css'; + +export const ratingWrapper = style({ + display: 'flex', + alignItems: 'center', + gap: 8, +}); + +export const ratingInfo = style({ + display: 'flex', + alignItems: 'center', + gap: 4, +}); + +export const ratingNumber = style({ + paddingTop: 4, + color: vars.colors.gray5, +}); + +export const date = style({ + paddingTop: 2, +}); diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 7e440353..531b38a4 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -26,3 +26,4 @@ export { default as Badge } from './Badge/Badge'; export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; export { default as TopBar } from './TopBar/TopBar'; +export { default as StarRating } from './StarRating/StarRating'; diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx index 789778ed..3f4c0305 100644 --- a/src/components/Review/ReviewItem/ReviewItem.tsx +++ b/src/components/Review/ReviewItem/ReviewItem.tsx @@ -1,22 +1,11 @@ import { memo } from 'react'; -import { - date, - favoriteWrapper, - memberImage, - memberInfo, - ratingInfo, - ratingNumber, - ratingWrapper, - reviewContent, - reviewImage, -} from './reviewItem.css'; +import { favoriteWrapper, memberImage, memberInfo, reviewContent, reviewImage } from './reviewItem.css'; import ReviewFavoriteButton from '../ReviewFavoriteButton/ReviewFavoriteButton'; -import { Badge, SvgIcon, TagList, Text } from '@/components/Common'; +import { Badge, StarRating, TagList, Text } from '@/components/Common'; import { vars } from '@/styles/theme.css'; import type { Review } from '@/types/review'; -import { getRelativeDate } from '@/utils/date'; interface ReviewItemProps { productId: number; @@ -44,25 +33,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
-
-
- - {rating.toFixed(1)} - - {Array.from({ length: 5 }, (_, index) => ( - - ))} -
- - {getRelativeDate(createdAt)} - -
+
diff --git a/src/components/Review/ReviewItem/reviewItem.css.ts b/src/components/Review/ReviewItem/reviewItem.css.ts index 3d3751d3..debb3153 100644 --- a/src/components/Review/ReviewItem/reviewItem.css.ts +++ b/src/components/Review/ReviewItem/reviewItem.css.ts @@ -1,4 +1,3 @@ -import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const memberInfo = style({ @@ -16,27 +15,6 @@ export const favoriteWrapper = style({ marginLeft: 'auto', }); -export const ratingWrapper = style({ - display: 'flex', - alignItems: 'center', - gap: 8, -}); - -export const ratingInfo = style({ - display: 'flex', - alignItems: 'center', - gap: 4, -}); - -export const ratingNumber = style({ - paddingTop: 4, - color: vars.colors.gray5, -}); - -export const date = style({ - paddingTop: 2, -}); - export const reviewImage = style({ borderRadius: 6, objectFit: 'cover', From cb12916073e8fc0fdc5a55c9a8472612c2792746 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 17:53:17 +0900 Subject: [PATCH 07/28] =?UTF-8?q?refactor:=20memberReviewItem=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=9D=B4=EA=B7=B8?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EB=B0=8F=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MemberReviewItem.stories.tsx | 22 +++- .../MemberReviewItem/MemberReviewItem.tsx | 114 ++++++------------ .../MemberReviewItem/memberReviewItem.css.ts | 13 ++ src/mocks/data/memberReviews.json | 31 ++++- src/types/review.ts | 5 +- 5 files changed, 96 insertions(+), 89 deletions(-) create mode 100644 src/components/Members/MemberReviewItem/memberReviewItem.css.ts diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx index 3856648f..b86b4c5c 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx +++ b/src/components/Members/MemberReviewItem/MemberReviewItem.stories.tsx @@ -8,15 +8,27 @@ const meta: Meta = { args: { review: { reviewId: 1, - productId: 5, - productName: '구운감자슬림명란마요', + productId: 1, + productName: '새우깡', + image: + 'https://i.namu.wiki/i/9wnvUaEa1EkDqG-M0Pbwfdf19FJQQXV_-bnlU2SYaNcG05y2wbabiIrfrGES1M4xSgDjY39RwOvLNggDd3Huuw.webp', content: '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다', rating: 4.0, - favoriteCount: 1256, - categoryType: 'food', + createdAt: '2023-08-09T10:10:10', + tags: [ + { + id: 5, + name: '단짠단짠', + tagType: 'TASTE', + }, + { + id: 1, + name: '망고망고', + tagType: 'TASTE', + }, + ], }, - isPreview: true, }, }; diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx index 4320f967..c0802451 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx +++ b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx @@ -1,24 +1,25 @@ -import { useTheme, Spacing, Text, Button, useToastActionContext } from '@fun-eat/design-system'; +import { useToastActionContext } from '@fun-eat/design-system'; import type { MouseEventHandler } from 'react'; -import styled from 'styled-components'; +import { Link } from 'react-router-dom'; -import { SvgIcon } from '@/components/Common'; +import { reviewImage, titleWrapper } from './memberReviewItem.css'; + +import { StarRating, SvgIcon, TagList, Text } from '@/components/Common'; +import { PATH } from '@/constants/path'; import { useDeleteReview } from '@/hooks/queries/members'; +import { vars } from '@/styles/theme.css'; import type { MemberReview } from '@/types/review'; interface MemberReviewItemProps { review: MemberReview; - isPreview: boolean; } -const MemberReviewItem = ({ review, isPreview }: MemberReviewItemProps) => { - const theme = useTheme(); - +const MemberReviewItem = ({ review }: MemberReviewItemProps) => { const { mutate } = useDeleteReview(); const { toast } = useToastActionContext(); - const { reviewId, productName, content, rating, favoriteCount } = review; + const { reviewId, productId, productName, rating, createdAt, image, content, tags } = review; const handleReviewDelete: MouseEventHandler = (e) => { e.preventDefault(); @@ -44,79 +45,36 @@ const MemberReviewItem = ({ review, isPreview }: MemberReviewItemProps) => { }; return ( - - - - {productName} - - {!isPreview && ( - - )} - - - {content} - - - - - - - {favoriteCount} + <> +
+ + + {productName} + - - - - - {rating.toFixed(1)} + + +
+
+ + +
+ + {image && 작성한 리뷰} +
+ + + {content} + +
+ + + ); }; export default MemberReviewItem; - -const ReviewRankingItemContainer = styled.div` - display: flex; - flex-direction: column; - gap: 4px; - padding: 12px 0; - border-bottom: ${({ theme }) => `1px solid ${theme.borderColors.disabled}`}; -`; - -const ProductNameIconWrapper = styled.div` - display: flex; - justify-content: space-between; -`; - -const ReviewText = styled(Text)` - display: -webkit-inline-box; - text-overflow: ellipsis; - overflow: hidden; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -`; - -const FavoriteStarWrapper = styled.div` - display: flex; - gap: 4px; -`; - -const FavoriteIconWrapper = styled.div` - display: flex; - gap: 4px; - align-items: center; -`; - -const RatingIconWrapper = styled.div` - display: flex; - gap: 2px; - align-items: center; - - & > svg { - padding-bottom: 2px; - } -`; diff --git a/src/components/Members/MemberReviewItem/memberReviewItem.css.ts b/src/components/Members/MemberReviewItem/memberReviewItem.css.ts new file mode 100644 index 00000000..efed1a14 --- /dev/null +++ b/src/components/Members/MemberReviewItem/memberReviewItem.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; + +export const titleWrapper = style({ + display: 'flex', + justifyContent: 'space-between', +}); + +export const reviewImage = style({ + width: 164, + height: 90, + borderRadius: 6, + objectFit: 'cover', +}); diff --git a/src/mocks/data/memberReviews.json b/src/mocks/data/memberReviews.json index 15356531..8ab56198 100644 --- a/src/mocks/data/memberReviews.json +++ b/src/mocks/data/memberReviews.json @@ -12,10 +12,22 @@ "reviewId": 1, "productId": 1, "productName": "구운감자슬림명란마요", + "image": "https://i.namu.wiki/i/9wnvUaEa1EkDqG-M0Pbwfdf19FJQQXV_-bnlU2SYaNcG05y2wbabiIrfrGES1M4xSgDjY39RwOvLNggDd3Huuw.webp", "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다", "rating": 4.0, - "favoriteCount": 1256, - "categoryType": "food" + "createdAt": "2023-08-09T10:10:10", + "tags": [ + { + "id": 5, + "name": "단짠단짠", + "tagType": "TASTE" + }, + { + "id": 1, + "name": "망고망고", + "tagType": "TASTE" + } + ] }, { "reviewId": 1, @@ -23,8 +35,19 @@ "productName": "하얀짜파게티큰사발", "content": "하얀 짜파게티라니 말이 안된다고 생각했었죠. 실제로 맛을 보니까 까만 짜파게티랑 맛이 뭔가 다를게 없네요.", "rating": 4.4, - "favoriteCount": 870, - "categoryType": "food" + "createdAt": "2023-08-09T10:10:10", + "tags": [ + { + "id": 5, + "name": "단짠단짠", + "tagType": "TASTE" + }, + { + "id": 1, + "name": "망고망고", + "tagType": "TASTE" + } + ] } ] } diff --git a/src/types/review.ts b/src/types/review.ts index dd0273dd..d975b484 100644 --- a/src/types/review.ts +++ b/src/types/review.ts @@ -26,8 +26,9 @@ export interface MemberReview { productName: string; content: string; rating: number; - favoriteCount: number; - categoryType: CategoryVariant; + createdAt: string; + tags: Tag[]; + image?: string; } export interface ReviewTag { From 6a531fe93ea805c1a6708b761a6d70d1b0a6d7b0 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:03:05 +0900 Subject: [PATCH 08/28] =?UTF-8?q?refactor:=20memberReviewList=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MemberReviewList/MemberReviewList.tsx | 87 ++++++------------- 1 file changed, 25 insertions(+), 62 deletions(-) diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx index b622d9f6..fcbe319c 100644 --- a/src/components/Members/MemberReviewList/MemberReviewList.tsx +++ b/src/components/Members/MemberReviewList/MemberReviewList.tsx @@ -1,11 +1,7 @@ -import { Link, Spacing, Text, theme } from '@fun-eat/design-system'; import { useRef } from 'react'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; import MemberReviewItem from '../MemberReviewItem/MemberReviewItem'; -import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteMemberReviewQuery } from '@/hooks/queries/members'; import useDisplaySlice from '@/utils/displaySlice'; @@ -22,70 +18,37 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => { useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); - const totalReviewCount = data.pages[0].page.totalDataCount; - - if (totalReviewCount === 0) { - return ( - - - 앗, 작성한 리뷰가 없네요 🥲 - - - - 리뷰 작성하러 가기 - - - ); - } + // 추후 디자인 추가에 따라 변경 예정 + // if (totalReviewCount === 0) { + // return ( + // + // + // 앗, 작성한 리뷰가 없네요 🥲 + // + // + // + // 리뷰 작성하러 가기 + // + // + // ); + // } return ( - - {!isPreview && ( - - 총 {totalReviewCount}개의 리뷰를 남겼어요! - - )} - - +
+
+
    {reviewsToDisplay.map((review) => ( -
  • - - - -
    • + <> +
  • + +
    • +
    + ))} - +
- +
); }; export default MemberReviewList; - -const MemberReviewListContainer = styled.section` - display: flex; - flex-direction: column; -`; - -const MemberReviewListWrapper = styled.ul` - display: flex; - flex-direction: column; - gap: 20px; -`; - -const TotalReviewCount = styled(Text)` - text-align: right; -`; - -const ErrorContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 20px; -`; - -const ReviewLink = styled(Link)` - padding: 12px 12px; - border: 1px solid ${({ theme }) => theme.colors.gray4}; - border-radius: 8px; -`; From acafa0f6a0469b45f9243fc5cfb9c92dc7fd8612 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:41:10 +0900 Subject: [PATCH 09/28] =?UTF-8?q?refactor:=20=EC=84=B8=EB=B6=80=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/TopBar/TopBar.tsx | 9 +++++++-- src/components/Common/TopBar/topBar.css.ts | 1 - 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx index 5197fa3b..9dbc1f95 100644 --- a/src/components/Common/TopBar/TopBar.tsx +++ b/src/components/Common/TopBar/TopBar.tsx @@ -8,7 +8,6 @@ import LogoImage from '@/assets/logo.svg'; import { PATH } from '@/constants/path'; import { vars } from '@/styles/theme.css'; - interface TopBarProps { children?: React.ReactNode; title?: string; @@ -31,7 +30,13 @@ const Logo = () => { const BackLink = ({ state }: TopBarProps) => { return ( - + ); }; diff --git a/src/components/Common/TopBar/topBar.css.ts b/src/components/Common/TopBar/topBar.css.ts index fcca96df..81033976 100644 --- a/src/components/Common/TopBar/topBar.css.ts +++ b/src/components/Common/TopBar/topBar.css.ts @@ -11,7 +11,6 @@ export const container = style({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: '0 20px', backgroundColor: vars.colors.white, transform: 'translateX(-50%)', zIndex: 1001, From 279e846dbbb8c2ce9f2fa488301c3033f2519426 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:42:44 +0900 Subject: [PATCH 10/28] =?UTF-8?q?refactor:=20memberRecipeList=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MemberRecipeList/MemberRecipeList.tsx | 91 +++++-------------- .../MemberRecipeList/memberRecipeList.css.ts | 9 ++ src/mocks/data/memberRecipes.json | 66 +++++--------- src/types/recipe.ts | 2 - src/types/response.ts | 4 +- 5 files changed, 58 insertions(+), 114 deletions(-) create mode 100644 src/components/Members/MemberRecipeList/memberRecipeList.css.ts diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index 445dd9e3..ea839642 100644 --- a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx +++ b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx @@ -1,90 +1,45 @@ -import { Link, Spacing, Text, theme } from '@fun-eat/design-system'; import { useRef } from 'react'; -import { Link as RouterLink } from 'react-router-dom'; -import styled from 'styled-components'; -import { PATH } from '@/constants/path'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members'; -import useDisplaySlice from '@/utils/displaySlice'; +import { DefaultRecipeItem } from '@/components/Recipe'; +import { container } from './memberRecipeList.css'; -interface MemberRecipeListProps { - isPreview?: boolean; -} - -const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => { +const MemberRecipeList = () => { const scrollRef = useRef(null); const { fetchNextPage, hasNextPage, data } = useInfiniteMemberRecipeQuery(); const memberRecipes = data?.pages.flatMap((page) => page.recipes); - const recipeToDisplay = useDisplaySlice(isPreview, memberRecipes); useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); - const totalRecipeCount = data?.pages[0].page.totalDataCount; - - if (totalRecipeCount === 0) { - return ( - - - 앗, 작성한 꿀조합이 없네요 🥲 - - - - 꿀조합 작성하러 가기 - - - ); - } + // 추후 디자인 추가에 따라 변경 예정 + // if (totalRecipeCount === 0) { + // return ( + // + // + // 앗, 작성한 꿀조합이 없네요 🥲 + // + // + // + // 꿀조합 작성하러 가기 + // + // + // ); + // } return ( - - {!isPreview && ( - - 총 {totalRecipeCount}개의 꿀조합을 남겼어요! - - )} - - - {recipeToDisplay?.map((recipe) => ( + <> +
    + {memberRecipes.map((recipe) => (
  • - - {/* */} - +
    • ))} - +
- + ); }; export default MemberRecipeList; - -const MemberRecipeListContainer = styled.section` - display: flex; - flex-direction: column; -`; - -const MemberRecipeListWrapper = styled.ul` - display: flex; - flex-direction: column; - gap: 20px; -`; - -const TotalRecipeCount = styled(Text)` - text-align: right; -`; - -const ErrorContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 20px; -`; - -const RecipeLink = styled(Link)` - padding: 12px 12px; - border: 1px solid ${({ theme }) => theme.colors.gray4}; - border-radius: 8px; -`; diff --git a/src/components/Members/MemberRecipeList/memberRecipeList.css.ts b/src/components/Members/MemberRecipeList/memberRecipeList.css.ts new file mode 100644 index 00000000..5de3d059 --- /dev/null +++ b/src/components/Members/MemberRecipeList/memberRecipeList.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + display: 'grid', + gridTemplateColumns: 'repeat(2, 1fr)', + gridAutoRows: 'auto', + columnGap: 10, + rowGap: 20, +}); diff --git a/src/mocks/data/memberRecipes.json b/src/mocks/data/memberRecipes.json index e60906c3..8f5c1912 100644 --- a/src/mocks/data/memberRecipes.json +++ b/src/mocks/data/memberRecipes.json @@ -10,54 +10,36 @@ "recipes": [ { "id": 1, - "title": "어쩌고저쩌고정식", - "createdAt": "2023-08-13T19:59:59.860393", - "image": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34", - "favoriteCount": 1, - "products": [ - { - "id": 5, - "name": "불닭" - }, - { - "id": 6, - "name": "참치삼김" - } - ] + "image": "https://image.funeat.site/prod/0e3ba79c-578b-42c5-b951-fb0f50ce57cdIMG_8613.webp", + "title": "초특급불닭콘치즈", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, + "favorite": false, + "createdAt": "2023-08-09T10:10:10" }, { "id": 2, - "title": "어쩌고저쩌고정식", - "createdAt": "2023-08-13T19:59:59.860393", - "image": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34", - "favoriteCount": 1, - "products": [ - { - "id": 5, - "name": "불닭" - }, - { - "id": 6, - "name": "참치삼김" - } - ] + "image": "https://image.funeat.site/prod/1ff85060-4ce9-4c3f-9044-87cbb993716caaa.webp", + "title": "초특급불닭콘치즈", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, + "favorite": true, + "createdAt": "2023-08-09T10:10:10" }, { "id": 3, - "title": "어쩌고저쩌고정식", - "createdAt": "2023-08-13T19:59:59.860393", - "image": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34", - "favoriteCount": 1, - "products": [ - { - "id": 5, - "name": "불닭" - }, - { - "id": 6, - "name": "참치삼김" - } - ] + "image": "https://image.funeat.site/prod/240a51fa-9fad-4199-807b-891ccfa59f8aIMG_6598.webp", + "title": "초특급불닭콘치즈", + "author": { + "nickname": "1번 글", + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed" + }, + "favorite": true, + "createdAt": "2023-08-09T10:10:10" } ] } diff --git a/src/types/recipe.ts b/src/types/recipe.ts index 1e5179cd..40f48852 100644 --- a/src/types/recipe.ts +++ b/src/types/recipe.ts @@ -28,8 +28,6 @@ export interface Recipe { products?: RecipeProduct[]; } -export type MemberRecipe = Recipe; - export interface RecipeFavoriteRequestBody { favorite: boolean; } diff --git a/src/types/response.ts b/src/types/response.ts index 52b455de..cc253694 100644 --- a/src/types/response.ts +++ b/src/types/response.ts @@ -1,6 +1,6 @@ import type { Product } from './product'; import type { ProductRanking, ReviewRanking } from './ranking'; -import type { Comment, MemberRecipe, Recipe } from './recipe'; +import type { Comment, Recipe } from './recipe'; import type { MemberReview, Review } from './review'; import type { ProductSearchResult, ProductSearchAutocomplete } from './search'; @@ -49,7 +49,7 @@ export interface MemberReviewResponse { export interface MemberRecipeResponse { page: Page; - recipes: MemberRecipe[]; + recipes: Recipe[]; } export interface ReviewRankingResponse { From a284eef0a572f1e5555f31c3caf4decfd1a0b26d Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:42:57 +0900 Subject: [PATCH 11/28] =?UTF-8?q?refactor:=20=EC=84=B8=EB=B6=80=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Members/MemberReviewList/MemberReviewList.tsx | 5 ++--- src/pages/MemberPostPage/MemberPostPage.tsx | 6 ++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx index fcbe319c..30080e33 100644 --- a/src/components/Members/MemberReviewList/MemberReviewList.tsx +++ b/src/components/Members/MemberReviewList/MemberReviewList.tsx @@ -34,8 +34,7 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => { // } return ( -
-
+ <>
    {reviewsToDisplay.map((review) => ( <> @@ -47,7 +46,7 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => { ))}
-
+ ); }; diff --git a/src/pages/MemberPostPage/MemberPostPage.tsx b/src/pages/MemberPostPage/MemberPostPage.tsx index 14b5c3f7..5ec65e98 100644 --- a/src/pages/MemberPostPage/MemberPostPage.tsx +++ b/src/pages/MemberPostPage/MemberPostPage.tsx @@ -2,15 +2,12 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query'; import { Suspense, useRef } from 'react'; import { useLocation } from 'react-router-dom'; -import { container } from './memberPostPage.css'; - import { ErrorBoundary, ErrorComponent, Loading, TabMenu, TopBar } from '@/components/Common'; import { MemberRecipeList, MemberReviewList } from '@/components/Members'; import { POST_TYPE } from '@/constants'; import { useTabMenu } from '@/hooks/common'; import type { MemberPostVariant, Tab } from '@/types/common'; - const TAB_MENUS: Tab[] = [ { value: POST_TYPE.RECIPE, label: '꿀조합' }, { value: POST_TYPE.REVIEW, label: '리뷰' }, @@ -30,9 +27,10 @@ export const MemberPostPage = () => { -
+
}> +
{selectedTabMenu === TAB_MENUS[0].value ? : } From d76cc7e12fd0d146fa42ff6114999ac0aa0353f4 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:44:40 +0900 Subject: [PATCH 12/28] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20css=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MemberPostPage/memberPostPage.css.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 src/pages/MemberPostPage/memberPostPage.css.ts diff --git a/src/pages/MemberPostPage/memberPostPage.css.ts b/src/pages/MemberPostPage/memberPostPage.css.ts deleted file mode 100644 index 4f39f626..00000000 --- a/src/pages/MemberPostPage/memberPostPage.css.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const container = style({ - padding: '0 20px', -}); From b079f3553616524c4a98c0a6ac597ff17c30711a Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:46:42 +0900 Subject: [PATCH 13/28] =?UTF-8?q?refactor:=20=ED=99=94=EC=82=B4=ED=91=9C?= =?UTF-8?q?=20svg=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/SectionHeader/SectionHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/SectionHeader/SectionHeader.tsx b/src/components/Common/SectionHeader/SectionHeader.tsx index 1dd218c2..fdcc9407 100644 --- a/src/components/Common/SectionHeader/SectionHeader.tsx +++ b/src/components/Common/SectionHeader/SectionHeader.tsx @@ -17,7 +17,7 @@ const SectionHeader = ({ name, link, state }: SectionHeaderProps) => {

{name}

{link && ( - + )}
From 3ac33fcd56ffd881beb671f2396da05ed0995a8e Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 18:49:03 +0900 Subject: [PATCH 14/28] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MemberRecipePage.tsx | 32 -------------------------------- src/pages/MemberReviewPage.tsx | 32 -------------------------------- 2 files changed, 64 deletions(-) delete mode 100644 src/pages/MemberRecipePage.tsx delete mode 100644 src/pages/MemberReviewPage.tsx diff --git a/src/pages/MemberRecipePage.tsx b/src/pages/MemberRecipePage.tsx deleted file mode 100644 index 5bbedf53..00000000 --- a/src/pages/MemberRecipePage.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Spacing } from '@fun-eat/design-system'; -import { useQueryErrorResetBoundary } from '@tanstack/react-query'; -import { Suspense, useRef } from 'react'; -import styled from 'styled-components'; - -import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common'; -import { MemberRecipeList } from '@/components/Members'; - -export const MemberRecipePage = () => { - const { reset } = useQueryErrorResetBoundary(); - const memberRecipeRef = useRef(null); - - return ( - - - - - }> - - - - - - - ); -}; - -const MemberRecipePageContainer = styled.div` - height: 100%; - padding: 20px 20px 0; - overflow-y: auto; -`; diff --git a/src/pages/MemberReviewPage.tsx b/src/pages/MemberReviewPage.tsx deleted file mode 100644 index 08dd6390..00000000 --- a/src/pages/MemberReviewPage.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Spacing } from '@fun-eat/design-system'; -import { useQueryErrorResetBoundary } from '@tanstack/react-query'; -import { Suspense, useRef } from 'react'; -import styled from 'styled-components'; - -import { ErrorBoundary, ErrorComponent, Loading, ScrollButton, SectionTitle } from '@/components/Common'; -import { MemberReviewList } from '@/components/Members'; - -export const MemberReviewPage = () => { - const { reset } = useQueryErrorResetBoundary(); - const memberReviewRef = useRef(null); - - return ( - - - - - }> - - - - - - - ); -}; - -const MemberReviewPageContainer = styled.div` - height: 100%; - padding: 20px 20px 0; - overflow-y: auto; -`; From 338807751452e4415f9bda23d8e6cc7c574d6365 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 19 Apr 2024 23:08:17 +0900 Subject: [PATCH 15/28] =?UTF-8?q?fix:=20webpack=20vanilla=20error=20hash?= =?UTF-8?q?=20=EA=B0=92=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webpack.common.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/webpack.common.js b/webpack.common.js index 68aa7d0b..57fdff09 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -48,5 +48,9 @@ module.exports = { }, ], }, - plugins: [new Dotenv(), new VanillaExtractPlugin(), new MiniCssExtractPlugin()], + plugins: [ + new Dotenv(), + new VanillaExtractPlugin({ identifiers: ({ hash }) => `prefix_${hash}` }), + new MiniCssExtractPlugin(), + ], }; From 9acf263b47183cd811bc65eb626cd091a0ebfdb9 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 20 Apr 2024 14:54:19 +0900 Subject: [PATCH 16/28] =?UTF-8?q?refactor:=20review=20item=20=EC=9D=BC?= =?UTF-8?q?=EB=B6=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MemberRecipeList/MemberRecipeList.tsx | 5 +-- .../MemberReviewItem/MemberReviewItem.tsx | 18 +++------- .../Review/ReviewItem/ReviewItem.tsx | 22 +++---------- .../ReviewItemInfo/ReviewItemInfo.stories.tsx | 30 +++++++++++++++++ .../Review/ReviewItemInfo/ReviewItemInfo.tsx | 33 +++++++++++++++++++ .../ReviewItemInfo/reviewItemInfo.css.ts | 8 +++++ src/components/Review/index.ts | 1 + src/types/review.ts | 2 +- 8 files changed, 84 insertions(+), 35 deletions(-) create mode 100644 src/components/Review/ReviewItemInfo/ReviewItemInfo.stories.tsx create mode 100644 src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx create mode 100644 src/components/Review/ReviewItemInfo/reviewItemInfo.css.ts diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index ea839642..a2a7205e 100644 --- a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx +++ b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx @@ -1,9 +1,10 @@ import { useRef } from 'react'; +import { container } from './memberRecipeList.css'; + +import { DefaultRecipeItem } from '@/components/Recipe'; import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members'; -import { DefaultRecipeItem } from '@/components/Recipe'; -import { container } from './memberRecipeList.css'; const MemberRecipeList = () => { const scrollRef = useRef(null); diff --git a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx index c0802451..52efee7b 100644 --- a/src/components/Members/MemberReviewItem/MemberReviewItem.tsx +++ b/src/components/Members/MemberReviewItem/MemberReviewItem.tsx @@ -2,9 +2,10 @@ import { useToastActionContext } from '@fun-eat/design-system'; import type { MouseEventHandler } from 'react'; import { Link } from 'react-router-dom'; -import { reviewImage, titleWrapper } from './memberReviewItem.css'; +import { titleWrapper } from './memberReviewItem.css'; -import { StarRating, SvgIcon, TagList, Text } from '@/components/Common'; +import { SvgIcon, Text } from '@/components/Common'; +import { ReviewItemInfo } from '@/components/Review'; import { PATH } from '@/constants/path'; import { useDeleteReview } from '@/hooks/queries/members'; import { vars } from '@/styles/theme.css'; @@ -61,18 +62,7 @@ const MemberReviewItem = ({ review }: MemberReviewItemProps) => {
- -
- - {image && 작성한 리뷰} -
- - - {content} - -
- - + ); }; diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx index 3f4c0305..5b74a55b 100644 --- a/src/components/Review/ReviewItem/ReviewItem.tsx +++ b/src/components/Review/ReviewItem/ReviewItem.tsx @@ -1,9 +1,10 @@ import { memo } from 'react'; -import { favoriteWrapper, memberImage, memberInfo, reviewContent, reviewImage } from './reviewItem.css'; +import { favoriteWrapper, memberImage, memberInfo } from './reviewItem.css'; import ReviewFavoriteButton from '../ReviewFavoriteButton/ReviewFavoriteButton'; +import ReviewItemInfo from '../ReviewItemInfo/ReviewItemInfo'; -import { Badge, StarRating, TagList, Text } from '@/components/Common'; +import { Badge, Text } from '@/components/Common'; import { vars } from '@/styles/theme.css'; import type { Review } from '@/types/review'; @@ -30,24 +31,9 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
-
- - -
- - {image && {`${userName}의} - -
- - - {content} - - -
- - +
); }; diff --git a/src/components/Review/ReviewItemInfo/ReviewItemInfo.stories.tsx b/src/components/Review/ReviewItemInfo/ReviewItemInfo.stories.tsx new file mode 100644 index 00000000..132d4718 --- /dev/null +++ b/src/components/Review/ReviewItemInfo/ReviewItemInfo.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import ReviewItemInfo from './ReviewItemInfo'; + +const meta: Meta = { + title: 'review/ReviewItemInfo', + component: ReviewItemInfo, + args: { + rating: 5, + createdAt: '2023-08-03T13:10:06.379389', + image: 'https://cdn.pixabay.com/photo/2016/03/23/15/00/ice-cream-1274894_1280.jpg', + content: + '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데, 맛있어요.', + tags: [ + { + id: 5, + name: '#단짠단짠', + }, + { + id: 1, + name: '#망고망고', + }, + ], + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx b/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx new file mode 100644 index 00000000..c657b0ab --- /dev/null +++ b/src/components/Review/ReviewItemInfo/ReviewItemInfo.tsx @@ -0,0 +1,33 @@ +import { reviewImage } from './reviewItemInfo.css'; + +import { StarRating, TagList, Text } from '@/components/Common'; +import type { Tag } from '@/types/common'; + +interface ReviewItemInfoProps { + rating: number; + createdAt: string; + image: string | null; + content: string; + tags: Tag[]; +} + +const ReviewItemInfo = ({ rating, createdAt, image, content, tags }: ReviewItemInfoProps) => { + return ( + <> + +
+ + {image && 작성한 리뷰} +
+ + + {content} + +
+ + + + ); +}; + +export default ReviewItemInfo; diff --git a/src/components/Review/ReviewItemInfo/reviewItemInfo.css.ts b/src/components/Review/ReviewItemInfo/reviewItemInfo.css.ts new file mode 100644 index 00000000..ab8736f2 --- /dev/null +++ b/src/components/Review/ReviewItemInfo/reviewItemInfo.css.ts @@ -0,0 +1,8 @@ +import { style } from '@vanilla-extract/css'; + +export const reviewImage = style({ + width: 164, + height: 90, + borderRadius: 6, + objectFit: 'cover', +}); diff --git a/src/components/Review/index.ts b/src/components/Review/index.ts index 36ee7662..b49faca7 100644 --- a/src/components/Review/index.ts +++ b/src/components/Review/index.ts @@ -5,3 +5,4 @@ export { default as ReviewRegisterForm } from './ReviewRegisterForm/ReviewRegist export { default as BestReviewItem } from './BestReviewItem/BestReviewItem'; export { default as ReviewFavoriteButton } from './ReviewFavoriteButton/ReviewFavoriteButton'; export { default as ReviewTagSheet } from './ReviewTagSheet/ReviewTagSheet'; +export { default as ReviewItemInfo } from './ReviewItemInfo/ReviewItemInfo'; diff --git a/src/types/review.ts b/src/types/review.ts index d975b484..c3791324 100644 --- a/src/types/review.ts +++ b/src/types/review.ts @@ -28,7 +28,7 @@ export interface MemberReview { rating: number; createdAt: string; tags: Tag[]; - image?: string; + image: string | null; } export interface ReviewTag { From 4761dfbcb718df0a2101656fe2815629c3b8c3a5 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 20 Apr 2024 15:29:35 +0900 Subject: [PATCH 17/28] =?UTF-8?q?feat:=20=EC=9E=91=EC=84=B1=ED=95=9C=20?= =?UTF-8?q?=EA=BF=80=EC=A1=B0=ED=95=A9/=EB=A6=AC=EB=B7=B0=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Members/PostCounterBox/PostCounterBox.tsx | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/Members/PostCounterBox/PostCounterBox.tsx b/src/components/Members/PostCounterBox/PostCounterBox.tsx index 4de05077..d1c60170 100644 --- a/src/components/Members/PostCounterBox/PostCounterBox.tsx +++ b/src/components/Members/PostCounterBox/PostCounterBox.tsx @@ -1,6 +1,8 @@ +import { Link } from 'react-router-dom'; import { border, box, container } from './postCounterBox.css'; import { Text } from '@/components/Common'; +import { PATH } from '@/constants/path'; interface PostCounterBoxProps { recipeCount: number; @@ -10,23 +12,27 @@ interface PostCounterBoxProps { const PostCounterBox = ({ recipeCount, reviewCount }: PostCounterBoxProps) => { return (
-
- - 작성한 꿀조합 - - - {recipeCount}개 - -
+ +
+ + 작성한 꿀조합 + + + {recipeCount}개 + +
+
-
- - 작성한 리뷰 - - - {reviewCount}개 - -
+ +
+ + 작성한 리뷰 + + + {reviewCount}개 + +
+
); }; From 943c4a456305ed261552d6bbfa1c2c9fcfef549e Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 20 Apr 2024 15:59:38 +0900 Subject: [PATCH 18/28] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20css=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MembersInfo/memberInfo.css.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Members/MembersInfo/memberInfo.css.ts b/src/components/Members/MembersInfo/memberInfo.css.ts index 7771c69f..c3d1c270 100644 --- a/src/components/Members/MembersInfo/memberInfo.css.ts +++ b/src/components/Members/MembersInfo/memberInfo.css.ts @@ -1,8 +1,6 @@ import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; -export const container = style({}); - export const logoutButton = style({ float: 'right', }); From bc69785ab0d5815049f4ae133289235fae4d35f7 Mon Sep 17 00:00:00 2001 From: hae-on Date: Sat, 20 Apr 2024 16:30:50 +0900 Subject: [PATCH 19/28] =?UTF-8?q?refactor:=20member=EC=97=90=20recipeCount?= =?UTF-8?q?,=20reviewCount=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MembersInfo/MembersInfo.tsx | 6 +++++- src/mocks/data/members.json | 4 +++- src/mocks/handlers/memberHandlers.ts | 10 ++-------- src/pages/MemberPage/MemberPage.tsx | 5 +---- src/types/member.ts | 2 ++ 5 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index 8b68d45c..e09f3b91 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -7,6 +7,7 @@ import { SvgIcon, Text } from '@/components/Common'; import { PATH } from '@/constants/path'; import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members'; import { vars } from '@/styles/theme.css'; +import PostCounterBox from '../PostCounterBox/PostCounterBox'; const MembersInfo = () => { const { data: member } = useMemberQuery(); @@ -16,7 +17,7 @@ const MembersInfo = () => { return null; } - const { nickname, profileImage } = member; + const { nickname, profileImage, recipeCount, reviewCount } = member; const handleLogout = () => { mutate(); @@ -48,6 +49,9 @@ const MembersInfo = () => {
+
+ + ); }; diff --git a/src/mocks/data/members.json b/src/mocks/data/members.json index 620b6667..57db91ea 100644 --- a/src/mocks/data/members.json +++ b/src/mocks/data/members.json @@ -1,4 +1,6 @@ { "nickname": "펀잇", - "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34" + "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed", + "recipeCount": 3, + "reviewCount": 5 } diff --git a/src/mocks/handlers/memberHandlers.ts b/src/mocks/handlers/memberHandlers.ts index 0ffbf195..a93711b9 100644 --- a/src/mocks/handlers/memberHandlers.ts +++ b/src/mocks/handlers/memberHandlers.ts @@ -1,18 +1,12 @@ import { rest } from 'msw'; +import mockMember from '../data/members.json'; import mockMemberRecipes from '../data/memberRecipes.json'; import mockMemberReviews from '../data/memberReviews.json'; export const memberHandlers = [ rest.get('/api/members', (req, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - nickname: '냐미', - profileImage: - 'https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed', - }) - ); + return res(ctx.status(200), ctx.json(mockMember)); }), rest.put('/api/members', (req, res, ctx) => { diff --git a/src/pages/MemberPage/MemberPage.tsx b/src/pages/MemberPage/MemberPage.tsx index eeac7a0b..0a8061b8 100644 --- a/src/pages/MemberPage/MemberPage.tsx +++ b/src/pages/MemberPage/MemberPage.tsx @@ -4,7 +4,7 @@ import { Suspense } from 'react'; import { container } from './memberPage.css'; import { ErrorBoundary, ErrorComponent, Loading, SectionHeader, TopBar } from '@/components/Common'; -import { MembersInfo, PostCounterBox } from '@/components/Members'; +import { MembersInfo } from '@/components/Members'; import { PATH } from '@/constants/path'; export const MemberPage = () => { @@ -22,9 +22,6 @@ export const MemberPage = () => { }> -
- -
diff --git a/src/types/member.ts b/src/types/member.ts index 83a29457..0ab59704 100644 --- a/src/types/member.ts +++ b/src/types/member.ts @@ -1,6 +1,8 @@ export interface Member { nickname: string; profileImage: string; + reviewCount: number; + recipeCount: number; } export interface MemberRequest { From d1d0ca9e61e4fa9085b8ea7dd5105e5c83cab900 Mon Sep 17 00:00:00 2001 From: hae-on Date: Tue, 23 Apr 2024 22:40:17 +0900 Subject: [PATCH 20/28] =?UTF-8?q?refactor:=20=EC=84=B8=EB=B6=80=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Members/MembersInfo/MembersInfo.tsx | 2 +- .../PostCounterBox/postCounterBox.css.ts | 5 ++-- src/pages/MemberPage/MemberPage.tsx | 28 ++++++++++--------- src/pages/MemberPage/memberPage.css.ts | 4 +++ 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index e09f3b91..ab890e7f 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -30,7 +30,7 @@ const MembersInfo = () => { 로그아웃 - {/* 디자인 확정 후 spacing 추가 */} +
{ const { reset } = useQueryErrorResetBoundary(); return ( -
+ <> -
+
- }> - - -
+
+ }> + + +
- -
- - }>{/* 여기에 저장한 꿀조합 컴포넌트 */} - -
+ +
+ + }>{/* 여기에 저장한 꿀조합 컴포넌트 */} + +
+ ); }; diff --git a/src/pages/MemberPage/memberPage.css.ts b/src/pages/MemberPage/memberPage.css.ts index 4f39f626..d075aafb 100644 --- a/src/pages/MemberPage/memberPage.css.ts +++ b/src/pages/MemberPage/memberPage.css.ts @@ -3,3 +3,7 @@ import { style } from '@vanilla-extract/css'; export const container = style({ padding: '0 20px', }); + +export const main = style({ + paddingTop: 50, +}); From 95f51e7bdd3694c165568272b951df65d714f390 Mon Sep 17 00:00:00 2001 From: hae-on Date: Tue, 23 Apr 2024 23:08:32 +0900 Subject: [PATCH 21/28] =?UTF-8?q?refactor:=20camera2=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 26 ++++++++++++------------- src/components/Common/Svg/SvgSprite.tsx | 26 ++++++++++++------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 39ca6ff3..138ea3ed 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -42,19 +42,19 @@ - - - + + + + + + + + + { - - - + + + + + + + + + Date: Fri, 26 Apr 2024 17:24:20 +0900 Subject: [PATCH 22/28] =?UTF-8?q?chore:=20svg=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B9=B4=EB=A9=9C=20=EC=BC=80=EC=9D=B4=EC=8A=A4=EB=A1=9C=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Svg/SvgSprite.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Common/Svg/SvgSprite.tsx b/src/components/Common/Svg/SvgSprite.tsx index 1e2eac7a..e98fafb7 100644 --- a/src/components/Common/Svg/SvgSprite.tsx +++ b/src/components/Common/Svg/SvgSprite.tsx @@ -41,11 +41,11 @@ const SvgSprite = () => { - + From 3e5de029353e4aa202bddd1e3f7efc620d4f6874 Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 26 Apr 2024 17:24:37 +0900 Subject: [PATCH 23/28] =?UTF-8?q?fix:=20css=20=EC=88=9C=EC=84=9C=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webpack.common.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.common.js b/webpack.common.js index 57fdff09..514313b9 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -36,6 +36,7 @@ module.exports = { }, { test: /\.vanilla\.css$/i, + exclude: /node_modules/, use: [ MiniCssExtractPlugin.loader, { @@ -51,6 +52,6 @@ module.exports = { plugins: [ new Dotenv(), new VanillaExtractPlugin({ identifiers: ({ hash }) => `prefix_${hash}` }), - new MiniCssExtractPlugin(), + new MiniCssExtractPlugin({ ignoreOrder: true }), ], }; From fe87ecd71d94fb02643ec0c8cd48da3db70683eb Mon Sep 17 00:00:00 2001 From: hae-on Date: Fri, 26 Apr 2024 17:26:00 +0900 Subject: [PATCH 24/28] =?UTF-8?q?chore:=20lint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Members/MembersInfo/MembersInfo.tsx | 2 +- src/components/Members/PostCounterBox/PostCounterBox.tsx | 1 + src/components/Recipe/CommentForm/CommentForm.tsx | 2 +- src/mocks/handlers/memberHandlers.ts | 2 +- src/pages/ProductPage/ProductPage.tsx | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Members/MembersInfo/MembersInfo.tsx b/src/components/Members/MembersInfo/MembersInfo.tsx index ab890e7f..2fc7de30 100644 --- a/src/components/Members/MembersInfo/MembersInfo.tsx +++ b/src/components/Members/MembersInfo/MembersInfo.tsx @@ -2,12 +2,12 @@ import { Link } from 'react-router-dom'; import { logoutButton, modifyButton, wrapper } from './memberInfo.css'; import MemberImage from '../MemberImage/MemberImage'; +import PostCounterBox from '../PostCounterBox/PostCounterBox'; import { SvgIcon, Text } from '@/components/Common'; import { PATH } from '@/constants/path'; import { useLogoutMutation, useMemberQuery } from '@/hooks/queries/members'; import { vars } from '@/styles/theme.css'; -import PostCounterBox from '../PostCounterBox/PostCounterBox'; const MembersInfo = () => { const { data: member } = useMemberQuery(); diff --git a/src/components/Members/PostCounterBox/PostCounterBox.tsx b/src/components/Members/PostCounterBox/PostCounterBox.tsx index d1c60170..301bb44d 100644 --- a/src/components/Members/PostCounterBox/PostCounterBox.tsx +++ b/src/components/Members/PostCounterBox/PostCounterBox.tsx @@ -1,4 +1,5 @@ import { Link } from 'react-router-dom'; + import { border, box, container } from './postCounterBox.css'; import { Text } from '@/components/Common'; diff --git a/src/components/Recipe/CommentForm/CommentForm.tsx b/src/components/Recipe/CommentForm/CommentForm.tsx index c0dcf52c..24fc6ffa 100644 --- a/src/components/Recipe/CommentForm/CommentForm.tsx +++ b/src/components/Recipe/CommentForm/CommentForm.tsx @@ -67,7 +67,7 @@ const CommentForm = ({ recipeId, scrollTargetRef }: CommentFormProps) => { return (
- + <>