멍멍홈->라라벨_14. 로그인 창 뒷배경도 동영상이 보이도록 수정

< DB, 모델 이용 방법 >		< 기존 배열 방법(보관용) >
Route::get('/', [IndexController::class, 'index']);	라우트	Route::get('/view', [PostController::class, 'index']);
IndexController	컨트롤러	PostController
index.blade.php components/layerhelps.blade.php components/newpanel.blade.php components/panes.blade.php	뷰	index2.blade.php layerhelps2.blade.php components/newpanel2.blade.php components/panes2.blade.php
header.blade.php	공통	header.blade.php

위 처럼 파일 이름들을 바꾸는 작업이 오류가 많이 생기고 귀찮기는 하지만, 하나하나 잡아내면서 또한번 공부를 해볼 수 있는 기회가 되네요.

1. index.blade.php 수정

가. index 파일에서 핵심이 되는 내용은 제외하고, 다른 파일(로그인 파일)에서도 공통적으로 사용할 수 있는 앞부분(본 내용에서는 첫줄부터 유튜브 영상 보여주는 부분까지만...)과 뒷부분을 분리한 다음 별도의 파일로 복사를 해줍니다. 여기서는 components/topframe.blade.php 파일을 생성 후 아래처럼 소스를 정리합니다.

< 기존 index.blade.php >

< 수정 index.blade.php >

<html>

<head>

</head>

<div id="background" class="player"

data-property="{

videoURL: '{{ $select_movie }}',

mute: true,

showControls: false,

useOnMobile: true,

quality: 'highres',

containment: 'body',

loop: true,

autoPlay: true,

stopMovieOnBlur: false,

startAt: 0,

opacity: 1

}">

</div>

@include('header')

~~~~~~~~~~~~~~~~~중간 생략~~~~~~~~~~~~~~~~~~~~

@endfor

</body>

</html>

<x-topframe :select_movie="$select_movie">

@include('header')

~~~~~~~~~~~~~~~~~중간 생략~~~~~~~~~~~~~~~~~~~~

@endfor

</x-topframe>

나. 공통적으로 사용할 components/topframe.blade.php 파일 내용

- 맨 위에 @props(['select_movie']) 추가

- 중간에 {{ $slot }} 추가

@props(['select_movie'])

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

~~~~~~~~~~~~~~~~~중간 생략~~~~~~~~~~~~~~~~~~~~

            opacity: 1
        }">
    </div>

    {{ $slot }}

    <p align=center>&nbsp;</p>
    <p align=center>&nbsp;</p>
    <p align=center>&nbsp;</p>

</body>
</html>

이렇게 해도 정상적으로 홈페이지가 보일 것입니다.

2. views/auth/login.blade.php 수정

가. http://127.0.0.1/login 에서 보여지는 화면은 views/auth/login.blade.php 에 정의되어 있습니다.

<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">

~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~

            </div>
        </form>
    </x-auth-card>
</x-guest-layout>

나. 위에서 보면 상하단 끝이 <x-guest-layout>~~</x-guest-layout>로 둘러쌓여 있습니다. 이 부분을 아까 만들어 두었던 <x-topframe>~</x-topframe>로 교체해줍니다. 또한, 영상 주소를 변수로 받기 위해 select_movie="$select_movie"부분도 넣어주어야 합니다.

<x-topframe :select_movie="$select_movie">
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">

~~~~~~~~~ 중간 생략 ~~~~~~~~~~~~~~~~~~~~

            </div>
        </form>
    </x-auth-card>
</x-topframe>

앗!!! 이렇게 했는데 $select_movie 변수 때문에 오류가 나네요. 제대로 전달이 되지를 않네요. 원인을 찾아보았습니다.

Route::get('/', [IndexController::class, 'index']);
Route::get('/view', [PostController::class, 'index']);

Route::get('/view2', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

web.php 파일을 보니 /login 에 대한 라우트 내용은 보이지를 않네요. 하지만 마지막 새로 생긴 require __DIR__.'/auth.php'; 부분을 보니 외부 파일을 불러오네요. 같은 routes 폴더 내에 auth.php 파일을 불러오는 것이네요.

엄청 복잡한 파일이네요.

이중, login 부분을 보니 AuthenticatedSessionController 컨트롤러에 'create' 함수를 사용합니다.

app/Http/Controllers/Auth/AuthenticatedSessionController.php을 열어서 create 함수를 아래와 같이 수정합니다.

public function create()
    {
        $arr_movie = array(
            "https://youtu.be/KmafPs7Ljxw",
            "https://youtu.be/HrmWAdF_s6Y",
            "https://youtu.be/Dw1BhP7WJbo",
            "https://youtu.be/0snKAXOdY20",
            "https://youtu.be/_y8Rg4hgF1k",
            "https://youtu.be/vqT7ADQmZ7o",
            "https://youtu.be/10X1siLTuac",
            "https://youtu.be/3sE_YweJ4E4",
            "https://youtu.be/rsUnpWA_kRw",
            "https://youtu.be/YAyfr_mR9rk",
        );

        $select_index_movie = array_rand($arr_movie);
        $select_movie = $arr_movie[$select_index_movie];

        return view('auth.login', [
            'select_movie' => $select_movie,
        ]);
    }

3. IndexController와 AuthenticatedSessionController 중복 제거

위 유튜브 주소 랜덤 뽑는 부분이 IndexController와 AuthenticatedSessionController 에 중복되어 들어가네요. 이 중복을 해결하기 위해 또한번 도전해 봅니다.

가. 먼저 IndexController에 있는 유튜브 관련 코드 부분을 빼서 별도의 함수로 만들고, 원자리에 $select_movie = youtube(); 라고 넣었더니 오류가 뜨네요. 같은 클래스 안에 있는 함수인데도, 클래스 명을 꼭 붙여주어야 하는가 봅니다. (제가 class에 대해 제대로 공부해본 적이 없습니다.)

또 한가지. 함수명에 static 를 꼭 붙어주어야 하네요. 인스턴스를 생성하지 않고, 클래스에 있는 함수를 직접 쓰기 위해서는 static를 붙여주어야 한다는 이야기는 들어본 적 있습니다. ^^;

    public static function youtube() {
        $arr_movie = array(
            "https://youtu.be/KmafPs7Ljxw",
            "https://youtu.be/HrmWAdF_s6Y",
            "https://youtu.be/Dw1BhP7WJbo",
            "https://youtu.be/0snKAXOdY20",
            "https://youtu.be/_y8Rg4hgF1k",
            "https://youtu.be/vqT7ADQmZ7o",
            "https://youtu.be/10X1siLTuac",
            "https://youtu.be/3sE_YweJ4E4",
            "https://youtu.be/rsUnpWA_kRw",
            "https://youtu.be/YAyfr_mR9rk",
        );

        $select_index_movie = array_rand($arr_movie);

        return $arr_movie[$select_index_movie];
    }

    public function index()
    {
        $select_movie = IndexController::youtube();

        $categories = Category::all();
        $posts = Post::all();

나. 이제 AuthenticatedSessionController를 수정해 줍니다. 단, IndexController에 있는 함수를 쓰기 위해서는 맨 윗줄에 use App\Http\Controllers\IndexController; 도 추가해 주어야 합니다.

//맨 윗줄에 추가
use App\Http\Controllers\IndexController;

//create() 함수 수정
public function create()
    {
        $select_movie = IndexController::youtube();

        return view('auth.login', [
            'select_movie' => $select_movie,
        ]);
    }

4. login.blade.php의 css 수정

성공했다 생각하고 새로고침을 하니 회색 화면이 가리고 있네요. login.blade.php 파일을 보니, 로그인 화면을 auth-card라는 블레이드 파일이 또 감싸고 있네요.

그래서 auth-card.blade.php로 이동하여 아래 빨간색 부분을 지워버립니다.

이제 화면이 원하는 대로 제대로 보입니다. 성공!!!

🍺🍺 작업한 모든 소스는 아래 링크에서 확인하실 수 있습니다. 🍺🍺

https://github.com/mmssem/munghome

GitHub - mmssem/munghome

Contribute to mmssem/munghome development by creating an account on GitHub.

github.com

728x90

저작자표시

'라라벨(laravel)' 카테고리의 다른 글

멍멍홈->라라벨_16. 관리자 화면에서 게시글 수정하기 (2)	2022.10.05
멍멍홈->라라벨_15. 관리자 화면에서 전체 게시글 리스트 한번에 보기 (0)	2022.10.05
멍멍홈->라라벨_13. 로그인 구현을 위한 스타터키트 Breeze 설치 및 로그인 작업 (0)	2022.10.04
멍멍홈을 라라벨로 새로 만들기_12. (DB) DB 및 모델을 이용하여 구현 (0)	2022.10.04
멍멍홈을 라라벨로 새로 만들기_11. (DB) 기존 데이터 배열을 DB로 변환 (0)	2022.10.03

1. index.blade.php 수정

2. views/auth/login.blade.php 수정

3. IndexController와 AuthenticatedSessionController 중복 제거

4. login.blade.php의 css 수정

'라라벨(laravel)' 카테고리의 다른 글

티스토리툴바