[Tars] 회고록 5일차 - 채팅페이지, 태그선택모달

오랜만에 글을 작성하였는데 그 동안 쉬었던 건 아니고 너무 바빠서 정신없이 하다보니깐. 블로깅하는 것을 까먹고 있었다.

그래서 부랴부랴 다시 작성하는 회고록 5일차!!

 

프로젝트를 만들다보니 chatGPT한테 부탁해서 되면 넣고 안되면 다시 물어보고 생각없이 코딩을 하고 있는 것 같아서 최소한 10분은 고민해보고 코드 입력해 본 다음에도 막히면 chatGPT한테 질문하는 식으로 프로젝트를 진행하였다.

아무생각 없이 ai한테 의존하면 발전할 수가 없다.

 

Progressbar

2024.02.20 - [분류 전체보기] - Progressbar 만들기(with React, emotion)

프로그래스바도 만들었는데 transition을 넣어서 자연스럽게 바가 채워지도록 하려고했는데 안되었다.

class가 변경되어야 적용이 되는 것 같다.

지금은 바쁘니 나중에 다시 도전해보자.

ChattingPage

 

처음으로 채팅페이지를 시도해보았는데 너무 어려운게 많다.

데이터의 구조부터 고민이 많았다

 

데이터 구조

 

위의 사진처럼 기획에서 원하는건 메시지를 보여주고 "습관 선택"버튼을 누르면 "자격증 공부하기"라는 답변이 나온다.

그래서 {id: "habit", text: "반가워요", reply: "습관 선택"} 형식으로 데이터를 묶어서 저장하고
대화를 하면서 유저정보를 모으기 때문에 useState를 통해서 유저정보를 모아서 한번에 api로 전송하기로 하였다.

 

컴포넌트 구조

채팅페이지에서 바로 구현하면 가시성이 떨어져서 채팅부분만 따로 컴포넌트로 만들었다.

<Chat>
    <Chat.Message
    message={chatData[0].message}
    reply={userDataFrame.habit}
    percentageProps={percentageProps}
    isReplyProps={isReplyProps}
    ></Chat.Message>
    <Chat.Message
    message={chatData[1].message}
    reply={userDataFrame.habit}
    percentageProps={percentageProps}
    isReplyProps={isReplyProps}
    ></Chat.Message>
</Chat>

요런식으로 Chat.Message가 하나씩 추가가 되면서 대화가 이어지도록 만들 계획인데 아직은 완성단계는 아니다.

 

타입 찾아내기

props를 내려줄 때 항상 타입이 헤갈려서 검색을 했었는데 쉽게 찾는법이 있었다.

예를들어 setIsReply의 타입을 찾을 때 커서를 올려놓기만 해도 type이 뜬다.

이 개꿀 기능을 왜 지금까지 몰랐지?

 

SelectTagModal 

chatting을 하면서 모달을 띄어서 필요한 정보를 가져와야 했다.

그래서 컴포넌트를 만들었다.

금방 만들줄 알았는데 만들다보니 필요한 기능들이 많아서 점점 추가가 되었다.

 

• 태그 클릭시 배경색 변경
• 동일한 태그 두 번 클릭시 배경색 없어짐
• 태그 배경색 변경된 상태에서 input클릭시 배경색 사라짐
• input focus시 바닥에 붙음
• input에 글자 입력시 배경색 변경
• input에 글 있어도 태그 선택시 태그 배경색 변경
• 배경색 변경된 태그 or input있을 떄 하단 버튼 활성화

 

완성은 했지만 너무 함수가 많고 컴포넌트화를 안해서 가독성이 최악이다.

나중에 컴포넌트화를 거쳐서 가독성을 높여보자.