React 숙련주차 팀 프로젝트 2차시

sidebar

 

앞서 superbase의 데이터를 가져오기 전에 내가 알아야 한는 것 2가지가 있었다. 바로 useEffect과 superbase인데, 큼,,,,

안타깝게도 2차시에는 공부한 것이 별로 남아있지 않다,,,,

코드

import React from 'react';
import styled from 'styled-components';
import { useNavigate, Link } from 'react-router-dom';
import logo from '../img/logo.png';
import '../css/main.css';

const SIDE_CONTAINER = styled.div`
  position: fixed;
  height: 100%;
  background-color: #fea100;
  width: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 300;
  overflow: hidden;
  float: left;
`;

const sideBar = () => {
  const navigate = useNavigate();
  return (
    <SIDE_CONTAINER>
      <div>
        <ul className="sideDiv">
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg" src={logo} />
          </li>
          <li className="sideLine"></li>
        </ul>
        <ul className="sideDiv">
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>전국</p>
          </li>

          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>서울</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>경기도</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>경상도</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>전라도</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>충청도</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>부산</p>
          </li>
          <li
            className="sideLi"
            onClick={() => {
              navigate('/');
            }}
          >
            <img className="logoImg2" src={logo} />
            <p>제주도</p>
          </li>
        </ul>
      </div>
    </SIDE_CONTAINER>
  );
};

export default sideBar;

 

간단하게 정리하면 ul, li로 사이드바의 항목을 구성하고 이전에 포켓몬도감을 하면서 알아낸 navigate로 페이지 이동이 가능하게 구현했다. style로 사이드바 박스 css를 진행해주었다.

---

MyPage

그 다음으로 진행한 건 마이페이지 틀이었다.

코드

import { React, useEffect, useState } from 'react';
import styled from 'styled-components';
import testImg from '../img/test.png';
import supabase from '../supaBasecClient';

const MYPAGE_CONTAINER = styled.div`
  margin: 30px 30px 30px 130px;
`;

const LeftMypage = styled.div`
  float: left;
  margin: 110px;
  padding-right: 80px;
  border-right: 2px solid #000;
`;

const RightMypage = styled.div`
  float: left;
  margin: 110px;
`;

const PostBox = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, auto));
  gap: 20px;
  border: 2px solid #000;
  float: right;
`;

const myPage = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      // 외부 통신(supabase)
      // const response = await supabase.from('posts').select('*');
      // setPosts(response.data);
      const { data, error } = await supabase.from('Post').select('*');
      if (error) {
        console.log(error);
      }
      else {
        console.log(data);
        setUsers(data);
      }
    };

    fetchPosts();
  }, []);

  return (
    <MYPAGE_CONTAINER>
      <LeftMypage>
        {/* <img className="myPageImg" src={testImg} alt={a} />
        <ul>
          <li>
            <p>닉네임</p>
          </li>
          <li>
            <p>이메일</p>
          </li>
          <li>
            <p>관심동네</p>
          </li>
        </ul> */}
        {users.map(user => {
          return (
            <div
              key={user.id}
              style={{
                border: '1px solid black',
              }}
            >
              <h5>아이디 : {user.PostCity}</h5>
              <h5>이름 : {user.name}</h5>
              <h5>나이 : {user.age}</h5>
              <h5>주소 : {user.address}</h5>
            </div>
          );
        })}
      </LeftMypage>
      <RightMypage>
        <PostBox>
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
          <img src={/*url들어갈자리*/ testImg} /*alt={a}*/ />
        </PostBox>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
        <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
      </RightMypage>
    </MYPAGE_CONTAINER>
    //닉네임, 이메일?, 관심 동네, 내 댓글/게시글
  );
};

export default myPage;

이건 supabse까지 연결한 것이다.

 

데이터가 충분히 들어가있지 않아서 할 수 있는 게 많이 없었다. 잘 했는지도 의문이다...