(21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현(작성중...)

1_ 페이지의 컴포넌트 구조 설계

- Heawder <= '뒤로가기' 버튼 . '새 일기쓰기' title

- Edior 컴포넌트로 '수정'페이지에도 사용되도록 한다.

- Editor 내부의 오늘의 감정 선택 버튼들 하나하나를 EmotionItem 컴포넌트로 한다.

2_ 페이지의 컴포넌트 구조 설계

- Heawder <= '뒤로가기' 버튼 . '새 일기쓰기' title

- Edior 컴포넌트로 '수정'페이지에도 사용되도록 한다.

- Editor 내부의 오늘의 감정 선택 버튼들 하나하나를 EmotionItem 컴포넌트로 한다.

3_ Editor 컴포넌트에는 4가지 Section으로 나뉘므로, 4개의 <section> 태그로 제작하는 전략 사용

4_ EmotionItem 컴포넌트 내의 사진 출력 => get-Emotion-images.js import하여, 중복된 함수 호출 코드를 축약

▶순서1_ EmotionItem 컴포넌트 작성

import {getEmotion}

function EmotionItem({emotionState,emotionName}{
/*
    - emotionState : src 반환용 매개인자로 사용
    - emotionName : name 값에 따라 출력 텍스트용
*/

return (<>
    <img src={getEmotionImgSrc(emotionState)} />
</>)

}

▶순서2_ Editor 컴포넌트 밖에다가, emotionID , emotionName 의 배열 초기화

const emotionList = \[  
{  
emotionId: 1,  
emotionName: "완전 좋음",  
},  
{  
emotionId: 2,  
emotionName: "좋음",  
},  
{  
emotionId: 3,  
emotionName: "그럭 저럭",  
},  
{  
emotionId: 4,  
emotionName: "나쁨",  
},  
{  
emotionId: 5,  
emotionName: "완전 나쁨",  
},  
\];

▶순서3_ emotionList의 map()와 spread 연산자 이용하여, EmotionItem 컴포넌트를 렌더링 하는 쪽으로 코드 작성 =

function Editor(){  
return (

emotionList.map((emotion)=>{<EmotionItem key={emotion.id} {...emotion} />})  
</>)  
}

★★5_ 감정 선택 시, 선택 focus 효과창 내기 : //idea 암기하자

▶순서1 : default 선택된 감정ID를 New 컴포넌트에 변수 초기화

▶순서2 : EmotionItem 컴포넌트의 props 전달을 이용해, 선택된 id와 EmotionItem의 id값과 일치하는 지 확인하는 boolean형 props도 만든다.

function Editor(){

    const selectedEmotionId = 1; // 처음 렌더링 될 시, 첫번째 emotion이 선택됐다고 deafault 하기


    return (<>
        emotionList.map((emotion)=>
        <EmotionItem 
            key = {emotionId}
            {...emotion}
            isSelected ={selectedEmotionId===emotion.id} //boolean형 props
        />)

    </>)



}

▶순서3 : boolean 가 true라면, 선택됐다는 css적용 classList 적용하기

- EmotionItem.jsx

function EmotionItem({emotionId, emotionName, isSelected}){

    return (<div className={`Emotionitem ${isSelected `EmotionItem_on_${emotionId}`? :""}`}></div>)
    //삼항연산자를 이용하여, selected 될시, css 적용하는 방법 하기
}

- EmotionItem.css

.EmotionItem_on_1{
    color : white;
    background-color : emotion에 따른 배경색

}

6_ textArea 태그 css

textarea{
    padding : 20px;
    width : 100%;
    min-height : 200px
    resize : vertical; //textarea를 세로로만 늘릴 수 있고, 가로방향으로는 늘리지 못하게 막기
    box-siziing : border-box; //textarea가 화면 밖으로 나가지 않도록 하는 css
}

7_ 전체 페이지를 브라우저에 감싸기 => index.css , body : flex