React 웹페이지 복제과제 B-3(with chatGPT)

이미 취업을 해버려서 이걸 할 필요는 없어졌다

그래서 의욕이 똑 떨어진 와중에 chatGPT를 써보기로 결정 한번 물어나 보자

글을 작성전에 grid의 프로필 사진이 크기 조절이 안되서 짜증나있는 상태였는데

짜식이 다 해본것들을 알려주고 있길래

이런식으로 알려주더라 물론 되지도 않고 갑자기 짜증나고 귀찮아서

"해줘" 해버렸다 별생각 없이 근데 해준다네?

바로 고

import './home.css'
import Nav from './Nav';
import NavBottom from './NavBottom'
import KakaoImg from './kakaoImg.png'
const Home = () => {

    
    let Profile = "KakaoTalk";
    let ProfileImg = <img src={KakaoImg} alt='kakao'/>;
    let Content = "Please check My Kakao Account Info";
    
    return (
      <div>
        <Nav/>
        <div className='grid-container'>
        <div className='item1'>{ProfileImg}</div>
        <div>{Profile}</div>
        <div>{Content}</div>
      </div>
        <NavBottom/>
        
      </div>
    );
  };
  
  export default Home;

이게 내 react.js코드고 
.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    height: auto;
  }
  .item1 {
    width: 3px;
    height: 3px;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  이게 내 home.css 코드야
난 css로 ProfileImg의 크기를 조절하고 싶어

이렇게 통으로 붙여넣고 마지막에 질문했다

안되자나.........

다시 " 해줘 "

import './home.css'
import Nav from './Nav';
import NavBottom from './NavBottom'
import KakaoImg from './kakaoImg.png'
const Home = () => {

    
    let Profile = "KakaoTalk";
    let ProfileImg = <img src={KakaoImg} alt='kakao' className='profile-img' />;
    let Content = "Please check My Kakao Account Info";
    
    return (
      <div>
        <Nav/>
        <div className='grid-container'>
        <div className='item1'>{ProfileImg}</div>
        <div className='item2'>{Profile}</div>
        <div className='item3'>{Content}</div>
      </div>
        <NavBottom/>
        
      </div>
    );
  };
  
  export default Home;

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 100%;
  }
  .item1 {
    width: 100%;
    height: 100%;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .item2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .item3 {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .profile-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

In this example, .item1 sets the size of the first row and first column of the grid to take up 100% of the grid's width and height. The .profile-img class sets the size of the img element to 100% of its parent element's width and height, and the object-fit property is set to contain so that the aspect ratio of the image is preserved while filling its container.

 

이렇게 답변이 왔고 적용 결과.......

 대충된다?? 더 디테일하게 질문해보자

 

세상에 문제가 해결되어 버렸다. 질문하지도 않은 문제 그러니까 

뭐 마진이나 폰트 컬러등은 내가조금 수정해줘야 했지만 큰 틀은 전부 다 해줬다 

 

이녀석의 놀라운점은 이전에 했던 대화내용도 기억하고 있다는 점이엇다.

이렇게만 질문해도 이전 답변해준 코드를 기억하고 수정해준다

가끔 영어로 답하는것이 짜증나 심술좀 부렸더니 잘알아 먹는다

친절한 노예같지만 과연 내가 노예인가 AI가 노예인가...

결과물 알람이 빠지긴했는데 이미 제출할 필요가 없는 과제라서 여기까지 하고 AI가지고 다른걸로 놀 생각이다

마무리가 좀 좋지 않아 보이는데 AI가 지금 너무 재밌다 

 

다음은 코드 전문과 git

 

import './home.css'
import Nav from './Nav';
import NavBottom from './NavBottom'
import KakaoImg from './kakaoImg.png'

const Home = () => {
  let Profile = "KakaoTalk";
  let ProfileImg = <img src={KakaoImg} alt='kakao' className='item1-img' />;
  let Content = "Please check My Kakao Account Info";
  let Notification = <i className="fas fa-bell"></i>;
  let Time = "12:30";

  return (
    <div>
      <Nav />
      <div className="grid-container">
        <div className="item1">{ProfileImg}</div>
        <div className="item2">
          <div className="item2-1">{Profile}</div>
          <div className="item2-2">{Notification}</div>
        </div>
        <div className="item3">{Content}</div>
        <div className="item4">{Time}</div>
      </div>
      <NavBottom />
    </div>
  );
};

export default Home;

.grid-container {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: auto;
    grid-gap: 10px;
  }
  
  .item1-img {
    width: 50px;
    height: auto;
    border-radius: 18px;
    margin-left: 10px;
  }
  
  .item2 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-weight: bold;
    margin-left: 30px;
  }
  
  .item3 {
    grid-column: 2 / 3;
    grid-row: 2 / 2;
    margin-top: -35px;
    margin-left: 28px;
    color: darkgray;
  }
  
  .item4 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: right;
    color: darkgray;
    font-size: 12px;
    margin-top: 7px;
    
  }
  
  .item2-2 i {
    font-size: 20px;
    padding-right: 10px;
  }

https://github.com/jaenam1212/daiblab

GitHub - jaenam1212/daiblab