Component 분리

AppProfile.jsx

import Profile from "./components/Profile";
import "./App.css";
import Album from "./components/Album";

export default function AppProfile() {
  return (
    <>
      <Profile
        url="https://w.namu.la/s/40798176c5352e763e0cb04d58addcead564740ca6df82478a10879bcfabfbd00ecef0e5f28bd5adbc444b9203cd12946cd25e97e8f5e84c1664a0c37abcd05bc59f94c21139507d0caace216094aa002e73de2e4bf4206f80300fa7697c466be725c76932f716f4f9780da190165871"
        year="2013"
        title="Yeezus"
      />
      <Profile
        url="https://w.namu.la/s/03840c3d31d2da06ed86073ea746b1d77a9d13d46735ddbb19ab7b2baf3cd7354ca13d48d6894bbe79588deaed7add1053b046da7e5580f03a7f3864d4f4c9bb6be14ceab018e39db3c995125037e86d6a1d8ff55e7fd98b60e3002b118eca9f99d94132e8827843bc0ea82fe908a3b0"
        year="2018"
        title="Ye"
      />
      <Profile
        url="https://w.namu.la/s/54bdb55f0753cec1e4325c90233c4c36892b9d8571559d42cc89d95b6e7f5119e1c44180a2073ba86a0114f52d0701f762afe9305324e5bc63551c6de029780cb76f3d5be997ca4f2eb4c791190704c41bc47150133a40430759982bdea21e8d78069db87c95f43774fafc35a90023c8"
        year="2019"
        title="Jesus Is King"
        isNew={true}
      />
      <Album
        url="https://w.namu.la/s/70383c7b7756b632723ab4d8dd0723ff2f8736bec174c94ae2796ad0fe37d2df934c770f7494f7bfeee171a4a38dc2e277176fab192ac41138ed7aef5117b4b0768d9808ef013cb25b2e3713daa44b0add77015a1c01a75572a8dee47fdf9f4aa73594b349e5f64c01f6687867b4bc66"
        isNew={true}
      />
    </>
  );
}

Profile.jsx

import Album from "./Album";

export default function Profile({ url, title, year, isNew }) {
  return (
    <div className="profile">
      <Album url={url} isNew={isNew} />
      <h1>{title}</h1>
      <p>{year}</p>
    </div>
  );
}

Album.jsx

export default function Album({ url, isNew }) {
  return (
    <div className="album">
      <img src={url} alt="album" className="photo" />
      {/* {isNew ? <span className="newTag">NEW!!</span> : <></>} */}
      {isNew && <span className="newTag">NEW!!</span>}
    </div>
  );
}

App.css

.test {
  color: #ff6347;
}

.profile {
  margin: 1rem;
  width: 300px;
  text-align: center;
  padding: 1rem;
  background-color: antiquewhite;
  border-radius: 30%;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.photo {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.album {
  width: 200px;
  height: 200px;
  position: relative;
  margin: auto;
}

.newTag {
  background-color: aquamarine;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: bold;
  position: absolute;
  top: 10%;
  left: 73%;
  padding: 0.1rem 0.3rem;
}

View