728x90
전에 쓴 글과 연결
[CSS] 리액트 적용 전 서브 페이지 만들기 (1) (tistory.com)
리액트 SCSS
@use "reset";
@font-face {
font-family: "Pretendard-Regular";
src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
format("woff");
font-weight: 400;
font-style: normal;
}
/* 색상 변수 */
$main_color: #ca7991;
$sub_color: #ece9e9;
$text_color: #c98181;
// wrapper
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
// 검색
.search-container {
.search-overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 998;
}
.search {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
z-index: 999;
.search-box {
width: 40vw;
padding: 1.5vw;
border: none;
font-size: 16px;
}
}
}
// 헤더
header {
background-color: $main_color;
color: white; //텍스트 컬러
text-align: center;
align-items: center;
// padding: 0.5vw;
height: 2vw; /* 텍스트 영역 높이 설정, li의 높이와 일치시킴 */
li {
height: 2vw;
line-height: 2vw;
font-size: 1vw;
display: flex;
justify-content: center;
align-items: center;
}
}
.ticker {
animation: ticker-scroll 3s linear infinite;
}
@keyframes ticker-scroll {
0% {
transform: translateY(0);
}
25% {
transform: translateY(0);
}
50% {
transform: translateY(-50%);
}
75% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
// 컨테이너
.container {
display: flex;
flex: 1;
min-height: 100vh; // 리액트 추가
// 사이드 바
.sidebar {
background-color: $sub_color;
overflow: hidden;
text-align: center;
font-size: 1.15vw;
width: 16.25rem;
max-width: 260px;
padding: 6vw;
display: flex;
justify-content: center;
li {
margin-bottom: 1.1875rem;
a {
position: relative;
&::after {
content: "";
position: absolute;
height: 0.2vw; //px 로 하니까 밑줄 크기 들쭉날쭉했음.
width: 0%;
left: 0;
bottom: -5px;
background-color: $text_color;
transition: 0.3s;
}
&:hover:after {
width: 100%;
}
&:hover {
color: #d35d80;
}
}
}
.dropdown a {
display: block;
margin-bottom: 1.1875rem;
}
.dropdown-content {
font-size: 1vw;
color: $text_color;
}
}
// main 중앙 콘텐트
main {
flex: 1;
padding: 2vw;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.image-container {
margin-bottom: 60px; /* 이미지와 footer 사이 간격 설정 */
}
.bg-image {
width: 100%; /* 두 번째 이미지를 100%로 설정 */
}
.logo-image {
width: 14.2vw;
height: 12.4vw;
}
}
// 밑에 푸터
footer {
width: 21.3vw;
color: $text_color;
font-size: 0.7vw;
// padding: 0.5rem;
text-align: center;
text-transform: uppercase;
}
}
// 서브페이지 아이템
.item-container {
margin-bottom: 60px;
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
gap: 2vw; /* 아이템 간 간격 */
.item {
overflow: hidden;
position: relative;
border: 1px solid transparent; /* border는 투명하게 유지, hover 시 색상만 변경 */
// 들썩거림 방지
transition: transform 0.3s ease, border-color 0.3s ease,
box-shadow 0.3s ease;
.overlay-wrap {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: end;
opacity: 0;
transition: background-color 0.3s ease;
.overlay {
text-align: center;
width: 100%;
color: black;
padding: 1.2vw;
font-size: 1vw;
}
}
img {
object-fit: cover;
width: 100%; // 이거 해야 창 확대 할 때 안 어긋남.
height: 100%;
}
&:hover {
box-sizing: border-box;
border: 1px solid $main_color;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
// opacity: 0.5;
}
&:hover .overlay-wrap {
opacity: 1;
}
&:hover img {
transform-origin: center center;
transform: scale(1.2); /* 이미지 확대 */
}
}
}
서브페이지 만들기
리액트 라우터 1 : 셋팅이랑 기본 라우팅 (tistory.com)
해당 세팅 완료.
1) react-router-dom 설치
터미널 열어서
npm install react-router-dom@6 입력해서 설치
2) index.js 파일
index.js 파일로 가서 import 어쩌구 해오고 <BrowserRouter> 이걸로 <App/> 이걸 감싸기.
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
이런식으로 하면되고
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
이거 걍 복붙하면 됨.
3) App.js 파일로 가서
import { Routes, Route, Link } from "react-router-dom"; 임포트 하기
import { Routes, Route, Link } from "react-router-dom";
Routes 사용 방법
(App.js)
import { Routes, Route, Link } from 'react-router-dom'
function App(){
return (
(생략)
<Routes>
<Route path="/detail" element={ <div>상세페이지</div> } />
<Route path="/about" element={ <div>어바웃페이지</div> } />
</Routes>
)
}
return문 안에다가 라우트 쓰기
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>
유저가 주소창에 url 입력해서 들어가지 않고 링크타고 들어갈 수 있음.
nff 에 링크 태그 생성하기
<div className="image-container">
<Link to="/">
<img
src="https://kku-git.github.io/nff_product/logo.svg"
alt="로고"
className="logo-image"
/>
</Link>
</div>
이미지 누르면 메인페이지 url 로 이동하는 링크 경로 생성
Route 를 먼저 생성해놓는게 좋을듯. 아직 메인페이지 Route는 생성하지 않음.
라우트 대충 생성해주고,
상세페이지 글자를 누르면 주소가 /detail 로 됐다가
Link 태그를 단 로고 이미지(nff)를 누르면 다시 메인페이지 주소로 돌아가는 거 확인할 수 있다.
728x90
'> 포트폴리오 > nff' 카테고리의 다른 글
[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (3) (0) | 2024.09.03 |
---|---|
[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (2) (0) | 2024.09.03 |
[SCSS/JS] nff 코드 완성 (0) | 2024.08.31 |
[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) (0) | 2024.08.31 |
[CSS] 리액트 적용 전 서브 페이지 만들기 (1) (0) | 2024.08.30 |