Ng3

홈 타이틀 텍스트 데이터바인딩 합니다.

---

const dataText = [
  {
    main: 'Nextagram',
    subCaps1: 'Bros',
    sub1: 'bros',
    subCaps2: 'Login',
    sub2: 'login',
    subCaps3: 'Detail',
    sub3: 'detail',
    footer: 'Unsplash',
  },
];

export default dataText;

 

/data/dataText.tsx

 

타이틀 텍스트 데이터를 준비 합니다.

프로젝트 페이지 중요 텍스트를 데이터로 세팅하겠습니다.

왜냐하면 중요 텍스트를 그냥 한 곳에서 콘트롤하고 싶어서 입니다.

꼭 이렇게 해야 할 필요는 없습니다.

subCaps0 - 첫글자가 대문자이며 주로 타이틀이나 텍스트에 사용할것입니다.

sub0 - 첫글자가 소문자이며 주로 유알엘패스로 사용할 것입니다.

---

import dataTexts from './data/dataText';

 

app/page.tsx

 

데이터 파일 임포트 합니다.

 

interface DataText{
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

 

임포트 아래에 데이터 타입을 데퍼니션 합니다.

 

https://lshjju.tistory.com/684

TypeScript 타입 미 선언시 발생하는 문제

 

 

      <h4>{dataTexts[0].main}</h4>

 

 <h1>Nextagram</h1> 이 코드를 위 코드로 변경 합니다.

즉, 펑션 홈 리턴 내부 타이틀 데이터바인딩 합니다.

---

Completion

---

'use client';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import Link from 'next/link';
import dataTexts from './data/dataText';

interface DataText {
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

export default function Home() {
  return (
    <main>
      <h4>{dataTexts[0].main}</h4>
      <Post />
      <Pagenation />
    </main>
  );
}

function Post() {
  return (
    <div className="">
      <div className="card m-3">
        <img
          src={`https://raw.githubusercontent.com/lshjju/cdn/refs/heads/main/girls/1.PNG`}
          className="card-img-top"
          alt="..."
        />
        <div className="card-body">
          <h5 className="card-title">elegance</h5>
          <p className="card-text">
            It is a long established fact that a reader will be distracted
          </p>
          <p className="card-text">
            <small>20250228</small>
          </p>
          <p className="card-text">Like it 25</p>
          <Link href="/detail" className="btn btn-outline-secondary">
            Detail
          </Link>
        </div>
      </div>
    </div>
  );
}

function Pagenation() {
  return (
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item disabled">
          <a class="page-link">Previous</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            1
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            2
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            3
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            Next
          </a>
        </li>
      </ul>
    </nav>
  );
}

---

---

bros/login/detail 각 page.tsx 파일에서 타이틀 데이터 바인딩 합니다.

---

위와 같은 방식으로 bros/login/detail 각 page.tsx 파일에서 타이틀 데이터 바인딩 합니다.

임포트 할 때 패스 정확히 설정 합니다.

---

'use client';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from '../data/dataText';

interface DataText {
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

export default function Bros() {
  return (
    <div>
      <h4>{dataTexts[0].subCaps1}</h4>
      <Bro />
      <Pagenation />
    </div>
  );
}

// 이하 생략

---

'use client';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from '../data/dataText';

interface DataText {
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

export default function Login() {
  return (
    <div className="m-3">
      <h4>{dataTexts[0].subCaps2}</h4>
      <form>
// 이하 생략
      </form>
    </div>
  );
}

---

'use client';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from '../data/dataText';

interface DataText {
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

export default function Detail() {
  return (
    <div>
      <h4>{dataTexts[0].subCaps3}</h4>
      <Details />
      <Comment />
    </div>
  );
}

// 이하 생략

---

네비 데이터바인딩 합니다.

---

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Link from 'next/link';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from './data/dataText';

interface DataText{
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

const inter = Inter({ subsets: ['latin'] });

// under omission...

 

layout.tsx

 

데이터텍스트 임포트 하고 타입 데클러레이션 합니다.

        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div className="navbar-nav">
            <Link href={`/${dataTexts[0].sub1}`} className="nav-link">
            {dataTexts[0].subCaps1}
            </Link>
            <Link href={`/${dataTexts[0].sub2}`} className="nav-link">
            {dataTexts[0].subCaps2}
            </Link>
            <Link href={`/${dataTexts[0].sub3}`} className="nav-link">
            {dataTexts[0].subCaps3}
            </Link>
          </div>
        </div>

 

네비 유알엘 데이터바인딩 합니다.

---

        <a
          href="https://unsplash.com/"
          className="btn btn-outline-secondary fs-6"
        >
          Go {dataTexts[0].footer}
        </a>

 

펑션푸터 데이터 바인딩 합니다.

---

Test

 

여기저기 체크해 봅니다.

아무것도 변한것이 없다면 굿잡!

---

Completion

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Link from 'next/link';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from './data/dataText';

interface DataText{
  main: string;
  subCaps1: string;
  sub1: string;
  subCaps2: string;
  sub2: string;
  subCaps3: string;
  sub3: string;
  footer: string;
}

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Nav />
        {children}
        <Footer />
      </body>
    </html>
  );
}

function Nav() {
  return (
    <nav className="navbar navbar-expand-lg bg-body-tertiary m-3">
      <div className="container-fluid">
        <Link href="/" className="navbar-brand">
          <img src="./next.svg" width="50" />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div className="navbar-nav">
            <Link href={`/${dataTexts[0].sub1}`} className="nav-link">
            {dataTexts[0].subCaps1}
            </Link>
            <Link href={`/${dataTexts[0].sub2}`} className="nav-link">
            {dataTexts[0].subCaps2}
            </Link>
            <Link href={`/${dataTexts[0].sub3}`} className="nav-link">
            {dataTexts[0].subCaps3}
            </Link>
          </div>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <div className="card m-3">
      <div className="card-header">Image Copyright</div>
      <div className="card-body">
        <h5 className="card-title">{dataTexts[0].footer}</h5>
        <p className="card-text">
          With supporting text below as a natural lead-in to additional content.
        </p>
        <a
          href="https://unsplash.com/"
          className="btn btn-outline-secondary fs-6"
        >
          Go {dataTexts[0].footer}
        </a>
      </div>
    </div>
  );
}

 

layout.tsx

---