24.01.25 이미지 업로드 대참사 (수파베이스)

bestDrink.png

 

현재 로그인한 유저정보는 useSelector를 통해 가져오고

해당유저의 uid를 fillter로 사용해 해당 유저가 만든 게시글만 불러오고 있다

import styled from 'styled-components';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { supabase } from 'types/supabase';
import { RootState } from 'redux/config/configStore';

const MyCommunity = () => {
  const [posts, setPosts] = useState<any[]>([]);
  const user = useSelector((state: RootState) => state.userSlice.userInfo);
  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const { data, error } = await supabase.from('posts').select().eq('user_id', user?.id);

        if (error) {
          console.error('Error fetching posts:', error.message);
        } else {
          if (data && data.length > 0) {
            setPosts(data);
            console.log(data);
          } else {
            console.warn('No posts found.');
          }
        }
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };
    if (user?.id) {
      fetchPosts();
    }
  }, [user?.id]);
  console.log(posts);
  console.log(user?.id);

  return (
    <StUserInfoContainer>
      <StContentBox>
        <h2>내가 쓴 글</h2>
        {posts.map((post, index) => (
          <div key={index}>
            <h3>카테고리: {post.category}</h3>
            <h4>제목: {post.title}</h4>
            {post.image && post.image.length > 0 && (
              <img src={JSON.parse(post.image)[0]} alt="Post" /> // 이미지 URL이 있다면 이미지를 출력합니다.
            )}
            <p>내용: {post.content}</p>
            <p>게임: {post.game}</p>
          </div>
        ))}
      </StContentBox>
    </StUserInfoContainer>
  );
};

export default MyCommunity;

const StUserInfoContainer = styled.div`
  display: flex;
  flex-direction: column;
  width: 1100px;
  height: 1000px;
  margin-left: 20px;
`;

const StContentBox = styled.div`
  position: relative;
  width: 1100px;
  height: 800px;
  border-radius: 10px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  background-color: ${(props) => props.theme.color.gray};
  margin-bottom: 30px;
  & h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    user-select: none;
  }
  & label {
    font-size: 14px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 10px;
    user-select: none;
  }
  & input {
    position: relative;
    width: 100%;
    padding: 18px;
    border-radius: 10px;
    height: 48px;
    background: ${(props) => props.theme.color.inputcolor};
    color: ${(props) => props.theme.color.white};
    border: none;
    &:focus {
      outline: none;
    }
  }
  & textarea {
    width: 100%;
    height: 144px;
    border-radius: 10px;
    background: ${(props) => props.theme.color.inputcolor};
    color: ${(props) => props.theme.color.white};
    border: none;
    padding: 18px;
    resize: none;
    line-height: 1.5;
  }
  & p {
    color: #999;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  & select {
    width: 355px;
    padding: 18px;
    border-radius: 10px;
    height: 53px;
    background: ${(props) => props.theme.color.inputcolor};
    color: ${(props) => props.theme.color.white};
    border: none;
  }
`;

 

이제 처참한 css를 꾸며줄 차례 다만들면 css파일 정리도 해야겠다

---

 

하지만 튜터님 피드백 받으러갔다가 실시간 비상

지금 유저 INFO테이블에 DATA:image 형식으로 값이 들어가고 있는데 이게 생각보다 큽니다.... 용량이

지금 저거 통째로 복사하면

5000자 넘어서 여긴 못쓰구요

 

메모장에 붙여 넣기 해보니

이게 뭐람

처음에 3만 자인 줄 알았는데37만 자..............

앞으로 data:url 형식으로 데이터 업로드 금지

base 64 사용 금지 개발자가 하면 안 되는 행동 중하나

스토리지 사용 하도록 하자

라고 피드백 들어서 서둘러 스토리지 연결하러 가야겠습니다 튜터님도 처음 본 경우라 당황하셨다네요

이제는 작동만 되면 ok가 아니라 실제 배포 후 운영단계까지 당연히 생각해야 하는 개발자가 되도록

해야겠습니다