dananote/for-the-emotional-you

🤗�About me

💻 My Skills

   
   

for-the-emotional-you's Issues

✨ [Feature]: Recoil 로 작성한 내용 관리

🤔Description

Recoil persist로 작성한 메모 내용을 로컬스토리에 저장하여 전역 관리

📍To-do

• 선택한 감정 태그 저장 (감정은 중복 선택 가능)
• 작성한 감정 제목 저장
• 작성한 감정 내용 저장

📃ETC

<저장할 데이터의 배열 형태>

[
  {
	"emotionLabels": "😢 슬퍼요,😤 화나요,😓 힘들어요",
	"emotionTitle": "String",
	"emotionContent": "String"
  },
  {
	"emotionLabels": "😢 슬퍼요,😤 화나요,😓 힘들어요",
	"emotionTitle": "String",
	"emotionContent": "String"
  }
]

💅 [Style]: Input UI 공통 컴포넌트

🤔Description

재사용성을 높이기 위한 Input UI 공통 컴포넌트 관리

📍To-do

• 포커스, 디폴트, 비활성화, 에러 인풋
• 타입별 스타일링

📃ETC

기본으로 설정이 돼 있으나 재사용에 유용하게 커스텀 가능

<input type={} placeholder={} padding={} hadError={} disabled={} />

✨ [Feature]: card list에 recoil에 저장된 데이터 내용 노출

🤔Description

card list에 recoil에 저장된 데이터 내용 노출

📍To-do

• 감정 라벨, 날짜, 제목, 내용 노출
• 최근 저장한 내용이 제일 상단에 오도록 노출
• 마음 비우기 버튼을 누르면 리코일에서 해당 내용 삭제
• 리코일에 저장된 데이터가 없다면 마음을 비워달라는 내용 노출

📃ETC

고려해야할것:

1. 마음 비우기 버튼을 누르면 바로 삭제 되는 것이 아닌 모달창이 뜨는 기능 구현
2. 감정라벨 필터 기능

✨ [Feature]: Modal 기능 구현

🤔Description

사용자가 감정 비우기 버튼을 누르면 위로의 멘트가 나오는 기능 구현

📍To-do

• 마음 비우기 버튼을 누르면 모달창 노출
• 모달창 나오면 스크롤을 막음
• 모달에서 버튼을 누르면 모달창이 닫힘
• 모달창이 닫히면 리코일에서 클릭한 감정이 삭제됨
• 멘트가 목데이터가 있는곳에 랜덤으로 노출됨

📃ETC

기타사항

✨ [Feature]: 반응형 구현

🤔Description

다양항 기기에 대응하기 위해 반응형 구현

📍To-do

• react-responsive 설치
• 모바일 버전시 감정메모와 작성페이지 구별
• 모바일 버전시 버튼을 통해 보여지는 페이지 노출 변경

📃ETC

...

💅 [Style]: Card UI 컴포넌트 스타일링

🤔Description

Card UI 컴포넌트화 스타일링

📍To-do

• 감정 라벨, 작성날짜, 감정제목/ 내용 , 감정비우기 버튼
• card UI를 묶는 List 컴포넌트

📃ETC

.

💅 [Style]: Modal UI 공통 컴포넌트

🤔Description

Modal UI 컴포넌트화 스타일링

📍To-do

• 모달을 끌 수 있는 버튼
• 기존 화면을 덮는 화이트 bg

📃ETC

.

💅 [Style]: button UI 공통 컴포넌트

🤔Description

재사용성을 높이기 위한 Button UI 공통 컴포넌트 관리

📍To-do

• 활성화/비활성화 버튼
• 버튼의 props에 따른 컬러/사이즈

📃ETC

기본으로 설정이 돼 있으나 재사용에 유용하게 커스텀 가능

<Button type={} bgColor={} textColor={} padding={} font={} disabled={} onClick={}>text</Button>

✨ [Feature]: 작성된 날짜 저장 및 모든 내용 입력안할시 에러

🤔Description

사용자가 실수없이 서비스를 이용하게 하기 위한 기능 추가

📍To-do

• 날짜 또는 내용을 입력안할시 에러메시지 띄우기
• 실수 허들을 줄이기 위해 감정 라벨은 기본적으로 하나 선택되어 있기
• 본문내용 글자수 100자 제한 / 사용자가 직관적으로 확인하기 위한 실시간 글자수 카운트 및 초과시 입력 못하게 막기

📃ETC

기타사항

✨ [Feature]: filter 기능 구현

🤔Description

드롭박스 UI 를 이용하여 사용자가 선택한 감정만 화면에 노출되도록 구현

📍To-do

• 드롭박스를 클릭하면 네비가 열리고 하나를 선택하거나 그 외 화면을 클릭시 네비가 닫힘
• 현재 선택한 필터에는 활성화가 되어 있고 선택하지 않은 것은 비활성화 되어 있음
• 활성성화된대로 필터가 걸리면서 카드리스트에 보여지는 역역들이 필터링됨

📃ETC

기타사항

💅 [Style]: Label UI 공통 컴포넌트

🤔Description

재사용성을 높이기 위한 Label UI 공통 컴포넌트 관리

📍To-do

• 활성화, 디폴트 라벨

📃ETC

기본으로 설정이 돼 있으나 재사용에 유용하게 커스텀 가능

<Label active={}  >text</Label>

💅 [Style]: Dropbox UI 컴포넌트

🤔Description

Dropbox UI 컴포넌트화 스타일링

📍To-do

• nav 박스 등장을 위한 필터 박스
• nav 박스에는 활성화 돼있는 버튼과 비활성화 돼있는 박스로 구별

📃ETC

.

💅 [Style]: Main page 마크업 및 스타일 구현

🤔Description

Main page 웹접근성을 고려한 마크업및 스타일링

📍To-do

• 최대 넓이는 1100px
• 사용자가 직점 어떤 안좋은 일들이 있었는지 적는 란이 있고 이를 submit 할 버튼이 있다
• 사용자가 지금까지 적은 감정들 리스트가 있으며 리스트가 없다면 감정을 버려달라는 문구가 있다
• 사용자의 감정은 필터를 걸어서 확인할 수 있다.
• 사용자의 감정 리스트는 해당 영역만 스크롤이 된다.

📃ETC

<구현할 화면>

🚨 [Bug]: 리코일에 라벨 데이터 전달

🤔Description

Recoil에 라벨 데이터를 전달할때 한번 더 눌러야 전달되는 에러

📍To-do

• 선택된 라벨 데이터 join 한 뒤에 객체 형태로 reocil 배열에 저장
• 전송버튼을 누르고 나면 입력했던 내용 화면상에서 초기화

📃ETC

setMemoData 함수를 실행한 뒤에 submitData함수로 데이터를 Recoil에 저장하는데 왜 라벨은 바로 반영이 안되는지 에러 해결

  const handleJoin = (e) => {
    e.preventDefault();
    setMemoData((prevState) => ({
      ...prevState,
      emotionLabels: emotionLabel.join(),
    }));

    submitData();
  };

에러 해결

1. 선택된 라벨 데이터 join 한 뒤에 객체 형태로 reocil 배열에 저장:
   동기 비동기 문제로 제대로 라벨 데이터는 조인되기 전에 전달이 되어 input에 변화가 있을때 같이 업데이트 하는 코드로 변경

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    if (name === "emotionTitle") {
      setIsTitle(value);
    } else {
      setIsContent(value);
    }

    setMemoData((prevState) => ({
      ...prevState,
      [name]: value,
    }));

    setMemoData((prevState) => ({
      ...prevState,
      emotionLabels: emotionLabel.join(),
    }));
  };

2. 전송버튼을 누르고 나면 입력했던 내용 화면상에서 초기화:
   라벨 같은 경우는 인풋처럼 value가 없기 때문에 활성화 된 상태로 비활성화 상태로 모두 돌리기 위해 전송됐을때 상태 값이 변하는 useState를 추가하여 라벨에 해당 상태값을 useEffect에 의존성 배열로 두어 상태 변화시 화면을 렌더링 하도록 변경

const [isReset, setIsReset] = useState(false);
...
  useEffect(() => {
    setIsActiveLabel(false);
  }, [isReset]);