fix(my-info): 카드 추가 UI 오류 수정 (#91)

* Fix * fix * remove
depromeet · Sep 14, 2024 · 7fdab03 · 7fdab03
1 parent 4d2b715
commit 7fdab03
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/app/(sidebar)/(my-info)/components/AddInfoCardDialog.tsx b/src/app/(sidebar)/(my-info)/components/AddInfoCardDialog.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@/system/components';
 import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '@/system/components/Dialog/Dialog';
 import { TagType, InfoType, INFO_TYPES } from '@/types/info';
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { TagSelector } from '../../write/[id]/components/TagSelector/TagSelector';
 import { If } from '@/system/utils/If';
 import { cn } from '@/utils/tailwind-util';
@@ -12,11 +12,14 @@ import { TouchButton } from '@/components/TouchButton';
 import { useRouter } from 'next/navigation';
 import { motion } from 'framer-motion';
 
-export function AddInfoCardDialog({ children }: PropsWithChildren) {
+export function AddInfoCardDialog({
+  children,
+  currentCardType = '경험_정리',
+}: PropsWithChildren<{ currentCardType?: InfoType }>) {
   const router = useRouter();
 
   const [selectedTagList, setSelectedTagList] = useState<TagType[]>([]);
-  const [selectedType, setSelectedType] = useState<InfoType | null>(null);
+  const [selectedType, setSelectedType] = useState<InfoType | null>(currentCardType || null);
 
   const [isOpenTagSelector, setIsOpenTagSelector] = useState(false);
   const [isOpenTypeSelector, setIsOpenTypeSelector] = useState(false);
@@ -38,6 +41,10 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
     router.push(`/write/${res.cardId}`);
   };
 
+  useEffect(() => {
+    setSelectedType(currentCardType);
+  }, [currentCardType]);
+
   return (
     <Dialog
       onOpenChange={(open) => {
@@ -102,7 +109,7 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
                   {abilityTagList.map((tag) => (
                     <TagSelector.Tag
                       key={tag.id}
-                      className="text-blue-blue-text-1 bg-blue-blue-bg-1"
+                      className="text-blue-text-1 bg-blue-bg-1"
                       onClick={() => {
                         if (selectedTagList.length < 3 && !selectedTagList.find(({ id }) => id === tag.id)) {
                           setSelectedTagList((prev) => [...prev, tag]);
@@ -119,7 +126,7 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
                   {personalityTagList.map((tag) => (
                     <TagSelector.Tag
                       key={tag.id}
-                      className="text-blue-purple-text-1 bg-blue-purple-bg-1"
+                      className="text-purple-text-1 bg-purple-bg-1"
                       onClick={() => {
                         if (selectedTagList.length < 3 && !selectedTagList.find(({ id }) => id === tag.id)) {
                           setSelectedTagList((prev) => [...prev, tag]);

diff --git a/src/app/(sidebar)/(my-info)/page.tsx b/src/app/(sidebar)/(my-info)/page.tsx
@@ -109,7 +109,7 @@ export default function MyInfo() {
                 ))}
               </div>
             </If>
-            <AddInfoCardDialog>
+            <AddInfoCardDialog currentCardType={currentCardType}>
               <TouchButton layout>
                 <motion.div
                   initial={{ padding: '8px 16px' }}

diff --git a/src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/DeleteMemoDialog.tsx b/src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/DeleteMemoDialog.tsx
@@ -18,9 +18,9 @@ export function DeleteMemoDialog({
 
       <DialogContent className="border-1 w-460 h-232 p-32 pt-24 flex flex-col gap-36">
         <div className="mt-36 text-20 font-bold text-center flex flex-col items-center justify-center">
-          <div className="flex">
+          <div className="flex w-fit gap-5">
             <span>'</span>
-            <p className="w-370 overflow-hidden text-ellipsis whitespace-nowrap">{memo}</p>
+            <p className="max-w-370 w-fit overflow-hidden text-ellipsis whitespace-nowrap">{memo}</p>
             <span>'</span>
           </div>
           <p>메모를 정말 삭제하시겠습니까?</p>