개인 프로젝트 기록 - 2

Ham S. J·2022년 11월 30일
React
0

개인 프로젝트 1

목록 보기
2/10


위는 Tailwind + DaisyUI(클릭하면 이동)를 이용하여 모달, 드롭다운등을 응용하여 만든 네비게이션 바
그리고 컴팩트한 기능으로 연결되는 레이아웃을 구성해보았다.

1. 코드 구성

  1. index.js와 App.js
import React from "react";
import ReactDOM from 'react-dom/client';
import App from "./App";
import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <App />
);
import { useState, useEffect } from "react"
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from "react-router-dom";

import Home from "./routes/Home";
import Nav from "./components/Nav";
import Footer from "./components/Footer";
import Rating from "./routes/Rating";
import Ranking from "./routes/Ranking";
import Board from "./routes/Board";

function App() {

    return (
        <div>
            <div>
                <Nav />
                <Router>
                    <Routes>
                        <Route path="/" element={<Home />}/>
                    </Routes>
                    <Routes>
                        <Route path="/rating" element={<Rating />}/>
                    </Routes>
                    <Routes>
                        <Route path="/ranking" element={<Ranking />}/>
                    </Routes>
                    <Routes>
                        <Route path="/board" element={<Board />}/>
                    </Routes>
                </Router>
                <Footer />
            </div> 
        </div>
    )
  }

export default App;
  • index.js 에서는 App.js를 렌더링하고 있다.
  • App.js에서는 고정되는 Nav, Footer를 위 아래로 배치시키고 가운데 Content(Body)부분만
    라우팅, 렌더링 되도록 구성하였다.

2. /components

import { Link } from "react-router-dom";

function Nav(){
    return(
        // Nav Start 
        <div class=" w-full h-20">
            <div class="navbar bg-base-100">
                <div class="flex-1">
                    <a href="/" class="btn btn-ghost normal-case text-3xl">어~떤가~요 🎤</a>
                    <div class="flex items-center justify-left w-full">
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost m-1 text-lg">순위</label>
                        <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li><a href="/ranking">음악</a></li>
                            <li><a href="/ranking">신곡/발매예정</a></li>
                        </ul>
                    </div>
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost m-1 text-lg">평가</label>
                        <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li><a href="/rating">음악</a></li>
                            <li><a href="/rating">신곡/발매예정</a></li>
                        </ul>
                    </div>
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost m-1 text-lg">자유게시판</label>
                        <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                            <li><a href="/board">음악</a></li>
                            <li><a href="/board">신곡/발매예정</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
                <div class="flex-none">
                    <label htmlFor="login-modal" className="btn btn-success mx-1">로그인</label>
                    <label htmlFor="join-modal" className="btn btn-outline btn-success mx-1">회원가입</label>
                </div>
            </div>


            {/* 로그인 모달 */}
        <form>
        <input type="checkbox" id="login-modal" className="modal-toggle" />
        <div className="modal modal-bottom sm:modal-middle">
            <div className="modal-box relative">
                <label htmlFor="login-modal" className="btn btn-sm btn-circle btn-outline absolute right-2 top-2">✕</label>
                <h3 className="font-bold text-3xl text-center m-5"> 로그인</h3>
                <div className="form-control w-full">
                    <label className="label">
                        <span className="label-text m-auto p-1 font-bold">ID를 입력해주세요.</span>
                    </label>
                    <input type="text" placeholder="ID" className="input input-bordered w-full max-w-xs m-auto" />
                    <label className="label">
                        <span className="label-text m-auto p-1 font-bold">비밀번호를 입력해주세요.</span>
                    </label>
                    <input type="password" placeholder="비밀번호" className="input input-bordered w-full max-w-xs m-auto" />
                    <label className="label">
                        <span className="label-text m-auto p-1 font-bold">비밀번호를 다시 한 번 입력해주세요.</span>
                    </label>
                    <input type="password" placeholder="비밀번호 확인" className="input input-bordered w-full max-w-xs m-auto" />
                </div>
                <div className="modal-action">
                    <button type="submit" htmlFor="login-modal" className="btn btn-outline btn-success">로그인</button>
                </div>
            </div>
        </div>
        </form>  

        {/* 회원가입 모달 */}
        <form>
        <input type="checkbox" id="join-modal" className="modal-toggle" />
        <div className="modal modal-bottom sm:modal-middle">
            <div className="modal-box relative">
                <label htmlFor="join-modal" className="btn btn-sm btn-circle btn-outline absolute right-2 top-2">✕</label>
                <h3 className="font-bold text-3xl text-center m-8"> 🎉 회원가입 🥳</h3>
                <div className="form-control w-full">
                    <label className="label">
                        <span className="label-text m-auto p-3">ID를 입력해주세요.</span>
                    </label>
                    <input type="text" placeholder="ID" className="input input-bordered w-full max-w-xs m-auto" />
                    <label className="label">
                        <span className="label-text m-auto p-3">비밀번호를 입력해주세요.</span>
                    </label>
                    <input type="password" placeholder="비밀번호" className="input input-bordered w-full max-w-xs m-auto" />
                    <label className="label">
                        <span className="label-text m-auto p-3">비밀번호를 다시 한 번 입력해주세요.</span>
                    </label>
                    <input type="password" placeholder="비밀번호 확인" className="input input-bordered w-full max-w-xs m-auto" />
                    <label className="label">
                        <span className="label-text m-auto p-3">이메일을 입력해주세요.</span>
                    </label>
                    <input type="email" placeholder="이메일" className="input input-bordered w-full max-w-xs m-auto" />
                </div>
                <div className="modal-action">
                    <button type="submit" className="btn btn-outline btn-success">가입</button>
                </div>
            </div>
        </div>
        </form>
    </div>
    // Nav End
    )
}

export default Nav;

  • dropdown에서 해당 URL로 이동하게끔 Link( react-router-dom 패키지의 기능)을 사용하려 했으나, 왠지 모르게 Link 코드를 적용시키면 렌더링이 안되는 오류가 발생한다. 그래서
    anker 태그를 이용하여 구성하였다.

  • 회원가입, 로그인 페이지를 따로 구성하여 컴포넌트화 하는 것이 일반적인데, 모달을 이용하여
    구성하는 것이 내게는 더 매력적이고 큐티 코딩이라고 생각하였기 때문에 모달 방식을 채택하였다.
    input type을 password, email로 할 경우 다르게 적용되고 이메일에 @이 구성돼있는지 검증하는게 아주 편리하다고 생각했다.
    (근데, 나중에 prop들을 주고 받을 때 다른 문제가 발생하진 않을까 우려가 되긴 한다.)

function Footer(){
    return(
<footer className="footer footer-center p-10 bg-base-200 text-base-content rounded mt-20">
  <div className="grid grid-flow-col gap-4">
    <a className="link link-hover">About us</a> 
    <a className="link link-hover">Contact</a> 
  </div> 
  <div>
    <div className="grid grid-flow-col gap-4">
      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a> 
      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a> 
      <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
    </div>
  </div> 
  <div>
    <p>Copyright © 2022 - All right reserved by Merong~~:P</p>
  </div>
</footer>
    )
}

export default Footer;

just .... footer..... 자세한 설명은 다음 사진으로 설명하겠습니다.

3. /routes

import { Link } from "react-router-dom";

function Home(){
    return(
    <div>
            <div className="w-full h-96">
                <img className="w-full h-full" src="img/banner.png" alt="banner"/>
            </div>
        
        <div class="w-4/5 m-auto">
            <div className="m-auto text-left font-bold text-4xl p-10"> 평가 </div>
                <div className="flex flex-col w-full lg:flex-row justify-evenly">
                    <div className="card card-compact w-2/5 bg-base-100 shadow-xl">
                        <figure><Link to="/rating"><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></Link></figure>
                        <div className="card-body">
                            <h2 className="text-center text-3xl font-bold"> 신곡 / 발매예정 </h2>
                            <p className="text-center">새로 발매된 음악과 💿 <br/>발매예정 음악 ⏰<br/> 평가해보세요! ⭐️</p>
                            <div className="card-actions justify-end">
                            </div>
                        </div>
                    </div>
                    <div className="card card-compact w-2/5 bg-base-100 shadow-xl">
                        <figure><Link to="/rating"><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></Link></figure>
                        <div className="card-body">
                            <h2 className="text-center text-3xl font-bold"> 음악 </h2>
                            <p className="text-center">🔥 최신 노래부터 😎<br/>🍃 추억의 노래까지 😌<br/> 내 점수는 몇 점? ⭐️</p>
                            <div className="card-actions justify-end">
                            </div>
                        </div>
                    </div>
            </div>
            <div className="m-auto text-left font-bold text-4xl p-10"> 오늘의 명반 </div>
            <div className="flex flex-col w-full lg:flex-row justify-evenly">
            <div className="card w-80 bg-base-100 shadow-xl image-full">
                <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
                <div className="card-body">
                    <h2 className="card-title">Shoes!</h2>
                    <p>If a dog chews shoes whose shoes does he choose?</p>
                    <div className="card-actions justify-end">
                    <button className="btn btn-primary">Buy Now</button>
                    </div>
                </div>
            </div>
            <div className="card w-80 bg-base-100 shadow-xl image-full">
                <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
                <div className="card-body">
                    <h2 className="card-title">Shoes!</h2>
                    <p>If a dog chews shoes whose shoes does he choose?</p>
                    <div className="card-actions justify-end">
                    <button className="btn btn-primary">Buy Now</button>
                    </div>
                </div>
            </div>
            <div className="card w-80 bg-base-100 shadow-xl image-full">
                <figure><img src="https://placeimg.com/400/225/arch" alt="Shoes" /></figure>
                <div className="card-body">
                    <h2 className="card-title">Shoes!</h2>
                    <p>If a dog chews shoes whose shoes does he choose?</p>
                    <div className="card-actions justify-end">
                    <button className="btn btn-primary">Buy Now</button>
                    </div>
                </div>
            </div>
            
            </div>

            <div className="m-auto text-left font-bold text-4xl p-10"> 공지사항 </div>
            <div className="flex flex-col w-full lg:flex-row">
            <div className="w-2/3">
                <table className="table w-full text-center">
                    <thead>
                        <tr>
                            <th>공지사항</th>
                            <th>날짜</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Cy Ganderton</td>
                            <td>2022-11-28</td>
                        </tr>
                        <tr>
                            <td>Hart Hagerty</td>
                            <td>2022-11-28</td>
                        </tr>
                        <tr>
                            <td>Tax Accountant</td>
                            <td>2022-11-28</td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <div className="divider lg:divider-horizontal"></div> 
                <div className="grid flex-grow h-40 card bg-base-300 rounded-box place-items-center">content</div>
            </div>
        </div>
    </div>
    )
}

export default Home;

업로드중..
업로드중..
'왓챠피디아' 처럼 콤팩트 하고..... 큐티한 페이지를 구성하고자 하였는데, 일단 이건 커다란 틀에 불과!
중요한 것은 기능을 구현한 것이라 생각하기에...... 이렇게 넘어갑니다! (「꒪౪꒪)」

function Ranking(){
    return(
        <div>
            <div className="w-full h-72">
                <img className="w-full h-full" src="img/banner.png" alt="banner"/>
            </div>

        </div>
    )
}

export default Ranking;
function Rating(){
    return (
        <div className="w-full h-72">
            <img className="w-full h-full" src="img/banner.png" alt="banner"/>
        </div>
    )
}

export default Rating;
function Board(){
    return <h1>Board</h1>
}

export default Board;

각 순위, 평가, 게시판으로 넘어가는 routes들로 아직 많은 정보가 읽히지 않다 !(번역체)
이제 백을 구성하고 짜보려고 하는데, 외래키라던지 DB구성을 먼저 하고 넘어가려는데 벌써
어질어질........ 과외선생님 구합니다 과외비용은 제가 어찌 저찌 쿠팡을 뛰어서라도.................
자! 이제 커다란 인터넷 파도속에 정확하고 좋은 정보를 캐내어 공부하러 가야겠습니다! (⑅∫°ਊ°)∫

profile
Ham S. J
즐겁게 귀엽게 코딩합시다 !
이전 포스트

개인 프로젝트 기록 - 1

다음 포스트

개인 프로젝트 기록 - 3

0개의 댓글