[Style] 친구 모달 및 모달 내 컴포넌트 구현

[seueooo]

🔥 Related Issues

• close [ Style ] 친구 컴포넌트 구현 #214

✅ 작업 리스트

• 친구 모달 내 컴포넌트 구현
• input창 유효성 검사

🔧 작업 내용

1. FriendsModalContents

친구 모달 최상위 컴포넌트로,

1. 친구목록에 아무런 데이터가 없을 때
2. 친구목록 탭 (기본값)
3. 친구요청 탭 (친구요청 탭 클릭시)

위의 세가지 경우가 삼항연산자로 조건부 렌더링됩니다.

2. TabSelect

• 탭 선택에 따라 버튼 활성, 비활성하는 로직

친구 목록 탭 내 컴포넌트

1. FriendInfo

• 친구목록 데이터를 prop으로 받아서 친구 정보의 한 row를 mapping하는 것까지 포함하는 컴포넌트 (현재는 mock 데이터 사용)
• 몰입한 시간은 formatSecondsForFriends함수를 새로 생성하여 변환시킴formatSecondsForFriendsList(friend?.time)

2. ButtonAddFriend

• 친구목록에 아무런 데이터가 없을 때 나타나는 화면의 친구 추가하기 버튼, 기존 공통 컴포넌트 활용 안하고 새로 생성함

친구 요청 탭 내 컴포넌트

1. InputSendRequest

• 컴포넌트 내에 ButtonSendRequest(친구 요청 보내기) 버튼 생성
• 불필요한 리렌더링을 줄이기 위해 useRef로 입력값에 접근
• alert 상태를 생성하여 에러 발생/요청 성공 시의 상태를 하나의 객체로 관리
• emailRegex.ts 파일 생성해서 이메일 유효성 검사 진행 (이메일 이외의 유효성 검사들은 추후 api 논의 후 진행할 수 있을 것 같아..일단 이메일 유효성 검사만 구현했습니다)
• 에러 발생, 요청 성공시 ui 조건부 렌더링
• InputClearButton 생성, input창에 값 입력할 시(inputRef.current가 true) 한번에 input창 초기화해줄 수 있는 버튼 조건부 렌더링

const InputSendRequest = () => {
	const inputRef = useRef<HTMLInputElement | null>(null);
	const [showClearBtn, setShowClearBtn] = useState(false);
	const [alert, setAlert] = useState({ error: '', success: '' });

	const handleInputChange = () => {
		if (inputRef.current) {
			setShowClearBtn(inputRef.current.value.length > 0);
			setAlert((prev) => ({ ...prev, error: '' }));
		}
	};

	const handleClearBtn = () => {
		if (inputRef.current) {
			inputRef.current.value = '';
			setShowClearBtn(false);
			setAlert({ error: '', success: '' });
		}
	};

	const handleSubmit = (e: React.FormEvent) => {
		e.preventDefault();
		const email = inputRef.current ? inputRef.current.value : '';
		if (!emailRegex.test(email)) {
			setAlert((prev) => ({ ...prev, error: '알맞은 형식의 이메일을 입력해주세요.' }));
			return;
		} else {
			setAlert((prev) => ({ ...prev, success: '친구 요청에 성공했어요.' }));
		}
	};

	const errorStyle = 'border-error-01 border-[1px]';
	const successStyle = 'border-mint-01 border-[1px]';

2. FriendsListRequested

• 친구목록 데이터를 prop으로 받아서 받은요청/보낸요청 친구 목록의 한 row를 mapping하는 것까지 포함하는 컴포넌트 (현재는 mock 데이터 사용)
• row 끝에 버튼은 children으로 받도록 함

3. ButtonRequestAction

• positive, negative로 variant 생성
• 친구 모달뷰 내 공통 컴포넌트 -> 수락/거절, 요청 취소 버튼에 사용

🤔 궁금한 점

친구 요청 탭에서

1. 받은 요청은 없는데 보낸 요청만 있을 때
2. 받은 요청은 있는데 보낸 요청은 없을 때
3. 두 요청 다 없을 때

위 경우의 gui가 없어서 담당 디자인 파트에 요청해놓은 상태입니다..!

• 컴포넌트 분리 및 네이밍 관련해서 제안 받습니다~!
• 버튼 컴포넌트가 Friend 모달 안에서 총 3개인데, hover, active, press 등의 스타일이 같고 disabled의 여부나 padding값만 다른 것들이 있어서 padding값을 prop으로 받게 하면 하나의 버튼을 범용적으로 사용가능할 것 같기도 한데,, 일단 버튼은 모달 내에서 가능한 것에 한해서만 재활용하도록 구현했습니다.

📸 스크린샷 / GIF / Link

친구 목록 empty일때

친구 목록 탭

2024-11-04.3.28.41.mov

친구 요청 탭

2024-11-04.3.30.23.mov

친구 요청 보내기 input 유효성 검사

2024-11-04.3.33.46.mov

영상에서는 input창의 border색이 적용 안되는 것처럼 보이는데, border 잘 적용된 거 확인했습니다..! 화면 캡처하거나 로컬에서 직접 돌려보면 적용한대로 잘 보이는데 화면녹화 영상에서만 하면 저렇게 보이네요.. 실제 스타일이 적용되지 않는 문제가 아니라 화면 녹화 비디오의 호환성 문제여서 신경 안쓰셔도 될 것 같습니다!

밑에는 실제로 보이는 화면