From 9554466f9a013e43cc2630c579fd4431127376d1 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sat, 10 Feb 2024 21:58:53 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Refactor:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=A1=B0=ED=9A=8C=20react-query=EB=A5=BC=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=9C=20=EC=BD=94=EB=93=9C=EB=A1=9C=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/[userId]/_components/Categories.tsx | 9 ++--- src/app/user/[userId]/_components/Content.tsx | 36 +++++++------------ 2 files changed, 15 insertions(+), 30 deletions(-) diff --git a/src/app/user/[userId]/_components/Categories.tsx b/src/app/user/[userId]/_components/Categories.tsx index e55ff868..e7654183 100644 --- a/src/app/user/[userId]/_components/Categories.tsx +++ b/src/app/user/[userId]/_components/Categories.tsx @@ -5,7 +5,6 @@ - [ ] 클릭했을때 로직 (상위요소에 핸들러 고민) (리팩토링) */ -import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import * as styles from './Categories.css'; @@ -16,13 +15,12 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; interface CategoriesProps { handleFetchListsOnCategory: (category: string) => void; + selectedCategory: string; } export const DEFAULT_CATEGORY = 'entire'; -export default function Categories({ handleFetchListsOnCategory }: CategoriesProps) { - const [selected, setSelected] = useState(DEFAULT_CATEGORY); - +export default function Categories({ handleFetchListsOnCategory, selectedCategory }: CategoriesProps) { const { data } = useQuery({ queryKey: [QUERY_KEYS.getCategories], queryFn: getCategories, @@ -30,7 +28,6 @@ export default function Categories({ handleFetchListsOnCategory }: CategoriesPro const handleChangeCategory = (category: string) => () => { handleFetchListsOnCategory(category); - setSelected(category); }; return ( @@ -39,7 +36,7 @@ export default function Categories({ handleFetchListsOnCategory }: CategoriesPro diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index c4cda1d4..93444078 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -7,7 +7,7 @@ */ import Link from 'next/link'; -import { useCallback, useEffect, useState } from 'react'; +import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { MasonryGrid } from '@egjs/react-grid'; @@ -23,7 +23,7 @@ import { getAllList } from '@/app/_api/list/getAllList'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; -import { ListType } from '@/lib/types/listType'; +import { AllListType, ListType } from '@/lib/types/listType'; interface ContentProps { userId: number; @@ -31,35 +31,24 @@ interface ContentProps { } export default function Content({ userId, type }: ContentProps) { - const [listGrid, setListGrid] = useState([]); + const [selectedCategory, setSelectedCategory] = useState('entire'); const { data: userData } = useQuery({ queryKey: [QUERY_KEYS.userOne, userId], queryFn: () => getUserOne(userId), }); - /** 무한스크롤시 리액트 쿼리로 불러오는게 더 나을지에 대한 고민 때문에 주석처리 해 놓은 코드 */ - // const { data: listData, refetch } = useQuery({ - // queryKey: [QUERY_KEYS.getAllList], - // queryFn: () => getAllList(userId, type), - // }); + const { data: listsData } = useQuery({ + queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], + queryFn: () => getAllList(userId, type, selectedCategory), + }); - const handleFetchLists = useCallback( - async (category?: string) => { - const data = await getAllList(userId, type, category); - setListGrid(data.feedLists); - }, - [userId, type] - ); + console.log(listsData); // 삭제 예정 - const handleFetchListsOnCategory = async (category: string) => { - handleFetchLists(category); + const handleFetchListsOnCategory = (category: string) => { + setSelectedCategory(category); }; - useEffect(() => { - handleFetchLists(); - }, [handleFetchLists]); - return (
@@ -75,11 +64,10 @@ export default function Content({ userId, type }: ContentProps) { ) : ( )} - - +
- {listGrid.map((list: ListType) => ( + {listsData?.feedLists.map((list: ListType) => ( ))} From b384f8c6a88427bdf37b6eff49860e5078b6674d Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 10:58:00 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EA=B0=90=EC=A7=80=20observer=20api=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useIntersectionObserver.ts | 42 ++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/hooks/useIntersectionObserver.ts diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts new file mode 100644 index 00000000..00cfe1e5 --- /dev/null +++ b/src/hooks/useIntersectionObserver.ts @@ -0,0 +1,42 @@ +import { useEffect, useRef } from 'react'; + +/** + * Observer API를 사용하여 요소를 감지하는 커스텀 hook 입니다. + * 무한스크롤에서 사용할 수 있습니다. + * + * @param {function} callback intersection이 발생했을 때 호툴되는 콜백함수 + * @returns target 요소에 전달할 ref 값 + */ + +const options = { + root: null, + rootMain: '0px', + threshold: 1, // 단계별 콜백함수 호출 +}; + +const useIntersectionObserver = (callback: (entry: IntersectionObserverEntry) => void) => { + const ref = useRef(null); + + useEffect(() => { + if (!ref.current) return; + + const observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + callback(entries[0]); + } + }, options); + + if (ref.current) { + observer.observe(ref.current); + } + + // clean up + return () => { + observer.disconnect(); + }; + }, [ref, callback]); + + return ref; +}; + +export default useIntersectionObserver; From 969da811883adca5fc6bb61de34969ccc0b48e5c Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 11:17:02 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EB=AA=A9=EB=A1=9D=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/list/getAllList.ts | 8 ++-- src/app/user/[userId]/_components/Content.tsx | 46 +++++++++++++++---- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/app/_api/list/getAllList.ts b/src/app/_api/list/getAllList.ts index 19a2c48f..3732f835 100644 --- a/src/app/_api/list/getAllList.ts +++ b/src/app/_api/list/getAllList.ts @@ -1,12 +1,10 @@ import axiosInstance from '@/lib/axios/axiosInstance'; import { AllListType } from '@/lib/types/listType'; -export async function getAllList(userId: number, type: string, category?: string) { - const query = `${category ? `${category}` : 'entire'}`; +export async function getAllList(userId: number, type: string, category?: string, cursorId?: any) { + const query = `${category ? `${category}` : 'entire'} ${cursorId ? `&cursorId=${cursorId}` : ''}`; - const response = await axiosInstance.get( - `/users/${userId}/lists?type=${type}&category=${query}&size=10` - ); + const response = await axiosInstance.get(`/users/${userId}/lists?type=${type}&category=${query}&size=5`); return response.data; } diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 93444078..da6bc33b 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -8,7 +8,7 @@ import Link from 'next/link'; import { useState } from 'react'; -import { useQuery } from '@tanstack/react-query'; +import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { MasonryGrid } from '@egjs/react-grid'; import * as styles from './Content.css'; @@ -24,6 +24,7 @@ import { getAllList } from '@/app/_api/list/getAllList'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; import { AllListType, ListType } from '@/lib/types/listType'; +import useIntersectionObserver from '@/hooks/useIntersectionObserver'; interface ContentProps { userId: number; @@ -38,9 +39,31 @@ export default function Content({ userId, type }: ContentProps) { queryFn: () => getUserOne(userId), }); - const { data: listsData } = useQuery({ + const { + data: listsData, + hasNextPage, + fetchNextPage, + } = useInfiniteQuery({ queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], - queryFn: () => getAllList(userId, type, selectedCategory), + queryFn: ({ pageParam }) => { + console.log(pageParam); + return getAllList(userId, type, selectedCategory, pageParam); + }, + initialPageParam: null, + getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), + }); + + // select: (listsData) => ({ + // pages: listsData.pages, + // pageParams: listsData.pageParams, + // }), + + console.log(hasNextPage); + + const ref = useIntersectionObserver(() => { + if (listsData?.pages[0].hasNext) { + fetchNextPage(); + } }); console.log(listsData); // 삭제 예정 @@ -66,11 +89,18 @@ export default function Content({ userId, type }: ContentProps) { )}
- - {listsData?.feedLists.map((list: ListType) => ( - - ))} - + {listsData?.pages.map((page: AllListType, pageIndex) => ( +
+ {page.feedLists.map((list: ListType) => ( + + + + ))} +
+ ))} +
+
+ 여기
); From b6226822de6970b2cfaf43ec5da3e3b110330ac6 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 13:38:36 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Feat:=20=EB=AC=B4=ED=95=9C=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?-=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EB=90=9C=20=EC=BF=BC=EB=A6=AC=20reset=20-=20?= =?UTF-8?q?useMemo=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=9C=20MasonryGrid=20?= =?UTF-8?q?data=20=EC=B6=94=EC=B6=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/[userId]/_components/Categories.tsx | 2 - .../user/[userId]/_components/Content.css.ts | 4 ++ src/app/user/[userId]/_components/Content.tsx | 57 ++++++++++--------- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/app/user/[userId]/_components/Categories.tsx b/src/app/user/[userId]/_components/Categories.tsx index e7654183..168b52b7 100644 --- a/src/app/user/[userId]/_components/Categories.tsx +++ b/src/app/user/[userId]/_components/Categories.tsx @@ -18,8 +18,6 @@ interface CategoriesProps { selectedCategory: string; } -export const DEFAULT_CATEGORY = 'entire'; - export default function Categories({ handleFetchListsOnCategory, selectedCategory }: CategoriesProps) { const { data } = useQuery({ queryKey: [QUERY_KEYS.getCategories], diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 3bbe3a9f..99269b6e 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -69,3 +69,7 @@ export const variantLine = styleVariants({ }, ], }); + +export const target = style({ + height: '1px', +}); diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index da6bc33b..49155d9b 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -2,13 +2,13 @@ /** TODO - - [ ] 무한스크롤 적용 + - [x] 무한스크롤 적용 - [ ] 피드페이지 스켈레톤 ui 적용 */ import Link from 'next/link'; -import { useState } from 'react'; -import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; +import { useMemo, useState } from 'react'; +import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'; import { MasonryGrid } from '@egjs/react-grid'; import * as styles from './Content.css'; @@ -23,7 +23,8 @@ import { getAllList } from '@/app/_api/list/getAllList'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; -import { AllListType, ListType } from '@/lib/types/listType'; +import { AllListType } from '@/lib/types/listType'; + import useIntersectionObserver from '@/hooks/useIntersectionObserver'; interface ContentProps { @@ -31,8 +32,11 @@ interface ContentProps { type: string; } +const DEFAULT_CATEGORY = 'entire'; + export default function Content({ userId, type }: ContentProps) { - const [selectedCategory, setSelectedCategory] = useState('entire'); + const queryClient = useQueryClient(); + const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY); const { data: userData } = useQuery({ queryKey: [QUERY_KEYS.userOne, userId], @@ -43,33 +47,37 @@ export default function Content({ userId, type }: ContentProps) { data: listsData, hasNextPage, fetchNextPage, + isFetching, } = useInfiniteQuery({ queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], - queryFn: ({ pageParam }) => { - console.log(pageParam); - return getAllList(userId, type, selectedCategory, pageParam); + queryFn: ({ pageParam: cursorId }) => { + return getAllList(userId, type, selectedCategory, cursorId); }, initialPageParam: null, getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), }); - // select: (listsData) => ({ - // pages: listsData.pages, - // pageParams: listsData.pageParams, - // }), + const lists = useMemo(() => { + return listsData ? listsData.pages.flatMap(({ feedLists }) => feedLists) : []; + }, [listsData]); - console.log(hasNextPage); + // console.log(hasNextPage); // 삭제 예정 const ref = useIntersectionObserver(() => { - if (listsData?.pages[0].hasNext) { + if (hasNextPage) { fetchNextPage(); } }); - console.log(listsData); // 삭제 예정 + console.log(lists); // 삭제 예정 const handleFetchListsOnCategory = (category: string) => { setSelectedCategory(category); + + queryClient.resetQueries({ + queryKey: [QUERY_KEYS.getAllList, userId, type, category], + exact: true, + }); }; return ( @@ -89,19 +97,14 @@ export default function Content({ userId, type }: ContentProps) { )}
- {listsData?.pages.map((page: AllListType, pageIndex) => ( -
- {page.feedLists.map((list: ListType) => ( - - - - ))} -
- ))} -
-
- 여기 + + {lists.map((list) => ( + + ))} +
+ {isFetching &&
로딩중
} +
); } From dbd12191a4aa1a72dad154a7045737e3f1e9b224 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 14:19:42 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Feat:=20=EC=BF=BC=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EB=A7=81=20=EA=B0=9C=EC=84=A0,=20cursorId=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/list/getAllList.ts | 14 +++++++++++--- src/app/user/[userId]/_components/Content.tsx | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/app/_api/list/getAllList.ts b/src/app/_api/list/getAllList.ts index 3732f835..f610753c 100644 --- a/src/app/_api/list/getAllList.ts +++ b/src/app/_api/list/getAllList.ts @@ -1,10 +1,18 @@ import axiosInstance from '@/lib/axios/axiosInstance'; import { AllListType } from '@/lib/types/listType'; -export async function getAllList(userId: number, type: string, category?: string, cursorId?: any) { - const query = `${category ? `${category}` : 'entire'} ${cursorId ? `&cursorId=${cursorId}` : ''}`; +export async function getAllList(userId: number, type: string, category: string, cursorId?: number) { + const params = new URLSearchParams({ + type, + category, + size: '5', + }); - const response = await axiosInstance.get(`/users/${userId}/lists?type=${type}&category=${query}&size=5`); + if (cursorId) { + params.append('cursorId', cursorId.toString()); + } + + const response = await axiosInstance.get(`/users/${userId}/lists?${params.toString()}`); return response.data; } diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index 49155d9b..fcf4856b 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -51,7 +51,7 @@ export default function Content({ userId, type }: ContentProps) { } = useInfiniteQuery({ queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], queryFn: ({ pageParam: cursorId }) => { - return getAllList(userId, type, selectedCategory, cursorId); + return getAllList(userId, type, selectedCategory, cursorId as number); }, initialPageParam: null, getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), From 10d8ed5d01d4ce2d04a18435b989cb1462b9216d Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 14:49:45 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Design:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EA=B3=B5=ED=86=B5=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Card.css.ts | 8 +++++--- .../user/[userId]/_components/Categories.css.ts | 14 ++++++++------ src/app/user/[userId]/_components/Content.css.ts | 6 ++++-- .../user/[userId]/_components/FollowButton.css.ts | 5 +++-- src/app/user/[userId]/_components/Profile.css.ts | 7 ++++--- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 2efe7b71..6653a799 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -1,4 +1,5 @@ import { style, createVar } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const listColor = createVar(); @@ -9,6 +10,7 @@ export const container = style({ borderRadius: '1.5rem', backgroundColor: listColor, + border: `1px solid ${vars.color.gray5}`, }); export const title = style({ @@ -16,7 +18,7 @@ export const title = style({ fontSize: '1.7rem', fontWeight: '600', - color: 'var(--text-text-grey-dark, #202020)', + color: vars.color.black, textAlign: 'right', letterSpacing: '-0.51px', wordBreak: 'keep-all', @@ -28,7 +30,7 @@ export const list = style({ fontSize: '1.2rem', fontWeight: '400', - color: 'var(--text-text-grey-dark, #202020)', + color: vars.color.black, lineHeight: '2.5rem', letterSpacing: '-0.36px', }); @@ -46,7 +48,7 @@ export const lockText = style({ fontSize: '1.1rem', fontWeight: '400', letterSpacing: '-0.33px', - color: '#AFB1B6', + color: vars.color.gray7, }); export const item = style({ diff --git a/src/app/user/[userId]/_components/Categories.css.ts b/src/app/user/[userId]/_components/Categories.css.ts index 8d07fdd1..46439b92 100644 --- a/src/app/user/[userId]/_components/Categories.css.ts +++ b/src/app/user/[userId]/_components/Categories.css.ts @@ -1,4 +1,5 @@ import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const container = style({ padding: '2.1rem 0 1.5rem 1.5rem', @@ -17,19 +18,20 @@ export const container = style({ export const button = style({ padding: '0.8rem 1.2rem', - backgroundColor: '#FFF', + backgroundColor: vars.color.white, borderRadius: '5rem', - border: '1px solid #DEDEDE', + border: `1px solid ${vars.color.gray5}`, + /** TODO - 공용폰트 body large 적용 */ fontSize: '1.6rem', - fontWeight: '500', - color: '#828282', + fontWeight: '400', + color: vars.color.gray9, letterSpacing: '-0.48px', whiteSpace: 'nowrap', }); export const variant = style({ - backgroundColor: '#0047FF', - color: '#FFF', + backgroundColor: vars.color.blue, + color: vars.color.white, border: 'none', }); diff --git a/src/app/user/[userId]/_components/Content.css.ts b/src/app/user/[userId]/_components/Content.css.ts index 99269b6e..7da2db1c 100644 --- a/src/app/user/[userId]/_components/Content.css.ts +++ b/src/app/user/[userId]/_components/Content.css.ts @@ -1,4 +1,5 @@ import { style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const container = style({ width: '100%', @@ -7,7 +8,7 @@ export const container = style({ position: 'absolute', top: 0, - backgroundColor: '#FFF', + backgroundColor: vars.color.white, borderTopLeftRadius: '2.5rem', borderTopRightRadius: '2.5rem', }); @@ -27,10 +28,11 @@ export const button = style({ width: '100%', height: '100%', - backgroundColor: 'white', + backgroundColor: vars.color.white, borderTop: '1px solid rgba(0, 0, 0, 0.25)', borderBottom: '1px solid rgba(0, 0, 0, 0.10)', + /** TODO - 공용폰트 body large 적용 */ fontSize: '1.6rem', fontWeight: '500', }); diff --git a/src/app/user/[userId]/_components/FollowButton.css.ts b/src/app/user/[userId]/_components/FollowButton.css.ts index fad5fe4f..8433d050 100644 --- a/src/app/user/[userId]/_components/FollowButton.css.ts +++ b/src/app/user/[userId]/_components/FollowButton.css.ts @@ -1,12 +1,13 @@ import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const button = style({ padding: '0.8rem 1.2rem', - backgroundColor: 'var(--Blue, #0047FF)', + backgroundColor: vars.color.blue, borderRadius: '5rem', fontSize: '1rem', fontWeight: '600', - color: '#fff', + color: vars.color.white, }); diff --git a/src/app/user/[userId]/_components/Profile.css.ts b/src/app/user/[userId]/_components/Profile.css.ts index f477e2e8..21dc416d 100644 --- a/src/app/user/[userId]/_components/Profile.css.ts +++ b/src/app/user/[userId]/_components/Profile.css.ts @@ -1,4 +1,5 @@ import { style, createVar } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; export const imageUrl = createVar(); @@ -48,7 +49,7 @@ export const profileImage = style({ height: '5rem', borderRadius: '50%', - border: '2px solid #FFF', + border: `2px solid ${vars.color.white}`, }); export const info = style({ @@ -66,7 +67,7 @@ export const user = style({ export const nickName = style({ fontSize: '2rem', fontWeight: ' 700', - color: '#202020', + color: vars.color.black, letterSpacing: '-0.6px', }); @@ -99,7 +100,7 @@ export const description = style({ fontSize: '1.2rem', fontWeight: '500', - color: '#333', + color: vars.color.black, lineHeight: '1.6rem', letterSpacing: '-0.36px', }); From bab026832e2f4ea46fbd200abe234eec149a7b07 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 15:02:09 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Design:=20=EC=B9=B4=EB=93=9C=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=A0=9C=EB=AA=A9=20=EA=B8=B8=EC=9D=B4=20?= =?UTF-8?q?=EC=A4=84=EC=9E=84=20=ED=91=9C=EC=8B=9C=20UI=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/app/user/[userId]/_components/Card.css.ts | 6 ++++++ src/app/user/[userId]/_components/Card.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/user/[userId]/_components/Card.css.ts b/src/app/user/[userId]/_components/Card.css.ts index 6653a799..c456b5cb 100644 --- a/src/app/user/[userId]/_components/Card.css.ts +++ b/src/app/user/[userId]/_components/Card.css.ts @@ -60,3 +60,9 @@ export const item = style({ export const rank = style({ width: '1.2rem', }); + +export const itemTitle = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +}); diff --git a/src/app/user/[userId]/_components/Card.tsx b/src/app/user/[userId]/_components/Card.tsx index f7cf5683..530c850a 100644 --- a/src/app/user/[userId]/_components/Card.tsx +++ b/src/app/user/[userId]/_components/Card.tsx @@ -39,7 +39,7 @@ export default function Card({ list, isOwner }: CardProps) { {item.ranking} {'.'} - {item.title} + {item.title} ))} From 63f15a84bdf54b8ab67d8f9ca396c89d227c8bd9 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 15:19:10 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20unmount=20=EC=8B=9C=20=EC=BF=BC=EB=A6=AC=20?= =?UTF-8?q?=EC=BA=90=EC=8B=9C=20=EC=A0=9C=EA=B1=B0=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20resetQuries=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index fcf4856b..a78aea34 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -7,7 +7,7 @@ */ import Link from 'next/link'; -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'; import { MasonryGrid } from '@egjs/react-grid'; @@ -75,11 +75,20 @@ export default function Content({ userId, type }: ContentProps) { setSelectedCategory(category); queryClient.resetQueries({ - queryKey: [QUERY_KEYS.getAllList, userId, type, category], + queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], exact: true, }); }; + useEffect(() => { + return () => { + queryClient.removeQueries({ + queryKey: [QUERY_KEYS.getAllList, userId, type, selectedCategory], + exact: true, + }); + }; + }, []); + return (
From efba1b2c919d17fda451385295c2efc4d9d23a6b Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Sun, 11 Feb 2024 15:27:28 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Style:=20=EC=A3=BC=EC=84=9D=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/_components/Content.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/app/user/[userId]/_components/Content.tsx b/src/app/user/[userId]/_components/Content.tsx index a78aea34..94703bd8 100644 --- a/src/app/user/[userId]/_components/Content.tsx +++ b/src/app/user/[userId]/_components/Content.tsx @@ -2,7 +2,6 @@ /** TODO - - [x] 무한스크롤 적용 - [ ] 피드페이지 스켈레톤 ui 적용 */ @@ -61,16 +60,12 @@ export default function Content({ userId, type }: ContentProps) { return listsData ? listsData.pages.flatMap(({ feedLists }) => feedLists) : []; }, [listsData]); - // console.log(hasNextPage); // 삭제 예정 - const ref = useIntersectionObserver(() => { if (hasNextPage) { fetchNextPage(); } }); - console.log(lists); // 삭제 예정 - const handleFetchListsOnCategory = (category: string) => { setSelectedCategory(category);