[★★★★☆] MBTI 검사 테스트 문항 CRUD

[rebi13]

https://github.com/are-you-T/server/blob/main/questions.json

해당 페이지의 json 파일 참고해주시면 좋을 것 같습니다.

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?", // 문항 제목(주제)
   "answer":{ // 문항 답변
      "I":"주중 회사(실외)였으니 주말엔 집에서 쉬어야지~",
      "E":"주중 회사(실내)였으니 주말엔 밖에 나가서 놀아야지!"
   },
   "mbtiType":"E", // 어떤 유형을 판단하기 위한 유형인지? E성향이 강한 문항.
   "proportion":68 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
}

필요 없는 데이터는 idx, parent 입니다.

idx : 문항에 순번을 매기기 위함이었으나, 문항이 맨날 똑같아서 지루함을 유발한다는 사용자의 의견을 반영하여 랜덤으로 문항을 선택함. 따라서 의미가 없어진 필드.

parent: 여러 종류의 검사지를 만들 생각이었으나, 문항을 랜덤으로 n개 선택하여 검사지를 만드는 방식으로 기획이 수정됨. 따라서 의미가 없어진 필드.

해당 데이터는 관리자 페이지에서 CRUD가 가능해야 합니다. (관리자 권한 필요)

캡처 사진에서는 어떤 문항이 어떤 유형의 답변인지 내용을 표시할 수는 없네요. 수정해야겠습니다.

목록은 다음과 같이 표시될 것입니다.

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?",
   "mbtiType":"E",
   "proportion": 68 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
}

해당 데이터가 목록 형태로 표시되어야 하며, 페이지네이션 기능이 들어가야 합니다.

등록/수정도 동일합니다.

[rebi13]

@MCprotein 구조가 바뀌어 감에 따라 화면에 표시할 태그 요소들도 변경이 필요할 것 같습니다.

문항 데이터는 이러한 느낌으로 구성해 보았는데, 검토 부탁드립니다.

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?", // 문항 제목(주제)
   "answer":{ // 문항 답변 type, content
      "energy": [
            {
               type: 'I',
               content: "주중 회사(실외)였으니 주말엔 집에서 쉬어야지~"
            },
            {
               type: 'E',
               content: "주중 회사(실내)였으니 주말엔 밖에 나가서 놀아야지!"
            }
      ]
   },
   "mbtiType": { // 문항에 따른 mbti 타입은 energy, awareness, judgement, life가 있다.
      "energy": [
            {
               type: 'I',
               proportion: 0.75 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
            },
            {
               type: 'E',
               proportion: 0.25 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
            }
      ]
   }
}

answer 내에 energy, awareness ... 가 있는 구성이 맞을지는 잘 모르겠습니다.

기존 캡처본과 다르게 문항유형(energy, awareness, judgement, life)을 선택하면 자동으로 답변 옆에 E/I or N/S .. 식으로 표시되도록 화면을 재구성할 것입니다.

[MCprotein]

@MCprotein 구조가 바뀌어 감에 따라 화면에 표시할 태그 요소들도 변경이 필요할 것 같습니다.

문항 데이터는 이러한 느낌으로 구성해 보았는데, 검토 부탁드립니다.

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?", // 문항 제목(주제)
   "answer":{ // 문항 답변 type, content
      "energy": [
            {
               type: 'I',
               content: "주중 회사(실외)였으니 주말엔 집에서 쉬어야지~"
            },
            {
               type: 'E',
               content: "주중 회사(실내)였으니 주말엔 밖에 나가서 놀아야지!"
            }
      ]
   },
   "mbtiType": { // 문항에 따른 mbti 타입은 energy, awareness, judgement, life가 있다.
      "energy": [
            {
               type: 'I',
               proportion: 0.75 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
            },
            {
               type: 'E',
               proportion: 0.25 // 문항의 비중도. 비중도가 클 수록 해당 성향이 강한 것.
            }
      ]
   }
}

answer 내에 energy, awareness ... 가 있는 구성이 맞을지는 잘 모르겠습니다.

기존 캡처본과 다르게 문항유형(energy, awareness, judgement, life)을 선택하면 자동으로 답변 옆에 E/I or N/S .. 식으로 표시되도록 화면을 재구성할 것입니다.

https://github.com/MBTI-Inside/todo/issues/5#issuecomment-2070010614 처럼 진행했는데 proportion을 따로 분리하신 이유가 있을까요? 문항유형을 같이 저장해야된다면 최상위에 문항유형 필드를 만드는게 좋을거같습니다

[rebi13]

@MCprotein

해당 형태를 구성할 때 기존 문항 JSON 데이터를 토대로 구성하다 보니 proportion을 분리했던 것 같습니다. 같이 뭉치는 것이 맞습니다. 말씀하신 대로라면 이러한 형태가 될까요? (proportion은 정수 형태로, 합 100을 만드는 식으로 변경했습니다.)

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?", // 문항 제목(주제)
   "answer":[ 
            {
               type: 'I',
               content: "주중 회사(실외)였으니 주말엔 집에서 쉬어야지~",
               proportion: 75
            },
            {
               type: 'E',
               content: "주중 회사(실내)였으니 주말엔 밖에 나가서 놀아야지!",
               proportion: 25
            }
      ]
   },
   "mbtiType":  "energy"  // 문항에 따른 mbti 타입은 energy, awareness, judgement, life가 있다.
}

앞단에서 데이터 저장 시에 mbtiType이 energy일 경우 E와 I타입을 꼭 포함해야 한다는 유효성 검사를 넣으면 될 것 같습니다.

[rebi13]

또한 보다 직관적으로 데이터를 리스트업 하기 위하여 디자인 변경이 이루어질 예정입니다.

기본 형태만 만들어 놓은 상태이며, 다듬으려고 하는데요. 문항유형을 표시하는 뱃지 (x 표시는 빼려고 합니다.) 그리고 질문 아래는 E와 I 그리고 비율을 각각 수치로 표시 후 progressbar로 표현하고자 합니다.

해당 디자인을 토대로 위 구조를 다시 생각해 보았습니다. 위 데이터 구조에서 수정이 필요하다면 추가 의견 부탁드립니다.

[MCprotein]

@MCprotein

해당 형태를 구성할 때 기존 문항 JSON 데이터를 토대로 구성하다 보니 proportion을 분리했던 것 같습니다. 같이 뭉치는 것이 맞습니다. 말씀하신 대로라면 이러한 형태가 될까요? (proportion은 정수 형태로, 합 100을 만드는 식으로 변경했습니다.)

{
   "subject":"바쁜 회사 생활을 보낸 당신. 황금 같은 주말을 어떻게 보내려고 할까?", // 문항 제목(주제)
   "answer":[ 
            {
               type: 'I',
               content: "주중 회사(실외)였으니 주말엔 집에서 쉬어야지~",
               proportion: 75
            },
            {
               type: 'E',
               content: "주중 회사(실내)였으니 주말엔 밖에 나가서 놀아야지!",
               proportion: 25
            }
      ]
   },
   "mbtiType":  "energy"  // 문항에 따른 mbti 타입은 energy, awareness, judgement, life가 있다.
}

앞단에서 데이터 저장 시에 mbtiType이 energy일 경우 E와 I타입을 꼭 포함해야 한다는 유효성 검사를 넣으면 될 것 같습니다.

넵 말씀해주신 형식을 생각했습니다 수정할부분은 없을거같은데 혹시 생기면 말씀드리겠습니다!

[rebi13]

더 좋은 디자인이 있을 것 같은데 우선 샘플(초안) 입니다. (문항 단건 조회 페이지)

[rebi13]

문항 등록을 위한 컴포넌트 입니다. (제목-노란색, 답변1-민트, 답변2-분홍)

[rebi13]

@MCprotein

CORS 이슈 발생합니다. 서버단에서 추가될 부분이 있다면 추가 부탁드립니다.

앞단에서는 다음과 같이 Axios 인스턴스를 생성하여 호출하고 있습니다.

// Axios 인스턴스 생성
const apiInstance: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:4000/v1',
  timeout: 5000,
  withCredentials: true
});

[rebi13]

@MCprotein

1가지 사항 요청 드립니다.

/survey/questions 를 post요청할 때 생성 성공 시 response 형식이 있으면 좋을 것 같습니다. 현재 빈 값을 반환하고 있는 것으로 보입니다.

put요청, delete 요청 시에도 실행 성공 시 반환되는 데이터 값이 있으면 좋을 것 같습니다. 해당 사항 요청 드립니다. 감사합니다.

[rebi13]

잔여 todo 사항

• [ ] tanstack query로 마이그레이션
• [ ] 수정, 삭제 드롭다운 기능 재구현 (MBTI-Inside/client#32)
• [ ] 생성, 수정, 삭제 성공 시 action

[rebi13]

문항 추가 제거.

테스트 문항은 Read만 가능 (검색 기능 등)

[rebi13]