Merge pull request #236 from ItRecode/develop

[release] 상용 서버 배포 (스프린트 6주차)

src/apis/myRecord.ts

@@ -0,0 +1,51 @@
+import { AxiosResponse } from 'axios'
+import { baseInstance } from './instance'
+import {
+  IMemoryRecordList,
+  IMyRecordByDateList,
+  IMyRecordByKeywordList,
+  IMyRecordRequestParam,
+} from 'types/myRecord'
+
+const MEMORY_RECORD_SIZE = 7
+const MEMORY_COMMENT_SIZE = 5
+const MY_RECORD_KEYWORD_SIZE = 10
+
+export const getMemoryRecord = (
+  pageParam: number
+): Promise<AxiosResponse<IMemoryRecordList>> => {
+  return baseInstance.get(`/record/memory`, {
+    params: {
+      memoryRecordPage: pageParam,
+      memoryRecordSize: MEMORY_RECORD_SIZE,
+      sizeOfCommentPerRecord: MEMORY_COMMENT_SIZE,
+    },
+  })
+}
+
+export const getRecordByDate = ({
+  date,
+  page,
+  size,
+}: IMyRecordRequestParam): Promise<AxiosResponse<IMyRecordByDateList>> => {
+  return baseInstance.get(`/record`, {
+    params: {
+      date,
+      page,
+      size,
+    },
+  })
+}
+
+export const getRecordByKeyword = (
+  pageParam: number,
+  keyword: string
+): Promise<AxiosResponse<IMyRecordByKeywordList>> => {
+  return baseInstance.get(`/record/search`, {
+    params: {
+      searchKeyword: keyword,
+      page: pageParam,
+      size: MY_RECORD_KEYWORD_SIZE,
+    },
+  })
+}

src/apis/record.ts

@@ -1,16 +1,10 @@
-import { AxiosResponse } from 'axios'
-import {
-  IMemoryRecordList,
-  IMyRecordRequestParam,
-  IRecordByDateList,
-} from 'types/recordData'
+import { parentCategoryID } from './../types/category'
 import { baseInstance } from './instance'
 
-const MEMORY_RECORD_SIZE = 7
-const MEMORY_COMMENT_SIZE = 5
-
-export const getCategory = () => {
-  return baseInstance.get('/record/category')
+export const getCategory = async (categoryId?: parentCategoryID) => {
+  return await baseInstance.get('/record/category', {
+    params: { parentRecordCategoryId: categoryId },
+  })
 }
 
 export const enrollRecord = async (data: FormData) => {
@@ -26,18 +20,6 @@ export const getRecord = async (recordId: string | undefined) => {
   }
 }
 
-export const getMemoryRecord = (
-  pageParam: number
-): Promise<AxiosResponse<IMemoryRecordList>> => {
-  return baseInstance.get(`/record/memory`, {
-    params: {
-      memoryRecordPage: pageParam,
-      memoryRecordSize: MEMORY_RECORD_SIZE,
-      sizeOfCommentPerRecord: MEMORY_COMMENT_SIZE,
-    },
-  })
-}
-
 export const deleteRecord = async (recordId: string | undefined) => {
   if (recordId) {
     const res = await baseInstance.delete(`/record/${recordId}`)
@@ -54,20 +36,6 @@ export const modifyRecord = async (
   })
 }
 
-export const getRecordByDate = ({
-  date,
-  page,
-  size,
-}: IMyRecordRequestParam): Promise<AxiosResponse<IRecordByDateList>> => {
-  return baseInstance.get(`/record`, {
-    params: {
-      date,
-      page,
-      size,
-    },
-  })
-}
-
 export const getRandomRecordData = async (recordCategoryId: 1 | 2) => {
   return await baseInstance.get('/record/random', {
     params: { recordCategoryId, size: 5 },
@@ -77,3 +45,26 @@ export const getRandomRecordData = async (recordCategoryId: 1 | 2) => {
 export const getMixRecordData = async () => {
   return await baseInstance.get('/record/mix')
 }
+
+export const getRecentRecordData = async (page: number, dateTime: string) => {
+  const MAX_RECORD_NUMBER = 10
+  return await baseInstance.get('/record/recent', {
+    params: { page, size: MAX_RECORD_NUMBER, dateTime },
+  })
+}
+
+export const getRanking = async (
+  recordCategoryId: number,
+  rankingPeriod = 'WEEK'
+) => {
+  return await baseInstance.get('/record/ranking', {
+    params: {
+      rankingPeriod,
+      recordCategoryId,
+    },
+  })
+}
+
+export const getTotalRecordCount = async () => {
+  return await baseInstance.get('/record/count')
+}

src/apis/share.ts

@@ -20,7 +20,7 @@ export const ShareKakao = ({
     objectType: 'feed',
     content: {
       title: title,
-      description: description,
+      description: description.replaceAll(/(<br>|<br\/>|<br \/>)/g, '\r\n'),
       imageUrl: imageUrl
         ? imageUrl
         : 'https://record-it.s3.ap-northeast-2.amazonaws.com/imagefile-dev/sharing+png',

src/assets/constant/collect.ts

@@ -0,0 +1 @@
+export const RESET_TIME = 180

src/assets/constant/constant.ts

@@ -4,11 +4,16 @@ export const INPUT_DETAILS = Object.freeze({
   MIN_TYPING: 0,
 })
 
+export const RECORD_TITLE_MAX_LENGTH = 12
+
 export const TEXT_DETAILS = Object.freeze({
   CELEBRATION: 'celebration',
   CONSOLATION: 'consolation',
 })
 
+export const CELEBRATION_ID = 1
+export const CONSOLATION_ID = 2
+
 export const INITIAL_RECORD_DATA = {
   recordId: 0,
   categoryId: 0,

src/assets/constant/others.ts

@@ -0,0 +1 @@
+export const PREVIOUS_URL = 'previousUrl'

src/assets/constant/ranking.ts

@@ -0,0 +1,15 @@
+export type keyOfRankingPeriod = 'DAY' | 'WEEK' | 'MONTH' | 'TOTAL'
+
+export type rankingPeriodType = {
+  [key in keyOfRankingPeriod]:
+    | '하루 기준'
+    | '일주일 기준'
+    | '한 달 기준'
+    | '누적 기준'
+}
+export const RANKINGPERIOD: rankingPeriodType = {
+  DAY: '하루 기준',
+  WEEK: '일주일 기준',
+  MONTH: '한 달 기준',
+  TOTAL: '누적 기준',
+}

src/components/BackButton.tsx

@@ -6,14 +6,14 @@ function BackButton({ onClick }: { onClick?: () => void }) {
   const navigate = useNavigate()
 
   const handleLocateBack = () => {
-    if (onClick) {
-      return onClick()
-    }
-
     if (navigate(-1) === undefined) {
       navigate('/')
     } else {
       navigate(-1)
+
+      if (onClick) {
+        return onClick()
+      }
     }
   }
 

src/components/Category.tsx

@@ -0,0 +1,101 @@
+import { useGetCategory } from '@react-query/hooks/useGetCategory'
+import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react'
+import { parentCategoryID } from 'types/category'
+import { getChipIconName } from '@pages/DetailRecord/getChipIconName'
+import Chip from './Chip'
+import useSwipe from '@hooks/useSwipe'
+import { CELEBRATION_ID, CONSOLATION_ID } from '@assets/constant/constant'
+import { useRecoilValue } from 'recoil'
+import { checkFromDetailPage } from '@store/detailPageAtom'
+
+export default function Category({
+  slider,
+  parentCategoryId,
+  choosedCategoryId,
+  setChoosedCategoryId,
+  isModify = false,
+}: {
+  slider: boolean
+  parentCategoryId: parentCategoryID
+  choosedCategoryId: number
+  setChoosedCategoryId: Dispatch<SetStateAction<number>>
+  isModify?: boolean
+}) {
+  const { categoryData } = useGetCategory(parentCategoryId)
+
+  const dragRef = useRef<HTMLDivElement | null>(
+    null
+  ) as React.MutableRefObject<HTMLDivElement>
+  const { handleMouseDown, isDragging, setIsDragging } = useSwipe(dragRef)
+
+  const isFromDetailPage = useRecoilValue(checkFromDetailPage)
+
+  useEffect(() => {
+    if (slider) {
+      if (
+        choosedCategoryId !== CELEBRATION_ID &&
+        choosedCategoryId !== CONSOLATION_ID &&
+        !isFromDetailPage
+      ) {
+        if (parentCategoryId === CELEBRATION_ID)
+          setChoosedCategoryId(CELEBRATION_ID)
+        if (parentCategoryId === CONSOLATION_ID)
+          setChoosedCategoryId(CONSOLATION_ID)
+      }
+      dragRef.current.scrollLeft = 0
+    }
+    if (!slider) {
+      if (parentCategoryId === CELEBRATION_ID) setChoosedCategoryId(3)
+      if (parentCategoryId === CONSOLATION_ID) setChoosedCategoryId(7)
+    }
+  }, [parentCategoryId])
+
+  const handleClickChip = (id?: number) => {
+    if (slider && isDragging) {
+      setIsDragging(false)
+      return
+    }
+    if (id !== undefined) {
+      setChoosedCategoryId(id)
+    } else {
+      setChoosedCategoryId(parentCategoryId)
+    }
+  }
+
+  return (
+    <div
+      className={`flex pr-4 ${
+        slider ? 'gap-1 overflow-scroll ' : 'flex-wrap gap-2'
+      }`}
+      ref={dragRef}
+      onMouseDownCapture={(e) => {
+        handleMouseDown(e)
+      }}
+    >
+      {slider && (
+        <Chip
+          icon={null}
+          active={
+            choosedCategoryId === CELEBRATION_ID ||
+            choosedCategoryId === CONSOLATION_ID
+          }
+          message="전체"
+          type={'button'}
+          onClick={() => handleClickChip()}
+        />
+      )}
+      {categoryData &&
+        categoryData.map((item) => (
+          <Chip
+            key={item.id}
+            active={item.id === choosedCategoryId}
+            icon={getChipIconName(item.name)}
+            message={item.name}
+            type={'button'}
+            onClick={() => handleClickChip(item.id)}
+            isModify={isModify}
+          />
+        ))}
+    </div>
+  )
+}

src/components/Chip.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-interface chipProps {
+interface chipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   type?: 'button' | 'submit' | 'reset' | undefined
   active: boolean
   icon: string | null
@@ -18,11 +18,13 @@ function Chip({
   pointer = true,
   property = 'default',
   isModify,
+  ...props
 }: chipProps) {
   return (
     <button
+      {...props}
       type={type}
-      className={`flex items-center justify-between rounded-full
+      className={`flex shrink-0 items-center justify-between rounded-full
         ${pointer && 'cursor-pointer'}
         ${
           active