Refact : Refact Naming and dummy logic

peer-42seoul · Jan 16, 2024 · 37a470b · 37a470b
1 parent 5cbd7f0
commit 37a470b
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 141 deletions.
diff --git a/src/app/showcase/edit/page.tsx b/src/app/showcase/edit/page.tsx
@@ -14,17 +14,25 @@ import { IShowcaseEditorFields } from '@/types/IShowcaseEdit'
       2. 버튼 배치
 */
 
-// interface IShowcase {
-//   title: string
-//   skills: string[]
-//   start: string
-//   end: string
-//   memberList: IMember[]
-//   links: string[]
-// }
 const mockData: IShowcaseEditorFields = {
   title: '42peer',
-  skills: ['React', 'TypeScript', 'Node.js'],
+  skills: [
+    {
+      name: 'Javascript',
+      Id: 1,
+      color: '#F0DB4F',
+    },
+    {
+      name: 'React',
+      Id: 2,
+      color: '#61DBFB',
+    },
+    {
+      name: 'Python',
+      Id: 3,
+      color: '#3776AB',
+    },
+  ],
   start: '2024-01-01',
   end: '2024-12-31',
   memberList: [

diff --git a/src/app/showcase/edit/panel/test.style.ts → ...owcase/edit/panel/ShowcaseEditor.style.ts b/src/app/showcase/edit/panel/test.style.ts → ...owcase/edit/panel/ShowcaseEditor.style.ts
diff --git a/src/app/showcase/edit/panel/ShowcaseEditor.tsx b/src/app/showcase/edit/panel/ShowcaseEditor.tsx
@@ -14,8 +14,9 @@ import useAxiosWithAuth from '@/api/config'
 import StartEndDateViewer from './formPanel/StartEndDateViewer'
 import TeamMembers from './formPanel/TeamMembers'
 import dynamic from 'next/dynamic'
-import * as style from './test.style'
-import { IUserProfileLink } from '@/types/IUserProfile'
+import * as style from './ShowcaseEditor.style'
+import { useLinks } from '@/hook/useLinks'
+import useShowCaseState from '@/states/useShowCaseState'
 
 interface IShowcaseEditorProps {
   data: IShowcaseEditorFields // IShowcase 타입을 import 해야 합니다.
@@ -29,39 +30,11 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
   const axiosWithAuth = useAxiosWithAuth()
   const [image, setImage] = useState<File[]>([])
   const [previewImage, setPreviewImage] = useState<string>('')
-  const [text, setText] = useState<string>('')
   const [errorMessages, setErrorMessages] = useState<string>('')
   const { CuToast, isOpen, openToast, closeToast } = useToast()
   const { isOpen: alertOpen, closeModal, openModal } = useModal()
-
-  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 changeUrl = (id: number, content: string) => {
-      setLinks(
-        links.map((link) =>
-          link.id === id ? { ...link, linkUrl: content } : link,
-        ),
-      )
-    }
-
-    return { links, addLink, changeLinkName, changeUrl }
-  }
   const { links, addLink, changeLinkName, changeUrl } = useLinks([])
+  const { content } = useShowCaseState()
 
   const submitHandler = async () => {
     try {
@@ -100,6 +73,9 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
       } else {
         setErrorMessages('요청을 설정하는 중에 에러가 발생했습니다.')
       }
+      console.log(
+        `content : ${content} links : ${links[0].linkName} ${links[0].linkUrl} image : ${previewImage}`,
+      )
     }
   }
 
@@ -115,7 +91,7 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
           setPreviewImage={setPreviewImage}
         />
         <TeamName teamName={data.title} />
-        <SkillInput tags={data?.skills} />
+        <SkillInput skills={data.skills} />
         <StartEndDateViewer start={data.start} end={data.end} />
         <TeamMembers members={data?.memberList} />
         <LinkForm
@@ -124,7 +100,7 @@ const ShowcaseEditor = ({ data }: IShowcaseEditorProps) => {
           changeLinkName={changeLinkName}
           changeUrl={changeUrl}
         />
-        <DynamicEditor initialValue={text} setText={setText} />
+        <DynamicEditor />
         <Button onClick={openModal} sx={style.saveButton}>
           저장
         </Button>

diff --git a/...wcase/edit/panel/ShowcaseEditor.style.tsx → ...p/showcase/edit/panel/SkillInput.style.ts b/...wcase/edit/panel/ShowcaseEditor.style.tsx → ...p/showcase/edit/panel/SkillInput.style.ts
diff --git a/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx b/src/app/showcase/edit/panel/formPanel/FormUIEditor.tsx
@@ -16,7 +16,7 @@ const FormUIEditor = ({
   initialEditType = 'wysiwyg',
   previewStyle = 'vertical',
   height = '30rem',
-}: IEditorOptions & { setText: (value: string) => void }) => {
+}: IEditorOptions) => {
   const { setContent } = useShowCaseState()
   const themed = useTheme()
   const editorRef = useRef<HTMLDivElement>(null)

diff --git a/src/app/showcase/edit/panel/formPanel/ImageInput.tsx b/src/app/showcase/edit/panel/formPanel/ImageInput.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import LabelWithIcon from '../LabelWithIcon'
 import ImageIcon from '@/icons/ImageIcon'
 import ImageUploadButton from '@/components/ImageUploadButton'
-import * as Style from '../ShowcaseEditor.style'
+import * as Style from '../SkillInput.style'
 
 /* eslint-disable no-unused-vars */
 const ImageInput = ({

diff --git a/src/app/showcase/edit/panel/formPanel/LinkForm.tsx b/src/app/showcase/edit/panel/formPanel/LinkForm.tsx
@@ -2,7 +2,7 @@ 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 * as Style from '../SkillInput.style'
 import PlusIcon from '@/icons/PlusIcon'
 interface ILinkInputValues {
   linkName: string

diff --git a/src/app/showcase/edit/panel/formPanel/SkillInput.tsx b/src/app/showcase/edit/panel/formPanel/SkillInput.tsx
@@ -2,90 +2,21 @@ import React from 'react'
 import { Stack } from '@mui/material'
 import TagIcon from '@/icons/TagIcon'
 import LabelWithIcon from '../LabelWithIcon'
-import * as Style from '../ShowcaseEditor.style'
+import * as Style from '../SkillInput.style'
 import TagChip from '@/components/TagChip'
-// import { UseFormSetValue, UseFormWatch } from 'react-hook-form'
-// import { IShowcaseEditorFields } from '@/types/IShowcaseEdit'
-// import { ITag } from '@/types/IPostDetail'
-// import { purple, red } from '@mui/material/colors'
+import { ISkill } from '@/types/IShowcaseEdit'
 
-interface ItagsProps {
-  tags: string[]
+interface ISkillProps {
+  skills: ISkill[]
 }
-const SkillInput = ({ tags }: ItagsProps) => {
-  // const tags = watch('tags')
-  // const setData = (data: string[]) => {
-  //   setValue('tags', data)
-  // }
-
-  // const tagList: ITag[] = [
-  //   { name: 'React', color: '#FF5833', tagId: 1, createdAt: '', updatedAt: '' },
-  //   { name: 'vue', color: '#FF5833', tagId: 2, createdAt: '', updatedAt: '' },
-  //   { name: 'js', color: '#FF5833', tagId: 3, createdAt: '', updatedAt: '' },
-  // ]
-
-  // const nameList = tagList?.map(({ name }) => name)
-
-  // const handleInput = (
-  //   event: React.SyntheticEvent,
-  //   value: readonly string[],
-  // ) => {
-  //   setData([...value])
-  // }
-
-  /* 태그를 지웁니다 */
-  // const handleDelete = (index: number) => {
-  //   setData(tags.filter((tag, cIndex) => cIndex !== index))
-  // }
 
+const SkillInput = ({ skills }: ISkillProps) => {
   return (
     <Stack direction={'column'} spacing={'0.5rem'} width={'26rem'}>
       <LabelWithIcon
         svgIcon={<TagIcon sx={Style.IconStyle} />}
         message="기술 스택"
       />
-      {/* MEMO : 작업 당시에는 TagAutoComplete과 UI가 같았으나 현재는 달라진 것으로 보임.
-          우선 UI는 이전에 구현해둔 것이 있으니 백엔드와 논의 후 로직 결정할 것 */}
-      {/* <TagAutoComplete datas={tagList} setData={setData} tagList={tagList} /> */}
-      {/* 아래 코드는 이전에 작업 해두었던 것 */}
-      {/* <Box sx={{ height: '2rem', width: '26rem' }}>
-        <Autocomplete
-          disableClearable
-          multiple
-          forcePopupIcon={false}
-          sx={Style.AutocompleteStyle}
-          options={nameList}
-          onChange={handleInput}
-          value={tags}
-          renderTags={() => <></>}
-          renderInput={(params: any) => (
-            <CuTextField
-              sx={{
-                height: '2rem',
-                width: '26rem',
-              }}
-              {...params}
-              placeholder="등록할 기술을 입력하세요."
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <Button
-                      variant="text"
-                      sx={{
-                        color: 'text.normal',
-                        marginRight: '0.75rem',
-                        padding: '0rem 0.25rem',
-                      }}
-                    >
-                      <Typography variant="Caption">등록</Typography>
-                    </Button>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          )}
-        />
-      </Box> */}
       <Stack
         spacing={0.75}
         py={1}
@@ -94,25 +25,9 @@ const SkillInput = ({ tags }: ItagsProps) => {
         direction={'row'}
         useFlexGap
       >
-        {/* {tags?.map((tag: string, idx: number) => {
-          const selectTag = tagList?.find((item) => item.name === tag)
-          return (
-            <TagChip
-              key={idx}
-              name={selectTag?.name ?? ''}
-              color={selectTag?.color ?? ''}
-              deleteIcon
-              onDelete={() => {
-                handleDelete(idx)
-              }}
-            />
-          )
-        })} */}
-        {tags?.map((tag: string, index: number) => (
-          <TagChip key={index} name={tag} color={'#FF5833'} />
+        {skills?.map((skill, index: number) => (
+          <TagChip key={index} name={skill.name} color={skill.color} />
         ))}
-        {/* <TagChip name={'Vue'} color={'#FF5833'} />
-        <TagChip name={'JS'} color={'#FF5833'} /> */}
       </Stack>
     </Stack>
   )

diff --git a/src/app/showcase/edit/panel/formPanel/StartEndDateViewer.tsx b/src/app/showcase/edit/panel/formPanel/StartEndDateViewer.tsx
@@ -1,6 +1,6 @@
 import { Stack, Typography } from '@mui/material'
 import React from 'react'
-import * as Style from '../ShowcaseEditor.style'
+import * as Style from '../SkillInput.style'
 import { CalendarIcon } from '@/app/showcase/panel/icons'
 import LabelWithIcon from '../LabelWithIcon'
 

diff --git a/src/app/showcase/edit/panel/formPanel/TeamMembers.tsx b/src/app/showcase/edit/panel/formPanel/TeamMembers.tsx
@@ -2,7 +2,7 @@ import { Avatar, Stack, Typography } from '@mui/material'
 import React from 'react'
 import LabelWithIcon from '../LabelWithIcon'
 import ListIcon from '@/icons/ListIcon'
-import * as Style from '../ShowcaseEditor.style'
+import * as Style from '../SkillInput.style'
 import { IMember } from '@/types/IShowcaseEdit'
 
 const MemberInformation = ({ member }: { member: IMember }) => {

diff --git a/src/app/showcase/edit/panel/formPanel/TeamName.tsx b/src/app/showcase/edit/panel/formPanel/TeamName.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Avatar, Stack, Typography } from '@mui/material'
 import LabelWithIcon from '../LabelWithIcon'
 import ListIcon from '@/icons/ListIcon'
-import * as Style from '../ShowcaseEditor.style'
+import * as Style from '../SkillInput.style'
 
 interface IteamNameProps {
   teamName: string

diff --git a/src/hook/useLinks.tsx b/src/hook/useLinks.tsx
@@ -0,0 +1,30 @@
+import { IUserProfileLink } from '@/types/IUserProfile'
+import { useState } from 'react'
+
+export 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 changeUrl = (id: number, content: string) => {
+    setLinks(
+      links.map((link) =>
+        link.id === id ? { ...link, linkUrl: content } : link,
+      ),
+    )
+  }
+
+  return { links, addLink, changeLinkName, changeUrl }
+}
diff --git a/src/types/IShowcaseEdit.ts b/src/types/IShowcaseEdit.ts
@@ -15,9 +15,15 @@ export interface IMember {
   image: string
 }
 
+export interface ISkill {
+  name: string
+  Id: number
+  color: string
+}
+
 export interface IShowcaseEditorFields {
   title: string
-  skills: string[]
+  skills: ISkill[]
   start: string
   end: string
   memberList: IMember[]