[NewsFeed-Day 3] supabase 데이터 동기화

2025.02.14 (금) Works

 

1. DB 데이터 동기화 & Home 게시글 불러오기 (props 전달)

2. 게시글 추가 버튼

3. Layout 수정 및 페이지 연결(Link)

 

 

DB 데이터 동기화

 

 

 

 

📍작업 내용 1

1. HomeContext 작성하여 App 최상위에 적용
   • supabase에서 posts 테이블의 값을 가져옴
   • posts 배열을 state로 관리함
   • value로 posts 배열 내려줌
2. HomePostCard 컴포넌트 분리
   • users, comments 테이블의 값을 가져옴
   • users, comments 배열을 state로 관리함
   • card 상단 user profile 값을 출력함 (setUserProfile 함수)
   • card 하단 comments 값을 출력함 (setComment 함수)
3. posts, users, comments 테이블에 접근하여 데이터 출력
4. 로그인, 상세페이지 이동 구현
   
   • Link 태그 사용
5. 아이콘 이미지 출력
   • 이미지파일 import, src에 변수 넣어주기

 

 

 

2. HomePostCard 컴포넌트 분리

// Home.jsx (로직 단순화)

{posts.map(post => {
        return (
            <HomePostCard post={post} />
        );
      })}

📌 Context로 받은 값 외에도 map을 통해 넘겨줘야 하는 값은 직접 props로 전달하기 !

 

 // HomePostCard.jsx
 
 // card 내 user 정보 나타내기
  const setUserProfile = post => {
    const a = users.find(user => post.uid === user.uid);
    if (!a) return null;  👉🏻 user의 정보가 없을 시 null을 return

    return (
      <StCardTextWrap key={a.uid}>
        <StNickName>{a.nickname}</StNickName>
        <StMbti>{a.mbti}</StMbti>
      </StCardTextWrap>
    );
  };

  // comments 나타내기
  const setComment = post => {
    const b = comments.find(comment => post.post_id === comment.post_id);
    if (!b) return null;
    return <div key={b.post_id}>{b.content}</div>;
  };

  return (
    <>
      <StHomeCard>
        <StCardTop>
          <StProfileImg />
          <div>{setUserProfile(post)}</div> ⭐️
        </StCardTop>
        <StPostImg />
        <StIcons>
          <img src={CommentIcon} alt="comment img" />
          <img src={HeartIcon} alt="heart img" />
        </StIcons>
        <StComents>{setComment(post)}</StComents> ⭐️
      </StHomeCard>
    </>
  );
};

⭐️

함수 자체는 jsx 파일에서 출력 불가 => div로 감싸기
props로 받은 post의 값을 인자로 줌

 

 

 

5. 아이콘 이미지 출력

assets 폴더에 모아 둔 아이콘 png 파일들

 

이전에는 img 태그에 src="{이미지경로}" 로 입력했지만, 새로운 방식을 알아냈다.

바로 import로 가져오기!

 

로직 상단에 변수를 선언하여 경로를 가져오고

하단 img 태그 내 src에 { 변수명 } 으로 값을 가져온다.

 

// HomePostCard.jsx

import CommentIcon from "../assets/icon_comment.png";
import HeartIcon from "../assets/icon_heart_fill.png";
...
 <StIcons>
      <img src={CommentIcon} alt="comment img" />
      <img src={HeartIcon} alt="heart img" />
 </StIcons>

 

 

 

 

게시글 추가 버튼

 

여러 페이지에서 쓰이는 로직은 공통 컴포넌트로 만들기로 했다.

그 중 나는 '로그인 시 보이는 게시글 추가 버튼(홈, 마이페이지)' 을 만들게 되었다.

 

 

스크롤 시에도 같은 자리에 고정되게 하기 위해 'position : fixed;' 를 사용했다.

// ADDPostButton.jsx

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import AddBtn from "../assets/icon_add_white.png";

const AddPostButton = () => {
  return (
    <>
      <Link
        to={"/posting"}
        style={{ textDecoration: "none", color: "inherit" }}
      >
        <StAddBtn>
          <img src={AddBtn} />
        </StAddBtn>
      </Link>
    </>
  );
};

export default AddPostButton;

const StAddBtn = styled.div`
  position: fixed;
  top: 80%;
  right: 5%;
  font-weight: 200;
  font-size: 250%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  color: white;
  background-color: #005eff;
  border-radius: 70%;
`;

 

 

 

 

Layout 수정 및 페이지 연결

 

다른 팀원분은 공통 컴포넌트로 헤더를 만드셔서 내가 임시로 만든 헤더를 수정했다.

• 로그인 조건부 버튼(로그아웃: 로그인/회원가입,  로그인: 로그아웃/마이페이지)
• 버튼 클릭 시 페이지 이동
• 카드 클릭 시 페이지 이동 -> 추후 모달창 띄우기로 변동 예정

 

아직 수정할 부분이 많지만.. 중간 과정 영상을 기록해본다.