to="/feature" 추가

Author: sojeongP0415

package-lock.json

@@ -13,6 +13,7 @@
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.5.3",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.9.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -53,6 +53,7 @@
 /* NavLink hover */
 .header-nav a:hover {
     color: #6a0dad;
+    cursor: pointer;
 }
 
 /* NavLink 활성 상태 */
@@ -62,13 +63,6 @@
     font-weight: 600;
 }
 
-/* 오른쪽: 버튼들 또는 닉네임 */
-/*.header-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}*/
-
 /* 로그인/회원가입 버튼 */
 .btn {
     padding: 6px 12px;

src/components/header/Header.css

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { NavLink, Link } from "react-router-dom";
+import { Link as ScrollLink } from "react-scroll";
 import { FaMoon, FaSun } from "react-icons/fa";
 import "./Header.css";
 
@@ -18,7 +19,17 @@ const Header = ({ isLoggedIn, nickname }) => {
 
             <nav className="header-nav">
                 <NavLink to="/" end>홈</NavLink>
-                <NavLink to="/features">기능</NavLink>
+                {/*<NavLink to="/features">기능</NavLink>*/}
+                <ScrollLink
+                    to="feature"
+                    smooth
+                    duration={500}
+                    offset={-64}
+                    spy={true}
+                    activeClass="active"
+                >
+                    기능
+                </ScrollLink>
                 <NavLink to="/ide">IDE</NavLink>
                 <NavLink to="/community">커뮤니티</NavLink>
                 <NavLink to="/broadcast">코드 방송</NavLink>

src/components/header/Header.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import {Element} from "react-scroll";
 import Intro from "./intro/Intro";
 import Features from "./features/Features";
 import DemoView from "./demoview/DemoView";
@@ -10,7 +10,9 @@ const Main = () => {
         <div>
             <main>
                 <Intro />
-                <Features />
+                <Element name="feature">
+                    <Features />
+                </Element>
                 <DemoView />
                 <StartNow />
             </main>

src/components/mainpage/Main.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import "./Intro.css";
 import introImage from "./intro.png";
-import {Link} from "react-router-dom"; // 오른쪽 이미지
+import {Link} from "react-router-dom";
+import { Link as ScrollLink } from "react-scroll";
 
 const Intro = () => {
     return (
@@ -16,8 +17,12 @@ const Intro = () => {
                     코드 방송 기능을 통해 실시간으로 지식을 공유할 수 있습니다.
                 </p>
                 <div className="intro-buttons">
-                    <Link to="ide" className="btn primary">시작하기</Link>
-                    <Link to="" className="btn secondary">기능 살펴보기</Link>
+                    <Link to="/ide" className="btn primary">시작하기</Link>
+                    <ScrollLink to="feature"
+                                smooth
+                                duration={500}
+                                offset={-64}
+                                className="btn secondary">기능 살펴보기</ScrollLink>
                 </div>
             </div>