토픽생성 - 이미지 업로드 추가, 버튼 디자인 변경 추가 (#234)

* fix: modal 컴포넌트로 변경

* feat: 토픽 생성 이미지 추가 기능

* feat: 이미지 api 추가

* feat: 토픽생성 버튼 변경

* fix: enterkey 기능 제거

* fix: build error

src/apis/topic/useTopics.ts

@@ -1,5 +1,6 @@
 import { useInfiniteQuery, useMutation } from '@tanstack/react-query';
 
+import { PresignedURLResponse } from '@interfaces/api/profile';
 import { TopicCreateRequestDTO, TopicResponse } from '@interfaces/api/topic';
 
 import { PagingDataResponse } from '@interfaces/api';
@@ -41,10 +42,23 @@ const createTopics = (req: TopicCreateRequestDTO) => {
   });
 };
 
+const getPresignedURL = (fileName: string) => {
+  return client.post<PresignedURLResponse>({
+    path: `/images/topic`,
+    body: {
+      fileName: fileName,
+    },
+  });
+};
+
 const useCreateTopics = () => {
   return useMutation({ mutationFn: createTopics });
 };
 
+const useGetPresignedURL = () => {
+  return useMutation({ mutationFn: (fileName: string) => getPresignedURL(fileName) });
+};
+
 export default useTopics;
 
-export { useCreateTopics };
+export { useCreateTopics, useGetPresignedURL };

src/assets/icons/index.ts

@@ -20,6 +20,7 @@ import CommentIcon from './comment.svg?react';
 import CrownIcon from './crown.svg?react';
 import DefaultProfileIcon from './default-profile.svg?react';
 import DeleteIcon from './delete.svg?react';
+import DotIcon from './dot.svg?react';
 import DownChevronIcon from './down-chevron.svg?react';
 import GoogleIcon from './google.svg?react';
 import HideIcon from './hide.svg?react';
@@ -99,4 +100,5 @@ export {
   TrashIcon,
   AlbumIcon,
   CameraIcon,
+  DotIcon,
 };

src/components/TopicCreate/ImageInputComponent.tsx

@@ -32,9 +32,9 @@ interface ImageInputComponetProps {
 const ImageInputComponent = ({ label }: ImageInputComponetProps) => {
   const { Modal, toggleModal } = useModal('default');
   const { register, setValue, watch } = useFormContext();
-  const id = label === 'A' ? INPUT_TYPE.A_TOPIC_IMAGEURL : INPUT_TYPE.B_TOPIC_IMAGEURL;
-  const config = label === 'A' ? CONFIG.A_TOPIC_IMAGEURL : CONFIG.B_TOPIC_IMAGEURL;
-  const imageUrl = watch(id);
+  const id = label === 'A' ? INPUT_TYPE.A_TOPIC_IMAGE : INPUT_TYPE.B_TOPIC_IMAGE;
+  const config = label === 'A' ? CONFIG.A_TOPIC_IMAGE : CONFIG.B_TOPIC_IMAGE;
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
 
   const handleFileChange = (
     event: React.ChangeEvent<HTMLInputElement>,
@@ -49,7 +49,8 @@ const ImageInputComponent = ({ label }: ImageInputComponetProps) => {
 
     const reader = new FileReader();
     reader.onloadend = () => {
-      setValue(id, reader.result as string);
+      setImageUrl(reader.result as string);
+      setValue(id, fileObj);
     };
     reader.readAsDataURL(fileObj);
   };

src/components/TopicCreate/TopicCreateImageInput.tsx

@@ -20,19 +20,19 @@ const TopicCreateImageInput = () => {
   const [isImageFilled, setIsImageFilled] = useState(false);
 
   const handleReplaceButtonClick = () => {
-    const aImage = getValues(INPUT_TYPE.A_TOPIC_IMAGEURL);
-    const bImage = getValues(INPUT_TYPE.B_TOPIC_IMAGEURL);
+    const aImage = getValues(INPUT_TYPE.A_TOPIC_IMAGE);
+    const bImage = getValues(INPUT_TYPE.B_TOPIC_IMAGE);
 
-    setValue(INPUT_TYPE.A_TOPIC_IMAGEURL, bImage);
-    setValue(INPUT_TYPE.B_TOPIC_IMAGEURL, aImage);
+    setValue(INPUT_TYPE.A_TOPIC_IMAGE, bImage);
+    setValue(INPUT_TYPE.B_TOPIC_IMAGE, aImage);
   };
 
   useEffect(() => {
     if (
-      getFieldState(INPUT_TYPE.A_TOPIC_IMAGEURL, formState).isDirty &&
-      !getFieldState(INPUT_TYPE.A_TOPIC_IMAGEURL, formState).invalid &&
-      getFieldState(INPUT_TYPE.B_TOPIC_IMAGEURL, formState).isDirty &&
-      !getFieldState(INPUT_TYPE.B_TOPIC_IMAGEURL, formState).invalid
+      getFieldState(INPUT_TYPE.A_TOPIC_IMAGE, formState).isDirty &&
+      !getFieldState(INPUT_TYPE.A_TOPIC_IMAGE, formState).invalid &&
+      getFieldState(INPUT_TYPE.B_TOPIC_IMAGE, formState).isDirty &&
+      !getFieldState(INPUT_TYPE.B_TOPIC_IMAGE, formState).invalid
     ) {
       setIsImageFilled(true);
     } else {

src/components/commons/Button/TopicCreateButton.tsx

@@ -0,0 +1,59 @@
+import { styled } from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+import { DotIcon } from '@icons/index';
+
+import { Row } from '../Flex/Flex';
+import Text from '../Text/Text';
+
+interface TopicCreateButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick: () => void;
+  topicType: 'A' | 'B';
+  disabled: boolean;
+  title: string;
+  step?: 1 | 2;
+}
+
+const TopicCreateButton = ({
+  onClick,
+  disabled,
+  title,
+  topicType,
+  step,
+  ...rest
+}: TopicCreateButtonProps) => {
+  return (
+    <StyledButton topicType={topicType} onClick={onClick} disabled={disabled} {...rest}>
+      {step && disabled ? (
+        <Row gap={8}>
+          <Text size={16} weight={700} color={colors.white_60} align="start">
+            {title}
+          </Text>
+          <DotIcon />
+          <Text size={16} weight={700} color={colors.white_60} align="start">
+            {step === 1 ? '1/2' : '2/2'}
+          </Text>
+        </Row>
+      ) : (
+        <Text size={16} weight={700} color={colors.white}>
+          {title}
+        </Text>
+      )}
+    </StyledButton>
+  );
+};
+
+const StyledButton = styled.button<{ topicType: 'A' | 'B' }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 52px;
+  color: ${colors.white};
+  cursor: pointer;
+  background-color: ${(props) => (props.topicType === 'A' ? colors.A : colors.B)};
+  border-radius: 10px;
+`;
+
+export default TopicCreateButton;

src/constants/form.ts

@@ -12,8 +12,8 @@ export const INPUT_TYPE = {
   TOPIC_TITLE: 'topicTitle',
   A_TOPIC: 'ATopic',
   B_TOPIC: 'BTopic',
-  A_TOPIC_IMAGEURL: 'ATopicImageURL',
-  B_TOPIC_IMAGEURL: 'BTopicImageURL',
+  A_TOPIC_IMAGE: 'ATopicImage',
+  B_TOPIC_IMAGE: 'BTopicImage',
   TOPIC_CONTENT_TYPE: 'topicType',
   TOPIC_CATEGORY: 'topicCategory',
   TOPIC_DEADLINE: 'topicDeadline',
@@ -95,12 +95,12 @@ export const CONFIG: Record<ConfigKeys, ConfigField> = {
       },
     },
   },
-  A_TOPIC_IMAGEURL: {
+  A_TOPIC_IMAGE: {
     options: {
       required: true,
     },
   },
-  B_TOPIC_IMAGEURL: {
+  B_TOPIC_IMAGE: {
     options: {
       required: true,
     },

src/routes/MyPage/MyPage.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { set } from 'react-hook-form';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import {
   getProfile,
@@ -10,11 +9,9 @@ import {
 } from '@apis/profile/useProfile';
 import { Col, Row } from '@components/commons/Flex/Flex';
 import Layout from '@components/commons/Layout/Layout';
-import ActionModalButton from '@components/commons/Modal/ActionModalButton';
 import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
 import useActionSheet from '@hooks/useModal/useActionSheet';
-import useModal from '@hooks/useModal/useModal';
 
 import { colors } from '@styles/theme';
 
@@ -25,7 +22,6 @@ import {
   Container,
   Divider,
   ImageInput,
-  ModalDivider,
   ModifyProfileButton,
   PhotoButton,
   ProfileImgContainer,
@@ -44,10 +40,9 @@ const MyPage = () => {
   const [file, setFile] = useState<File>();
   const [presignedURL, setpresignedURL] = useState<string>('');
 
-  const updateProfileImgMutation = useGetPresignedURL('.' + fileName);
+  const getProfileImgMutation = useGetPresignedURL('.' + fileName);
   const updateProfileImgURLMutation = useUpdateProfileImgURL(presignedURL);
   const deleteProfileImg = useDeleteProfileImg();
-  const [isDeleteModal, setIsDeleteModal] = useState<boolean>(false);
 
   const removeQueryString = (url: string): string => {
     const urlObj = new URL(url);
@@ -59,7 +54,7 @@ const MyPage = () => {
       return;
     }
     try {
-      const presignedURLResponse = await updateProfileImgMutation.mutateAsync();
+      const presignedURLResponse = await getProfileImgMutation.mutateAsync();
       const imageUrl = removeQueryString(presignedURLResponse.presignedUrl);
 
       setpresignedURL(imageUrl);
@@ -88,7 +83,6 @@ const MyPage = () => {
 
   const handleDeleteCurrentProfileImg = () => {
     setProfileImg(null);
-    setIsDeleteModal(false);
     const res = deleteProfileImg.mutate();
     console.log('delete성공', res);
     toggleModal();
@@ -111,10 +105,6 @@ const MyPage = () => {
     toggleModal();
   };
 
-  const handleRemoveCurrentImage = () => {
-    setIsDeleteModal(true);
-  };
-
   const handleOnClickPhotoButton = () => {
     toggleModal();
   };

src/routes/Topic/Create/ASide/ATopicCreate.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { useCreateTopics } from '@apis/topic/useTopics';
 import DefaultButton from '@components/commons/Button/DefaultButton';
+import TopicCreateButton from '@components/commons/Button/TopicCreateButton';
 import { Col } from '@components/commons/Flex/Flex';
 import Text from '@components/commons/Text/Text';
 import TextInput from '@components/commons/TextInput/TextInput';
@@ -101,11 +102,12 @@ const ATopicCreate = () => {
           <TopicCreateTextInput />
         </Col>
         <SubmitButton>
-          <DefaultButton
-            title={'토픽 던지기'}
+          <TopicCreateButton
+            title={isFormFilled ? '토픽 던지기' : '내용을 입력해 주세요'}
             onClick={handleSubmitForm}
             disabled={!isFormFilled}
-          ></DefaultButton>
+            topicType="A"
+          />
         </SubmitButton>
       </Container>
     </FormProvider>