팬레터 만들기(React 개인과제) - 2일차

규갓 God Gyu·2023년 11월 15일

프로젝트

목록 보기

17/81

기본 강의 한번 훑고 다시 재도전~~!!

☆☆☆진행 순서☆☆☆

프로젝트 셋업

홈 화면 UI: 배너 및 헤더 파트 UI 구현

styled component로 const StyledBtn으로 빼서 사용(따로 다른 파일로 빼서 사용할지는 고민)
홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현
- 일단 fakeData.json 파일 생성
- 미리 만들어져있는 값 복사 붙여넣기
- 내용을 보아하니 리뷰작성하는 내용같음(일단 Main.jsx에 넣기)
- id/nickname/createdAt/content 만 뽑아서 출력
- content 부분을 한줄로 표시하다 길어지면 ...으로 출력해야한다.

텍스트 자르기 => substring()

자르기 위해선 substring함수를 이용해야하는데, substring(@번째 인덱스,@번째 인덱스)까지를 잘라서 나타내는 함수이다.
지금같은 경우 0번째부터 적절한 길이감까지만 잘라서 보여줘야하기때문에 첫번째 요소엔 0을 넣고, 그다음 요소엔 한 40글자만 보이게 substriong(0,40)을 만든다.

뒤에 공백 제거하기 trim()

문자열의 양쪽 끝 공백(스페이스, 탭 등)을 제거해줌, 가운데 공백은 처리하지 않음

뒤에 ... 처리하기 => + "..."

이러면 실제로 뒷 내용을 다 자르고 ...처리이기때문에 뒷내용을 ui에서는 확인할 순 없게된다.

const removeText = (text, maxLength) => {
	if (text,length <= maxLength) {
    	return text;
    } else {
    	return text.substring(0, maxLength).trim() + "...";
        }
        };
        
<div>{removeText(item.content, 40)}</div>

변수 removeText에 인자 2개를 넣고, if문으로 총길이 40이 안넘으면 그대로 text를 출력시키고 그게 아니라면 text의 길이를 40까지만 출력하고 뒤에는 ...으로 표시하게 만들면 과제가 원하는 표현을 할 수 있다.

팬레터 입력창(AddForm) 작성하여 팬레터 등록 기능 구현

닉네임, 내용, 실제 등록하여 mapping할 배열 변수를 만든다

const [nickname, setNickname] = useState('');
const [content, setContent] = useState('');
const [letters, setLetters] = useState([]);

return쪽에 틀을 짜놓는다

return (
<>
<form onSubmit={(e)=>e.preventDefault()}>
	닉네임 : 
    <input 
    	type='text'
        value={nickname}
        onChange={(e)=>{
        	if (e.target.value.length <=20){
            	setNickname(e.target.value);
            }}        
		placeholder='최대 20글자까지 작성할 수 있습니다.'
	/>
    내용 :
    <textarea
    	value={content}
        onChange={(e) => {
        	if (e.target.value.length <=100) {
            	setContent(e.target.value);
            }
        }}
	누구에게 보내실 건가요?
    //아직 select와 등록 연결은 고민중
    <select id='memberSelect'> 
    	<option value={'이찬혁'}>이찬혁</option>
        <option>이수현</option>
	</select>
    <button onClick={() =>{
    	if (!nickname.trim() || !content.trim()) {
        	alert('닉네임과 내용 모두 입력해주세요');
		} else {
        	const newLetter = {
            	profileImage : '',
                nickname,
                createdAt : new Date().toLocaleString(),
                content,
			};
            setLetters([...letters, newLetter]);
            setNickname('');
            setContent('');
		}
	}>팬레터 등록</button>
</form>
<ul>
	{letters.map((letter, index) => {
    	return (
        	<li key={index}>
            	<img src = '!@^#$&&%$&$' alt='' />
			{letter.nickname}
            {letter.createdAt}
            {removeText(letter.content, 40)}
            </li>
        );
	})}
</ul>
</>
)