Fix : Edit LinkForm Component

peer-42seoul · Jan 16, 2024 · e5d0ef6 · e5d0ef6
1 parent 165cad0
commit e5d0ef6
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 84 deletions.
diff --git a/src/app/showcase/edit/page.tsx b/src/app/showcase/edit/page.tsx
@@ -35,8 +35,9 @@ const mockData: IShowcaseEditorFields = {
       isLeader: false,
     },
     { nickname: '이순신', role: '백엔드 개발자', image: '', isLeader: false },
+    { nickname: '이순신', role: '리더', image: '', isLeader: false },
   ],
-  links: ['www.example1.com', 'www.example2.com'],
+  links: [{ linkName: '깃허브', linkUrl: '이름없음', id: 0 }],
 }
 
 const ShowCaseEditPage = () => {
@@ -52,7 +53,7 @@ const ShowCaseEditPage = () => {
   // if (error) return <div>에러가 발생했습니다.</div>
 
   return (
-    <Stack direction={'column'}>
+    <Stack direction={'column'} sx={{ overflow: 'auto' }}>
       <ShowcaseEditor data={mockData} />
     </Stack>
   )

diff --git a/src/app/showcase/edit/panel/ShowcaseEditor.tsx b/src/app/showcase/edit/panel/ShowcaseEditor.tsx
@@ -6,7 +6,6 @@ import ImageInput from './formPanel/ImageInput'
 import TeamName from './formPanel/TeamName'
 import SkillInput from './formPanel/SkillInput'
 import LinkForm from './formPanel/LinkForm'
-// import FormUIEditor from '../panel/formPanel/FormUIEditor'
 import useShowCaseState from '@/states/useShowCaseState'
 import useToast from '@/hook/useToast'
 import { redirect } from 'next/navigation'
@@ -16,14 +15,17 @@ import useAxiosWithAuth from '@/api/config'
 import StartEndDateViewer from './formPanel/StartEndDateViewer'
 import TeamMembers from './formPanel/TeamMembers'
 import dynamic from 'next/dynamic'
-const DynamicEditor = dynamic(() => import('../panel/formPanel/FormUIEditor'), {
-  ssr: false,
-})
+import * as style from './test.style'
+import { IUserProfileLink } from '@/types/IUserProfile'
 
 interface IShowcaseEditorProps {
   data: IShowcaseEditorFields // IShowcase 타입을 import 해야 합니다.
 }
 
+const DynamicEditor = dynamic(() => import('../panel/formPanel/FormUIEditor'), {
+  ssr: false,
+})
+
 const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
   const axiosWithAuth = useAxiosWithAuth()
   const [image, setImage] = useState<File[]>([])
@@ -33,46 +35,50 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
   const [errorMessages, setErrorMessages] = useState<string>('')
   const { CuToast, isOpen, openToast, closeToast } = useToast()
   const { isOpen: alertOpen, closeModal, openModal } = useModal()
-  // const [alertOpen, setAlertOpen] = useState(false)
 
-  // 1. 아무것도 안 보내면 기본 이미지 적용. 그러나 저장 이전에 한 번 더 물음
+  const useLinks = (initValue: IUserProfileLink[]) => {
+    const [links, setLinks] = useState<IUserProfileLink[]>(initValue)
+
+    const addLink = (linkName: string, linkUrl: string) => {
+      const newLink = { linkName, linkUrl, id: links.length }
+      setLinks([...links, newLink])
+    }
+
+    const changeLinkName = (id: number, content: string) => {
+      // links[id].linkName = content
+      setLinks(
+        links.map((link) =>
+          link.id === id ? { ...link, linkName: content } : link,
+        ),
+      )
+    }
 
-  // const defaultValues: IShowcaseEditorFields = {
-  //   image: null,
-  //   tags: data?.skills ? data.skills : [],
-  //   startDate: data?.start ? data.start : '',
-  //   endDate: data?.end ? data.end : '',
-  //   links: [{ id: 0, linkName: '', linkUrl: '' }],
-  //   content: '',
-  //   members: data?.member,
-  // }
-  // const { control, setValue, watch } = useForm({
-  //   defaultValues: defaultValues,
-  // })
+    const changeUrl = (id: number, content: string) => {
+      setLinks(
+        links.map((link) =>
+          link.id === id ? { ...link, linkUrl: content } : link,
+        ),
+      )
+    }
 
-  // const { fields, append, remove } = useFieldArray({
-  //   control,
-  //   name: 'links',
-  // })
+    return { links, addLink, changeLinkName, changeUrl }
+  }
+  const { links, addLink, changeLinkName, changeUrl } = useLinks([])
 
   const submitHandler = async () => {
-    // if (!previewImage) {
-    //   openModal()
-    //   return
-    // }
     try {
       const response = await axiosWithAuth.post(
         `${process.env.NEXT_PUBLIC_API_URL}/api/v1/showcase/write`,
         {
           image: 'previewImage',
           content: 'content',
           teamId: 'value3',
+          links: links,
         },
       )
       console.log(`/api/showcase response : ${response}`)
       redirect(`/showcase/${response.data.get('id')}`) // next 13에서 redirect 하는 법
     } catch (error: any) {
-      console.log(`/api/showcase error ${error}`)
       if (error.response) {
         switch (error.response.status) {
           case 400:
@@ -98,15 +104,16 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
         setErrorMessages('요청을 설정하는 중에 에러가 발생했습니다.')
       }
     }
+    console.log('링크', links[0].linkName, links[0].linkUrl)
     alert(
-      `Image ${image}, Coverimage : ${previewImage}, content : ${text}, teamId : ${content},`,
+      `links : ${links} ${image} Coverimage : ${previewImage}, content : ${text}, teamId : ${content},`,
     )
   }
 
   // if (isLoading) return <div>로딩중</div>
   // if (error) return <div>에러</div>
   return (
-    <form>
+    <form id="showcase-form">
       <Stack direction={'column'} spacing={'2.5rem'} sx={{ width: '26rem' }}>
         <ImageInput
           previewImage={previewImage}
@@ -117,9 +124,16 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
         <SkillInput tags={data?.skills} />
         <StartEndDateViewer start={data.start} end={data.end} />
         <TeamMembers members={data?.memberList} />
-        <LinkForm links={data.links} />
+        <LinkForm
+          links={links}
+          addLink={addLink}
+          changeLinkName={changeLinkName}
+          changeUrl={changeUrl}
+        />
         <DynamicEditor initialValue={text} setText={setText} />
-        <Button onClick={openModal}>저장</Button>
+        <Button onClick={openModal} sx={style.saveButton}>
+          저장
+        </Button>
         <CuToast
           open={isOpen}
           onClose={closeToast}

diff --git a/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx b/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx
@@ -72,7 +72,15 @@ const FormUIEditor = ({
   }
 
   return (
-    <Card sx={{ backgroundColor: 'white', color: 'black' }} ref={editorRef} />
+    <Card
+      sx={{
+        backgroundColor: 'white',
+        color: 'black',
+        position: 'sticky',
+        top: '0',
+      }}
+      ref={editorRef}
+    />
   )
 }
 

diff --git a/src/app/showcase/edit/panel/formPanel/LinkForm.tsx b/src/app/showcase/edit/panel/formPanel/LinkForm.tsx
@@ -1,72 +1,70 @@
-import { Stack } from '@mui/material'
+import { IconButton, Stack, TextField } from '@mui/material'
 import React from 'react'
 import LabelWithIcon from '../LabelWithIcon'
 import LinkIcon from '@/icons/LinkIcon'
 import * as Style from '../ShowcaseEditor.style'
-import Link from 'next/link'
+import PlusIcon from '@/icons/PlusIcon'
+interface ILinkInputValues {
+  linkName: string
+  linkUrl: string
+  id: number
+}
 
-interface IlinksProps {
-  links: string[]
+interface ILinkFormProps {
+  links: ILinkInputValues[]
+  addLink: (linkName: string, linkUrl: string) => void
+  changeLinkName: (id: number, content: string) => void
+  changeUrl: (id: number, content: string) => void
 }
 
-const LinkForm = ({ links }: IlinksProps) => {
+const LinkForm = ({
+  links,
+  addLink,
+  changeLinkName,
+  changeUrl,
+}: ILinkFormProps) => {
   return (
     <Stack width={'26rem'} spacing={'0.5rem'}>
-      <Stack direction={'column'} spacing={'0.5rem'}>
+      <Stack
+        direction={'row'}
+        spacing={'0.5rem'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+      >
         <LabelWithIcon
           svgIcon={<LinkIcon sx={Style.IconStyle} />}
           message={'링크'}
         />
-        <Stack direction={'column'} spacing={'0.5rem'}>
-          {links.map((link, index) => (
-            <Link href={link} key={index}>
-              {link}
-            </Link>
-          ))}
-        </Stack>
-        {/* <IconButton
+        <IconButton
           onClick={() => {
-            if (fields.length >= 5) return
-            append({
-              id: 0,
-              linkName: '',
-              linkUrl: '',
-            })
+            if (links.length >= 5) return
+            addLink('', '')
+            console.log('links', links)
           }}
         >
           <PlusIcon sx={Style.IconStyle} />
-        </IconButton> */}
+        </IconButton>
       </Stack>
-      {/* {fields.map((field, index) => (
-        <Stack key={field.id} direction={'row'} spacing={'0.5rem'}>
-          <Controller
-            name={`links.${index}.linkName`}
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <CuTextField
-                onChange={onChange}
-                value={value}
-                placeholder={'링크 이름'}
-                sx={{ width: '12.8rem', height: '2rem' }}
-                autoComplete="off"
-              />
-            )}
+      {links.map((link) => (
+        <Stack key={link.id} direction={'row'} spacing={'0.5rem'}>
+          <TextField
+            key={link.id}
+            name="linkName"
+            placeholder={'링크 이름'}
+            sx={{ width: '12.8rem', height: '2rem' }}
+            value={link.linkName}
+            onChange={(e) => changeLinkName(link.id, e.target.value)}
           />
-          <Controller
-            name={`links.${index}.linkUrl`}
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <CuTextField
-                onChange={onChange}
-                value={value}
-                placeholder={'링크 주소'}
-                sx={{ width: '12.8rem', height: '2rem' }}
-                autoComplete="off"
-              />
-            )}
+          <TextField
+            name="linkUrl"
+            placeholder={'링크 주소'}
+            sx={{ width: '12.8rem', height: '2rem' }}
+            autoComplete="off"
+            value={link.linkUrl}
+            onChange={(e) => changeUrl(link.id, e.target.value)}
           />
         </Stack>
-      ))} */}
+      ))}
     </Stack>
   )
 }

diff --git a/src/app/showcase/edit/panel/test.style.ts b/src/app/showcase/edit/panel/test.style.ts
@@ -0,0 +1,7 @@
+import { Theme } from '@mui/material'
+
+export const saveButton = {
+  backgroundColor: (theme: Theme) => theme.palette.purple.strong,
+  color: (theme: Theme) => theme.palette.text.normal,
+  // back
+}
diff --git a/src/types/IShowcaseEdit.ts b/src/types/IShowcaseEdit.ts
@@ -1,4 +1,4 @@
-// import { IUserProfileLink } from './IUserProfile'
+import { IUserProfileLink } from './IUserProfile'
 
 // export interface IShowcaseEditorFields {
 //   image: File[] | null
@@ -21,5 +21,5 @@ export interface IShowcaseEditorFields {
   start: string
   end: string
   memberList: IMember[]
-  links: string[]
+  links: IUserProfileLink[]
 }