From 454d226e0b219cdefeb5d5a1d2dafc6fd23a657f Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Mon, 29 Jan 2024 15:02:42 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=95=98?= =?UTF-8?q?=EB=8B=A8=20=EC=97=AC=EB=B0=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/post/[postId]/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/post/[postId]/index.tsx b/src/pages/post/[postId]/index.tsx index 2cee1c8c..a33d88ad 100644 --- a/src/pages/post/[postId]/index.tsx +++ b/src/pages/post/[postId]/index.tsx @@ -210,7 +210,7 @@ const Layout = styled.div` width: 100%; max-width: 1200px; height: fit-content; - margin: 0 auto 15px; + margin: 0 auto 120px; padding-top: 20px; ${({ theme }): SerializedStyles => css` From f737a98b38f72f372686ae95af1435891837fd96 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Mon, 29 Jan 2024 16:02:09 +0900 Subject: [PATCH 2/9] =?UTF-8?q?design:=20Category=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EB=B9=84=EC=9C=A8=20=EC=9C=A0=EC=A7=80=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CategorySlider/index.tsx | 8 +----- src/components/home/CategorySlider/styled.ts | 30 ++++++++++---------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/src/components/home/CategorySlider/index.tsx b/src/components/home/CategorySlider/index.tsx index 9baa8263..f0760ead 100644 --- a/src/components/home/CategorySlider/index.tsx +++ b/src/components/home/CategorySlider/index.tsx @@ -119,13 +119,7 @@ const CategorySlider = (): ReactElement => { sort: SORT_OPTIONS[0].code })}`}> - + {name} diff --git a/src/components/home/CategorySlider/styled.ts b/src/components/home/CategorySlider/styled.ts index 21a74054..fe944d02 100644 --- a/src/components/home/CategorySlider/styled.ts +++ b/src/components/home/CategorySlider/styled.ts @@ -1,7 +1,6 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' import { IconButton } from '@offer-ui/react' -import Image from 'next/image' import Link from 'next/link' import type { CateGoryBoxWrapperProps } from './types' import { theme } from '@styles' @@ -35,6 +34,10 @@ export const CateGoryWrapper = styled.div` ` export const CategoryLink = styled(Link)` + display: flex; + flex-direction: column; + align-items: center; + background: transparent; color: ${({ theme }) => theme.colors.grayScale90}; @@ -139,15 +142,13 @@ export const CategoryItem = styled.button` ` export const CategoryImgWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 108px; height: 86px; cursor: pointer; + ${({ theme }) => css` + padding: 10px; border-radius: ${theme.radius.round12}; background-color: ${theme.colors.grayScale05}; @@ -155,27 +156,26 @@ export const CategoryImgWrapper = styled.div` ${theme.mediaQuery.tablet} { width: 80px; height: 80px; + padding: 8px; } ${theme.mediaQuery.mobile} { width: 60px; height: 60px; + padding: 4px; } `}; ` -export const CategoryImg = styled(Image)` - border-radius: 12px; +export const CategoryImg = styled.div<{ url: string }>` + ${({ url }) => css` + width: 100%; + height: 100%; - ${({ theme }): string => theme.mediaQuery.tablet} { - width: 52px; - height: 52px; - } - ${({ theme }): string => theme.mediaQuery.mobile} { - width: 40px; - height: 40px; - } + background: url(${url}) center/contain no-repeat; + `} ` + export const CateGoryName = styled.div` margin-top: 12px; From 7d29087480871c2dcc380e76aba0c4a6d0db1f20 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Mon, 29 Jan 2024 16:07:26 +0900 Subject: [PATCH 3/9] =?UTF-8?q?design:=20=EC=AA=BD=EC=A7=80=ED=95=A8=20pla?= =?UTF-8?q?ceholder=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B9=84=EC=9C=A8=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 --- src/pages/messagebox/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/messagebox/index.tsx b/src/pages/messagebox/index.tsx index b231ff26..925a840c 100644 --- a/src/pages/messagebox/index.tsx +++ b/src/pages/messagebox/index.tsx @@ -126,8 +126,8 @@ const MessageBoxPage = ({ roomId: defaultRoomId }: Props): ReactElement => { From 7d506b2caaee7568066dd2804bf4c8c3f313a9b3 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 00:30:17 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=EB=9C=A8?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePreventLeavePage.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/hooks/usePreventLeavePage.ts b/src/hooks/usePreventLeavePage.ts index 80a000e1..3a194360 100644 --- a/src/hooks/usePreventLeavePage.ts +++ b/src/hooks/usePreventLeavePage.ts @@ -11,26 +11,30 @@ const handleBeforeUnload = (e: BeforeUnloadEvent) => { export const usePreventLeavePage = (isPrevent = true) => { const router = useRouter() - useEffect(() => { - const handleBeforeChangeRoute = (url: string) => { - if (router.pathname !== url && !confirm(ALERT_MESSAGE.LEAVE_PAGE)) { - router.events.emit('routeChangeError') + const handleBeforePopState = () => { + const userConfirmed = confirm(ALERT_MESSAGE.LEAVE_PAGE) + + window.history.pushState(null, '', router.asPath) - throw `사이트 변경 취소` - } + if (userConfirmed) { + router.beforePopState(() => true) + router.back() } + return false + } + + useEffect(() => { if (!isPrevent) { return } window.addEventListener('beforeunload', handleBeforeUnload) - router.events.on('routeChangeStart', handleBeforeChangeRoute) + router.beforePopState(handleBeforePopState) // eslint-disable-next-line consistent-return return () => { window.removeEventListener('beforeunload', handleBeforeUnload) - router.events.off('routeChangeStart', handleBeforeChangeRoute) } }, [isPrevent]) } From ae84c448276dcf5368311487d96fae6b3f318394 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 00:39:04 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=ED=8F=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20fetch=EC=8B=9C=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EB=A7=89=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/post/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/post/index.tsx b/src/pages/post/index.tsx index b7fe37aa..c824aeaf 100644 --- a/src/pages/post/index.tsx +++ b/src/pages/post/index.tsx @@ -79,12 +79,16 @@ const PostPage = ({ type, editPostId }: Props): ReactElement => { const getCategoriesQuery = useGetCategoriesQuery() const updatePostMutation = useUpdatePostMutation() - const initialPostForm: PostFormState = getPostQuery.data?.postForm || {} const [postForm, setPostForm] = useState({}) - const hasChanged = !isEqual(initialPostForm, postForm) - const canPosting = hasChanged && isCompleteForm(postForm) + const [isLoading, setIsLoading] = useState(false) const router = useRouter() + const { user } = useAuth() + + const initialPostForm: PostFormState = getPostQuery.data?.postForm || {} + const hasChanged = !isEqual(initialPostForm, postForm) + const canPosting = hasChanged && isCompleteForm(postForm) && !isLoading + usePreventLeavePage(hasChanged) const InputSize = useResponsive({ @@ -107,6 +111,8 @@ const PostPage = ({ type, editPostId }: Props): ReactElement => { return } + setIsLoading(true) + const { imageInfos, price, ...post } = postForm const imageFiles = imageInfos .filter(({ file }) => Boolean(file)) @@ -145,6 +151,7 @@ const PostPage = ({ type, editPostId }: Props): ReactElement => { } router.replace(`/post/${postId}`) + setIsLoading(false) } useEffect(() => { From 65ddb50eb3a6de501c26037375576e7a22c395a7 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 00:43:15 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Revert=20"design:=20=EC=AA=BD=EC=A7=80?= =?UTF-8?q?=ED=95=A8=20placeholder=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=B9=84=EC=9C=A8=20=EC=88=98=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 7d29087480871c2dcc380e76aba0c4a6d0db1f20. --- src/pages/messagebox/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/messagebox/index.tsx b/src/pages/messagebox/index.tsx index 925a840c..b231ff26 100644 --- a/src/pages/messagebox/index.tsx +++ b/src/pages/messagebox/index.tsx @@ -126,8 +126,8 @@ const MessageBoxPage = ({ roomId: defaultRoomId }: Props): ReactElement => { From 6ad4eb8222e9784b8d2d2bbbd640d20eb25ce357 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 00:57:19 +0900 Subject: [PATCH 7/9] =?UTF-8?q?design:=20=EC=83=81=ED=92=88=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EB=A0=88?= =?UTF-8?q?=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 --- src/components/home/ProductItem/styled.ts | 7 ++++--- src/components/home/ProductList/styled.ts | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/home/ProductItem/styled.ts b/src/components/home/ProductItem/styled.ts index 1d679b42..19bd1303 100644 --- a/src/components/home/ProductItem/styled.ts +++ b/src/components/home/ProductItem/styled.ts @@ -5,27 +5,28 @@ import { Image, ToggleButton } from '@offer-ui/react' const Container = styled.div` flex: 1 0 22%; - max-width: 22%; + max-width: 25%; cursor: pointer; ${({ theme }) => theme.mediaQuery.mobile} { flex: 1 0 44%; - max-width: 44%; + max-width: 48%; } ` const ProductImg = styled(Image)` width: 100%; max-width: none; + height: 276px; ${({ theme }): string => theme.mediaQuery.tablet} { height: 166px; } ${({ theme }): string => theme.mediaQuery.mobile} { - height: 200px; + height: 160px; } ` diff --git a/src/components/home/ProductList/styled.ts b/src/components/home/ProductList/styled.ts index a013b32b..ed68ee8b 100644 --- a/src/components/home/ProductList/styled.ts +++ b/src/components/home/ProductList/styled.ts @@ -14,7 +14,7 @@ const ProductListWrapper = styled.div` margin-top: 20px; } ${({ theme }): string => theme.mediaQuery.mobile} { - gap: 15px 50px; + gap: 8px 20px; margin-top: 16px; } From afa7051040ce31791e2c7c810ebc6ddf7959b6d8 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 01:00:01 +0900 Subject: [PATCH 8/9] =?UTF-8?q?config:=20lodash=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index fc627c14..bf3dbf5b 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "axios": "^1.2.3", "cookies-next": "^4.1.0", "dayjs": "^1.11.10", + "lodash": "^4.17.21", "next": "^13.4.8", "react": "18.2.0", "react-dom": "18.2.0" From fea320700fbf8abbf7940f00979437acec91c4a6 Mon Sep 17 00:00:00 2001 From: shinhyojeong Date: Tue, 30 Jan 2024 01:33:48 +0900 Subject: [PATCH 9/9] =?UTF-8?q?chore:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20div=20role=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/CategorySlider/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/home/CategorySlider/index.tsx b/src/components/home/CategorySlider/index.tsx index f0760ead..9fbcfb87 100644 --- a/src/components/home/CategorySlider/index.tsx +++ b/src/components/home/CategorySlider/index.tsx @@ -119,7 +119,11 @@ const CategorySlider = (): ReactElement => { sort: SORT_OPTIONS[0].code })}`}> - + {name}