From 37f607b9a6d5fa9702d649c2377495045da8dd8a Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sat, 25 Oct 2025 19:04:37 +0900 Subject: [PATCH 01/15] =?UTF-8?q?fix:=20ios=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/bds-ui/src/components/carousel/carousel.css.ts | 3 +++ .../src/components/carousel/hooks/use-carousel-touch.ts | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/packages/bds-ui/src/components/carousel/carousel.css.ts b/packages/bds-ui/src/components/carousel/carousel.css.ts index 10325cd9..d28b5118 100644 --- a/packages/bds-ui/src/components/carousel/carousel.css.ts +++ b/packages/bds-ui/src/components/carousel/carousel.css.ts @@ -9,6 +9,8 @@ export const container = style({ height: '100%', overflowX: 'scroll', userSelect: 'none', + WebkitOverflowScrolling: 'touch', + touchAction: 'pan-x', }); export const slideContainer = style({ @@ -20,6 +22,7 @@ export const slideContainer = style({ gap: '1rem', userSelect: 'none', WebkitUserSelect: 'none', + touchAction: 'pan-x', }); export const slide = style({ diff --git a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts index 12b48116..6e71b01c 100644 --- a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts +++ b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts @@ -28,6 +28,10 @@ export const useCarouselTouch = ({ /** 누를 때 시작 위치 저장 */ const handlePointerDown = useCallback( (e: PointerEvent) => { + if (e.pointerType === 'touch') { + e.preventDefault(); + } + setIsDragging(true); setStartX(e.clientX); setDragOffset(0); @@ -49,6 +53,11 @@ export const useCarouselTouch = ({ return; } + // iOS Safari에서 스크롤 방지 + if (e.pointerType === 'touch') { + e.preventDefault(); + } + const dragDiff = startX - e.clientX; const diff = Math.abs(dragDiff); From d45e8e9ec066a80c45f623300981913b5d96385f Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sun, 26 Oct 2025 02:00:44 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20=EC=BA=90=EB=9F=AC=EC=85=80=20aut?= =?UTF-8?q?oPlay=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/pages/home/home-page.tsx | 2 +- .../components/info-section/info-section.tsx | 2 +- .../src/components/carousel/carousel.tsx | 20 +++++++--- .../carousel/hooks/use-carousel-touch.ts | 39 +++++++++---------- 4 files changed, 35 insertions(+), 28 deletions(-) diff --git a/apps/client/src/pages/home/home-page.tsx b/apps/client/src/pages/home/home-page.tsx index 830c17b3..17cd32ff 100644 --- a/apps/client/src/pages/home/home-page.tsx +++ b/apps/client/src/pages/home/home-page.tsx @@ -43,7 +43,7 @@ const HomePage = () => { /> {userData?.isRecommendInsurance ? ( <> - + ) : ( diff --git a/apps/client/src/widgets/home/components/info-section/info-section.tsx b/apps/client/src/widgets/home/components/info-section/info-section.tsx index 7a6f6848..4c4f9f54 100644 --- a/apps/client/src/widgets/home/components/info-section/info-section.tsx +++ b/apps/client/src/widgets/home/components/info-section/info-section.tsx @@ -34,7 +34,7 @@ export const InfoSection = () => { {homeCardConfig.map((card, index) => ( - + 0 && containerWidth > 0) { const config: CarouselControllerConfig = { totalItems, - slidesPerView: 1, // 항상 1개씩 이동 + slidesPerView: 1, slideWidth: (autoSlideWidth / containerWidth) * 100, infinite: effectiveInfinite, }; @@ -370,8 +370,10 @@ const Carousel = ({ transform: getTransform(), transition: isDragging ? 'none' - : 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)', - cursor: isDragging ? 'grabbing' : 'pointer', + : autoPlay + ? 'none' + : 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)', + cursor: isDragging ? 'grabbing' : 'grab', height: maxSlideHeight ? `${maxSlideHeight}px` : 'auto', width: isAutoMode ? 'max-content' : '100%', }} @@ -380,13 +382,21 @@ const Carousel = ({ const itemProps = ( slide.data as React.ReactElement ).props; - const { children, className, ...restProps } = itemProps; + const { + children, + className, + style: itemStyle, + ...restProps + } = itemProps; return (
{children} diff --git a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts index 6e71b01c..355a6d73 100644 --- a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts +++ b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts @@ -53,7 +53,6 @@ export const useCarouselTouch = ({ return; } - // iOS Safari에서 스크롤 방지 if (e.pointerType === 'touch') { e.preventDefault(); } @@ -74,7 +73,7 @@ export const useCarouselTouch = ({ /** 뗄 때 드래그 거리 기준으로 컨트롤러를 통해 새로운 상태 계산 * - autoPlay=false: 드래그 여부에 따라 슬라이드 변경 or 클릭 이벤트 처리 - * - autoPlay=true: 항상 드래그로 처리 (onClick 무시) + * - autoPlay=true: 드래그 후 RAF 재개를 위해 상태 업데이트 */ const handlePointerUp = useCallback( @@ -83,12 +82,24 @@ export const useCarouselTouch = ({ return; } - if (!autoPlay) { - if (hasMoved) { - const diff = startX - e.clientX; - const containerWidth = e.currentTarget.clientWidth || 1; - const dragOffsetPercent = (diff / containerWidth) * 100; + const diff = startX - e.clientX; + const containerWidth = e.currentTarget.clientWidth || 1; + const dragOffsetPercent = (diff / containerWidth) * 100; + + // autoPlay 모드에서는 드래그만 처리 + if (autoPlay) { + const newState = controller.handleDragEnd( + carouselState, + dragOffsetPercent, + { + isAutoPlay: true, + }, + ); + onStateUpdate(newState); + } else { + // 수동 모드에서는 드래그 vs 클릭 구분 + if (hasMoved) { const newState = controller.handleDragEnd( carouselState, dragOffsetPercent, @@ -103,20 +114,6 @@ export const useCarouselTouch = ({ clickTarget.click(); } } - } else { - const diff = startX - e.clientX; - const containerWidth = e.currentTarget.clientWidth || 1; - const dragOffsetPercent = (diff / containerWidth) * 100; - - const newState = controller.handleDragEnd( - carouselState, - dragOffsetPercent, - { - isAutoPlay: true, - }, - ); - - onStateUpdate(newState); } setIsDragging(false); From 27ff7c945b89d973ef3660d94604af2990c062eb Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sun, 26 Oct 2025 02:30:58 +0900 Subject: [PATCH 03/15] =?UTF-8?q?feat:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/pages/home/home-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/pages/home/home-page.tsx b/apps/client/src/pages/home/home-page.tsx index 17cd32ff..830c17b3 100644 --- a/apps/client/src/pages/home/home-page.tsx +++ b/apps/client/src/pages/home/home-page.tsx @@ -43,7 +43,7 @@ const HomePage = () => { /> {userData?.isRecommendInsurance ? ( <> - + ) : ( From e928c3339f2c88328a53a0f88aeaa6532fe7a165 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sun, 26 Oct 2025 02:34:20 +0900 Subject: [PATCH 04/15] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/bds-ui/src/components/carousel/carousel.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/bds-ui/src/components/carousel/carousel.tsx b/packages/bds-ui/src/components/carousel/carousel.tsx index 9bce5eea..e7731fd4 100644 --- a/packages/bds-ui/src/components/carousel/carousel.tsx +++ b/packages/bds-ui/src/components/carousel/carousel.tsx @@ -382,21 +382,13 @@ const Carousel = ({ const itemProps = ( slide.data as React.ReactElement ).props; - const { - children, - className, - style: itemStyle, - ...restProps - } = itemProps; + const { children, className, ...restProps } = itemProps; return (
{children} From d6506bcd255056879927ab5a9b4100b143ed2d76 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sun, 26 Oct 2025 02:35:25 +0900 Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bds-ui/src/components/carousel/hooks/use-carousel-touch.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts index 355a6d73..8c3c7a76 100644 --- a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts +++ b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts @@ -86,7 +86,6 @@ export const useCarouselTouch = ({ const containerWidth = e.currentTarget.clientWidth || 1; const dragOffsetPercent = (diff / containerWidth) * 100; - // autoPlay 모드에서는 드래그만 처리 if (autoPlay) { const newState = controller.handleDragEnd( carouselState, @@ -98,7 +97,6 @@ export const useCarouselTouch = ({ onStateUpdate(newState); } else { - // 수동 모드에서는 드래그 vs 클릭 구분 if (hasMoved) { const newState = controller.handleDragEnd( carouselState, From d1c4c862edc84ce07b405b727486d34b615f7bc8 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Sun, 26 Oct 2025 02:39:02 +0900 Subject: [PATCH 06/15] =?UTF-8?q?feat:=20jsdoc=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bds-ui/src/components/carousel/hooks/use-carousel-touch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts index 8c3c7a76..b082b16d 100644 --- a/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts +++ b/packages/bds-ui/src/components/carousel/hooks/use-carousel-touch.ts @@ -73,7 +73,7 @@ export const useCarouselTouch = ({ /** 뗄 때 드래그 거리 기준으로 컨트롤러를 통해 새로운 상태 계산 * - autoPlay=false: 드래그 여부에 따라 슬라이드 변경 or 클릭 이벤트 처리 - * - autoPlay=true: 드래그 후 RAF 재개를 위해 상태 업데이트 + * - autoPlay=true: 항상 드래그로 처리 (onClick 무시) */ const handlePointerUp = useCallback( From d0728cb6512156061754c33c01b450878b6e5068 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=BD=EC=A7=80=EC=9A=B1=28Hanji=29?= <99489686+gwagjiug@users.noreply.github.com> Date: Sun, 14 Dec 2025 18:49:28 +0900 Subject: [PATCH 07/15] =?UTF-8?q?Fix(clinet):=20typo=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20=20(#480)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/src/widgets/community/components/search/search.tsx | 2 +- .../onboarding/components/step/etcetera-info/etcetera-info.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/community/components/search/search.tsx b/apps/client/src/widgets/community/components/search/search.tsx index ac0ab083..7042055b 100644 --- a/apps/client/src/widgets/community/components/search/search.tsx +++ b/apps/client/src/widgets/community/components/search/search.tsx @@ -78,7 +78,7 @@ const Search = () => {
Date: Fri, 19 Dec 2025 23:25:46 +0900 Subject: [PATCH 08/15] =?UTF-8?q?Fix(bds):=20=EC=95=84=EB=B0=94=ED=83=80?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B8=B0=EB=B3=B8=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=BB=AC=EB=9F=AC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20(#483)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 아바타 컴포넌트 이미지 교체 * fix: 대댓글 UI 밀림 수정 * fix: avatar profile 교체 * fix: 아바타 컴포넌트 프로필 이미지 변경으로 인한 수정 * fix: 아바타 스토리북 수정 * fix: profile 이미지 viewBox 수정 --- .../user-comment-reply.css.ts | 1 + .../user-comment-reply/user-comment-reply.tsx | 2 +- .../src/components/avator/avatar.stories.tsx | 136 +++++++++++++----- .../bds-ui/src/components/avator/avatar.tsx | 9 +- .../assets/{profile_fill.svg => profile.svg} | 12 +- .../bds-ui/src/icons/assets/profile_none.svg | 10 -- packages/bds-ui/src/icons/icon-list.ts | 3 +- 7 files changed, 109 insertions(+), 64 deletions(-) rename packages/bds-ui/src/icons/assets/{profile_fill.svg => profile.svg} (69%) delete mode 100644 packages/bds-ui/src/icons/assets/profile_none.svg diff --git a/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.css.ts b/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.css.ts index 07b197e5..79c4559a 100644 --- a/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.css.ts +++ b/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.css.ts @@ -35,6 +35,7 @@ export const leftContainer = style({ export const userInfo = style({ display: 'flex', gap: '1.2rem', + alignItems: 'center', }); export const nickName = style({ diff --git a/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.tsx b/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.tsx index 6406e9ce..3fa91259 100644 --- a/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.tsx +++ b/apps/client/src/widgets/community/components/user-comment-reply/user-comment-reply.tsx @@ -80,7 +80,7 @@ const UserCommentReply = ({
- +
diff --git a/packages/bds-ui/src/components/avator/avatar.stories.tsx b/packages/bds-ui/src/components/avator/avatar.stories.tsx index 91bfdc10..7d96c5de 100644 --- a/packages/bds-ui/src/components/avator/avatar.stories.tsx +++ b/packages/bds-ui/src/components/avator/avatar.stories.tsx @@ -5,24 +5,58 @@ import Avatar from './avatar'; const meta: Meta = { title: 'Common/Avatar', component: Avatar, - tags: ['autodocs'], - args: { - size: 'md', - alt: '유저 프로필 이미지', - }, parameters: { + layout: 'centered', docs: { description: { component: ` -\`Avatar\` 컴포넌트는 유저의 프로필 이미지를 표시합니다. +**Avatar** 컴포넌트는 유저의 프로필 이미지를 표시합니다. -- \`src\`: 이미지 URL -- \`alt\`: 이미지 대체 텍스트 -- \`fallback\`: 이미지가 없을 경우 대신 보여줄 이니셜 텍스트 -- \`size\`: 'sm' | 'md' | 'lg' (크기 옵션) +## Props 요약 +- **src**: 이미지 URL +- **alt**: 이미지 대체 텍스트 +- **fallback**: 이미지가 없을 경우 대신 보여줄 이니셜 텍스트 +- **size**: 'sm' | 'md' | 'lg' (크기 옵션) -\`src\`가 없고 \`fallback\`도 없으면 아이콘이 자동 표시됩니다. -`, +\`src\`가 없고 \`fallback\`도 없으면 기본 프로필 아이콘이 표시됩니다. + `, + }, + }, + }, + tags: ['autodocs'], + args: { + size: 'md', + alt: '유저 프로필 이미지', + }, + argTypes: { + size: { + control: { type: 'select' }, + options: ['sm', 'md', 'lg'], + description: '아바타의 크기를 결정합니다.', + table: { + type: { summary: 'sm | md | lg' }, + defaultValue: { summary: 'md' }, + }, + }, + src: { + control: { type: 'text' }, + description: '프로필 이미지 URL입니다.', + table: { + type: { summary: 'string' }, + }, + }, + alt: { + control: { type: 'text' }, + description: '이미지 대체 텍스트입니다.', + table: { + type: { summary: 'string' }, + }, + }, + fallback: { + control: { type: 'text' }, + description: '이미지가 없을 때 표시할 이니셜 텍스트입니다.', + table: { + type: { summary: 'string' }, }, }, }, @@ -31,57 +65,87 @@ const meta: Meta = { export default meta; type Story = StoryObj; +// 이미지가 있는 아바타 export const WithImage: Story = { - name: '이미지 포함', args: { - src: 'https://www.news1.kr/_next/image?url=https%3A%2F%2Fi3n.news1.kr%2Fsystem%2Fphotos%2F2024%2F10%2F20%2F6937996%2Fhigh.jpg&w=1920&q=75', + src: 'https://i.pravatar.cc/150?img=32', }, -}; - -export const WithFallbackText: Story = { - name: 'Fallback 텍스트', - args: { - fallback: 'JS', + parameters: { + docs: { + description: { + story: '프로필 이미지가 있는 경우입니다.', + }, + }, }, }; -export const WithIconFallback: Story = { - name: 'Fallback 없음 (아이콘)', +// Fallback 텍스트 +export const WithFallback: Story = { args: { - src: '', - fallback: '', + fallback: 'JH', + }, + parameters: { + docs: { + description: { + story: '이미지가 없고 fallback 텍스트(이니셜)만 표시하는 경우입니다.', + }, + }, }, }; -export const WithIconLgFallback: Story = { - name: 'Fallback 없음 (lg 아이콘)', - args: { - src: '', - size: 'lg', - fallback: '', +// 기본 아이콘 (src, fallback 모두 없음) +export const WithIcon: Story = { + args: {}, + parameters: { + docs: { + description: { + story: 'src와 fallback 모두 없을 때 기본 프로필 아이콘이 표시됩니다.', + }, + }, }, }; +// 작은 사이즈 export const Small: Story = { - name: '작은 사이즈 (sm)', args: { size: 'sm', - fallback: 'S', + src: 'https://i.pravatar.cc/150?img=32', + }, + parameters: { + docs: { + description: { + story: 'sm 사이즈 (3rem) 아바타입니다.', + }, + }, }, }; +// 중간 사이즈 export const Medium: Story = { - name: '중간 사이즈 (md)', args: { size: 'md', - fallback: 'MM', + src: 'https://i.pravatar.cc/150?img=32', + }, + parameters: { + docs: { + description: { + story: 'md 사이즈 (3.6rem) 아바타입니다. 기본값입니다.', + }, + }, }, }; +// 큰 사이즈 export const Large: Story = { - name: '큰 사이즈 (lg)', args: { size: 'lg', - src: 'https://dimg.donga.com/wps/NEWS/IMAGE/2025/03/31/131318432.1.jpg', + src: 'https://i.pravatar.cc/150?img=32', + }, + parameters: { + docs: { + description: { + story: 'lg 사이즈 (12.8rem) 아바타입니다.', + }, + }, }, }; diff --git a/packages/bds-ui/src/components/avator/avatar.tsx b/packages/bds-ui/src/components/avator/avatar.tsx index ce978192..be5882e0 100644 --- a/packages/bds-ui/src/components/avator/avatar.tsx +++ b/packages/bds-ui/src/components/avator/avatar.tsx @@ -4,8 +4,8 @@ import * as styles from './avatar.css'; interface AvatarProps { size: 'sm' | 'md' | 'lg'; - src?: string; // 추후 api 연동시 Optional로 되어있는 것을 Required로 바꿀 생각입니다. - alt?: string; // 이것도 + src?: string; + alt?: string; fallback?: string; className?: string; } @@ -19,10 +19,7 @@ const Avatar = ({ ...props }: AvatarProps) => { const renderFallback = !src && !fallback && ( - + ); return ( diff --git a/packages/bds-ui/src/icons/assets/profile_fill.svg b/packages/bds-ui/src/icons/assets/profile.svg similarity index 69% rename from packages/bds-ui/src/icons/assets/profile_fill.svg rename to packages/bds-ui/src/icons/assets/profile.svg index c79a4bee..72605261 100644 --- a/packages/bds-ui/src/icons/assets/profile_fill.svg +++ b/packages/bds-ui/src/icons/assets/profile.svg @@ -1,10 +1,4 @@ - - - - - - - - - + + + diff --git a/packages/bds-ui/src/icons/assets/profile_none.svg b/packages/bds-ui/src/icons/assets/profile_none.svg deleted file mode 100644 index 89e56cae..00000000 --- a/packages/bds-ui/src/icons/assets/profile_none.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/bds-ui/src/icons/icon-list.ts b/packages/bds-ui/src/icons/icon-list.ts index 558353b1..56b4f6d8 100644 --- a/packages/bds-ui/src/icons/icon-list.ts +++ b/packages/bds-ui/src/icons/icon-list.ts @@ -53,8 +53,7 @@ export const iconNames = [ 'more', 'page_selected', 'page_unselected', - 'profile_fill', - 'profile_none', + 'profile', 'recomment_line', 'search', 'send', From 09190096e683902e89968c327062914939ced75f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=ED=98=9C=EB=A6=B0?= <164613169+jogpfls@users.noreply.github.com> Date: Sun, 21 Dec 2025 14:49:49 +0900 Subject: [PATCH 09/15] =?UTF-8?q?Fix(bds):=20Alert=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=AC=B8=EA=B5=AC=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(#489)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bds-ui/src/components/alert/alert.css.ts | 21 ++++++++++++++----- .../bds-ui/src/components/alert/alert.tsx | 13 ++++++++---- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/bds-ui/src/components/alert/alert.css.ts b/packages/bds-ui/src/components/alert/alert.css.ts index 8237f15b..6a9b0b81 100644 --- a/packages/bds-ui/src/components/alert/alert.css.ts +++ b/packages/bds-ui/src/components/alert/alert.css.ts @@ -44,11 +44,22 @@ export const alerIconContainer = recipe({ }, }); -export const alertHeader = style({ - ...themeVars.fontStyles.head2_b_14, - color: themeVars.color.error, - display: 'flex', - alignItems: 'center', +export const alertHeader = recipe({ + base: { + ...themeVars.fontStyles.head2_b_14, + display: 'flex', + alignItems: 'center', + }, + variants: { + type: { + info: { + color: themeVars.color.error, + }, + additional: { + color: themeVars.color.primary500, + }, + }, + }, }); export const alertContentsHighlight = style({ diff --git a/packages/bds-ui/src/components/alert/alert.tsx b/packages/bds-ui/src/components/alert/alert.tsx index 13003114..345daa83 100644 --- a/packages/bds-ui/src/components/alert/alert.tsx +++ b/packages/bds-ui/src/components/alert/alert.tsx @@ -2,23 +2,28 @@ import { Icon } from '@bds/ui/icons'; import * as styles from './alert.css'; +type IconNameType = 'info' | 'info_warning'; +type AlertType = 'additional' | 'info'; + interface AlertProps { - iconName: 'info' | 'info_warning'; + iconName: IconNameType; iconSize: string; alertHeader: string; alertContents: string; - type: 'additional' | 'info'; + type: AlertType; highlight?: string; } + /** * Alert 컴포넌트는 알림 메시지를 표시하는 컴포넌트입니다. * @param iconName - Icon name * @param iconSize - Icon height과 width * @param alertHeader - alert에 들어갈 헤더 (참고하세요!, 알려드려요) * @param alertContents -alert에 들어갈 contents + * @param type - alert의 타입 (additional, info) + * @param highlight - alertContents에서 강조할 단어 (type이 additional일 때만 사용) * @returns */ - const Alert = ({ iconName, iconSize, @@ -37,7 +42,7 @@ const Alert = ({ height={iconSize} className={styles.iconStyle} /> -

{alertHeader}

+

{alertHeader}

{type === 'additional' && ( From 9dce407b6091820e02064f42b7fb2a5e61d81d78 Mon Sep 17 00:00:00 2001 From: JeongHoon <113702672+jeonghoon11@users.noreply.github.com> Date: Sun, 21 Dec 2025 15:46:31 +0900 Subject: [PATCH 10/15] =?UTF-8?q?Fix(client):=20=ED=95=84=ED=84=B0=20?= =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20(#488)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/filter-dropdown/filter-dropdown.css.ts | 6 ++++++ .../components/filter-dropdown/filter-dropdown.tsx | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.css.ts b/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.css.ts index b5fd5c64..fff299b6 100644 --- a/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.css.ts +++ b/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.css.ts @@ -63,6 +63,12 @@ export const DropDownContent = style({ zIndex: themeVars.zIndex.content, }); +export const DropDownItem = style({ + padding: '0.6rem 0', + ...themeVars.fontStyles.title_sb_16, + color: themeVars.color.gray800, +}); + export const isRotate = recipe({ base: { transform: 'rotate(0deg)', diff --git a/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.tsx b/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.tsx index 4298b642..856b913c 100644 --- a/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.tsx +++ b/apps/client/src/widgets/community/components/filter-dropdown/filter-dropdown.tsx @@ -37,7 +37,9 @@ const FilterDropDown = ({ {open && (

{Children.map(children, (child, idx) => ( -
{child}
+
+ {child} +
))}
)} From 28c8050cbd8dbb44f804014b2094d66b66df67fd Mon Sep 17 00:00:00 2001 From: JeongHoon <113702672+jeonghoon11@users.noreply.github.com> Date: Mon, 29 Dec 2025 23:08:52 +0900 Subject: [PATCH 11/15] =?UTF-8?q?Fix(client):=20=EB=8C=80=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EC=9E=91=EC=84=B1=EC=8B=9C=20backdrop=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=9E=91=EC=84=B1=20=EB=AA=A8=EB=93=9C?= =?UTF-8?q?=20=ED=95=B4=EC=A0=9C=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#486)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 댓글 작성 박스에 백드롭 추가 * fix: 대댓글 클릭 후 백드롭시 댓글, 사진 유지 * fix: inputBox 글 상태 유지 * fix: prevModeRef.current one-depth 줄이기 * fix: if문 간소화 --- .../comment-input-box/comment-input-box.tsx | 12 +++++++++++- .../components/detail-section/detail-section.tsx | 13 ++++++++++++- .../community/hooks/use-controll-input-box.ts | 13 ++++++++++++- 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx index 2d150dea..4d9998d5 100644 --- a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx +++ b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx @@ -6,6 +6,8 @@ import { Icon } from '@bds/ui/icons'; import { PLACEHOLDER } from '@widgets/community/constant/input-placeholder'; import { useChangeInputMode } from '@widgets/community/context/input-mode-context'; +import useClickOutside from '@shared/hooks/use-click-outside'; + import CommunityModal from '../community-modal/community-modal'; import * as styles from './comment-input-box.css'; @@ -34,9 +36,17 @@ const CommentInputBox = ({ onClearImage, }: CommentInputBoxProps) => { const fileInputRef = useRef(null); + const wrapperRef = useRef(null); const { mode, dispatch } = useChangeInputMode(); const { openModal, closeModal } = useModal(); + const replyCreateMode = mode.type === 'reply' && mode.action === 'create'; + useClickOutside( + wrapperRef, + () => dispatch({ type: 'RESET' }), + replyCreateMode, + ); + const modalType: 'create' | 'edit' = (mode.type === 'comment' || mode.type === 'reply') && mode.action === 'edit' ? 'edit' @@ -105,7 +115,7 @@ const CommentInputBox = ({ : previewUrl; return ( -
+
{displayImage && (
{ const [imageFile, setImageFile] = useState(null); const [imagePreview, setImagePreview] = useState(null); + const prevModeRef = useRef(mode); const queryClient = useQueryClient(); useEffect(() => { + const isStillCreatingMode = + prevModeRef.current.action === 'create' && mode.action === 'create'; + const typeChanged = prevModeRef.current.type !== mode.type; + + prevModeRef.current = mode; + if (mode.type === 'comment' && mode.action === 'edit') { const remaining = (mode.images ?? []).filter( (img) => !(mode.deleteImageIds ?? []).includes(img.imageId ?? -1), @@ -65,6 +72,10 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } + if (isStillCreatingMode && typeChanged) { + return; + } + setImagePreview(null); setImageFile(null); }, [mode]); diff --git a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts index 973324f8..8318b7f7 100644 --- a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts +++ b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { InputBoxMode } from '@widgets/community/types/input-box-type'; @@ -8,8 +8,19 @@ export const useControlledInputBox = (mode: InputBoxMode) => { const [content, setContent] = useState( 'initialContent' in mode ? mode.initialContent : '', ); + const prevModeRef = useRef(mode); useEffect(() => { + const isStillCreatingMode = + prevModeRef.current.action === 'create' && mode.action === 'create'; + const typeChanged = prevModeRef.current.type !== mode.type; + + prevModeRef.current = mode; + + if (isStillCreatingMode && typeChanged) { + return; + } + setContent('initialContent' in mode ? mode.initialContent : ''); }, [mode]); From 893132ed69caabb2a30c85050ced6e492b9af247 Mon Sep 17 00:00:00 2001 From: Minjeong Kim <88662427+minjeoong@users.noreply.github.com> Date: Wed, 31 Dec 2025 03:44:09 +0900 Subject: [PATCH 12/15] =?UTF-8?q?Refactor(client):=20home=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=A6=AC=ED=8E=98=EC=9D=B8=ED=8A=B8=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94=20(#492)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: home 화면 리페인트 최적화 * fix: build 오류 해결 * fix: 불필요한 useCallback 제거 --- .../info-section/recommended-info-section.tsx | 95 +++++++++++++------ 1 file changed, 64 insertions(+), 31 deletions(-) diff --git a/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx b/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx index 27e7f7d8..cffef3f1 100644 --- a/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx +++ b/apps/client/src/widgets/home/components/info-section/recommended-info-section.tsx @@ -15,37 +15,27 @@ import { StatusType } from '@shared/types/type.ts'; import * as styles from './recommended-info-section.css.ts'; -interface recommendedInfoSectionProps { +interface StaticContentProps { userName?: string; + productName?: string; + company?: string; + keywordChips?: string[]; } -/** 보험 추천받은 유저가 볼 화면 */ -export const RecommendedInfoSection = ({ +const StaticContent = ({ userName, -}: recommendedInfoSectionProps) => { - const navigate = useNavigate(); - const handleNavigateReport = () => { - navigate(routePath.REPORT); - }; - - const { data: reportSummary } = useSuspenseQuery( - HOME_QUERY_OPTIONS.REPORT_SUMMARY(), - ); - const targetToIconMap = new Map( - homeCardConfig.map(({ target, icon }) => [target, icon]), - ); - - if (!reportSummary) { - return; - } - + productName, + company, + keywordChips, +}: StaticContentProps) => { return ( -
+ <>
- {reportSummary.keywordChips?.map((chip, index) => ( + {keywordChips?.map((chip, index) => (
+ + ); +}; +interface BottomButtonProps { + onClick: () => void; +} + +const BottomButton = ({ onClick }: BottomButtonProps) => { + return ( +
+ +

구체적인 내용 확인하기

+ + +
+ ); +}; + +interface recommendedInfoSectionProps { + userName?: string; +} + +/** 보험 추천받은 유저가 볼 화면 */ +export const RecommendedInfoSection = ({ + userName, +}: recommendedInfoSectionProps) => { + const navigate = useNavigate(); + const handleNavigateReport = () => navigate(routePath.REPORT); + + const { data: reportSummary } = useSuspenseQuery( + HOME_QUERY_OPTIONS.REPORT_SUMMARY(), + ); + + const targetToIconMap = new Map( + homeCardConfig.map(({ target, icon }) => [target, icon]), + ); + + if (!reportSummary) { + return; + } + + return ( +
+ {reportSummary.statuses?.map((card, index) => ( @@ -92,13 +131,7 @@ export const RecommendedInfoSection = ({ ))} - -
- -

구체적인 내용 확인하기

- - -
+
); }; From bd7ede52b788df1c740c6b50f990faa27400545a Mon Sep 17 00:00:00 2001 From: JeongHoon <113702672+jeonghoon11@users.noreply.github.com> Date: Wed, 31 Dec 2025 04:21:55 +0900 Subject: [PATCH 13/15] =?UTF-8?q?Fix(client):=20=EB=8C=93=EA=B8=80,=20?= =?UTF-8?q?=EB=8C=80=EB=8C=93=EA=B8=80=20=EC=9E=91=EC=84=B1=20=EC=A4=91=20?= =?UTF-8?q?=EC=B7=A8=EC=86=8C=20=EC=8B=9C=20=EC=B7=A8=EC=86=8C=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EC=9C=A0=EC=A7=80=20=EB=AA=A8=EB=8B=AC=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95=20(#491)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix: 댓글, 대댓글 작성중 취소 시 모달 수정 유지 문구 수정 --- apps/client/src/widgets/community/constant/modal-content.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/community/constant/modal-content.ts b/apps/client/src/widgets/community/constant/modal-content.ts index bbad0a22..b7fdd63c 100644 --- a/apps/client/src/widgets/community/constant/modal-content.ts +++ b/apps/client/src/widgets/community/constant/modal-content.ts @@ -24,13 +24,13 @@ export const COMMENT_MODAL: Record< CREATE: { TITLE: '작성 내용을 삭제할까요?', CONTENT: '내용이 저장되지 않습니다.', - CANCEL: '계속 작성하기', + CANCEL: '취소', CONFIRM: '삭제', }, EDIT: { TITLE: '수정 내용을 삭제할까요?', CONTENT: '내용이 저장되지 않습니다.', - CANCEL: '계속 수정하기', + CANCEL: '취소', CONFIRM: '삭제', }, }; From 116c6aa29c25694924390bfcc66bf8055794fbeb Mon Sep 17 00:00:00 2001 From: JeongHoon <113702672+jeonghoon11@users.noreply.github.com> Date: Sun, 4 Jan 2026 22:36:07 +0900 Subject: [PATCH 14/15] =?UTF-8?q?Fix(client):=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A7=84=EC=9E=85=20=EC=8B=9C=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=9C=BC=EB=A1=9C=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=AA=A8=EB=93=9C=EC=97=90=20=EB=93=A4?= =?UTF-8?q?=EC=96=B4=EA=B0=80=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#494)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 상세 페이지 마운트 시 reset 모드 설정 * fix: useControlledInputBox 훅 단순화 * fix: 이미지 보존 로직 추가 * fix: 이미지 불필요한 깜빡임 제거 * fix: Input autoFocus 수정 --- .../comment-input-box/comment-input-box.tsx | 10 +++++++- .../detail-section/detail-section.tsx | 13 +++++----- .../community/context/input-mode-context.tsx | 9 ++----- .../hooks/create-input-mode-reducer.ts | 8 +++++- .../community/hooks/use-controll-input-box.ts | 25 ++++++------------- .../widgets/community/types/input-box-type.ts | 2 ++ 6 files changed, 35 insertions(+), 32 deletions(-) diff --git a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx index 4d9998d5..d659e7df 100644 --- a/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx +++ b/apps/client/src/widgets/community/components/comment-input-box/comment-input-box.tsx @@ -41,6 +41,13 @@ const CommentInputBox = ({ const { openModal, closeModal } = useModal(); const replyCreateMode = mode.type === 'reply' && mode.action === 'create'; + + const handleFocus = () => { + if (mode.type === 'reset') { + dispatch({ type: 'COMMENT_CREATE' }); + } + }; + useClickOutside( wrapperRef, () => dispatch({ type: 'RESET' }), @@ -137,10 +144,11 @@ const CommentInputBox = ({
{ const queryClient = useQueryClient(); useEffect(() => { - const isStillCreatingMode = - prevModeRef.current.action === 'create' && mode.action === 'create'; - const typeChanged = prevModeRef.current.type !== mode.type; - + const prev = prevModeRef.current; prevModeRef.current = mode; if (mode.type === 'comment' && mode.action === 'edit') { @@ -72,7 +69,12 @@ const DetailSection = ({ postId }: DetailSectionProps) => { return; } - if (isStillCreatingMode && typeChanged) { + const shouldPreserveImage = + (prev.type === 'reset' && mode.action === 'create') || + (prev.action === 'create' && mode.type === 'reset') || + (prev.action === 'create' && mode.action === 'create'); + + if (shouldPreserveImage) { return; } @@ -336,7 +338,6 @@ const DetailSection = ({ postId }: DetailSectionProps) => { <> { - dispatch({ type: 'RESET' }); - }, [postId]); const value = useMemo(() => ({ mode, dispatch }), [mode]); return ( diff --git a/apps/client/src/widgets/community/hooks/create-input-mode-reducer.ts b/apps/client/src/widgets/community/hooks/create-input-mode-reducer.ts index 7c263449..3283f869 100644 --- a/apps/client/src/widgets/community/hooks/create-input-mode-reducer.ts +++ b/apps/client/src/widgets/community/hooks/create-input-mode-reducer.ts @@ -15,6 +15,12 @@ export const createInputModeReducer = ({ action, }: ComposeModeReducerType): InputBoxMode => { switch (action.type) { + case 'COMMENT_CREATE': + return { + type: 'comment', + action: 'create', + postId, + } as const; case 'COMMENT_EDIT': return { type: 'comment', @@ -68,6 +74,6 @@ export const createInputModeReducer = ({ case 'RESET': default: - return { type: 'comment', action: 'create', postId } as const; + return { type: 'reset', action: 'reset' } as const; } }; diff --git a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts index 8318b7f7..7e3c490e 100644 --- a/apps/client/src/widgets/community/hooks/use-controll-input-box.ts +++ b/apps/client/src/widgets/community/hooks/use-controll-input-box.ts @@ -1,28 +1,19 @@ -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useState } from 'react'; import { InputBoxMode } from '@widgets/community/types/input-box-type'; import { LIMIT_SHORT_TEXT } from '@shared/constants/text-limits'; export const useControlledInputBox = (mode: InputBoxMode) => { - const [content, setContent] = useState( - 'initialContent' in mode ? mode.initialContent : '', - ); - const prevModeRef = useRef(mode); + const [content, setContent] = useState(''); - useEffect(() => { - const isStillCreatingMode = - prevModeRef.current.action === 'create' && mode.action === 'create'; - const typeChanged = prevModeRef.current.type !== mode.type; - - prevModeRef.current = mode; + const initialContent = 'initialContent' in mode ? mode.initialContent : null; - if (isStillCreatingMode && typeChanged) { - return; + useEffect(() => { + if (initialContent !== null) { + setContent(initialContent); } - - setContent('initialContent' in mode ? mode.initialContent : ''); - }, [mode]); + }, [initialContent]); const handleChange = (e: React.ChangeEvent) => { const next = e.target.value; @@ -32,7 +23,7 @@ export const useControlledInputBox = (mode: InputBoxMode) => { }; const reset = () => { - setContent('initialContent' in mode ? mode.initialContent : ''); + setContent(''); }; return { content, handleChange, reset }; diff --git a/apps/client/src/widgets/community/types/input-box-type.ts b/apps/client/src/widgets/community/types/input-box-type.ts index 3714f415..d121f1b4 100644 --- a/apps/client/src/widgets/community/types/input-box-type.ts +++ b/apps/client/src/widgets/community/types/input-box-type.ts @@ -1,6 +1,7 @@ import { Image } from '@shared/types/type.ts'; export type InputBoxMode = + | { type: 'reset'; action: 'reset' } | { type: 'comment'; action: 'create'; postId: string; images?: Image[] } | { type: 'comment'; @@ -24,6 +25,7 @@ export type InputBoxMode = }; export type ReducerAction = + | { type: 'COMMENT_CREATE' } | { type: 'COMMENT_EDIT'; commentId: number; From 71fe277c8f499ec359c5ed156a5b856e65e11fd2 Mon Sep 17 00:00:00 2001 From: Minjeong Kim <88662427+minjeoong@users.noreply.github.com> Date: Sun, 25 Jan 2026 02:42:45 +0900 Subject: [PATCH 15/15] =?UTF-8?q?Refactor(client):=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EB=A1=9C=EB=94=A9=20=EC=A4=91=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=8B=9C=ED=94=84=ED=8A=B8=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0=20(#496)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 인기 게시물 useQuery -> useSuspenseQuery * fix: 커뮤니티 post api useInfiniteQuery -> useSuspenseInfiniteQuery --- .../src/widgets/community/components/feed-list/feed-list.tsx | 4 ++-- .../components/live-popular-feed/live-popular-feed.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/client/src/widgets/community/components/feed-list/feed-list.tsx b/apps/client/src/widgets/community/components/feed-list/feed-list.tsx index ba6a10a6..b9345f18 100644 --- a/apps/client/src/widgets/community/components/feed-list/feed-list.tsx +++ b/apps/client/src/widgets/community/components/feed-list/feed-list.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useInfiniteQuery } from '@tanstack/react-query'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; import { Chip, TextButton } from '@bds/ui'; @@ -34,7 +34,7 @@ const FeedList = () => { }, true); const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = - useInfiniteQuery({ + useSuspenseInfiniteQuery({ ...COMMUNITY_QUERY_OPTIONS.POSTS(sort.value, category), }); diff --git a/apps/client/src/widgets/community/components/live-popular-feed/live-popular-feed.tsx b/apps/client/src/widgets/community/components/live-popular-feed/live-popular-feed.tsx index 01be4e32..7c4183d2 100644 --- a/apps/client/src/widgets/community/components/live-popular-feed/live-popular-feed.tsx +++ b/apps/client/src/widgets/community/components/live-popular-feed/live-popular-feed.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { useNavigate } from 'react-router-dom'; import { Carousel, Indicator, Title } from '@bds/ui'; @@ -17,7 +17,7 @@ const TOTAL_POPULAR_FEED = 3; const LivePopularFeed = () => { const navigate = useNavigate(); const [currentPage, setCurrentPage] = useState(0); - const { data: popularFeedData } = useQuery({ + const { data: popularFeedData } = useSuspenseQuery({ ...COMMUNITY_QUERY_OPTIONS.POPULAR_FEED(TOTAL_POPULAR_FEED), }); return (