09.27 항해 15일차 TIL

3주차 개인 프로젝트 나만의 사전 만들기
"My Dictionary"

📌필수 구현 기능

✅ 게시글 목록 페이지

• 게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
• 게시글 내의 예시는 파란 글씨로 보여주기
• 게시글 목록을 리덕스에서 관리하기
• 게시글 목록을 파이어스토어에서 가져오기
  
  

✅ 게시글 작성 페이지

• 게시글 작성에 필요한 input 3개를 ref로 관리하기
• 작성한 게시글을 리덕스 내 게시글 목록에 추가하기
• 게시글 목록을 파이어스토어에 저장하기

📌 기능 구현

대부분의 기능은 강의와 숙제에서 나왔던 내용이라 생각이 되어 일단 기본 기능을 빠르게 만들고 스타일을 입히거나 기능 추가를 하자는 생각에 와이어프레임을 먼저 구상하였다.

대충 구상을 하고 보니 두세시간 정도면 끝날 것 같다는 생각이 들어 필수기능 위주로 기능을 추가 하였다.

• 게시글 목록을 리덕스에서 관리하기

단어, 설명, 예시를 한 묶음으로 생각해서 List를 만들면 되겠다 싶어 초기값을 넣어 주었다.

//리덕스 모듈 파일
const initialState = {
  card_list: [ 
    {word: 'XD', desc: '메롱 이라는 뜻', example: '님들 이거 좋은 건가요? XD'},
  ],
};



//카드리스트 페이지

//Store에 있는 state 값을 가져온다.
const card_list = useSelector((state) => state.cardlist.card_list)

<!-- index 값을 참조하여 Card 묶음을 보여준다. -->
return (
        <Wrap>
            {card_list.map((l, idx) => {
                // console.log(l, idx)
                return (
                    <Main key={idx}>
                        <Sub1>
                            <h3>단어</h3>
                            <p>{l.word}</p>
                        </Sub1>
                        <Sub2>
                            <h3>설명</h3>
                            <p>{l.desc}</p>
                        </Sub2>
                        <Sub3 >
                            <h3>예시</h3>
                            <p className='ex'>{l.example}</p>
                        </Sub3>
                    </Main>
                );
            })}
        </Wrap>
    );

• 게시글 작성에 필요한 input 3개를 ref로 관리하기

    const wordText = React.useRef(null);
    const descText = React.useRef(null);
    const exampleText = React.useRef(null);

	dispatch(createCard({ 
        word : wordText.current.value, 
        desc: descText.current.value, 
        example : exampleText.current.value 
        }))

    return (
        <Main>
            <Sub>
                <h3>단어</h3>
                <input type = 'text' ref={wordText}/>
            </Sub>
            <Sub>
                <h3>설명</h3>
                <input type = 'text' ref={descText}/>
            </Sub>
            <Sub3>
                <h3>예시</h3>
                <input type = 'text' ref={exampleText}/>
            </Sub3>
        </Main>
    );
};

각 input에 Ref를 주어서 current.value 값을 받아 왔고 액션을 추가 하며 게시글 추가 기능도 끝이 났다.

게시글 목록을 Firestore 에서 관리하기

• Middlewares

// 필수기능 : 게시글 목록을 파이어스토어에서 가져오기
//LOAD

export const loadCardFB = () => {
  return async function (dispatch) {
    const cardData = await getDocs(collection(db, 'mydictionary'));

    let card_list = [];

    cardData.forEach((doc) => {
      // console.log(doc.data())
      card_list.push({ id: doc.id, ...doc.data() })
    })

    dispatch(loadCard(card_list));

    // console.log('이건 DB', cardData);
  }
};

// 필수기능 : 게시글 목록을 파이어스토어에 저장하기
// CREATE

export const addBucketFB = (bucket) => {
    return async function (dispatch){
        dispatch(isLoaded(false))
        const docRef = await addDoc(collection(db,'bucket'), bucket);
        // const _bucket = await getDoc(docRef);
        const bucket_data = {id : docRef.id, ...bucket}
        // console.log((await getDoc(docRef)).data());
        console.log(bucket_data)

        dispatch(createBucket(bucket_data))

    }
}

여기까지 해서 모든 필수기능을 마무리 지었다.
생각보다 일찍 끝났기에 내일은 기능을 조금 더 다듬어 보려 한다.