Fix: series form UI 수정, 나가기 버튼 추가

Funssion-SWM · Oct 17, 2023 · 630f74e · 630f74e
1 parent e16c817
commit 630f74e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/components/create/series/AddMemoContainer.tsx b/src/components/create/series/AddMemoContainer.tsx
@@ -28,7 +28,7 @@ export default function AddMemoContainer({
     searchMemos(realSearchString, 'new', false, userId.toString()).then(
       (res) => {
         if ('code' in res) {
-          notifyToast(res.message, 'error');
+          // notifyToast(res.message, 'error');
           return;
         }
         setMemos(res);
@@ -55,7 +55,7 @@ export default function AddMemoContainer({
       <BlueBtn
         text="메모 추가"
         onClick={handleClickAddBtn}
-        extraStyle="self-end"
+        extraStyle="self-end my-2"
       />
       <input
         type="text"

diff --git a/src/components/create/series/MemoOrderContainer.tsx b/src/components/create/series/MemoOrderContainer.tsx
@@ -13,7 +13,7 @@ export default function MemoOrderContainer({
   onDeleteBtnClick,
 }: Props) {
   return (
-    <ul className="flex gap-3 overflow-x-auto h-48 items-center bg-soma-grey-10 px-3 rounded-lg">
+    <ul className="flex gap-3 overflow-x-auto h-48 items-center bg-soma-grey-20 px-3 rounded-lg">
       {memos.map((memo, idx) => (
         <li key={memo.id}>
           <MemoDndCard

diff --git a/src/components/create/series/SeriesForm.tsx b/src/components/create/series/SeriesForm.tsx
@@ -6,6 +6,7 @@ import BlueBtn from '../../shared/btn/BlueBtn';
 import {
   ChangeEvent,
   MutableRefObject,
+  useContext,
   useEffect,
   useRef,
   useState,
@@ -15,12 +16,12 @@ import MemoOrderContainer from './MemoOrderContainer';
 import { MAX_IMAGE_BYTE } from '@/utils/const';
 import { notifyToast } from '@/service/notification';
 import Image from 'next/image';
-import { AiOutlinePicture } from 'react-icons/ai';
 import { createSeries, getSeriesById, updateSeries } from '@/service/series';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { MemoInfo } from '@/types/series';
 import { Memo } from '@/types/memo';
 import defaultImage from '@/assets/inforumlogo1.jpeg';
+import { ModalContext } from '@/context/ModalProvider';
 
 type Props = {
   userId: number;
@@ -36,6 +37,7 @@ export default function SeriesForm({ userId }: Props) {
   const [imageUrl, setImageUrl] = useState<string>();
   const [isEmptyImage, setIsEmptyImage] = useState<'true' | 'false'>('true');
   const router = useRouter();
+  const { open } = useContext(ModalContext);
 
   const fileInput = useRef() as MutableRefObject<HTMLInputElement>;
 
@@ -162,8 +164,8 @@ export default function SeriesForm({ userId }: Props) {
 
   return (
     <div className="flex flex-col w-full min-h-for-fit-screen">
-      <div className="flex justify-between items-center mb-2">
-        <div className="text-2xl font-semibold">Series</div>
+      <div className="flex justify-between items-center mb-2 mx-2 sm:mx-0">
+        <div className="text-3xl font-semibold">Series</div>
         <BlueBtn text="등록" onClick={handleCreateBtnClick} />
       </div>
       <div className="flex flex-col sm:flex-row  w-full gap-4 ">
@@ -229,8 +231,18 @@ export default function SeriesForm({ userId }: Props) {
             onChange={(e) => setDescription(e.target.value)}
             value={description}
           ></textarea>
+          <button
+            className="text-soma-grey-50 mt-5 text-sm"
+            onClick={() =>
+              open('나가시겠습니까?', () => {
+                router.push(`/series`);
+              })
+            }
+          >
+            나가기
+          </button>
         </div>
-        <div className="flex flex-col grow">
+        <div className="flex flex-col grow mt-6">
           <DndProvider backend={HTML5Backend}>
             <MemoOrderContainer
               memos={memos}