From cb2a7c9719588a8d48e34cff1b4d40e6e15b9b63 Mon Sep 17 00:00:00 2001 From: SeoYoung Bae <60652298+bsy1141@users.noreply.github.com> Date: Sun, 13 Aug 2023 00:44:46 +0900 Subject: [PATCH] feature: implement query-hooks (#31) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 필름 관련 API를 사용할 수 있는 query-hooks 구현 및 prettier 설정 포맷팅 * feat: 사진, 포토컷 관련 API를 사용할 수 있는 query-hooks 구현 * feat: user 관련 API를 사용할 수 있는 query-hooks 구현 * update types/react * feat: update package.json --- .gitignore | 2 +- .prettierrc | 7 +- package.json | 2 +- src/components/shared/Avatar/Avatar.tsx | 17 +- src/components/shared/Button/Button.tsx | 17 +- src/components/shared/Dimmed/Dimmed.tsx | 7 +- src/components/shared/Drawer/Drawer.tsx | 8 +- .../shared/ImageFrame/ImageFrame.tsx | 5 +- src/components/shared/Input/Input.tsx | 17 +- src/components/shared/Modal/Modal.tsx | 12 +- .../shared/TextButton/TextButton.tsx | 12 +- src/components/shared/Textarea/Textarea.tsx | 4 +- src/components/user/CameraRoll.tsx | 22 +- .../user/item/ItemsSlide/ItemsSlide.tsx | 19 +- src/hooks/useControllableState.ts | 6 +- src/pages/_document.tsx | 5 +- src/pages/api/hello.ts | 5 +- src/pages/index.tsx | 6 +- src/pages/user/[id]/index.tsx | 13 +- src/pages/user/[id]/item/add/index.tsx | 21 +- src/pages/user/[id]/item/edit/index.tsx | 27 +- src/pages/user/[id]/item/index.tsx | 80 +- src/providers/QueryProvider.tsx | 11 +- src/query-hooks/index.ts | 0 src/query-hooks/useFilms/api.ts | 54 + src/query-hooks/useFilms/index.ts | 58 + src/query-hooks/useFilms/keys.ts | 8 + src/query-hooks/useImages/apis.ts | 19 + src/query-hooks/useImages/index.ts | 4 + src/query-hooks/usePhotoCuts/apis.ts | 41 + src/query-hooks/usePhotoCuts/index.ts | 36 + src/query-hooks/usePhotoCuts/keys.ts | 6 + src/query-hooks/usePhotoCuts/type.ts | 15 + src/query-hooks/useUsers/apis.ts | 70 ++ src/query-hooks/useUsers/index.ts | 63 ++ src/query-hooks/useUsers/keys.ts | 9 + src/query-hooks/useUsers/type.ts | 17 + src/styles/globals.css | 1 - src/utils/index.ts | 2 +- yarn.lock | 1000 +++++++---------- 40 files changed, 1101 insertions(+), 627 deletions(-) delete mode 100644 src/query-hooks/index.ts create mode 100644 src/query-hooks/useFilms/api.ts create mode 100644 src/query-hooks/useFilms/index.ts create mode 100644 src/query-hooks/useFilms/keys.ts create mode 100644 src/query-hooks/useImages/apis.ts create mode 100644 src/query-hooks/useImages/index.ts create mode 100644 src/query-hooks/usePhotoCuts/apis.ts create mode 100644 src/query-hooks/usePhotoCuts/index.ts create mode 100644 src/query-hooks/usePhotoCuts/keys.ts create mode 100644 src/query-hooks/usePhotoCuts/type.ts create mode 100644 src/query-hooks/useUsers/apis.ts create mode 100644 src/query-hooks/useUsers/index.ts create mode 100644 src/query-hooks/useUsers/keys.ts create mode 100644 src/query-hooks/useUsers/type.ts diff --git a/.gitignore b/.gitignore index 2a96a34..e285679 100644 --- a/.gitignore +++ b/.gitignore @@ -39,4 +39,4 @@ next-env.d.ts # env vars .env -.env* \ No newline at end of file +.env* diff --git a/.prettierrc b/.prettierrc index 23da6de..07e8402 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,11 +4,14 @@ "singleQuote": true, "jsxSingleQuote": true, "trailingComma": "all", - "printWidth": 120, + "printWidth": 80, "arrowParens": "always", "endOfLine": "auto", "bracketSameLine": false, - "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"], + "plugins": [ + "@trivago/prettier-plugin-sort-imports", + "prettier-plugin-tailwindcss" + ], "tailwindFunctions": ["clsx", "classnames", "cva", "cn", "twMerge"], "pluginSearchDirs": false, "importOrder": [ diff --git a/package.json b/package.json index ab19d1e..177792f 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@tanstack/react-query": "^4.32.0", "@tanstack/react-query-devtools": "^4.32.0", "@types/node": "20.4.1", - "@types/react": "18.2.14", + "@types/react": "18.2.20", "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "axios": "^1.4.0", diff --git a/src/components/shared/Avatar/Avatar.tsx b/src/components/shared/Avatar/Avatar.tsx index 9868683..e6d8114 100644 --- a/src/components/shared/Avatar/Avatar.tsx +++ b/src/components/shared/Avatar/Avatar.tsx @@ -16,7 +16,8 @@ interface AvatarProps { onClick?: MouseEventHandler; } -type Props = AvatarProps & Omit, keyof AvatarProps | 'alt'>; +type Props = AvatarProps & + Omit, keyof AvatarProps | 'alt'>; export function Avatar({ src = PLACEHOLDER_SRC, @@ -29,7 +30,12 @@ export function Avatar({ ...restProps }: Props) { return ( -
+
{nickname} {`Total ${viewCount}`}
-

+

{description ?? HINT_TEXT}

diff --git a/src/components/shared/Button/Button.tsx b/src/components/shared/Button/Button.tsx index 6cc73a7..9663a45 100644 --- a/src/components/shared/Button/Button.tsx +++ b/src/components/shared/Button/Button.tsx @@ -11,11 +11,14 @@ interface Props extends ButtonHTMLAttributes { // NOTE : buttonMap, variantMap tailwind-config에 뺄 것 const buttonMap: Record = { - button1: 'tw-flex tw-items-center tw-rounded tw-text-button1 tw-px-10 tw-py-3.5', - button2: 'tw-flex tw-items-center tw-rounded tw-text-button2 tw-px-2 tw-py-1.5', + button1: + 'tw-flex tw-items-center tw-rounded tw-text-button1 tw-px-10 tw-py-3.5', + button2: + 'tw-flex tw-items-center tw-rounded tw-text-button2 tw-px-2 tw-py-1.5', button3: 'tw-flex tw-justify-between tw-items-center tw-px-5 tw-py-2', // NOTE : 그림자 효과가 있는 것 같은데 시안 상에서 자세히 확인되지 않으므로 물어보고 반영 예정 - button4: 'tw-flex tw-justify-center tw-items-center tw-rounded-full tw-w-[4.5rem] tw-h-[4.5rem]', + button4: + 'tw-flex tw-justify-center tw-items-center tw-rounded-full tw-w-[4.5rem] tw-h-[4.5rem]', }; const variantMap: Record = { @@ -34,7 +37,13 @@ const variantType: Record = { rounded: 'button4', }; -export function Button({ children, variant = 'primary', disabled, className, ...restProps }: PropsWithChildren) { +export function Button({ + children, + variant = 'primary', + disabled, + className, + ...restProps +}: PropsWithChildren) { const button = buttonMap[variantType[variant]]; const buttonVariant = variantMap[variant]; diff --git a/src/components/shared/Dimmed/Dimmed.tsx b/src/components/shared/Dimmed/Dimmed.tsx index 38c884b..fd29151 100644 --- a/src/components/shared/Dimmed/Dimmed.tsx +++ b/src/components/shared/Dimmed/Dimmed.tsx @@ -3,5 +3,10 @@ import type { HTMLAttributes } from 'react'; type Props = HTMLAttributes; export function Dimmed(props: Props) { - return
; + return ( +
+ ); } diff --git a/src/components/shared/Drawer/Drawer.tsx b/src/components/shared/Drawer/Drawer.tsx index c7d7ae0..6a578a5 100644 --- a/src/components/shared/Drawer/Drawer.tsx +++ b/src/components/shared/Drawer/Drawer.tsx @@ -35,7 +35,13 @@ export function Drawer({ isOpen, onClose }: Props) { )} >

- Grafi Logo + Grafi Logo Grafi

diff --git a/src/components/shared/ImageFrame/ImageFrame.tsx b/src/components/shared/ImageFrame/ImageFrame.tsx index 3dd5320..3eb323b 100644 --- a/src/components/shared/ImageFrame/ImageFrame.tsx +++ b/src/components/shared/ImageFrame/ImageFrame.tsx @@ -19,7 +19,10 @@ export function ImageFrame({ fill={fill} sizes={sizes} placeholder={placeholder} - className={cn('tw-h-auto tw-w-full tw-object-cover tw-object-center', className)} + className={cn( + 'tw-h-auto tw-w-full tw-object-cover tw-object-center', + className, + )} {...restProps} />

diff --git a/src/components/shared/Input/Input.tsx b/src/components/shared/Input/Input.tsx index aa8680d..6e70fd5 100644 --- a/src/components/shared/Input/Input.tsx +++ b/src/components/shared/Input/Input.tsx @@ -66,10 +66,15 @@ export const Input = forwardRef(
{label && (
-
); }, diff --git a/src/components/shared/Modal/Modal.tsx b/src/components/shared/Modal/Modal.tsx index f6cb5df..339a398 100644 --- a/src/components/shared/Modal/Modal.tsx +++ b/src/components/shared/Modal/Modal.tsx @@ -8,7 +8,13 @@ interface Props { onSave?: MouseEventHandler; } -export function Modal({ children, isOpen, title, onCancel, onSave }: PropsWithChildren) { +export function Modal({ + children, + isOpen, + title, + onCancel, + onSave, +}: PropsWithChildren) { if (!isOpen) return null; return ( @@ -18,7 +24,9 @@ export function Modal({ children, isOpen, title, onCancel, onSave }: PropsWithCh

{title}

-
{children}
+
+ {children} +
{/* TODO: button 컴포넌트 완성되면 붙이기 */} ); diff --git a/src/components/shared/Textarea/Textarea.tsx b/src/components/shared/Textarea/Textarea.tsx index 9765017..b1efd5f 100644 --- a/src/components/shared/Textarea/Textarea.tsx +++ b/src/components/shared/Textarea/Textarea.tsx @@ -82,7 +82,9 @@ export const Textarea = forwardRef( )} {...restProps} /> -

{caption}

+

+ {caption} +

); }, diff --git a/src/components/user/CameraRoll.tsx b/src/components/user/CameraRoll.tsx index 45d05e3..92d8d28 100644 --- a/src/components/user/CameraRoll.tsx +++ b/src/components/user/CameraRoll.tsx @@ -8,23 +8,37 @@ interface Props extends HTMLAttributes { photos?: string[]; } -export function CameraRoll({ title, photos = [], className, ...restProps }: Props) { +export function CameraRoll({ + title, + photos = [], + className, + ...restProps +}: Props) { const srcs = Array.from({ length: 10 }, (_, i) => photos[i] ?? ''); return ( -
+

{title}

{`${photos.length} Cuts`}
{srcs.map((photo, idx) => ( -
+
))}
{[...Array(FILM_HOLE_COUNT)].map((_, idx) => ( -
+
))}
diff --git a/src/components/user/item/ItemsSlide/ItemsSlide.tsx b/src/components/user/item/ItemsSlide/ItemsSlide.tsx index 28de185..8fcca62 100644 --- a/src/components/user/item/ItemsSlide/ItemsSlide.tsx +++ b/src/components/user/item/ItemsSlide/ItemsSlide.tsx @@ -15,14 +15,18 @@ interface ItemSlideProps { setActiveIndex: React.Dispatch>; } -export function ItemsSlide({ items, activeIndex, setActiveIndex }: ItemSlideProps) { +export function ItemsSlide({ + items, + activeIndex, + setActiveIndex, +}: ItemSlideProps) { const handleSelect = (selectedIndex: number) => { setActiveIndex(selectedIndex); }; - useEffect(() => { - require('bootstrap/dist/js/bootstrap.js'); - }, []); + // useEffect(() => { + // require('bootstrap/dist/js/bootstrap.js'); + // }, []); // const goToNext = () => { // const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1; @@ -35,7 +39,12 @@ export function ItemsSlide({ items, activeIndex, setActiveIndex }: ItemSlideProp return ( <> - + {items.map((item) => ( diff --git a/src/hooks/useControllableState.ts b/src/hooks/useControllableState.ts index d41c01e..5f8bb0a 100644 --- a/src/hooks/useControllableState.ts +++ b/src/hooks/useControllableState.ts @@ -6,7 +6,11 @@ interface Props { onChange?: (value: T) => void; } -export function useControllableState({ defaultState, state: valueFromProps, onChange }: Props) { +export function useControllableState({ + defaultState, + state: valueFromProps, + onChange, +}: Props) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultState); const isControlled = valueFromProps !== undefined; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 3f7e2dd..84772bf 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -4,7 +4,10 @@ export default function Document() { return ( - +
diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts index eb4cc66..46714b3 100644 --- a/src/pages/api/hello.ts +++ b/src/pages/api/hello.ts @@ -5,6 +5,9 @@ type Data = { name: string; }; -export default function handler(req: NextApiRequest, res: NextApiResponse) { +export default function handler( + req: NextApiRequest, + res: NextApiResponse, +) { res.status(200).json({ name: 'John Doe' }); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7f88154..8d97d3f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -32,7 +32,11 @@ export default function Home() { return (
- +
diff --git a/src/pages/user/[id]/item/edit/index.tsx b/src/pages/user/[id]/item/edit/index.tsx index 87a81a9..0baee33 100644 --- a/src/pages/user/[id]/item/edit/index.tsx +++ b/src/pages/user/[id]/item/edit/index.tsx @@ -1,7 +1,14 @@ import { useRouter } from 'next/router'; import { useRef, useState } from 'react'; import { convertImageToBase64 } from '@/utils'; -import { Button, Icon, ImageFrame, Input, TextButton, Textarea } from '@/components/shared'; +import { + Button, + Icon, + ImageFrame, + Input, + TextButton, + Textarea, +} from '@/components/shared'; const MOCK_DATA = { id: 1, @@ -42,7 +49,10 @@ export default function EditPage({ item = MOCK_DATA }) { 취소 - router.push(`/user/${id}/item`)}> + router.push(`/user/${id}/item`)} + > 저장
@@ -50,7 +60,13 @@ export default function EditPage({ item = MOCK_DATA }) { {/** 이미지 영역 */}
- +