Portfolio

사용하는 데이터 세 가지

복사본 예시 데이터


{
    "careers": [
        {
            "type": "careers",
            "type": "careers",
            "componentId": 2203,
            "originComponentId": 2073,
            "reflectFeedback": false,
            "createdDate": "2023-11-25T21:05:35.713568",
            "companyName": "그렙 수정",
            "position": "프론트",
            "skills": [
                ""
            ],
            "duties": [],
            "careerStartDate": "2023-11-01",
            "endDate": null,
            "careerContent": "",
            "currentlyEmployed": true
        },
        {
            "type": "careers",
            "type": "careers",
            "componentId": 2181,
            "originComponentId": 2152,
            "reflectFeedback": false,
            "createdDate": "2023-11-25T21:05:35.7136",
            "companyName": "카카오",
            "position": "프론트",
            "skills": [
                ""
            ],
            "duties": [],
            "careerStartDate": "2023-11-16",
            "endDate": null,
            "careerContent": "",
            "currentlyEmployed": true
        }
    ]
}

스냅샷 예시 데이터


{
    "careers": [
        {
            "type": "careers",
            "type": null,
            "componentId": 2175,
            "originComponentId": 2073,
            "reflectFeedback": false,
            "createdDate": "2023-11-25T21:05:35.713568",
            "companyName": "그렙",
            "position": "프론트",
            "skills": [
                "자바",
                "자바스크립트"
            ],
            "duties": [],
            "careerStartDate": "2023-11-01",
            "endDate": null,
            "careerContent": "",
            "currentlyEmployed": true
        },
        {
            "type": "careers",
            "type": null,
            "componentId": 2181,
            "originComponentId": 2152,
            "reflectFeedback": false,
            "createdDate": "2023-11-25T21:05:35.7136",
            "companyName": "카카오",
            "position": "프론트",
            "skills": [
                ""
            ],
            "duties": [],
            "careerStartDate": "2023-11-16",
            "endDate": null,
            "careerContent": "",
            "currentlyEmployed": true
        }
    ],
    "projects": [],
		...
}

코멘트 예시 데이터


{
    "commentResponses": [
        {
            "commentId": 452,
            "content": "rff",
            "componentId": 2203,
            "lastModifiedAt": "2023-11-25T21:05:55.820769"
        },
        {
            "commentId": 453,
            "content": "aaaa~~",
            "componentId": 2181,
            "lastModifiedAt": "2023-11-25T21:06:02.168908"
        },
        {
            "commentId": 454,
            "content": "dd",
            "componentId": 2193,
            "lastModifiedAt": "2023-11-25T21:06:07.538874"
        }
    ],
    "overallReview": "good!",
    "mentorId": 1
}

복사본

componentId: 수정할 때마다 바뀜

originComponentId

스냅샷

componentId: 수정 전 컴포넌트 아이디 (수정해도 안 바뀜, 안 씀)

originComponentId

코멘트

componentId

조건

코멘트는 해당 블럭에 코멘트가 있기만 하면 항상 보여준다

스냅샷은 복사본을 수정 또는 삭제한 경우에 보여준다

복사본 삭제해버리면 reflectFeedback도 못 읽는데?
→ 스냅샷의 componentId와 복사본의 componentId 비교 → 값이 다르면 수정한 거고, 복사본에 해당 componentId가 없으면 삭제한 거임! → 둘 중 하나에 해당하면 스냅샷을 보여준다!

렌더링 구조

☝

복사본 데이터, 코멘트 데이터는 구조 변환 과정을 거친다! id를 인덱스로 바로 타겟 블럭을 가져올 수 있도록 기존 배열에서 id를 키로 가진 객체로 변환시킴

전제: 복사본의 특정 블럭을 하더라도 해당 블럭에 코멘트 데이터가 존재한다면 코멘트와 스냅샷 데이터는 보여준다.

➡️ 스냅샷 데이터로 map을 돌려야 함.

복사본 카테고리 블럭 (~Details): 스냅샷 데이터의 originComponentId와 일치하는 복사본 블럭을 보여준다.

cf. 해당하는 복사본 블럭이 없는 경우 (= undefined, 삭제한 경우) 안 보여줌.

토글: 코멘트가 있는 경우에 보여준다.

코멘트 (FeedbackView): 복사본 데이터의 componentId와 일치하는 코멘트 데이터를 보여준다.

1번에서 보여주는 복사본 블럭의 componentId를 알아야 하는데, 문제는 복사본 블럭을 삭제한 경우 componentId를 알 수 없음.

스냅샷 카테고리 블럭 (~Details): map 내에서 현재 순회하고 있는 데이터를 보여준다.

첨삭 반영 페이지

사용하는 데이터 세 가지

조건

렌더링 구조