v1.1.0 Develop - 마이포즈 데이터 갯수, 포즈피드 스켈레톤 사이즈

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<PoseFeedContents>('/bookmark/feed', {
     params: { pageNumber, pageSize: 10 },
   });
+
+export const getMyposeCount = () => privateApi.get<MyposeCountResponse>(`/pose/user/mypose`);

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<PoseFeedC
 
 export const useFilterTagQuery = (options?: UseQueryOptions<FilterTagsResponse>) =>
   useSuspenseQuery<FilterTagsResponse>(['filterTag'], getFilterTag, { ...options });
+
+export const useMyposeCountQuery = (options?: UseQueryOptions<MyposeCountResponse>) =>
+  useQuery<MyposeCountResponse>(['myposeCount'], getMyposeCount, { ...options });

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;
+}

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 (
     <>
       <div className="fixed inset-x-0 bottom-0 z-30">
         <div className="mx-auto max-w-layout bg-white px-20 pb-24 pt-10">
-          <div className="flex gap-8 [&>*]:flex-1 [&>*]:grow">{children}</div>
+          {grow ? (
+            <div className="flex gap-8 [&>*]:grow">{children}</div>
+          ) : (
+            <div className="flex gap-8">{children}</div>
+          )}
         </div>
         {isIOS() && <AppDownloadBanner />}
       </div>

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() {

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 ? (
+    <Link href={path} className="flex flex-1 items-center justify-center rounded-8 bg-white">
+      <div id="subtitle-1" className="text-main-violet">
+        {title}
+      </div>
+    </Link>
+  ) : (
+    <Link href={path} className="flex flex-1 items-center justify-center rounded-8">
+      <div id="subtitle-1" className="text-tertiary">
+        {title}
+      </div>
+    </Link>
+  );
+
+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 (
+    <div className="h-72 px-20 py-12">
+      <div className="flex h-full gap-4 rounded-8 bg-divider p-4 ">
+        <TabItem
+          key="upload"
+          title={`${Data.upload.title} ${countData.uploadCount}`}
+          path={Data.upload.path}
+          current={path === Data.upload.path}
+        />
+        <TabItem
+          key="bookmark"
+          title={`${Data.bookmark.title} ${countData.bookmarkCount}`}
+          path={Data.bookmark.path}
+          current={path === Data.bookmark.path}
+        />
+      </div>
+    </div>
+  );
+}

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 (
     <FeedSection query={query}>

src/app/(Sub)/detail/[id]/DetailSection.tsx

@@ -51,14 +51,14 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
         <TagButton type="frame" value={frameCount} name={`${frameCount}컷`} />
         {tagAttributes?.split(',').map((tag, index) => <TagButton key={index} name={tag} />)}
       </div>
-      <MainFooter>
+      <MainFooter grow={false}>
         <PrimaryButton
           text="링크 공유"
           onClick={handleShareLink}
           variant="secondary"
           className="border border-border-default"
         />
-        <PrimaryButton text="카카오 공유" onClick={() => shareKakao(poseId)} />
+        <PrimaryButton className="grow" text="카카오 공유" onClick={() => shareKakao(poseId)} />
       </MainFooter>
     </div>
   );

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<Metadata> {
   const id = parseInt(params.id);
@@ -33,6 +32,7 @@ export default function DetailPage({ params }: { params: { id: number } }) {
 
   return (
     <div>
+      {/* <Header close={true} menu={true} additional={<BookmarkButton style='black'/>} /> */}
       <Header close={true} menu={true} />
       <QueryAsyncBoundary
         rejectedFallback={RejectedFallback}

src/components/Button/PrimaryButton.tsx

@@ -17,7 +17,13 @@ const styleMap: Record<StyleType, string> = {
   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 (
     <button
       onClick={onClick}

src/components/Feed/BookmarkButton.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { Icon } from '../Button/Icon';
+import { Icon, IconButton } from '../Button/Icon';
 import { deleteBookmark, postBookmark } from '@/apis';
 import LoginModal from '@/components/Login/LoginModal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
@@ -13,8 +13,9 @@ import { getClientCookie } from '@/utils';
 interface BookmarkButtonI {
   poseId: number;
   isMarked: boolean;
+  style?: 'circle' | 'black';
 }
-export default function BookmarkButton({ poseId, isMarked }: BookmarkButtonI) {
+export default function BookmarkButton({ poseId, isMarked, style = 'circle' }: BookmarkButtonI) {
   const { open } = useOverlay();
   const token = getClientCookie(COOKIE_ACCESS_TOKEN);
   const [marked, setMarked] = useState(isMarked);
@@ -35,6 +36,14 @@ export default function BookmarkButton({ poseId, isMarked }: BookmarkButtonI) {
     }
   }
 
+  if (style === 'black') {
+    return (
+      <IconButton
+        icon={marked ? ICON.bookmark.black.fill : ICON.bookmark.black.empty}
+        onClick={onClick}
+      />
+    );
+  }
   return (
     <button
       className="absolute bottom-6 right-6 h-36 w-36 rounded-24 bg-[#141218] bg-opacity-30 p-6"

src/components/Feed/Photo.tsx

@@ -5,22 +5,21 @@ import Link from 'next/link';
 import { useState } from 'react';
 
 import BookmarkButton from './BookmarkButton';
+import { PoseInfo } from '@/apis';
 
-interface Photo {
-  imageKey?: string;
-  source?: string;
-  id: number;
-  isMarked: boolean;
+interface PhotoI {
+  data: PoseInfo;
 }
-
-export default function Photo({ imageKey, source, id, isMarked }: Photo) {
+export default function Photo({ data }: PhotoI) {
+  const { imageKey, source, bookmarkCheck, poseId, width, height } = data;
   const [loaded, setLoaded] = useState(false);
+  console.log(width / height);
 
   return (
     <div className="relative mb-16 inline-block w-full rounded-8">
       {imageKey && (
         <>
-          <Link href={`/detail/${id}`}>
+          <Link href={`/detail/${poseId}`}>
             <Image
               src={imageKey}
               alt={source || ''}
@@ -36,8 +35,13 @@ export default function Photo({ imageKey, source, id, isMarked }: Photo) {
             />
           </Link>
 
-          {loaded && <BookmarkButton isMarked={isMarked} poseId={id} />}
-          {loaded || <div className="h-200 w-full rounded-8 bg-sub-white" />}
+          {loaded && <BookmarkButton isMarked={bookmarkCheck} poseId={poseId} />}
+          {loaded || (
+            <div
+              style={{ aspectRatio: `${width}/${height}` }}
+              className="w-full rounded-8 bg-sub-white"
+            />
+          )}
         </>
       )}
     </div>

src/components/Feed/PhotoList.tsx

@@ -10,13 +10,7 @@ export default function PhotoList({ data }: PhotoList) {
   return (
     <>
       {data.content.map((item) => (
-        <Photo
-          key={item.poseInfo.poseId}
-          imageKey={item.poseInfo.imageKey}
-          source={item.poseInfo.source}
-          id={item.poseInfo.poseId}
-          isMarked={item.poseInfo.bookmarkCheck}
-        />
+        <Photo key={item.poseInfo.poseId} data={item.poseInfo} />
       ))}
     </>
   );