Merge pull request #258 from gloddy-dev/feature/256-refactor-useOverlay

Refactoring : 전체적인 BottomSheet, Modal 관리 리팩토링
gloddy-dev · Aug 23, 2023 · 8c229ed · 8c229ed
2 parents a8c8578 + 5a670fd
commit 8c229ed
Show file tree

Hide file tree

Showing 57 changed files with 746 additions and 821 deletions.
diff --git a/src/app/(main)/grouping/[groupId]/apply/components/ApplyModal.client.tsx b/src/app/(main)/grouping/[groupId]/apply/components/ApplyModal.client.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { Spacing } from '@/components/common/Spacing';
+import { Modal } from '@/components/Modal';
+import Image from 'next/image';
+
+interface ApplyModalProps {
+ onOkClick: () => void;
+ onCancelClick: () => void;
+}
+export default function ApplyModal({ onOkClick, onCancelClick }: ApplyModalProps) {
+ return (
+ <Modal onOkClick={onOkClick} onCancelClick={close} variant="success">
+ <Spacing size={32} />
+ <Image src="/icons/48/check.svg" alt="check" width={48} height={48} />
+ <Spacing size={12} />
+ <p>지원서를 제출하시겠습니까?</p>
+ <Spacing size={4} />
+ <p className="text-paragraph-1 text-sign-tertiary">
+ 지원서를 제출하면
+ <br />
+ 다시 수정할 수 없어요.
+ </p>
+ <Spacing size={16} />
+ </Modal>
+ );
+}
diff --git a/src/app/(main)/grouping/[groupId]/apply/components/InputForm.client.tsx b/src/app/(main)/grouping/[groupId]/apply/components/InputForm.client.tsx
@@ -1,11 +1,10 @@
 'use client';
 
+import ApplyModal from './ApplyModal.client';
 import { Button, ButtonGroup } from '@/components/Button';
 import { Spacing } from '@/components/common/Spacing';
-import { Modal } from '@/components/Modal';
 import { TextFieldController } from '@/components/TextField';
-import Image from 'next/image';
-import { useState } from 'react';
+import { useModal } from '@/hooks/useModal';
 import { useForm } from 'react-hook-form';
 
 type ApplyFormType = {
@@ -21,8 +20,8 @@ export default function InputForm() {
  reason: '',
  },
  });
- const [isModalOpen, setIsModalOpen] = useState(false);
  const { register, handleSubmit, formState } = hookForm;
+ const { open, close } = useModal();
 
  const onSubmit = (data: ApplyFormType) => {
  console.log(data);
@@ -51,28 +50,15 @@ export default function InputForm() {
  maxCount={150}
  />
  <ButtonGroup>
- <Button onClick={() => setIsModalOpen(true)} disabled={!formState.isValid}>
+ <Button
+ onClick={() =>
+ open(<ApplyModal onOkClick={handleSubmit(onSubmit)} onCancelClick={close} />)
+ }
+ disabled={!formState.isValid}
+ >
  지원하기
  </Button>
  </ButtonGroup>
- <Modal
- isOpen={isModalOpen}
- onOkClick={handleSubmit(onSubmit)}
- onCancelClick={() => setIsModalOpen(false)}
- variant="success"
- >
- <Spacing size={32} />
- <Image src="/icons/48/check.svg" alt="check" width={48} height={48} />
- <Spacing size={12} />
- <p>지원서를 제출하시겠습니까?</p>
- <Spacing size={4} />
- <p className="text-paragraph-1 text-sign-tertiary">
- 지원서를 제출하면
- <br />
- 다시 수정할 수 없어요.
- </p>
- <Spacing size={16} />
- </Modal>
  </>
  );
 }
diff --git a/src/app/(main)/grouping/components/ArticleItem.client.tsx b/src/app/(main)/grouping/components/ArticleItem.client.tsx
@@ -1,12 +1,12 @@
 'use client';
+import ArticleItemModal from './ArticleItemModal.client';
 import { Avatar } from '@/components/Avatar';
 import { Button } from '@/components/Button';
 import { Spacing } from '@/components/common/Spacing';
 import { Flex } from '@/components/Layout';
-import { Modal } from '@/components/Modal';
+import { useModal } from '@/hooks/useModal';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { useState } from 'react';
 
 import type { Article } from '@/apis/groups/type';
 
@@ -21,8 +21,8 @@ export default function ArticleItem({
  isCaptain,
  isBoardDetail = false,
 }: ArticleItemProps) {
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const pathname = usePathname();
+ const { open, close } = useModal();
 
  const {
  userImageUrl,
@@ -39,81 +39,69 @@ export default function ArticleItem({
  const handleOkClick = () => {};
 
  return (
- <>
- <div className="px-20 pb-24 pt-16">
- <div className="px-4">
- <Flex align="center" className="gap-12 pb-4 pt-6">
- <Avatar
- imageUrl={userImageUrl ?? '/images/dummy_avatar.png'}
- size="small"
- isCertified={isCertifiedStudent}
+ <div className="px-20 pb-24 pt-16">
+ <div className="px-4">
+ <Flex align="center" className="gap-12 pb-4 pt-6">
+ <Avatar
+ imageUrl={userImageUrl ?? '/images/dummy_avatar.png'}
+ size="small"
+ isCertified={isCertifiedStudent}
+ />
+ <div className="grow">
+ <Flex align="center">
+ <p className="text-paragraph-2 text-sign-secondary">{name}</p>
+ <Spacing size={2} direction="horizontal" />
+ {isArticleCaptain && (
+ <Image src="/icons/16/host.svg" alt="host" width={16} height={16} />
+ )}
+ {/* TODO: 등급 아이콘 추가 */}
+ </Flex>
+ <p className="text-caption text-sign-tertiary">{date}</p>
+ </div>
+ {/* TODO: 내 게시글 여부 api 추가 시 변경 */}
+ {isCaptain && (
+ <Image
+ src="/icons/24/more_secondary.svg"
+ alt="more"
+ width={24}
+ height={24}
+ onClick={() =>
+ open(<ArticleItemModal onOkClick={handleOkClick} onCancelClick={close} />)
+ }
  />
- <div className="grow">
- <Flex align="center">
- <p className="text-paragraph-2 text-sign-secondary">{name}</p>
- <Spacing size={2} direction="horizontal" />
- {isArticleCaptain && (
- <Image src="/icons/16/host.svg" alt="host" width={16} height={16} />
- )}
- {/* TODO: 등급 아이콘 추가 */}
- </Flex>
- <p className="text-caption text-sign-tertiary">{date}</p>
- </div>
- {/* TODO: 내 게시글 여부 api 추가 시 변경 */}
- {isCaptain && (
- <Image
- src="/icons/24/more_secondary.svg"
- alt="more"
- width={24}
- height={24}
- onClick={() => setIsDeleteModalOpen(true)}
- />
- )}
- </Flex>
- <Spacing size={16} />
- <div className="text-paragraph-2 text-sign-primary">{content}</div>
- {images.length > 0 && (
- <>
- <Spacing size={16} />
- <Flex className="h-160 gap-4 overflow-x-scroll">
- {images.map((imageUrl, index) => (
- <div key={imageUrl + index} className="relative h-160 w-160 shrink-0">
- <Image src={imageUrl} alt="article_image" className="object-cover" fill />
- </div>
- ))}
- </Flex>
- <Spacing size={16} />
- </>
  )}
- {isBoardDetail && (
- <>
- <Spacing size={16} />
- <Button
- variant="solid-secondary"
- as="a"
- href={`
+ </Flex>
+ <Spacing size={16} />
+ <div className="text-paragraph-2 text-sign-primary">{content}</div>
+ {images.length > 0 && (
+ <>
+ <Spacing size={16} />
+ <Flex className="h-160 gap-4 overflow-x-scroll">
+ {images.map((imageUrl, index) => (
+ <div key={imageUrl + index} className="relative h-160 w-160 shrink-0">
+ <Image src={imageUrl} alt="article_image" className="object-cover" fill />
+ </div>
+ ))}
+ </Flex>
+ <Spacing size={16} />
+ </>
+ )}
+ {isBoardDetail && (
+ <>
+ <Spacing size={16} />
+ <Button
+ variant="solid-secondary"
+ as="a"
+ href={`
  ${pathname}/board/${articleId}
  `}
- >
- 댓글 {commentCount}개
- </Button>
- <Spacing size={24} />
- </>
- )}
- </div>
+ >
+ 댓글 {commentCount}개
+ </Button>
+ <Spacing size={24} />
+ </>
+ )}
  </div>
- <Modal
- variant="warning"
- isOpen={isDeleteModalOpen}
- onCancelClick={() => setIsDeleteModalOpen(false)}
- onOkClick={handleOkClick}
- >
- <Spacing size={32} />
- <Image src="/icons/48/warning.svg" alt="warning" width={48} height={48} />
- <Spacing size={12} />
- <p>해당 게시글을 삭제하시겠습니까?</p>
- <Spacing size={16} />
- </Modal>
- </>
+ </div>
  );
 }
diff --git a/src/app/(main)/grouping/components/ArticleItemModal.client.tsx b/src/app/(main)/grouping/components/ArticleItemModal.client.tsx
@@ -0,0 +1,20 @@
+import { Spacing } from '@/components/common/Spacing';
+import { Modal } from '@/components/Modal';
+import Image from 'next/image';
+
+interface ArticleItemModalProps {
+ onOkClick: () => void;
+ onCancelClick: () => void;
+}
+
+export default function ArticleItemModal({ onOkClick, onCancelClick }: ArticleItemModalProps) {
+ return (
+ <Modal variant="warning" onCancelClick={onCancelClick} onOkClick={onOkClick}>
+ <Spacing size={32} />
+ <Image src="/icons/48/warning.svg" alt="warning" width={48} height={48} />
+ <Spacing size={12} />
+ <p>해당 게시글을 삭제하시겠습니까?</p>
+ <Spacing size={16} />
+ </Modal>
+ );
+}
diff --git a/src/app/(main)/grouping/create/components/GroupingModal.client.tsx b/src/app/(main)/grouping/create/components/GroupingModal.client.tsx
@@ -7,7 +7,7 @@ import Image from 'next/image';
 export default function GroupingModal() {
  return (
  <div>
- <Modal isOpen variant="warning">
+ <Modal variant="warning">
  <Spacing size={32} />
  <Image src="/icons/48/warning.svg" width={48} height={48} alt="warning" />
  <Spacing size={12} />