diff --git a/public/icons/bookmark_black_empty.svg b/public/icons/bookmark_black_empty.svg new file mode 100644 index 00000000..8db28592 --- /dev/null +++ b/public/icons/bookmark_black_empty.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/bookmark_black_fill.svg b/public/icons/bookmark_black_fill.svg new file mode 100644 index 00000000..8db28592 --- /dev/null +++ b/public/icons/bookmark_black_fill.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/apis/apis.ts b/src/apis/apis.ts index 4b2ac93d..f861cfd8 100644 --- a/src/apis/apis.ts +++ b/src/apis/apis.ts @@ -1,5 +1,6 @@ import { FilterTagsResponse, + MyposeCountResponse, PoseDetailResponse, PoseFeedContents, PoseFeedResponse, @@ -62,3 +63,5 @@ export const getBookmarkFeed = (pageNumber: number) => privateApi.get('/bookmark/feed', { params: { pageNumber, pageSize: 10 }, }); + +export const getMyposeCount = () => privateApi.get(`/pose/user/mypose`); diff --git a/src/apis/queries.ts b/src/apis/queries.ts index f1bb7ba5..2a8d2438 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -7,12 +7,14 @@ import { import { FilterTagsResponse, + MyposeCountResponse, PoseFeedContents, PoseFeedResponse, PosePickResponse, PoseTalkResponse, getBookmarkFeed, getFilterTag, + getMyposeCount, getPoseDetail, getPoseFeed, getPosePick, @@ -68,3 +70,6 @@ export const useBookmarkFeedQuery = (options?: UseInfiniteQueryOptions) => useSuspenseQuery(['filterTag'], getFilterTag, { ...options }); + +export const useMyposeCountQuery = (options?: UseQueryOptions) => + useQuery(['myposeCount'], getMyposeCount, { ...options }); diff --git a/src/apis/type.ts b/src/apis/type.ts index 469db938..0e835147 100644 --- a/src/apis/type.ts +++ b/src/apis/type.ts @@ -9,6 +9,8 @@ export interface PoseInfo { tagAttributes: string; updatedAt: string; bookmarkCheck: boolean; + width: number; + height: number; } // 포즈피드 @@ -92,3 +94,9 @@ export interface RegisterResponse { expiresIn: number; }; } + +// 마이포즈 +export interface MyposeCountResponse { + bookmarkCount: number; + uploadCount: number; +} diff --git a/src/app/(Main)/MainFooter.tsx b/src/app/(Main)/MainFooter.tsx index 95cfeb3b..36f46459 100644 --- a/src/app/(Main)/MainFooter.tsx +++ b/src/app/(Main)/MainFooter.tsx @@ -2,12 +2,20 @@ import AppDownloadBanner from '../../components/Header/AppDownloadBanner'; import { StrictPropsWithChildren } from '@/types'; import { isIOS } from '@/utils'; -export function MainFooter({ children }: StrictPropsWithChildren) { +interface MainFooterI extends StrictPropsWithChildren { + grow?: boolean; +} + +export function MainFooter({ children, grow = true }: MainFooterI) { return ( <>
-
{children}
+ {grow ? ( +
{children}
+ ) : ( +
{children}
+ )}
{isIOS() && }
diff --git a/src/app/(Main)/MainHeader.tsx b/src/app/(Main)/MainHeader.tsx index 27a2a9c0..0d6d2877 100644 --- a/src/app/(Main)/MainHeader.tsx +++ b/src/app/(Main)/MainHeader.tsx @@ -2,10 +2,10 @@ import { usePathname } from 'next/navigation'; +import Tab from './Tab'; +import FilterTab from '@/app/(Main)/feed/FilterTab'; +import MyposeTab from '@/app/(Main)/mypose/MyposeTab'; import Header from '@/components/Header'; -import FilterTab from '@/components/Header/FilterTab'; -import MyposeTab from '@/components/Header/MyposeTab'; -import Tab from '@/components/Header/Tab'; import { Spacing } from '@/components/Spacing'; export default function MainHeader() { diff --git a/src/components/Header/Tab.tsx b/src/app/(Main)/Tab.tsx similarity index 100% rename from src/components/Header/Tab.tsx rename to src/app/(Main)/Tab.tsx diff --git a/src/components/Header/FilterTab.tsx b/src/app/(Main)/feed/FilterTab.tsx similarity index 100% rename from src/components/Header/FilterTab.tsx rename to src/app/(Main)/feed/FilterTab.tsx diff --git a/src/app/(Main)/mypose/MyposeTab.tsx b/src/app/(Main)/mypose/MyposeTab.tsx new file mode 100644 index 00000000..cf2b75bb --- /dev/null +++ b/src/app/(Main)/mypose/MyposeTab.tsx @@ -0,0 +1,67 @@ +'use client'; + +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { useState } from 'react'; + +import { useMyposeCountQuery } from '@/apis'; +import { COOKIE_ACCESS_TOKEN } from '@/constants'; +import { getClientCookie } from '@/utils'; + +const Data = { + upload: { title: '등록', path: '/mypose' }, + bookmark: { title: '저장', path: '/mypose/bookmark' }, +}; + +interface TabItemI { + title: string; + path: string; + current: boolean; +} +const TabItem = ({ title, path, current }: TabItemI) => + current ? ( + +
+ {title} +
+ + ) : ( + +
+ {title} +
+ + ); + +export default function MyposeTab() { + const path = usePathname(); + const accesstoken = getClientCookie(COOKIE_ACCESS_TOKEN); + + const [countData, setCountData] = useState({ uploadCount: 0, bookmarkCount: 0 }); + + const query = useMyposeCountQuery({ + enabled: accesstoken !== '', + onSuccess: (data) => { + setCountData(data); + }, + }); + + return ( +
+
+ + +
+
+ ); +} diff --git a/src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx b/src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx index d79f14fd..ac49d25a 100644 --- a/src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx +++ b/src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx @@ -3,9 +3,12 @@ import BookmarkEmpty from './BookmarkEmpty'; import { useBookmarkFeedQuery } from '@/apis'; import FeedSection from '@/components/Feed/FeedSection'; +import { COOKIE_ACCESS_TOKEN } from '@/constants'; +import { getClientCookie } from '@/utils'; export default function BookmarkSecion() { - const query = useBookmarkFeedQuery(); + const accesstoken = getClientCookie(COOKIE_ACCESS_TOKEN); + const query = useBookmarkFeedQuery({ enabled: accesstoken !== '' }); return ( diff --git a/src/app/(Sub)/detail/[id]/DetailSection.tsx b/src/app/(Sub)/detail/[id]/DetailSection.tsx index eec0403a..45454d27 100644 --- a/src/app/(Sub)/detail/[id]/DetailSection.tsx +++ b/src/app/(Sub)/detail/[id]/DetailSection.tsx @@ -51,14 +51,14 @@ export default function DetailSection({ poseId }: DetailSectionProps) { {tagAttributes?.split(',').map((tag, index) => )} - + - shareKakao(poseId)} /> + shareKakao(poseId)} /> ); diff --git a/src/app/(Sub)/detail/[id]/page.tsx b/src/app/(Sub)/detail/[id]/page.tsx index 91c68d4d..22ce7c1c 100644 --- a/src/app/(Sub)/detail/[id]/page.tsx +++ b/src/app/(Sub)/detail/[id]/page.tsx @@ -3,13 +3,12 @@ import { Metadata } from 'next'; import DetailSection from './DetailSection'; import { getPoseDetail } from '@/apis'; -import { IconButton } from '@/components/Button'; import { RejectedFallback } from '@/components/ErrorBoundary'; import Header from '@/components/Header'; import { Loading } from '@/components/Loading'; import { PageAnimation } from '@/components/PageAnimation'; import { HydrationProvider } from '@/components/Provider'; -import { ICON, OPEN_GRAPH } from '@/constants'; +import { OPEN_GRAPH } from '@/constants'; export async function generateMetadata({ params }: { params: { id: string } }): Promise { const id = parseInt(params.id); @@ -33,6 +32,7 @@ export default function DetailPage({ params }: { params: { id: number } }) { return (
+ {/*
} /> */}
= { warning: 'bg-warning text-white', }; -export default function PrimaryButton({ icon, text, onClick, variant = 'fill', className }: ButtonProps) { +export default function PrimaryButton({ + icon, + text, + onClick, + variant = 'fill', + className, +}: ButtonProps) { return (