Merge branch 'main' of into #129/feat/form-refactor/hj

nodak-v2 · Jun 21, 2024 · b298381 · b298381
2 parents 2f964b5 + 9199d8c
commit b298381
Show file tree

Hide file tree

Showing 21 changed files with 373 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",
+    "react-toastify": "^10.0.5",
     "swiper": "^11.1.1",
     "tailwind-merge": "^2.2.1",
     "vaul": "^0.9.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apis/postList.ts b/src/apis/postList.ts
@@ -29,6 +29,7 @@ interface PostListSort {
   unsorted: boolean;
   sorted: boolean;
 }
+
 export interface PostList {
   content: PostListContent[];
   pageable: PostListPageable;
@@ -43,36 +44,30 @@ export interface PostList {
   empty: boolean;
 }
 
-interface PostListInitialParams {
+interface GetPostListParams {
   page: string;
   size: string;
+  keyword: string | null;
+  categoryId: string | null;
 }
 
-interface PostListParamsWithCategoryId extends PostListInitialParams {
-  categoryId: string;
-  keyword: null;
-}
-
-interface PostListParamsWithKeyword extends PostListInitialParams {
-  keyword: string;
-  categoryId: null;
-}
-
-export type GetPostListParams =
-  | PostListParamsWithCategoryId
-  | PostListParamsWithKeyword
-  | PostListInitialParams;
-
 export const getPostList = async (params: GetPostListParams) =>
   await api.get<PostList>({
     url: '/posts/search',
     params,
   });
 
-export const useGetPostListAPI = (params: GetPostListParams) => {
+const PAGE_SIZE = '8';
+
+export const useGetPostListAPI = (
+  keyword: string | null,
+  categoryId: string | null,
+) => {
+  // TODO: 인피니티 스크롤 구현
   const { data } = useSuspenseQuery({
-    queryKey: ['postList', ...Object.values(params)],
-    queryFn: () => getPostList(params),
+    queryKey: ['postList', { page: '0', keyword, categoryId }],
+    queryFn: () =>
+      getPostList({ page: '0', size: PAGE_SIZE, keyword, categoryId }),
   });
 
   return data.body;

diff --git a/src/app/(main)/constants.ts b/src/app/(main)/constants.ts
@@ -1,15 +1,7 @@
-interface CategoryMap {
-  all: null;
-  chatting: string;
-  sports: string;
-  entertaining: string;
-  study: string;
-}
-
 export const CATEGORY_MAP = {
   all: null,
   chatting: '1',
   sports: '2',
   entertaining: '3',
   study: '4',
-} satisfies CategoryMap;
+};
diff --git a/src/app/(main)/utils.ts b/src/app/(main)/utils.ts
diff --git a/src/app/(post)/createPost/_component/ImageUploader.tsx b/src/app/(post)/createPost/_component/ImageUploader.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 
 import Icon from '@/src/components/Icon';
 import ImageUploadButton from '@/src/components/ImageUploadButton';
+import ConfirmationModal from '@/src/components/Modal/ConfirmationModal';
 
 interface ImageUploaderProps {
   imageSrcUrl?: string;
@@ -14,47 +15,67 @@ interface ImageUploaderProps {
 
 const ImageUploader = ({ imageSrcUrl, onChange }: ImageUploaderProps) => {
   const [previewImageUrl, setPreviewImageUrl] = useState(imageSrcUrl || null);
+  const [isShowModal, setIsShowModal] = useState(false);
 
   const handleDeleteImage = () => {
+    setIsShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsShowModal(false);
+  };
+
+  const handleConfirmDeleteImage = () => {
     setPreviewImageUrl(null);
     onChange(null);
+
+    setIsShowModal(false);
   };
 
   return (
-    <div className='bg-gray-accent7 flex w-full justify-center p-10'>
-      <div className='relative '>
-        {previewImageUrl ? (
-          <>
-            <Image
-              src={previewImageUrl}
-              alt='profile'
-              className='z-10 h-40 w-40 rounded-lg bg-white object-cover'
-              width={500}
-              height={500}
-            />
-            <button
-              onClick={handleDeleteImage}
-              className='absolute right-1 top-2 flex cursor-pointer items-center justify-center rounded-full border bg-white text-black'
-            >
-              <Icon
-                id='dash-circle-fill'
-                aria-label='업로드한 이미지 삭제하기'
-                size={16}
-                style={{ opacity: 0.5 }}
+    <>
+      <div className='bg-gray-accent7 flex w-full justify-center p-10'>
+        <div className='relative '>
+          {previewImageUrl ? (
+            <>
+              <Image
+                src={previewImageUrl}
+                alt='profile'
+                className='z-10 h-40 w-40 rounded-lg bg-white object-cover'
+                width={500}
+                height={500}
               />
-            </button>
-          </>
-        ) : (
-          <div className='h-40 w-40 rounded-lg bg-gray-200' />
-        )}
-        <div className='absolute -bottom-3 -right-3 z-10'>
-          <ImageUploadButton
-            setImageUrl={setPreviewImageUrl}
-            onChange={onChange}
-          />
+              <button
+                onClick={handleDeleteImage}
+                className='absolute right-1 top-2 flex cursor-pointer items-center justify-center rounded-full border bg-white text-black'
+              >
+                <Icon
+                  id='dash-circle-fill'
+                  aria-label='업로드한 이미지 삭제하기'
+                  size={16}
+                  style={{ opacity: 0.5 }}
+                />
+              </button>
+            </>
+          ) : (
+            <div className='h-40 w-40 rounded-lg bg-gray-200' />
+          )}
+          <div className='absolute -bottom-3 -right-3'>
+            <ImageUploadButton
+              setImageUrl={setPreviewImageUrl}
+              onChange={onChange}
+            />
+          </div>
         </div>
       </div>
-    </div>
+
+      <ConfirmationModal
+        description='이미지를 삭제하시겠습니까?'
+        isShow={isShowModal}
+        onConfirm={handleConfirmDeleteImage}
+        onClose={handleCloseModal}
+      />
+    </>
   );
 };
 export default ImageUploader;
diff --git a/src/app/(post)/createPost/_component/PostForm/index.tsx b/src/app/(post)/createPost/_component/PostForm/index.tsx
@@ -3,6 +3,7 @@
 import { Controller, useForm } from 'react-hook-form';
 
 import { PostValue, createPost } from '@/src/apis/postDetail';
+import Toast from '@/src/app/_components/Toast';
 import Button from '@/src/components/Button/Button';
 import FormField from '@/src/components/FormField';
 import Selector from '@/src/components/Selector';
@@ -26,6 +27,7 @@ const PostForm = () => {
 
   const onSubmitPost = (data: PostValue) => {
     createPost(data);
+    Toast.default('등록되었습니다.');
   };
 
   return (
@@ -54,7 +56,6 @@ const PostForm = () => {
             {...register('title')}
           />
         </FormField>
-
         <FormField
           labelText='내용'
           isRequired
@@ -89,7 +90,6 @@ const PostForm = () => {
             )}
           />
         </FormField>
-
         <FormField
           labelText='카테고리'
           isRequired

diff --git a/src/app/(post)/createPost/page.tsx b/src/app/(post)/createPost/page.tsx
@@ -5,7 +5,7 @@ import PostForm from './_component/PostForm';
 
 const CreatePostPage = () => {
   return (
-    <div className='flex h-full flex-col'>
+    <>
       <TopBar.Container>
         <TopBar.BackButton href='/' />
         <TopBar.Title>투표 만들기</TopBar.Title>
@@ -14,7 +14,7 @@ const CreatePostPage = () => {
         </Link>
       </TopBar.Container>
       <PostForm />
-    </div>
+    </>
   );
 };
 

diff --git a/src/app/_components/Chip.tsx b/src/app/_components/Chip.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 const chipCSS = cva(
-  'flex w-fit items-center whitespace-nowrap rounded-[20px] border border-gray-accent2 px-4 py-2 text-sm font-semibold',
+  'text-title-1-md flex w-fit items-center whitespace-nowrap rounded-[30px] border border-gray-accent2 px-3 py-1.5',
   {
     variants: {
       variant: {

diff --git a/src/app/_components/ChipContainer.tsx b/src/app/_components/ChipContainer.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import Link from 'next/link';
 
 import Chip from '@/src/app/_components/Chip';
@@ -24,23 +22,20 @@ interface ChipContainerProps {
 }
 
 const ChipContainer = ({ currentChannel = 'all' }: ChipContainerProps) => {
-  const [currentPath, setCurrentPath] = useState(currentChannel);
-
-  const handleChipClick = (path: ChannelType) => () => {
-    setCurrentPath(path);
-  };
-
   return (
-    <ul className='flex flex-nowrap gap-2 px-4 py-2'>
+    <ul className='flex items-center gap-2 px-4 py-2'>
       {channelData.map(({ name, path }, index) => {
-        const variant = path === currentPath ? 'selected' : 'default';
+        const variant = path === currentChannel ? 'selected' : 'default';
 
         return (
           <li key={`${index}-${name}`}>
-            <Link href={{ pathname: '/', query: { channel: path } }}>
-              <Chip variant={variant} onClick={handleChipClick(path)}>
-                {name}
-              </Chip>
+            <Link
+              href={{
+                pathname: '/',
+                query: path === 'all' ? {} : { channel: path },
+              }}
+            >
+              <Chip variant={variant}>{name}</Chip>
             </Link>
           </li>
         );

diff --git a/src/app/_components/PostItem.tsx b/src/app/_components/PostItem.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
 
 import { PostListContent } from '@/src/apis/postList';
-import { isValidImageUrl } from '@/src/app/(main)/utils';
 import Icon from '@/src/components/Icon';
+import { isValidImageUrl } from '@/src/utils/isValidImageUrl';
 
 interface PostItemProps {
   post: PostListContent;

diff --git a/src/app/_components/Toast.tsx b/src/app/_components/Toast.tsx
@@ -0,0 +1,33 @@
+import { ToastOptions, toast } from 'react-toastify';
+
+import { cn } from '@/src/utils/cn';
+
+const defaultToastOption: ToastOptions = {
+  position: 'bottom-center',
+  autoClose: 4000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  draggable: true,
+  pauseOnHover: false,
+  closeButton: false,
+  icon: false,
+};
+
+const Toast = {
+  default: (
+    message: string,
+    options: ToastOptions = {},
+    className?: string,
+  ) => {
+    toast.info(message, {
+      ...defaultToastOption,
+      ...options,
+      className: cn(
+        'font-text-1-rg h-[44px] w-[358px] rounded-lg bg-[#2D3033] text-white',
+        className,
+      ),
+    });
+  },
+};
+
+export default Toast;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Metadata, Viewport } from 'next';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 import Introduction from '../components/Introduction';
 import { MSWComponent } from '../mocks/MSWComponent';
@@ -43,6 +45,7 @@ const RootLayout = ({
                 {children}
               </div>
             </div>
+            <ToastContainer className='bottom-[103px] flex flex-col items-center justify-center' />
           </MSWComponent>
         </Providers>
       </body>