feature: implement query-hooks (#31)

* feat: 필름 관련 API를 사용할 수 있는 query-hooks 구현 및 prettier 설정 포맷팅 * feat: 사진, 포토컷 관련 API를 사용할 수 있는 query-hooks 구현 * feat: user 관련 API를 사용할 수 있는 query-hooks 구현 * update types/react * feat: update package.json
Nexters · Aug 12, 2023 · cb2a7c9 · cb2a7c9
1 parent 986868d
commit cb2a7c9
Show file tree

Hide file tree

Showing 40 changed files with 1,101 additions and 627 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,4 @@ next-env.d.ts
 
 # env vars
 .env
-.env*
+.env*
diff --git 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
@@ -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
@@ -16,7 +16,8 @@ interface AvatarProps {
   onClick?: MouseEventHandler<HTMLImageElement>;
 }
 
-type Props = AvatarProps & Omit<ComponentProps<typeof Image>, keyof AvatarProps | 'alt'>;
+type Props = AvatarProps &
+  Omit<ComponentProps<typeof Image>, keyof AvatarProps | 'alt'>;
 
 export function Avatar({
   src = PLACEHOLDER_SRC,
@@ -29,7 +30,12 @@ export function Avatar({
   ...restProps
 }: Props) {
   return (
-    <div className={cn('tw-flex tw-items-center tw-gap-5 tw-text-primary', className)}>
+    <div
+      className={cn(
+        'tw-flex tw-items-center tw-gap-5 tw-text-primary',
+        className,
+      )}
+    >
       <div
         className='tw-relative tw-h-20 tw-w-20 tw-cursor-pointer tw-overflow-hidden tw-rounded-full'
         onClick={onClick}
@@ -49,7 +55,12 @@ export function Avatar({
             <strong className='tw-text-accent-eng'>{nickname}</strong>
             <span className='tw-text-caption-eng tw-text-grayscale-500'>{`Total ${viewCount}`}</span>
           </div>
-          <p className={clsx('tw-text-body2-accent', !description && 'tw-text-grayscale-300')}>
+          <p
+            className={clsx(
+              'tw-text-body2-accent',
+              !description && 'tw-text-grayscale-300',
+            )}
+          >
             {description ?? HINT_TEXT}
           </p>
         </div>

diff --git a/src/components/shared/Button/Button.tsx b/src/components/shared/Button/Button.tsx
@@ -11,11 +11,14 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 // NOTE : buttonMap, variantMap tailwind-config에 뺄 것
 const buttonMap: Record<ButtonType, string> = {
-  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<VariantType, string> = {
@@ -34,7 +37,13 @@ const variantType: Record<VariantType, ButtonType> = {
   rounded: 'button4',
 };
 
-export function Button({ children, variant = 'primary', disabled, className, ...restProps }: PropsWithChildren<Props>) {
+export function Button({
+  children,
+  variant = 'primary',
+  disabled,
+  className,
+  ...restProps
+}: PropsWithChildren<Props>) {
   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
@@ -3,5 +3,10 @@ import type { HTMLAttributes } from 'react';
 type Props = HTMLAttributes<HTMLDivElement>;
 
 export function Dimmed(props: Props) {
-  return <div className='tw-fixed tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-black tw-opacity-60' {...props} />;
+  return (
+    <div
+      className='tw-fixed tw-left-0 tw-top-0 tw-h-full tw-w-full tw-bg-black tw-opacity-60'
+      {...props}
+    />
+  );
 }
diff --git a/src/components/shared/Drawer/Drawer.tsx b/src/components/shared/Drawer/Drawer.tsx
@@ -35,7 +35,13 @@ export function Drawer({ isOpen, onClose }: Props) {
         )}
       >
         <h1 className='tw-ml-[42px] tw-flex tw-w-fit tw-flex-col tw-items-center'>
-          <Image src='/logo/GrafiLogo.svg' alt='Grafi Logo' width={80} height={80} priority />
+          <Image
+            src='/logo/GrafiLogo.svg'
+            alt='Grafi Logo'
+            width={80}
+            height={80}
+            priority
+          />
           <span className='tw-text-logo1'>Grafi</span>
         </h1>
         <p className='tw-text-caption tw-mb-10 tw-ml-10 tw-mt-2.5'>

diff --git 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}
       />
     </div>

diff --git a/src/components/shared/Input/Input.tsx b/src/components/shared/Input/Input.tsx
@@ -66,10 +66,15 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       <div className='tw-flex tw-flex-col tw-text-black'>
         {label && (
           <div className='tw-mb-3 tw-flex tw-w-full tw-items-center'>
-            <label htmlFor={idFromProps ?? id} className='tw-flex tw-items-center tw-gap-2.5'>
+            <label
+              htmlFor={idFromProps ?? id}
+              className='tw-flex tw-items-center tw-gap-2.5'
+            >
               <h1 className='tw-text-accent-eng'>{label}</h1>
               {caption && captionPosition === 'top' && (
-                <p className='tw-text-caption tw-text-grayscale-400'>{caption}</p>
+                <p className='tw-text-caption tw-text-grayscale-400'>
+                  {caption}
+                </p>
               )}
             </label>
             {maxLength && (
@@ -93,9 +98,13 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           {...restProps}
         />
         {caption && captionPosition === 'bottom' && (
-          <p className='tw-text-caption tw-mt-1 tw-text-grayscale-400'>{caption}</p>
+          <p className='tw-text-caption tw-mt-1 tw-text-grayscale-400'>
+            {caption}
+          </p>
+        )}
+        {feedback && (
+          <p className='tw-text-caption tw-mt-1 tw-text-danger'>{feedback}</p>
         )}
-        {feedback && <p className='tw-text-caption tw-mt-1 tw-text-danger'>{feedback}</p>}
       </div>
     );
   },

diff --git a/src/components/shared/Modal/Modal.tsx b/src/components/shared/Modal/Modal.tsx
@@ -8,7 +8,13 @@ interface Props {
   onSave?: MouseEventHandler<HTMLButtonElement>;
 }
 
-export function Modal({ children, isOpen, title, onCancel, onSave }: PropsWithChildren<Props>) {
+export function Modal({
+  children,
+  isOpen,
+  title,
+  onCancel,
+  onSave,
+}: PropsWithChildren<Props>) {
   if (!isOpen) return null;
 
   return (
@@ -18,7 +24,9 @@ export function Modal({ children, isOpen, title, onCancel, onSave }: PropsWithCh
         <div className='tw-text-main-headline tw-h-[88px] tw-pb-[30px] tw-pt-[38px]'>
           <h2>{title}</h2>
         </div>
-        <div className='tw-flex tw-w-full tw-flex-1 tw-flex-col tw-gap-6'>{children}</div>
+        <div className='tw-flex tw-w-full tw-flex-1 tw-flex-col tw-gap-6'>
+          {children}
+        </div>
         <div className='tw-gap tw-flex tw-w-full tw-items-center tw-gap-3'>
           {/* TODO: button 컴포넌트 완성되면 붙이기 */}
           <button

diff --git a/src/components/shared/TextButton/TextButton.tsx b/src/components/shared/TextButton/TextButton.tsx
@@ -1,4 +1,8 @@
-import { ButtonHTMLAttributes, MouseEventHandler, PropsWithChildren } from 'react';
+import {
+  ButtonHTMLAttributes,
+  MouseEventHandler,
+  PropsWithChildren,
+} from 'react';
 import clsx from 'clsx';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -20,7 +24,11 @@ export function TextButton({
   ...restProps
 }: PropsWithChildren<Props>) {
   return (
-    <button className={clsx(className, colorMap[color])} onClick={onClick} {...restProps}>
+    <button
+      className={clsx(className, colorMap[color])}
+      onClick={onClick}
+      {...restProps}
+    >
       {children}
     </button>
   );

diff --git a/src/components/shared/Textarea/Textarea.tsx b/src/components/shared/Textarea/Textarea.tsx
@@ -82,7 +82,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(
           )}
           {...restProps}
         />
-        <p className='tw-text-caption tw-mt-1 tw-text-grayscale-400'>{caption}</p>
+        <p className='tw-text-caption tw-mt-1 tw-text-grayscale-400'>
+          {caption}
+        </p>
       </div>
     );
   },

diff --git a/src/components/user/CameraRoll.tsx b/src/components/user/CameraRoll.tsx
@@ -8,23 +8,37 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   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 (
-    <div className={cn('tw-ml-5 tw-bg-grayscale-700', className)} {...restProps}>
+    <div
+      className={cn('tw-ml-5 tw-bg-grayscale-700', className)}
+      {...restProps}
+    >
       <div className='tw-flex tw-items-center tw-justify-between tw-py-2 tw-pl-3.5 tw-pr-5'>
         <h2 className='tw-text-body1 tw-text-grayscale-200'>{title}</h2>
         <span className='tw-text-caption-eng tw-text-grayscale-100'>{`${photos.length} Cuts`}</span>
       </div>
       <div className='tw-flex tw-gap-2.5 tw-overflow-x-scroll tw-scrollbar-hide'>
         {srcs.map((photo, idx) => (
-          <div key={idx} className='tw-aspect-[3/4] tw-h-[250px] tw-bg-grayscale-400' />
+          <div
+            key={idx}
+            className='tw-aspect-[3/4] tw-h-[250px] tw-bg-grayscale-400'
+          />
         ))}
       </div>
       <div className='tw-flex tw-items-center tw-gap-4 tw-px-3.5 tw-py-2'>
         {[...Array(FILM_HOLE_COUNT)].map((_, idx) => (
-          <div key={idx} className='tw-h-3 tw-w-6 tw-shrink-0 tw-gap-4 tw-rounded tw-bg-grayscale-400' />
+          <div
+            key={idx}
+            className='tw-h-3 tw-w-6 tw-shrink-0 tw-gap-4 tw-rounded tw-bg-grayscale-400'
+          />
         ))}
       </div>
     </div>

diff --git 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<React.SetStateAction<number>>;
 }
 
-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 (
     <>
-      <Carousel activeIndex={activeIndex} onSelect={handleSelect} controls={true} indicators={false}>
+      <Carousel
+        activeIndex={activeIndex}
+        onSelect={handleSelect}
+        controls={true}
+        indicators={false}
+      >
         {items.map((item) => (
           <Carousel.Item key={item.title}>
             <ImageFrame alt={item.title} src={item.image} />

diff --git a/src/hooks/useControllableState.ts b/src/hooks/useControllableState.ts
@@ -6,7 +6,11 @@ interface Props<T> {
   onChange?: (value: T) => void;
 }
 
-export function useControllableState<T>({ defaultState, state: valueFromProps, onChange }: Props<T>) {
+export function useControllableState<T>({
+  defaultState,
+  state: valueFromProps,
+  onChange,
+}: Props<T>) {
   const [uncontrolledValue, setUncontrolledValue] = useState<T>(defaultState);
 
   const isControlled = valueFromProps !== undefined;

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -4,7 +4,10 @@ export default function Document() {
   return (
     <Html lang='ko'>
       <Head>
-        <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet' />
+        <link
+          href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'
+          rel='stylesheet'
+        />
       </Head>
       <body>
         <div id='portal-root'></div>

diff --git 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<Data>) {
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
   res.status(200).json({ name: 'John Doe' });
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -32,7 +32,11 @@ export default function Home() {
   return (
     <section>
       <Indicator length={items.length} activeIndex={activeIndex} />
-      <ItemsSlide items={items} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
+      <ItemsSlide
+        items={items}
+        activeIndex={activeIndex}
+        setActiveIndex={setActiveIndex}
+      />
       <div className='tw-fixed tw-bottom-3 tw-flex tw-w-full tw-max-w-[475px] tw-flex-col tw-items-center tw-gap-3 tw-px-5'>
         <Button
           className='tw-flex tw-h-[50px] tw-w-full tw-flex-row tw-justify-center tw-rounded-[6px]'

diff --git a/src/pages/user/[id]/index.tsx b/src/pages/user/[id]/index.tsx
@@ -4,11 +4,20 @@ import { CameraRoll } from '@/components/user/CameraRoll';
 import { useToggle } from '@/hooks/useToggle';
 
 export default function User() {
-  const { status: isDrawerOpen, setOn: openDrawer, setOff: closeDrawer } = useToggle();
+  const {
+    status: isDrawerOpen,
+    setOn: openDrawer,
+    setOff: closeDrawer,
+  } = useToggle();
 
   return (
     <div className='tw-relative tw-overflow-x-hidden tw-pb-10 tw-pt-3'>
-      <Avatar src='/images/profile.png' nickname='Jichoi' displayMeta className='tw-mx-5' />
+      <Avatar
+        src='/images/profile.png'
+        nickname='Jichoi'
+        displayMeta
+        className='tw-mx-5'
+      />
       {/* {TODO: 방명록 기능 추가할 때 변경} */}
       <div className='tw-mx-5 tw-mb-5 tw-mt-3 tw-bg-grayscale-700 tw-px-3.5 tw-py-1.5 tw-text-white'>
         방명록 기능이 추가될 공간입니다 ㅎ