✨ Update v1.0.0 - 소셜로그인 & 북마크

next.config.js

@@ -3,7 +3,7 @@ const withPWA = require('next-pwa')({
 });
 
 const nextConfig = withPWA({
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {

package.json

@@ -32,6 +32,7 @@
     "react-lottie-player": "^1.5.4",
     "react-tooltip": "^5.20.0",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "svgstore": "^3.0.1",
     "svgstore-cli": "^2.0.1",
     "tailwind-merge": "^1.14.0",

src/apis/apis.ts

@@ -1,12 +1,15 @@
 import {
   FilterTagsResponse,
   PoseDetailResponse,
+  PoseFeedContents,
   PoseFeedResponse,
   PosePickResponse,
   PoseTalkResponse,
   RegisterResponse,
 } from '.';
+import privateApi from './config/privateApi';
 import publicApi from './config/publicApi';
+import { KAKAO_REDIRECT_URI } from '@/constants/env';
 
 export const getPosePick = (peopleCount: number) =>
   publicApi.get<PosePickResponse>(`/pose/pick/${peopleCount}`);
@@ -22,7 +25,7 @@ export const getPoseFeed = async (
   tags: string,
   pageNumber: number
 ) =>
-  await publicApi.get<PoseFeedResponse>(`/pose`, {
+  await privateApi.get<PoseFeedResponse>(`/pose`, {
     params: {
       frameCount,
       pageNumber,
@@ -34,4 +37,38 @@ export const getPoseFeed = async (
 export const getFilterTag = () => publicApi.get<FilterTagsResponse>('/pose/tags');
 
 export const getRegister = (code: string) =>
-  publicApi.get<RegisterResponse>(`/users/login/oauth/kakao?code=${code}`);
+  publicApi.get<RegisterResponse>(
+    `/users/login/oauth/kakao?code=${code}&redirectURI=${KAKAO_REDIRECT_URI}`
+  );
+
+export const patchLogout = (accessToken: string, refreshToken: string) =>
+  publicApi.patch('/users/logout', {
+    accessToken: `Bearer ${accessToken}`,
+    refreshToken: `Bearer ${refreshToken}`,
+  });
+
+export const patchDeleteAccount = (
+  accessToken: string,
+  refreshToken: string,
+  withdrawalReason: string
+) =>
+  publicApi.patch('/users/deleteAccount', {
+    accessToken: `Bearer ${accessToken}`,
+    refreshToken: `Bearer ${refreshToken}`,
+    withdrawalReason,
+  });
+
+export const postBookmark = (poseId: number) =>
+  privateApi.post(`/bookmark`, null, {
+    params: { poseId },
+  });
+
+export const deleteBookmark = (poseId: number) =>
+  privateApi.delete(`/bookmark`, {
+    params: { poseId },
+  });
+
+export const getBookmarkFeed = (pageNumber: number) =>
+  privateApi.get<PoseFeedContents>('/bookmark/feed', {
+    params: { pageNumber, pageSize: 10 },
+  });

src/apis/config/privateApi.ts

@@ -1,30 +1,46 @@
-import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
+import axios from 'axios';
 
+import { CustomInstance } from './type';
 import { BASE_API_URL } from '@/constants/env';
-import { getCookie } from '@/utils/cookieController';
 
-import type { CustomInstance } from './type';
+function getAccesstoken() {
+  if (typeof window !== 'undefined') {
+    const item = localStorage.getItem('accesstoken');
+    return item;
+  }
+}
 
 const privateApi: CustomInstance = axios.create({
   baseURL: `${BASE_API_URL}/api`,
   withCredentials: true,
 });
 
+privateApi.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response.status === 415) {
+      alert('세션이 만료되었어요. 다시 로그인이 필요해요!');
+    } else {
+      alert('오류가 발생했어요. 다시 시도해주세요');
+    }
+    location.href = '/auth/logout';
+    return Promise.reject(error);
+  }
+);
+
 privateApi.interceptors.request.use(
-  async (config: InternalAxiosRequestConfig) => {
-    try {
-      const accessToken = getCookie('accessToken');
+  (config) => {
+    const accessToken = getAccesstoken();
+
+    if (accessToken) {
       config.headers.Authorization = `Bearer ${accessToken}`;
-      return config;
-    } catch (error) {
-      return Promise.reject(error);
     }
+
+    return config;
   },
-  (error: AxiosError) => {
-    Promise.reject(error);
+  (error) => {
+    console.log('request : ' + error.response);
   }
 );
 
-privateApi.interceptors.response.use((response) => response.data);
-
 export default privateApi;

src/apis/config/type.ts

@@ -19,4 +19,4 @@ export interface CustomInstance extends AxiosInstance {
   patch<T>(...params: Parameters<AxiosInstance['patch']>): Promise<T>;
 }
 
-export type ErrorStatus = 400 | 401 | 403 | 412 | 500;
+export type ErrorStatus = 400 | 401 | 403 | 412 | 500 | 415;

src/apis/queries.ts

@@ -7,16 +7,16 @@ import {
 
 import {
   FilterTagsResponse,
+  PoseFeedContents,
   PoseFeedResponse,
   PosePickResponse,
   PoseTalkResponse,
-  RegisterResponse,
+  getBookmarkFeed,
   getFilterTag,
   getPoseDetail,
   getPoseFeed,
   getPosePick,
   getPoseTalk,
-  getRegister,
 } from '.';
 import { FilterState } from '@/hooks/useFilterState';
 
@@ -38,8 +38,8 @@ export const usePoseTalkQuery = (options?: UseQueryOptions<PoseTalkResponse>) =>
 export const usePoseFeedQuery = (
   { peopleCount, frameCount, tags }: FilterState,
   options?: UseInfiniteQueryOptions<PoseFeedResponse>
-) =>
-  useSuspenseInfiniteQuery<PoseFeedResponse>(
+) => {
+  return useSuspenseInfiniteQuery<PoseFeedResponse>(
     ['poseFeed', peopleCount, frameCount, tags],
     ({ pageParam = 0 }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam),
     {
@@ -52,9 +52,22 @@ export const usePoseFeedQuery = (
       ...options,
     }
   );
+};
+
+export const useBookmarkFeedQuery = (
+  accesstoken: string,
+  options?: UseInfiniteQueryOptions<PoseFeedContents>
+) =>
+  useSuspenseInfiniteQuery<PoseFeedContents>(
+    ['bookmarkFeed'],
+    ({ pageParam = 0 }) => getBookmarkFeed(pageParam),
+    {
+      getNextPageParam: (lastPage) => {
+        return lastPage.last ? undefined : lastPage.number + 1;
+      },
+      ...options,
+    }
+  );
 
 export const useFilterTagQuery = (options?: UseQueryOptions<FilterTagsResponse>) =>
   useSuspenseQuery<FilterTagsResponse>(['filterTag'], getFilterTag, { ...options });
-
-export const useRegisterQuery = (code: string) =>
-  useSuspenseQuery<RegisterResponse>(['register'], () => getRegister(code), {});

src/apis/type.ts

@@ -8,6 +8,7 @@ export interface PoseInfo {
   sourceUrl: string;
   tagAttributes: string;
   updatedAt: string;
+  bookmarkCheck: boolean;
 }
 
 // 포즈피드
@@ -16,7 +17,7 @@ interface PoseFeedContentsSort {
   sorted: boolean;
   unsorted: boolean;
 }
-interface PoseFeedContents {
+export interface PoseFeedContents {
   content: Array<{ poseInfo: PoseInfo }>;
   pageable: {
     sort: PoseFeedContentsSort;

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

@@ -0,0 +1,26 @@
+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/url';
+import useFilterState from '@/hooks/useFilterState';
+
+export default function FeedContent() {
+  const { filterState } = useFilterState();
+  const query = usePoseFeedQuery(filterState);
+
+  return (
+    <FeedSection query={query}>
+      <EmptyCase
+        title={'신비한 포즈를 찾으시는군요!'}
+        text={'찾고 싶은 포즈를 저희에게 알려주세요.'}
+      >
+        <Link href={URL.inquiry}>
+          <PrimaryButton text={'문의사항 남기기'} />
+        </Link>
+      </EmptyCase>
+    </FeedSection>
+  );
+}

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

@@ -1,10 +1,12 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 import { FilterTagsResponse, useFilterTagQuery } from '@/apis';
 import { BottomDiv, PrimaryButton } from '@/components/Button';
 import BottomSheet from '@/components/Modal/BottomSheet';
 import { SelectionBasic, SelectionTagList } from '@/components/Selection';
-import { frameCountList, peopleCountList } from '@/constants/filterList';
+import { frameCountList, peopleCountList } from '@/constants/data';
 import useBottomSheet from '@/hooks/useBottomSheet';
 import useFilterState from '@/hooks/useFilterState';
 

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

@@ -1,6 +1,9 @@
+'use client';
+
 import { QueryAsyncBoundary } from '@suspensive/react-query';
 
-import FeedSection from './FeedSection';
+import FeedContent from './FeedContent';
+import FilterSheet from './FilterSheet';
 import { RejectedFallback } from '@/components/ErrorBoundary';
 import { Loading } from '@/components/Loading';
 import { PageAnimation } from '@/components/PageAnimation';
@@ -12,7 +15,8 @@ export default function Feed() {
       pendingFallback={<Loading className="h-[calc(100dvh-178px)]" />}
     >
       <PageAnimation>
-        <FeedSection />
+        <FeedContent />
+        <FilterSheet />
       </PageAnimation>
     </QueryAsyncBoundary>
   );