🥞 오늘 한 일

• 뉴스피드 프로젝트
  • 마이페이지 마크업
• 리액트 숙련 강의
  • supabase 파트 복습
• 리액트 숙련 개인과제
  • styled-components 컴포넌트 아래쪽으로 위치 수정

뉴스피드 프로젝트에서 supabase를 사용해야하기 때문에 복습이 필요하다고 생각해 다시 강의를 들었다. 그 다음 피그마 디자인을 토대로 마이페이지 마크업을 했다. 팀장님이 기본 틀을 잘 만들어주셔서 문제없이 마크업할 수 있었다.

뉴스피드 프로젝트 - 마이페이지 마크업

// Mypage.jsx

function Mypage() {
	return (
		<>
			<Header />
			<Profile />
			<MyNewsfeedList />
		</>
	);
}

Mypage 에서는 헤더, 프로필, 그리고 내 게시물을 볼 수 있는 컴포넌트들로 구성했다.

// Profile.jsx

const Profile = () => {
	return (
		<StyledProfileBanner>
			<div className="container">
				<StyledMyPageTitle>마이페이지</StyledMyPageTitle>
				<StyledProfileBox>
					{/* 프로필 이미지. img 태그로 바꿀 가능성 염두 */}
					<StyledProfileImg></StyledProfileImg>
					{/* 아이디. 디자인 내 더미 텍스트 필요성 확인 필요 */}
					<div>
						<StyledProfileId>아이디</StyledProfileId>
						<StyledProfileContext>
							Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit aliquam sit nullam
							neque ultrices.Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit
							aliquam sit nullam neque ultrices.Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit
							phasellus mollis si
						</StyledProfileContext>
					</div>
				</StyledProfileBox>
			</div>
		</StyledProfileBanner>
	);
};

아직 진행 중인 부분. 본인의 프로필을 볼 수 있는 컴포넌트이다. 프로필 사진 수정 기능도 제작할 예정이다. 여기서 프로필 사진 수정 버튼을 추가하고, 더미 텍스트 부분은 회의를 통해 삭제가 될수도 있을 것 같다.

// MyNewsfeedList.jsx

const MyNewsfeedList = () => {
	return (
		<StyledMyNewsfeedList>
			<div className="container">
				<StyledTitleMyNewsfeedList>내 게시물</StyledTitleMyNewsfeedList>
			</div>
		</StyledMyNewsfeedList>
	);
};

내가 쓴 게시물을 볼 수 있는 컴포넌트. 아직 로그인 기능이 구현되지 않아, 타이틀만 제작하고 게시물 리스트는 넣지 않은 상태이다.

순서대로 차근차근 해나가고 있다고 생각한다. 내일도 화이팅!

🍪 배운 것 - 리액트 숙련 강의

• supabase : 개념 및 설정, 등록, 수정, 삭제

🍴 돌아보기

생활과 공부는 밸런스를 조절하기 참 어렵다. 그것 또한 어찌보면 공부라고 볼 수 있겠지. 너무 스트레스 받지 않고 계속해서 답을 찾아나가는 과정을 즐기고 싶다!

🍳 내일 할 일

• 뉴스피드 프로젝트
  • 게시물 페이지 마크업
  • 게시물 페이지 기능 제작