Merge pull request #91 from dnd-side-project/v2.0.0

v2

Author: seondal

package.json

@@ -12,11 +12,13 @@
     "make-sprite": "rm public/sprite/sprite.svg && svgstore -o public/sprite/sprite.svg public/sprite/icons/**/*.svg"
   },
   "dependencies": {
+    "@notionhq/client": "^3.1.3",
     "@suspensive/react": "^1.13.0",
     "@suspensive/react-query": "^1.13.0",
     "@tanstack/react-query": "^4.32.6",
     "axios": "^1.4.0",
     "clsx": "^2.0.0",
+    "dotenv": "^16.5.0",
     "es-toolkit": "^1.15.1",
     "eslint": "^8.46.0",
     "eslint-config-next": "^13.4.12",
@@ -54,5 +56,18 @@
     "prettier-plugin-tailwindcss": "^0.4.1",
     "svgstore-cli": "^2.0.1",
     "tailwindcss": "^3.3.3"
-  }
+  },
+  "description": "<img align=\"left\" width=\"170\" src=\"https://github.com/pose-picker/.github/assets/75469131/012da976-4d52-45e9-abfc-fdd700b927be\" />",
+  "main": ".eslintrc.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dnd-side-project/dnd-9th-5-frontend.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dnd-side-project/dnd-9th-5-frontend/issues"
+  },
+  "homepage": "https://github.com/dnd-side-project/dnd-9th-5-frontend#readme"
 }

src/apis/apis.ts

@@ -4,37 +4,12 @@ import {
   PoseDetailResponse,
   PoseFeedContents,
   PoseFeedResponse,
-  PosePickResponse,
-  PoseTalkResponse,
   RegisterResponse,
 } from '.';
 import privateApi from './config/privateApi';
 import publicApi from './config/publicApi';
 import { KAKAO_REDIRECT_URI } from '@/constants';
 
-export const getPosePick = (peopleCount: number) =>
-  publicApi.get<PosePickResponse>(`/pose/pick/${peopleCount}`);
-
-export const getPoseDetail = (poseId: number) =>
-  privateApi.get<PoseDetailResponse>(`/pose/${poseId}`);
-
-export const getPoseTalk = () => publicApi.get<PoseTalkResponse>('/pose/talk');
-
-export const getPoseFeed = async (
-  peopleCount: number,
-  frameCount: number,
-  tags: string,
-  pageNumber: number
-) =>
-  await privateApi.get<PoseFeedResponse>(`/pose`, {
-    params: {
-      frameCount,
-      pageNumber,
-      peopleCount,
-      tags,
-    },
-  });
-
 export const getFilterTag = () => publicApi.get<FilterTagsResponse>('/pose/tags');
 
 export const getRegister = (code: string) =>

src/apis/queries.ts

@@ -8,56 +8,11 @@ import {
 import {
   FilterTagsResponse,
   MyposeCountResponse,
-  PoseDetailResponse,
   PoseFeedContents,
-  PoseFeedResponse,
-  PosePickResponse,
-  PoseTalkResponse,
   getBookmarkFeed,
   getFilterTag,
   getMyposeCount,
-  getPoseDetail,
-  getPoseFeed,
-  getPosePick,
-  getPoseTalk,
 } from '.';
-import { FilterState } from '@/hooks/useFilterState';
-
-export const usePoseDetailQuery = (
-  { poseId }: { poseId: number },
-  options?: UseQueryOptions<PoseDetailResponse>
-) => useQuery<PoseDetailResponse>(['poseId', poseId], () => getPoseDetail(poseId), options);
-
-export const usePosePickQuery = (
-  peopleCount: number,
-  options?: UseQueryOptions<PosePickResponse>
-) =>
-  useSuspenseQuery<PosePickResponse>(['posePick', peopleCount], () => getPosePick(peopleCount), {
-    enabled: false,
-    ...options,
-  });
-
-export const usePoseTalkQuery = (options?: UseQueryOptions<PoseTalkResponse>) =>
-  useSuspenseQuery<PoseTalkResponse>(['poseTalk'], getPoseTalk, { enabled: false, ...options });
-
-export const usePoseFeedQuery = (
-  { peopleCount, frameCount, tags }: FilterState,
-  options?: UseInfiniteQueryOptions<PoseFeedResponse>
-) => {
-  return useSuspenseInfiniteQuery<PoseFeedResponse>(
-    ['poseFeed', peopleCount, frameCount, tags],
-    ({ pageParam = 0 }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam),
-    {
-      getNextPageParam: (lastPage) => {
-        const target = lastPage.recommendation
-          ? lastPage.recommendedContents
-          : lastPage.filteredContents;
-        return target.last ? undefined : target.number + 1;
-      },
-      ...options,
-    }
-  );
-};
 
 export const useBookmarkFeedQuery = (options?: UseInfiniteQueryOptions<PoseFeedContents>) =>
   useSuspenseInfiniteQuery<PoseFeedContents>(

src/apis/type.ts

@@ -63,15 +63,6 @@ export interface PoseDetailResponse {
   poseInfo: PoseInfo;
 }
 
-export interface PoseTalkResponse {
-  poseWord: {
-    content: string;
-    createdAt: string;
-    updateAt: string;
-    wordId: number;
-  };
-}
-
 // 로그인
 export interface RegisterResponse {
   id: number;

src/app/(Main)/feed/FeedContent.tsx

@@ -1,18 +1,37 @@
+'use client';
+
 import Link from 'next/link';
 
-import { usePoseFeedQuery } from '@/apis';
 import { PrimaryButton } from '@/components/Button';
 import EmptyCase from '@/components/Feed/EmptyCase';
 import FeedSection from '@/components/Feed/FeedSection';
 import { URL } from '@/constants';
 import { useFilterState } from '@/hooks';
+import { useEffect, useState } from 'react';
+import { PoseFeedResponseI } from '@/server/type';
+import { getPoseFeed } from '@/server/api';
 
 export default function FeedContent() {
   const { filterState } = useFilterState();
-  const query = usePoseFeedQuery(filterState);
+  // const query = usePoseFeedQuery(filterState);
+  const [data, setData] = useState<PoseFeedResponseI | null>(null);
+
+  async function fetchPoseFeed() {
+    const res = await getPoseFeed(
+      filterState.peopleCount,
+      filterState.frameCount,
+      filterState.tags.join(',')
+    );
+    setData(res.data);
+  }
+
+  useEffect(() => {
+    fetchPoseFeed();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterState]);
 
   return (
-    <FeedSection query={query}>
+    <FeedSection data={data}>
       <EmptyCase
         title={'신비한 포즈를 찾으시는군요!'}
         text={'찾고 싶은 포즈를 저희에게 알려주세요.'}

src/app/(Main)/feed/FilterSheet.tsx

@@ -10,7 +10,7 @@ import { FRAME_COUNT_LIST, PEOPLE_COUNT_LIST } from '@/constants';
 import { useBottomSheet, useFilterState } from '@/hooks';
 
 export default function FilterSheet() {
-  const { data: tagListData } = useFilterTagQuery();
+  // const { data: tagListData } = useFilterTagQuery();
 
   const { filterState, updateFilterState } = useFilterState();
   const { isBottomSheetOpen, closeBottomSheet } = useBottomSheet();
@@ -59,7 +59,7 @@ export default function FilterSheet() {
           </div>
           <SelectionBasic data={FRAME_COUNT_LIST} state={frameState} setState={setFrameState} />
         </section>
-        <section>
+        {/* <section>
           <div id="subtitle-2" className="mb-8 text-secondary">
             태그
           </div>
@@ -70,7 +70,7 @@ export default function FilterSheet() {
               setState={setTagState}
             />
           )}
-        </section>
+        </section> */}
       </div>
       <div className="flex gap-8 px-20 pb-20">
         <PrimaryButton

src/app/(Main)/mypose/bookmark/BookmarkSecion.tsx

@@ -8,10 +8,10 @@ import { getClientCookie } from '@/utils';
 
 export default function BookmarkSecion() {
   const accesstoken = getClientCookie(COOKIE_ACCESS_TOKEN);
-  const query = useBookmarkFeedQuery({ enabled: accesstoken !== '' });
+  // const query = useBookmarkFeedQuery({ enabled: accesstoken !== '' });
 
   return (
-    <FeedSection query={query}>
+    <FeedSection data={null}>
       <BookmarkEmpty />
     </FeedSection>
   );

src/app/(Main)/pick/PickComponent.tsx

@@ -6,30 +6,31 @@ import Lottie from 'react-lottie-player';
 
 import lottiePick from '#/lotties/pick.json';
 import { MainFooter } from '../MainFooter';
-import { usePosePickQuery } from '@/apis';
 import { PrimaryButton } from '@/components/Button';
 import PoseImage from '@/components/Modal/PoseImage';
 import { SelectionBasic } from '@/components/Selection';
 import { PEOPLE_COUNT_LIST } from '@/constants';
 import { useDidMount } from '@/hooks';
+import { getPosePick } from '@/server/api';
 
-const DEFAULT_IMAGE = '/images/image-frame.png';
+const DEFAULT_IMAGE = '/images/image-frame.png' as const;
 
 export default function PickComponent() {
   const [countState, setCountState] = useState(1);
+  const [isLoading, setisLoading] = useState(false);
   const [isLottiePlaying, setIsLottiePlaying] = useState(true);
-  const { refetch, data } = usePosePickQuery(countState);
-  const imageSrc = data?.poseInfo?.imageKey || DEFAULT_IMAGE;
+  const [imageSrc, setImageSrc] = useState<string>(DEFAULT_IMAGE);
 
   useDidMount(async () => {
     await delay(2200);
     setIsLottiePlaying(false);
   });
 
   const handlePickClick = async () => {
-    refetch();
+    setisLoading(true);
     setIsLottiePlaying(true);
-    await delay(900);
+    const imageUrl = (await getPosePick(countState)).data.imageUrl;
+    setImageSrc(imageUrl);
     setIsLottiePlaying(false);
   };
 
@@ -43,13 +44,13 @@ export default function PickComponent() {
         />
       </div>
       <div className="relative flex grow">
-        {isLottiePlaying && (
+        {(isLottiePlaying || isLoading) && (
           <div className="absolute inset-x-0 inset-y-0 z-10 flex justify-center bg-black">
             <Lottie animationData={lottiePick} play />
           </div>
         )}
         <div className="absolute inset-x-0 inset-y-0 bg-black">
-          <PoseImage src={imageSrc} />
+          <PoseImage src={imageSrc} onLoad={() => setisLoading(false)} />
         </div>
       </div>
       <MainFooter>

src/app/(Main)/talk/TalkSection.tsx

@@ -1,15 +1,14 @@
 'use client';
 
-import { delay } from 'es-toolkit';
 import { useState } from 'react';
 import Lottie from 'react-lottie-player';
 
 import lottieTalkAfterClick from '#/lotties/talk_after_click.json';
 import lottieTalkBeforeClick from '#/lotties/talk_before_click.json';
 import { MainFooter } from '../MainFooter';
-import { usePoseTalkQuery } from '@/apis';
 import { PrimaryButton } from '@/components/Button';
 import { Spacing } from '@/components/Spacing';
+import { getPoseTalk } from '@/server/api';
 
 const INITIAL_TALK_WORD = `제시어에 맞춰\n포즈를 취해요!`;
 
@@ -18,22 +17,16 @@ export default function TalkWordSection() {
   const [isLoading, setIsLoading] = useState(true);
   const isWordLoaded = talkWord !== INITIAL_TALK_WORD;
 
-  const { refetch } = usePoseTalkQuery({
-    onSuccess: async (data) => {
-      await delay(1000);
-      setTalkWord(data.poseWord.content);
-      setIsLoading(false);
-    },
-  });
-
-  const handleTalkClick = () => {
+  const handleTalkClick = async () => {
     setIsLoading(true);
-    refetch();
+    const keyword = (await getPoseTalk()).data.keyword;
+    setTalkWord(keyword);
+    setIsLoading(false);
   };
 
   return (
     <section className="flex flex-col items-center">
-      <h1 className="max-w-310 h-100 items-center break-keep text-center">{talkWord}</h1>
+      <h1 className="h-100 max-w-310 items-center break-keep text-center">{talkWord}</h1>
 
       <Spacing size={10} />
 

src/app/(Sub)/auth/AuthComponent.tsx

@@ -15,22 +15,23 @@ export default function AuthComponent({ code }: AuthComponentProps) {
   const router = useRouter();
 
   useDidMount(async () => {
-    try {
-      const {
-        token: { accessToken },
-        email,
-        nickname,
-      } = await getRegister(code);
-
-      setClientCookie(COOKIE_ACCESS_TOKEN, accessToken);
-      setClientCookie(COOKIE_EMAIL, email);
-      setClientCookie(COOKIE_NICKNAME, nickname);
-
-      alert(`로그인에 성공했어요!`);
-      router.push('/');
-    } catch (error) {
-      router.push('/');
-    }
+    // try {
+    //   const {
+    //     token: { accessToken },
+    //     email,
+    //     nickname,
+    //   } = await getRegister(code);
+
+    //   setClientCookie(COOKIE_ACCESS_TOKEN, accessToken);
+    //   setClientCookie(COOKIE_EMAIL, email);
+    //   setClientCookie(COOKIE_NICKNAME, nickname);
+
+    //   alert(`로그인에 성공했어요!`);
+    //   router.push('/');
+    // } catch (error) {
+    //   router.push('/');
+    // }
+    alert('로그인 기능은 준비중이에요');
   });
 
   return null;