[React] Redux 라이브러리 사용해서 Notes 앱 만들기 5📒

프린이·2025년 2월 14일

&&Dispatch Map Payload Props State action filter hover onClick push react-icons styled components usedispatch 개발공부 라이브러리 리덕스 리액트 모달 컴포넌트 토글 튤팁

📒 4탄 이전 벨로그

...

🙋‍♀️Note에 버튼 나오게 하기

메인에선 Edit/Archive/Delete 버튼이 있고

Archive 에선 Unarchive랑 Delete 버튼이 있고

Delete 에선 Restore랑 Delete 버튼이 있음

🖲버튼을 보여주는게 다 다름💥

이부분을 위해 조건처리를 해줘야하는데 getRelevantBtns.jsx 파일에서 해주자 ❣

▫ src>utils>getReleventBtns.jsx

이렇게 export로 내보내준 담에

▫ src>components>NoteCard>NoteCard.jsx

NoteCard.jsx 파일에서 FooterBox 안에 date 옆에 버튼 만들어야하기에 이렇게 작성해준것

✅type은 notes | archive | trash 있었음

type을 내려주고 그리고 note 객체 데이터도 내려주기
그리고 또 하나 내려줘야할게 있는데

얘네 버튼들 누를 때마다 결국엔 어떤게 일어나야할까❓
👉 얘네들을 누를 때마다 리덕스 스토어에 있는 state가 변경이 돼야함❗

누를 때마다 리덕스 스토어에 있는 state가 변경이 일어나야한다는 건
🐱‍🏍 Action을 Dispatch 해줘야한다는 것 ⚡

액션을 디스패치 하려면 dispatch가 필요하니까

useDispatch 이용해서 dispatch 만들기

만들어준 dispatch도 넣어주기

▫ src>utils>getReleventBtns.jsx

다시 여기로 와서 여기서 받아오면 됨
👉 type( string 값 ), note( 객체 ), dispatch( 함수 )

👀UI 부분이 페이지마다 달랐는데 그걸 return 안에서 어떻게 해줄까❓
🤓 if 문으로 처리해주면 됨 ✌

type이 archive일 땐 이렇게 해주고

type이 trash일 땐 이렇게 해주고

그 외는 이렇게 해줌

NotesIconBox 이미 만들어놓은걸 재사용♻
Archive 에선 archive랑 Delete 버튼 두개니까 NotesIconBox 두개로 해줌❗

Trash 에선 Restore랑 Delete 버튼 두개있음

main 에선 Edit / Archive / Delete 버튼 세개있음

지금은 UI 부분을 해준거임
얘네들 하나하나 클릭했을 때 올바른게 나오게 해줘야함😎

⬇현재는 이렇게 나오는 걸 볼 수 있음👀

🖱호버 했을 때 튤팁으로 설명 나오게 하려면❓

data-info="Unarchive" 해주면 됨❗

▫ src>index.css

[data-info] {
	position: relative;
}

[data-info]:hover::after {
	content: attr(data-info);
    position: absolute;
    z-index: 5;
    right: -15px;
    top: 60px;
    border: none;
    font-size: 12.5px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 1);
    color: rgb(0, 0, 0, 0.7);
    box-shadow: 0px 0px 3px 1px rgb(0, 0, 0, 0.2);
}

[data-info] 해서 position을 relative 해주고

호버 했을 때니까 :hover 하고 ::after는 요소의 끝부분을 나타내는 것
content➡after에 들어갈 컨텐츠, data-info면 넣어준 텍스트가 들어간다는 것

그리고 position을 absolute로 해줄 것🤪

⬇잘 되는 걸 볼 수 있음👀

👩‍🎨전역 스타일 styles.jsx 에서 NotesIconBox 스타일링 해주기

export const NotesIconBox = styled.span`
	padding: 0 6px;
	cursor: pointer;
	
	svg {
		font-size: 14px;
		color: rgba(0, 0, 0, 0.5);
		transition: 250ms color ease-in-out;
	}

	&:hover {
		svg {
			color: var(--primary-color);
		}
	}
`;

UI 부분은 다 만들었음
이제 아이콘들 클릭했을 때 기능들은 아직 안 들어가있음❗

🤨그전에 데이터가 어떤식으로 이동될까❓

notesList 현재는 mainNotes 이부분임 ( 데이터 현재 2개 )

위에서 Edit 버튼 누르면 당연히 이게 나오는데 노트를 수정하는 부분이니까

수정하려고 하는걸 editNote 에다가 데이터들을 넣어주고 있음
여기에 넣어줘야 데이터를 이용해서 화면에 보여줄 수 있기 때문✨

title도 content도 화면에 보여지게 되고 tags도 할당된 태그를 보여주게 됨
editNote가 원랜 null 값으로 되어있는데 어떤걸 수정하려고 하면
수정하려고 하는 객체 데이터를 오른쪽 부분에 넣어주면 됨🤓

Archive 아이콘 누르면 Archive로 이동시키면 됨
지금 Archive 페이지엔 노트가 하나도 없을 것🕳

이동시키려면 해당하는 노트 데이터 0번 인덱스를 archiveNotes로 이동시키면 됨🌫🐱‍🏍

🖱아이콘 클릭하면 해당하는 곳으로 데이터 옮겨지게 하기🐱‍👤

⚡결국엔, '액션'을 dispatch 해야함⚡
🛒왜냐 리덕스 스토어에 있는 state 데이터를 변경해야하기 때문😉

▫ src>utils>getRelevantBtns.jsx

getReleventBtns 함수에서 받아온 dispatch가 있어서
아이콘 클릭했을 때니까 onClick 하고 dispatch( ) 다 똑같기 땜에 저렇게 해주기

Edit 부분은 좀 다름

dispatch( 🤷‍♀️여기다 넣어줄 걸 어디서 생성해야할까❓ )
👉 notesList에 있는 데이터를 변경 시키는거니까 notesListSlice로 가서 생성해야함

▫ src>store>notesList>notesListSlice.js

🔖removeTags는 노트에서 태그만 바꾸는거

✖ 여기서 Coding 이라는 태그를 지우면

삭제한 해당 태그를 노트에서 지우는 로직이 removeTags인 것✔

그러면 이제 하나씩 아이콘 누를 때마다 만들어줘야하는 부분을
notesListSlice reducers 안에서 만들어줄거임🤗

setArchiveNotes : Archive 아이콘 눌렀을 때 Archive로 보내는 부분
mainNotes에 있던 걸 없애주고 archiveNotes 에다가 하나 추가해줘야하는 로직❗

state랑 { payload }를 가져옴
먼저 state.mainNotes 에선 어떻게 할거고, state.archiveNotes 에선 어떻게 할건지

✅ mainNotes 에선 옮긴애를 지워줘야함
state에 mainNotes 에서 지울땐 항상 filter 사용하기☺

( 여기에 하나의 note가 올텐데 note는 객체, 객체 안에서 필요한건 )
👉 note.id만 필요해서 { id } 🙆‍♀️

id 가져오고 지우려는 id를 payload로 전달을 해줄거임
이 id랑 같은 것만 필터링 시키고
나머지 애들은 지우면 안 되니까 !== payload id 해주면 됨🔥

✅ archiveNotes 이부분은 추가해줘야함

바로 push 한 담에 ...payload로 리스트 쫙 불러오고
핀은 Archive 에선 안 보여야하니까 isPinned: false로 해주기

✅ unArchiveNote는 Archive에 있던 걸 다시 main으로 넣는 부분

state.archiveNotes 에서 setArchiveNotes랑 똑같이
filter 이용해서 id === payload.id 같은 것만 삭제하고
mainNotes에 push 하기 ( 여기선 ...payload 해줄 필요❌ )

main 에서 Trash를 누를 수 있고 Archive 에서 Trash를 누를 수도 있음
🗑 두군데에서 누를 수 있는 것 🖱

✅ setTrashNotes는 Main나 Archive 에서
Delete 아이콘 클릭하면 Trash로 넣는 부분

여기 있는 데이터들을 다 바꿔주면 됨

우선 mainNotes는 Delete 아이콘 누르면 여기선 지워지는 거니까 filter 사용

Trash로 옮기려는 애가 Main에 있는지 Archive에 있는지 모름🥴❓
그래서 두 군데 모두 지워주는 것🙄❗

만약 핀 되어있는 노트를 Trash로 옮긴다면 이것도 마찬가지로 핀을 false로 해줘야함

...payload 다 가져와서 그중에 isPinned가 true인 애를 false로 수정해주기😏

Trash에 넣는 부분해줬으니까

이젠 Trash에 있는 걸 Main으로 다시 돌려보내는 로직을 짜자

이름을 restoreNote로 해주고 state, { payload } 하고
Trash에 있는걸 지워줘야하니까 state.trashNotes 하고 filter 메소드 사용하기

추가 돼야하는 부분은 Restore 할 땐 main으로 추가되는거니까
state.mainNotes 에다 push 해주기 😶

deleteNote는 그냥 삭제만 해주면 되니까 이렇게 해주면 됨 🆗

이제 다 만들었으니까 외부에서도 사용할 수 있게 export 내보내기🥏

▫ src>utils>getReleventBtns.jsx

🙋‍♀️ getReleventBtns 여기에서 사용해줘야함 🚀

Unarchive는 unArchiveNote 넣어주고
( payload 넣어줘야하는건 ) payload 안에 id가 들어있으니까
👉 payload는 객체이므로 노트 하나의 객체 데이터를 넣어주면 됨

Delete도 똑같이 note 객체 데이터 넣어주면 됨

Resotre 이거는 Trash에 있는걸 Main으로 옮기는거니까
얘도 똑같이 restoreNote 하고 note 객체 데이터 넣어주면 됨

Trash에 있는걸 아예 지워버리는 거니까
deleteNote 에서 지우고자 하는 노트의 객체 데이터를 넣어주면 됨

Main 에서 Archive로 이동하는거니까
setArchiveNotes 하고 note 객체 데이터 넣어주기

Delete은 Main 에서 Trash로 이동하는거니까
setTrashNotes 하고 note 객체 데이터 넣어주기

⬇ 실제로 되는지 확인해보자 👀메인페이지 노트에서 Archive 아이콘 버튼 클릭하기

Archive 에서 아직 안 보여주고 있기 때문에 이렇게 보이지만

실제로 리덕스에서 확인해보면 데이터가 잘 옮겨진 것을 확인할 수 있음✔

🖱Edit 버튼 눌렀을 때 editNote에 객체 데이터 넣어주고
노트 생성하는 모달창 나오게 하기🐱‍💻

🧐 여기서 Edit 버튼 눌렀을 때 해줘야하는게 뭘까 ❓

총 2가지를 해줘야함

현재 editNote에 null 값이 들어있는데 이 객체 데이터를 넣어줘야함

그리고 Edit 버튼 눌렀을 때 이게 나오게 해줘야함

Edit 버튼을 클릭했을 때니까 onClick 해주고 이름을 handleClick 으로 해줄거임

editNote 에서는 추가하고, viewCreateNoteModal은 true로 바꿔줘야하니까
당연히 dispatch 2개가 필요할 것😎

▫ src>store>notesList>notesListSlice.js

editNote에 노트 데이터 추가하는 것부터 해보자❗

이름을 setEditNote로 해주고 state, { payload } 하고
editNote 라고 되어있으니까 state.editNote에 객체 데이터 payload 에서 가져오기

setEditNote도 export로 내보내주기🥏

▫ src>utils>getRelevantBtns.jsx

setEditNote를 여기서 가져오면 되고 하나의 객체 데이터 note 넣어주면 됨

이젠 viewCreateNoteModal을 true로 만드는 걸 해보자❗

이건 modalSlice.js로 가면 toggleCreateNoteModal이 이미 만들어져 있음

toggleCreateNoteModal을 true( payload에 넣어주면 됨 )로 만들어주면 됨👌

⬇Edit 버튼을 누르면

잘 바뀐거를 볼 수 있음👀

📌눌렀을 때 isPinned가 토글되게 해주기

또 해줘야할건 isPinned를 true로 해줬는데
핀을 한 번 더 누르면 Pinned가 토글 되게 해줘야함🔌
👉 true 였으면 fales, false 였으면 true로 🙆‍♀️

notesList에 있는 state를 변경해줘야하니까 noteListSlice.js로 이동하기

▫ src>store>notesList>noteListSlice.js

이름을 setPinnedNotes로 해주고 state, { payload } 해주기
mainNotes에 있는 걸 바꿀거니까 state.mainNotes ⭕

핀을 눌렀는데 이걸 눌렀는지 저걸 눌렀는지 알 수 없음🥴❓
🗺 그래서 하나씩 map 이용해서 순회를 해야함 🎡

mainNotes.map 으로 하나씩 순회를 함
note➡순회할 때마다 하나의 객체 note로 오는 것

누른 얘를 찾아야함🔍 얘는 당연히 payload 안에 있을 것❗

이걸 핀을 눌렀으면 이 객체 데이터의 isPinned만 true면 false, false면 true로 해줘야함🔥

🔹 note.id === payload.id → 클릭한 메모( id )를 찾음🔍
🔹 { ...note, isPinned: !note.isPinned } → 기존 메모를 복사하고 isPinned 값을 반전

이렇게 하면 특정 id를 가진 메모의 isPinned 값이
true ↔ false로 바뀌어 고정/해제 기능이 구현됨 🚀

setPinnedNotes를 export로 내보내주기🥏

노트카드의 핀을 눌렀을 때니까 NoteCard 컴포넌트로 이동하기🌫🐱‍🏍

▫ src>components>NoteCard>NoteCard.jsx

BsFillPinFill 아이콘을 클릭했을 때니까
onClick 하고 dispatch( 방금 만든 setPinnedNotes 넣으면 됨 )

notesListSlice.js 에서 payload.id 이렇게 해뒀었음

객체 안에 들어간거니까 { id } 이렇게 해줘야함

📌isPinned면 red로 아니면 ""

⬇

잘 되는 걸 볼 수 있음👀

📖 노트 상세보기 만들기 🔍

노트를 클릭하면 해당 노트를 상세하게 볼 수 있는 모달창이 나옴

📖isRead가 true면 읽히고 있다는 거고 안 읽고 있으면 false인 것

main 에서도 coding 에서도 있을 때도 읽을 수 있고
archive 에서도 trash 에서도 읽을 수 있게 해줄거임✔

▫ src>store>notesList>notesListSlice.js

노트에 대한 데이터를 변경시켜줘야함

type은 뭐냐면 어디에 있는지❗
👉 Trash에 있는지 Main에 있는지 Archive에 있는지

type이 archive 에서 온 애는 if 안에서 처리할거고
type이 trash 에서 온 애는 else if 안에서 처리할거고
type이 main 에서 온 애는 else 안에서 처리할거임

archiveNotes, trashNotes, mainNotes 이 셋 중에 하나가 notes가 돼야함

state[notes] 배열에 있는 객체들 중에서
현재 보고 있는 그 객체에 isRead만 true로 해주면 되는 것🤓

이렇게 로직 짜면 됨

✍Edit 모달 컴포넌트 화면에 렌더링하기💻

만들고 있는 앱에서 보면 Edit 버튼 눌렀을 때
editNote에 노트의 데이터들이 들어가고 viewCreateNoteModal도 true로 됐음

😮근데 이제 화면에 안 보여주는건 당연히 노트 모달 컴포넌트를 렌더링 하게 해야함💡

▫ src>components>Modal>CreateNoteModal>CreateNoteModal.jsx

Edit 버튼 클릭했을 때 CreateNoteModal을 렌더링해줘야함

const { viewCreateModal } = useSelector(state => state.modal);

그럴려면 App.jsx로 와서 이렇게 해주면 됨

viewCreateNoteModal이 true일 때 CreateNoteModal 컴포넌트를 렌더링😎

⬇viewCreateNoteModal이 true니까 화면에 CreateNoteModal이 나오는 걸 볼 수 있음👀

▫ src>components>Modal>CraeteNoteModal>CreateNoteModal.jsx

이 모달 부분 전체가 CreateNoteModal 컴포넌트 영역이니까
⌨타이핑 치면 이 값들을 이 컴포넌트에서 기억하고 있어야함🧠

state로 입력한 값들 기억하게 해주기, noteTitle은 이부분임

value는 content 부분임

🔖addedTag는 태그 추가된 것들이 뭐가 있는지❗
기본 값은 여러 개의 태그가 들어있을테니까 배열[ ]이 돼야함😉

🌈노트의 배경 색상 이 값도 기억하고 있어야함
Blue를 선택했다면 #cce0ff 이 값을 기억하고 있어야한다는 것

string 값이었으니까 초기 값은 '' 이렇게 해주면 됨✔

그리고 우선순위 low인지 high인지 기억하고 있어야함

기본 값은 low 라고 해줄거임

이것만 하면

첨에 생성할 때만 하는거, 생성할 땐 값이 다 비어있음

노트에 있는 Edit 눌러서 나오는 건
값을 업데이트 하는 부분인데 여기선 이미 값이 들어있는 상태임

( 올바른 데이터가 들어있는 상태 ) 이건 어떻게 처리해줘야할까❓

✅ notesList 안에 editNote에 저곳에 들어가야하는 데이터가 있음
🙆‍♀️ 우선 이 데이터 부터 가져와야함 🔥

useSelector 이용해서 데이터 가져오기❗
👉 notesList 안에 있는 거니까 state.notesList 해주고
이 안에 editNote 데이터를 가져오는거니까 { editNote } 해주면 됨

editNote에 title이 있으면 editNote.title을 사용하고 없을 땐 '' 얘를 사용

근데 없을 땐 editNote가 null인데 그럼 null.title이 되는거임 ...😵
이러면 안 되는거니까 없을 땐➡editNote?

💡 ?. 옵셔널 체이닝 연산자 💡

→ editNote가 있으면 title을 가져오고, 없으면 빈 문자열( '' ) 반환🔁

editNote가 만약에 있으면 안에 있는 content가
기본 value 값이 되고 그렇지 않으면 그냥 빈 문자열( '' )이 될거임💨

이렇게 해주면 됨✌

이 Edit Tags 모달이랑 공유하는 부분이 있을거임⛓
모달들은 다 비슷한 부분이 있음

지금 하는 부분안 Edit 버튼을 누르면 나오는
이 CreateNoteModal도 비슷하게 해줘야하는 부분이 있음❗

Modal.styles.js 파일을 보면 FixedContainer 얘는 같이 공유를 하고 있는 녀석임🎏

FixedContainer 감싸주니까 오른쪽 부분처럼 나오는 걸 볼 수 있음👀

👩‍🎨CreateNoteModal UI 스타일링 해주기

▶ Box

const Box = styled.div`
	background-color: white;
	width: clamp(250px, 95%, 750px);
	color: black;
	border-radius: 10px;
	padding: 20px 18px 25px;
	
	// 저장하기 버튼
	.createNote__create-btn {
		display: flex;
		// 버튼 오른쪽 끝으로 밀어버리기
		justify-content: flex-end;	
	}
`;

▶ TopBox

DeleteBox는 이미 만들어놓았던 부분, FaTimes는 ✖아이콘임

이런식으로 화면에 보여짐

🔖 노트 생성하기 div 태그 : className='createNote__title'

🧩 DeleteBox : className='createNote__close-btn'

const TopBox = styled.div`
	// 노트 생성하기랑 ✖버튼 수직 정렬이 수평정렬 됨
	display: flex;
	// 노트 생성하기  ( 사이 간격 양쪽 끝으로 배치됨 )   ✖
	justify-content: space-between;
	// 수직으로 중앙정렬
	align-items: center;
	
	// 노트 생성하기
	.createNote__title {
		font-weight: 600;
		font-size: 1.3rem;
	}

	// ✖
	.createNote__close-btn {
		svg {
			font-size: 1.6rem;	
		}
	}
`;

▶ StyledInput

const StyledInput = styled.input`
	width: 100%; // 가로 전체 차지
	height: 40px;
	// 사용자가 텍스트를 선택하지 못하게 함
	user-select: none;
	// 요소 선택 시 테두리(outline) 제거
	outline: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	// 첫 줄 들여쓰기 15px 적용
	text-indent: 15px;
	margin: 20px 0 10px;
`;

▶ ButtonFill

이미 만들어놓은 거 이용하기👌

🔖 div 태그 : className='createNote__create-btn'

✅ 수정하는 부분은 버튼이 '저장하기'로 해줄거고

✅ 새로 노트 생성하는 애는 '➕생성하기'로 해줄거임

🤔 어떤 걸 기준으로 조건 처리해주면 될까 ❓

이걸 기준으로 조건 처리하면 됨( null 아니면 객체 )❗

<ButtonFill>
  {
    editNote ?
      (<span>저장하기</span>) :
      (
      	<><FaPlus /><span>생성하기</span></>
      )
  }
</ButtonFill>

editNote가 있으면 '저장하기' 버튼으로,
없을 땐 FaPlus 아이콘 '생성하기' 버튼 나오게 하기

저장하기 버튼이 잘 나오는 걸 볼 수 있음👀

▶ AddedTagsBox

[ ] 배열 안에 객체로 태그가 들어있을거임

🗺 배열에다가 하나씩 나열하려면 항상 map 메소드 사용 ❗
하나의 태그를 리턴할텐데 tags 안에 있는 '태그 이름'이랑 '아이디'가 필요⭕

const AddedTagsBox = styled.div`
	margin: 12px 0 30px;
	display: flex;
	
	// tag & icon
	div {
		display: flex;
		align-items: center;
		border: none;
		background-color: rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.7);
		padding: 4px 10px;
		border-radius: 10px;
		font-size: 13px;
		font-weight: 500;
		margin-right: 10px;
		
		// tag와 icon 각각의 스팬
		span {
			display: flex;
			align-item: center;
		}
		
		
		// tag
		.createNote__tag {
			margin-right: 3px;
		}

		// icon
		.createNote__tag-remove {
			cursor: pointer;
			padding: 2px;
		}
	}
`;

▶ OptionsBox

이제 해줘야하는건 이부분들

Add Tag 버튼 누르면 이게 뜨고

selecte랑 options

이것도 selecte랑 options

➕ Add Tag 🔖

AddedTagsBox 밑에 Button 위 이 사이에 OptionsBox 만들기 🆗

ButtonOutline 이미 만들어놓은거 집어넣기❗

Add Tag 클릭해서 나오는 모달 이미 만들어놨었음

const dispatch = useDispatch( ); 해서 바로 가져오기

<ButtonOutline
	onClick={() => 
  		dispatch(toggleTagsModal({type: 'add', view: true}))
    }
> Add Tag </ButtonOutline>

dispatch 하고 toggleTagsModal 한 담에
이거의 type( 'add' & 'edit'이 있었음 )은 현재 모달은 ADD Tags니까 'add'로,
view는 클릭했을 때니까 보여져야하기에 true로 해주면 됨 😎

🌈 배경색

select랑 option 같은 경우엔 🟥Red 선택했다고 하면
value의 값인 #ffcccc 이 값이 select value 값으로 전달돼야하고
🟩Green 선택했다고 하면 #ccffcc 이 값이 select로 전달돼야함✔

select의 가본 값은 noteColor임🙆‍♀️, '' 비어있으면 ⬜white

첨에 노트 생성할 땐 '' 비어있으니까 white인데
근데 이제 수정할 땐 기본 값이 달라질거임🤓

Red로 선택하면 이 값( #ffcccc )이 { noteColor } 여기로 들어가야한다고 했었음
noteColor➡state⭕, 🤷‍♀️ state를 바꿔줘야하는데 어떻게 할까 ❓

👉 onChange 써서 state를 바꿔주면 됨 ❗

🧐 htmlFor="color" & id="color" 같게 설정하는 이유❓❓

✅ label을 클릭해도 select가 활성화됨 ( 접근성 향상⤴ )

✅ 화면 리더기(보조 기술)에서 label과 select를 연결해 더 쉽게 인식 가능

💡 결론
👉 label의 htmlFor와 select의 id 동일하게 하면 사용자 경험과 접근성 좋아짐👍

⬇잘 완성 된 걸 볼 수 있음👀

🥇우선순위

기본적으로 low 라는 value를 기본 state 기본 value로 갖고 싶다면

priority 기본이 low니까

select의 value 값을 { priority } 넣어주고
다른 옵션 선택했을 때 state 값 바꿔주려면 onChange 사용하기🔥

select를 위한 label 이라고 같은 이름( priority )으로 지정해주기👥

⬇

// Add Tag / 배경색 / 우선순위 전체 감싸는 부분
const OptionsBox = styled.div`
	// 수직정렬 이었던게 수평정렬됨-> Add Tag / 배경색 / 우선순위
	display: flex;
	// 일정한 사이의 간격으로 벌어짐
	justify-content: space-between;
	align-items: center;
	margin: 15px 0 25px;
	
	// 배경색 & 우선순위 셀렉트 박스 부분
	select {
		font-size: 14px;
		padding: 5px;
		user-select: none;
		outline: none;
		border: none;
		box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
		border-radius: 3px;
	}

	// 배경색: & 우선순위: 이부분
	label {
		font-size: 14px;
	}
`;

🔒 Edit 모달창 ✖ 누르면 닫게하기

1️⃣ editNote에 있는 데이터를 다 없애주기
2️⃣ viewCreateNoteModal를 true에서 false로 바꿔주기

지금 하고 있는게 수정하고 있는 거에서 ✖버튼 누르면 모달창 없애주는거임

수정하는걸 첨에 눌렀을 때 해줬던게
viewCreateNoteModal을 true로 만들어주는거랑

editNote 에다가 객체 데이터 넣어주는 거 했었음

🙂 이거랑 반대로 해주면 됨 🙃

✖ 닫을 땐 editNote에 있는 데이터를 다 없애주는 거 하나랑
viewCraeteNoteModal를 false로 해줘야함 ( 총 2가지를 해줘야됨✔ )

✖ 클릭했을 때니까 onClick 해주고 handleCloseNoteModal 이라는 이름으로 해줄거임

handleCloseNoteModal 함수 만들고, 두가지 해줄거니까 2개의 dispatch( ) 만들기

2개중 어느걸 먼저하는건 안 중요 ( 순서 상관없음🙅‍♀️ )

editNote에 있는 데이터를 다 없애주는 부분부터 해주자❗
🌌editNote 값을 null로 바꿔주면 됨

noteListSlice.js로 가보면 이부분인데
state.editNote에 데이터를 payload로 할당해주는 거니까
payload 에다가 null을 넣어주면 됨..🐱‍💻

🔮 setEditNote 가져와서 setEditNote( null ) 이렇게 해주면 됨 🔮

이렇게 해주면 모달을 닫을 때 editNote의 데이터들이 사라질 것❗

⬇여기서 ✖누르면

editNote가 null로 됐고 모달창도 잘 닫아진 걸 볼 수 있음👀

...

📒 6탄 다음 벨로그

프린이

안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!

[React] Redux 라이브러리 사용해서 Notes 앱 만들기 5📒

📒 4탄 이전 벨로그

🙋‍♀️Note에 버튼 나오게 하기

메인에선 Edit/Archive/Delete 버튼이 있고

Archive 에선 Unarchive랑 Delete 버튼이 있고

Delete 에선 Restore랑 Delete 버튼이 있음

🖲버튼을 보여주는게 다 다름💥

이부분을 위해 조건처리를 해줘야하는데 getRelevantBtns.jsx 파일에서 해주자 ❣

▫ src>utils>getReleventBtns.jsx

이렇게 export로 내보내준 담에

▫ src>components>NoteCard>NoteCard.jsx

NoteCard.jsx 파일에서 FooterBox 안에 date 옆에 버튼 만들어야하기에 이렇게 작성해준것

✅type은 notes | archive | trash 있었음

type을 내려주고 그리고 note 객체 데이터도 내려주기그리고 또 하나 내려줘야할게 있는데

얘네 버튼들 누를 때마다 결국엔 어떤게 일어나야할까❓👉 얘네들을 누를 때마다 리덕스 스토어에 있는 state가 변경이 돼야함❗

누를 때마다 리덕스 스토어에 있는 state가 변경이 일어나야한다는 건🐱‍🏍 Action을 Dispatch 해줘야한다는 것 ⚡

액션을 디스패치 하려면 dispatch가 필요하니까

useDispatch 이용해서 dispatch 만들기

만들어준 dispatch도 넣어주기

▫ src>utils>getReleventBtns.jsx

다시 여기로 와서 여기서 받아오면 됨👉 type( string 값 ), note( 객체 ), dispatch( 함수 )

👀UI 부분이 페이지마다 달랐는데 그걸 return 안에서 어떻게 해줄까❓🤓 if 문으로 처리해주면 됨 ✌

type이 archive일 땐 이렇게 해주고

type이 trash일 땐 이렇게 해주고

그 외는 이렇게 해줌

NotesIconBox 이미 만들어놓은걸 재사용♻Archive 에선 archive랑 Delete 버튼 두개니까 NotesIconBox 두개로 해줌❗

Trash 에선 Restore랑 Delete 버튼 두개있음

main 에선 Edit / Archive / Delete 버튼 세개있음

지금은 UI 부분을 해준거임얘네들 하나하나 클릭했을 때 올바른게 나오게 해줘야함😎

⬇현재는 이렇게 나오는 걸 볼 수 있음👀

🖱호버 했을 때 튤팁으로 설명 나오게 하려면❓

data-info="Unarchive" 해주면 됨❗

▫ src>index.css

[data-info] 해서 position을 relative 해주고

호버 했을 때니까 :hover 하고 ::after는 요소의 끝부분을 나타내는 것content➡after에 들어갈 컨텐츠, data-info면 넣어준 텍스트가 들어간다는 것

그리고 position을 absolute로 해줄 것🤪

⬇잘 되는 걸 볼 수 있음👀

👩‍🎨전역 스타일 styles.jsx 에서 NotesIconBox 스타일링 해주기

UI 부분은 다 만들었음이제 아이콘들 클릭했을 때 기능들은 아직 안 들어가있음❗

🤨그전에 데이터가 어떤식으로 이동될까❓

notesList 현재는 mainNotes 이부분임 ( 데이터 현재 2개 )

위에서 Edit 버튼 누르면 당연히 이게 나오는데 노트를 수정하는 부분이니까

수정하려고 하는걸 editNote 에다가 데이터들을 넣어주고 있음여기에 넣어줘야 데이터를 이용해서 화면에 보여줄 수 있기 때문✨

title도 content도 화면에 보여지게 되고 tags도 할당된 태그를 보여주게 됨editNote가 원랜 null 값으로 되어있는데 어떤걸 수정하려고 하면수정하려고 하는 객체 데이터를 오른쪽 부분에 넣어주면 됨🤓

Archive 아이콘 누르면 Archive로 이동시키면 됨지금 Archive 페이지엔 노트가 하나도 없을 것🕳

이동시키려면 해당하는 노트 데이터 0번 인덱스를 archiveNotes로 이동시키면 됨🌫🐱‍🏍

🖱아이콘 클릭하면 해당하는 곳으로 데이터 옮겨지게 하기🐱‍👤

⚡결국엔, '액션'을 dispatch 해야함⚡🛒왜냐 리덕스 스토어에 있는 state 데이터를 변경해야하기 때문😉

▫ src>utils>getRelevantBtns.jsx

getReleventBtns 함수에서 받아온 dispatch가 있어서아이콘 클릭했을 때니까 onClick 하고 dispatch( ) 다 똑같기 땜에 저렇게 해주기

Edit 부분은 좀 다름

dispatch( 🤷‍♀️여기다 넣어줄 걸 어디서 생성해야할까❓ )👉 notesList에 있는 데이터를 변경 시키는거니까 notesListSlice로 가서 생성해야함

▫ src>store>notesList>notesListSlice.js

🔖removeTags는 노트에서 태그만 바꾸는거

✖ 여기서 Coding 이라는 태그를 지우면

삭제한 해당 태그를 노트에서 지우는 로직이 removeTags인 것✔

그러면 이제 하나씩 아이콘 누를 때마다 만들어줘야하는 부분을notesListSlice reducers 안에서 만들어줄거임🤗

setArchiveNotes : Archive 아이콘 눌렀을 때 Archive로 보내는 부분mainNotes에 있던 걸 없애주고 archiveNotes 에다가 하나 추가해줘야하는 로직❗

state랑 { payload }를 가져옴먼저 state.mainNotes 에선 어떻게 할거고, state.archiveNotes 에선 어떻게 할건지

✅ mainNotes 에선 옮긴애를 지워줘야함state에 mainNotes 에서 지울땐 항상 filter 사용하기☺

( 여기에 하나의 note가 올텐데 note는 객체, 객체 안에서 필요한건 )👉 note.id만 필요해서 { id } 🙆‍♀️

id 가져오고 지우려는 id를 payload로 전달을 해줄거임이 id랑 같은 것만 필터링 시키고나머지 애들은 지우면 안 되니까 !== payload id 해주면 됨🔥

✅ archiveNotes 이부분은 추가해줘야함

바로 push 한 담에 ...payload로 리스트 쫙 불러오고핀은 Archive 에선 안 보여야하니까 isPinned: false로 해주기

✅ unArchiveNote는 Archive에 있던 걸 다시 main으로 넣는 부분

state.archiveNotes 에서 setArchiveNotes랑 똑같이 filter 이용해서 id === payload.id 같은 것만 삭제하고mainNotes에 push 하기 ( 여기선 ...payload 해줄 필요❌ )

main 에서 Trash를 누를 수 있고 Archive 에서 Trash를 누를 수도 있음🗑 두군데에서 누를 수 있는 것 🖱

✅ setTrashNotes는 Main나 Archive 에서Delete 아이콘 클릭하면 Trash로 넣는 부분

여기 있는 데이터들을 다 바꿔주면 됨

우선 mainNotes는 Delete 아이콘 누르면 여기선 지워지는 거니까 filter 사용

Trash로 옮기려는 애가 Main에 있는지 Archive에 있는지 모름🥴❓그래서 두 군데 모두 지워주는 것🙄❗

만약 핀 되어있는 노트를 Trash로 옮긴다면 이것도 마찬가지로 핀을 false로 해줘야함

...payload 다 가져와서 그중에 isPinned가 true인 애를 false로 수정해주기😏

Trash에 넣는 부분해줬으니까

이젠 Trash에 있는 걸 Main으로 다시 돌려보내는 로직을 짜자

이름을 restoreNote로 해주고 state, { payload } 하고Trash에 있는걸 지워줘야하니까 state.trashNotes 하고 filter 메소드 사용하기

추가 돼야하는 부분은 Restore 할 땐 main으로 추가되는거니까state.mainNotes 에다 push 해주기 😶

deleteNote는 그냥 삭제만 해주면 되니까 이렇게 해주면 됨 🆗

이제 다 만들었으니까 외부에서도 사용할 수 있게 export 내보내기🥏

▫ src>utils>getReleventBtns.jsx

type을 내려주고 그리고 note 객체 데이터도 내려주기
그리고 또 하나 내려줘야할게 있는데

얘네 버튼들 누를 때마다 결국엔 어떤게 일어나야할까❓
👉 얘네들을 누를 때마다 리덕스 스토어에 있는 state가 변경이 돼야함❗

누를 때마다 리덕스 스토어에 있는 state가 변경이 일어나야한다는 건
🐱‍🏍 Action을 Dispatch 해줘야한다는 것 ⚡

다시 여기로 와서 여기서 받아오면 됨
👉 type( string 값 ), note( 객체 ), dispatch( 함수 )

👀UI 부분이 페이지마다 달랐는데 그걸 return 안에서 어떻게 해줄까❓
🤓 if 문으로 처리해주면 됨 ✌

NotesIconBox 이미 만들어놓은걸 재사용♻
Archive 에선 archive랑 Delete 버튼 두개니까 NotesIconBox 두개로 해줌❗

지금은 UI 부분을 해준거임
얘네들 하나하나 클릭했을 때 올바른게 나오게 해줘야함😎

호버 했을 때니까 :hover 하고 ::after는 요소의 끝부분을 나타내는 것
content➡after에 들어갈 컨텐츠, data-info면 넣어준 텍스트가 들어간다는 것

UI 부분은 다 만들었음
이제 아이콘들 클릭했을 때 기능들은 아직 안 들어가있음❗

수정하려고 하는걸 editNote 에다가 데이터들을 넣어주고 있음
여기에 넣어줘야 데이터를 이용해서 화면에 보여줄 수 있기 때문✨

title도 content도 화면에 보여지게 되고 tags도 할당된 태그를 보여주게 됨
editNote가 원랜 null 값으로 되어있는데 어떤걸 수정하려고 하면
수정하려고 하는 객체 데이터를 오른쪽 부분에 넣어주면 됨🤓

Archive 아이콘 누르면 Archive로 이동시키면 됨
지금 Archive 페이지엔 노트가 하나도 없을 것🕳

⚡결국엔, '액션'을 dispatch 해야함⚡
🛒왜냐 리덕스 스토어에 있는 state 데이터를 변경해야하기 때문😉

getReleventBtns 함수에서 받아온 dispatch가 있어서
아이콘 클릭했을 때니까 onClick 하고 dispatch( ) 다 똑같기 땜에 저렇게 해주기

dispatch( 🤷‍♀️여기다 넣어줄 걸 어디서 생성해야할까❓ )
👉 notesList에 있는 데이터를 변경 시키는거니까 notesListSlice로 가서 생성해야함

그러면 이제 하나씩 아이콘 누를 때마다 만들어줘야하는 부분을
notesListSlice reducers 안에서 만들어줄거임🤗

setArchiveNotes : Archive 아이콘 눌렀을 때 Archive로 보내는 부분
mainNotes에 있던 걸 없애주고 archiveNotes 에다가 하나 추가해줘야하는 로직❗

state랑 { payload }를 가져옴
먼저 state.mainNotes 에선 어떻게 할거고, state.archiveNotes 에선 어떻게 할건지

✅ mainNotes 에선 옮긴애를 지워줘야함
state에 mainNotes 에서 지울땐 항상 filter 사용하기☺

( 여기에 하나의 note가 올텐데 note는 객체, 객체 안에서 필요한건 )
👉 note.id만 필요해서 { id } 🙆‍♀️

id 가져오고 지우려는 id를 payload로 전달을 해줄거임
이 id랑 같은 것만 필터링 시키고
나머지 애들은 지우면 안 되니까 !== payload id 해주면 됨🔥

바로 push 한 담에 ...payload로 리스트 쫙 불러오고
핀은 Archive 에선 안 보여야하니까 isPinned: false로 해주기

state.archiveNotes 에서 setArchiveNotes랑 똑같이
filter 이용해서 id === payload.id 같은 것만 삭제하고
mainNotes에 push 하기 ( 여기선 ...payload 해줄 필요❌ )

main 에서 Trash를 누를 수 있고 Archive 에서 Trash를 누를 수도 있음
🗑 두군데에서 누를 수 있는 것 🖱

✅ setTrashNotes는 Main나 Archive 에서
Delete 아이콘 클릭하면 Trash로 넣는 부분

Trash로 옮기려는 애가 Main에 있는지 Archive에 있는지 모름🥴❓
그래서 두 군데 모두 지워주는 것🙄❗

이름을 restoreNote로 해주고 state, { payload } 하고
Trash에 있는걸 지워줘야하니까 state.trashNotes 하고 filter 메소드 사용하기

추가 돼야하는 부분은 Restore 할 땐 main으로 추가되는거니까
state.mainNotes 에다 push 해주기 😶

Unarchive는 unArchiveNote 넣어주고
( payload 넣어줘야하는건 ) payload 안에 id가 들어있으니까
👉 payload는 객체이므로 노트 하나의 객체 데이터를 넣어주면 됨

Resotre 이거는 Trash에 있는걸 Main으로 옮기는거니까
얘도 똑같이 restoreNote 하고 note 객체 데이터 넣어주면 됨

Trash에 있는걸 아예 지워버리는 거니까
deleteNote 에서 지우고자 하는 노트의 객체 데이터를 넣어주면 됨

Main 에서 Archive로 이동하는거니까
setArchiveNotes 하고 note 객체 데이터 넣어주기

Delete은 Main 에서 Trash로 이동하는거니까
setTrashNotes 하고 note 객체 데이터 넣어주기

🖱Edit 버튼 눌렀을 때 editNote에 객체 데이터 넣어주고
노트 생성하는 모달창 나오게 하기🐱‍💻

editNote 에서는 추가하고, viewCreateNoteModal은 true로 바꿔줘야하니까
당연히 dispatch 2개가 필요할 것😎

이름을 setEditNote로 해주고 state, { payload } 하고
editNote 라고 되어있으니까 state.editNote에 객체 데이터 payload 에서 가져오기

또 해줘야할건 isPinned를 true로 해줬는데
핀을 한 번 더 누르면 Pinned가 토글 되게 해줘야함🔌
👉 true 였으면 fales, false 였으면 true로 🙆‍♀️