이번주 과제는 3주차에 만든 자기소개 사이트에 인트로 페이지 만들기 였다. ㅎㅎ.. 뭐 사실 3주의 기간이 있긴 했는데... 저는 12시간만에..큼... 예..뭐... 그거는 중요한게 아니고 이제 본격적으로 가죠
폴더 구조 정리
음 내가 저번시간에 왜 그렇게 만든건지는 모르겠는데 작업을 App.js에 하는 불상사가 있어서 이것 저것 고치게 되었다...
글로 모든걸 설명하기 보다는 사진을 보는게 이해가 빨라서 ㅎㅎㅎ
일단 src라는 폴더 안에 components pages style 이라는 폴더를 만들었다 과제에 이렇게 만들라고 해서 한 것 도 있기는 한데 일단 이름이 직관적이라서 이렇게 폴더를 만들어 나누었다.
그 pages 폴더 안에 있는 사진 파일들은 흐린 눈 좀...
아니 경로 설정을 하다가 계속 꼬여서 그냥 같은 폴더에 넣어서 간단하게 만드느라ㅏ ㅎㅎ
그리고 style 파일을 intro랑 profile을 따로 따로 만들까 했는데 2개 만들 정도는 아닌거 같아서..ㅎㅎㅎ 뭐 하나로도 충분해서 1개로 했다.
그래서 지난번에 사고친 작업물들을 옯기니 App.js에 아무것도 없어서... 뭐 제미나이랑 좀 토론하고 지난번 수업 자료 참고해서 다시 페이지를 만들어 왔다. 일단 라우터 세팅을 해야했다.
App.js 구성
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Intro from "./pages/Intro";
import Profile from "./pages/Profile";
import Header from "./components/Header";
function App() {
return (
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Intro />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</BrowserRouter>
);
}
export default App;먼저 리엑트와 react-router-dom이라는 패키지 설치하고 불러와주고 만든 페이지들도 연결해주었다. 만든 페이지들도 경로를 불러와 주었다. 각 페이지의 주소 설정도 해주었고 Header 부분은 모든 페이지에서 쓸거라 Routes 위에 넣어주었다. 각각 페이지도 다 연결을 해주었다.
나머지 페이지 라우츠 연결
각 페이지 상단에도
import { useNavigate } from "react-router-dom";를 모두 넣어주었다.
인트로 페이지 만들기
인트로 페이지를 뭐 만들지 고민을 해봤는데 아무리 생각해도 아이디어가 없었다.... 뭐하지 뭐하지 하다가 그냥 내가 좋아하는거 만들자 라는 생각에 자동차를 넣고 트랙을 깔아 볼까 해서 일단 자동차를 주제로 잡았다. 그래서 따로 보이는 프로필로 이동하기 같은 버튼은 없었으면 해서 자동차 사진을 버튼으로 만들 생각을 했고 배경은 하늘색을 그라데이션으로 넣을 생각을 하고 있었는데 제미나이랑 상의하다가 아래 트랙을 넣고 하늘색 그라데이션을 밑부분은 투명도를 주면 된다고 하길래 그렇게 만들었다.
import React from "react";
import * as S from "../style/style.style";
import redbull from "./redbull.png";
import track from "./track.png";
import { useNavigate } from "react-router-dom";
const Intro = () => {
const navigate = useNavigate();
return (
<S.Background bgImg={track}>
<span onClick={() => navigate("/profile")}>
<img src={redbull} />
</span>
</S.Background>
);
};
export default Intro;인트로 페이지 코드는 뭐가 없긴 하다. 딱히 요소가 많은게 아니라 없는데
그 스타일이 좀..
export const Background = styled.article`
background:
linear-gradient(
to bottom,
#87ceeb 0%,
#87ceeb 30%,
rgba(135, 206, 235, 0.5) 70%,
transparent 100%
),
url(${(props) => props.bgImg});
background-size:
100% auto,
100% 45%; // 그라데이션은 전체, 트랙은 하단 45% 크기
background-position: center top, center bottom; // 트랙 사진을 화면 바닥에 고정
background-repeat: no-repeat;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 80px; // 이거는 차 위치 조절할려고 넣음
box-sizing: border-box;
margin: 0;
//이건 차 사진
& img {
width: 600px;
max-width: 80%;
height: auto;
filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4));
transition: transform 0.3s ease;
cursor: pointer;
}
& img:hover {
transform: translateY(-10px) scale(1.2);
}
`;스타일이 길어서 보기 힘들기 때문에 간단히 설명을 해보자면
background:linear-gradient(to bottom, #87ceeb 0%, #87ceeb 30%, rgba(135, 206, 235, 0.5) 65%, transparent 100%), 이거는 그라데이션을 만들기 위해 넣은 코드이고 65%부분 부터는 사진이 잘 보디기 위해 투명하게 보인다.
url(${(props) => props.bgImg}); 이거는 props로 전달 받은 사진이다
filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.4)); 이거는 제가 생각하고 넣은건 아니고 제미나이가 추천을 해줬는데 괜찮길래 ㅎㅎ 이게 box-shadow와는 다르게 이미지의 '형태'를 따라 그림자를 생성 해준다고 함 뭐 큰 차이 있겠어 하면서 코드 빼 봤는데 차이가 많이 나서 놀람 ㅎㅎ
화면 전체에서 보면 그림자 없는 자동차는 진짜 동동 떠있는거 같고 이상함..
만들었는데 너무 별로라 약간의 모션을 넣어보고자 마우스를 올리면 크기가 커지게 만들어 보았다.
& img:hover {transform: translateY(-10px) scale(1.05);} 이 명령언데 이게 마우스를 올리면 Y축으로 10px 만큼 위로 이동시키고 크기는 1.2배 만들어주는 명령어이다. -방향이 위쪽이고 +는 아래쪽이라고 한다.
&img 코드에 대해 설명을 좀 하자면 & 기호는 현재 자기자신을 카리키는 기호 이다. 여기서 &img는 <Backgroud> 컴포넌트 안에 들어있는 <img>태그를 선택하겠다는 '뜻'이다.
그리고 그 트랙 사진은 괜찮은게 없길래 
여기서 맥라렌 차 지워서 가져왔고 차도 이쁜게 없어서 여기서 가져옴 ㅎㅎ
선택 과제 헤더 만들기
특히 인트로가 많이 비어보여서 헤더바를 만들기로 했다. ㅎ...
const Header = () => {
const navigate = useNavigate();
return (
<HContainer>
<HeaderTitle>ahyun's Profile</HeaderTitle>
<HButtons>
<HeaderBtn onClick={() => navigate("/")}>Intro</HeaderBtn>
<HeaderBtn onClick={() => navigate("/profile")}>
Profile
</HeaderBtn>
</HButtons>
</HContainer>
);
};
export default Header;헤더에는 크게 들어가는게 없긴해서 뭘 설명할게 크게 없긴 한데 버튼같은 티가 나는 버튼말고 그냥 글자를 누르면 페이지 이동이 됬으면 해서
span 태그에 onClick을 넣었다. 모든페이지에 넣을건데 스타일따로 문법따로 만들기는 굳이? 라는 생각이 들어서 그냥 한 파일에 다 넣었다 스타일은
const HContainer = styled.nav`
width: 100%;
height: 70px;
background-color: #13111189;
display: flex;
align-items: center;
padding: 0 40px;
position: fixed; // 상단 고정
top: 0;
left: 0;
z-index: 1000; // 다른 요소보다 위에 있게
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
`;
const HeaderTitle = styled.h1`
font-size: 24px;
margin: 0;
position: absolute; // 부모(Header) 기준 절대 위치
left: 50%;
transform: translateX(-50%); // 정확히 정중앙으로
color: #fdfdfd;
cursor: pointer;
`;
const HButtons = styled.div`
margin-left: auto; // 오른쪽 끝으로 밀기
display: flex;
gap: 20px;
`;
const HeaderBtn = styled.span`
background: none;
border: none;
font-size: 16px;
font-weight: bold;
color: #fdfdfd;
cursor: pointer;
&:hover {
color: #000; //마우스 올리면 진해짐
}
`;뭐 크게 특별한거는 없는거 같다....
다 만들었는데 화면이 스크롤이 되다보니까 배경이 끊기는 느낌도 들고
흰 배경이 나오길래 맘에 안들어서 페이지들 스크롤 안되게 막아놨다.
그거는 어케 했더라.. ㅎ 코드 보고 알아옴
그 높이를 height: 100vh 이걸로 고정하고 튀어나오면 잘라주는 overflow: hidden 이거 써서 스크롤 안되게 막았다.ㅎㅎ
배운 점
일단 가장 신기했던거는 filter: drop-shadow 이 코드 물체에 맞춰서 그림자 만들어주는거 신기했다. 앞으로 잘 쓸듯 ㅎㅎ 그리고 또 Header 쓰는 위치 처음알았다 !! 그 자동차에 마우스 올리면 확대되고 위로 이동하는 코드도 이 과제하면서 알게 되었다.!!
transform: translateY(-10px) scale(1.2);
느낀 점
일단 확실히 과제는 미리 해야된다....
미리 안했다고는 하지만 나름 바빴.. 축제하고 시험도 어제 끝났는데.. 뭐 여튼 미리 안했더니 새벽에 인트로를 만드는 참사가 일어났다.. 진짜 내가 축제 프로젝트를 하지 않았더라면 절대 과제를 완성하지는 못 했을 것 같다.. 축제하면서 그래도 이것저것 해봤고 계속 vs code를 만져서 그나마 어찌어찌 한거 같은데.. 다신 이렇게 안할거다.. 진짜
새벽에 해서 재정신이었다면 하지 않았을 실수를 너무 많이 했다.. 일단 뭐 jsx 파일 만드는데 제목을 소문자로 만들어서 안되고 그래서 파일 이름 바꾸니까 다른데서 소문자로 만들어둔 것도 바꿔야되서 막 계속 바꾸고 App.js 에 몇번이나 들어간건지... 그것도 그렇고 사진경로도 계속 잘못 설정해서 몇번이나 수정하고 스타일 컴포넌트 안 할려고 전에 그냥
<h2> <div> 처럼 만들어둔 태그를 급 스타일 컴포넌트화 시켰다가 다시 수정하고 수정 덜 해서 에러나고... 여튼 앞으로는 미리 과제를 할거다...
