kerbong
commented
2 years ago 34강
A Small JavaScript Dropdown Detour
_posts-header.blade.php 헤더 드롭다운메뉴 수정
-
<select>태그와<svg>태그 내용 주석처리 -
layout.blade.php파일 상단 마지막<link>태그 아래로 가기 -
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>붙여넣기 -
다시 header파일로 돌아와서
-
주석처리한 부분에 추가하기
- Categories 만 나오는지 확인하고
-
<button>Categories</button>에 click 이벤트 달기 -
<button @click="show = ! show">*안될경우@click=" alert('hi')"로 실행되는지 확인 -
스타일 및 배경 클릭 시 드롭다운 show옵션 false 적용, 주석처리 제거
<div x-data="{ show: false }" @click.away="show = false"> <button @click="show = ! show" class="py-2 pl-3 pr-9 text-sm font-semibold w-32 text-left inline-flex"> Categories <svg class="transform -rotate-90 absolute pointer-events-none" style="right: 12px;" width="22" height="22" viewBox="0 0 22 22"> <g fill="none" fill-rule="evenodd"> <path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z"> </path> <path fill="#222" d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"> </path> </g> </svg> </button> <div x-show="show" class="py-2 absolute bg-gray-100 w-full mt-2 rounded-xl"> @foreach ($categories as $category) <a href="/categories/{{ $category->slug }}" class="block text-left px-3 text-sm leading-6 hover:bg-blue-500 focus:bg-blue-500 hover:text-white focus:text-white"> {{ ucwords($category->name) }} </a> @endforeach </div> </div> </div>
web.php파일 수정 (카테고리 클릭하면 페이지 이동) 10-1.'categories/{category:slug}'부분 return에'currentCategory' => $category, 'categories' => Category::all(),추가하기 10-2.'authors/{author:username}'부분 return에, 'categories' => Category::all(),추가하기현재 클릭한 카테고리를 보여주기 11-1.
_post-header.blade.php파일에서 Category 를{{ isset($currentCategory) ? ucwords($currentCategory->name) : 'Categories' }}로 변경하기11-2, @foreach 바로 위에 전체보여줄 수 있는 a 태그 만들기
<a href="/" class="block text-left px-3 text-sm leading-6 hover:bg-blue-500 focus:bg-blue-500 hover:text-white focus:text-white"> All
11-3. @foreach 안의 내용에 현재 클릭된 카테고리 배경색 지정 class 추가
<a href="/categories/{{ $category->slug }}" class="block text-left px-3 text-sm leading-6 hover:bg-blue-500 focus:bg-blue-500 hover:text-white focus:text-white {{ isset($currentCategory) && $currentCategory->id === $category->id ? 'bg-blue-500 text-white' : '' }} "> {{ ucwords($category->name) }}
11-4. 다른 방법
{{ isset($currentCategory) && $currentCategory->is($category) ? 'bg-blue-500 text-white' : '' }}
kerbong
commented
2 years ago 35강
How to Extract a Dropdown Blade Component
드롭다운 부분을 컴포넌트로 만들기
-
34강의 dropdown 작업부분을
components/dropdown.blade.php에 옮기기 => 이렇게 하면<x-dropdown>으로 불러와서 틀을 재사용할 수 있음. -
그리고 dropdown 파일에는 trigger(무조건 보이는 버튼)와 slot (드롭다운메뉴) 만 넣어준다.
<div x-data="{ show: false }" @click.away="show = false">
<div @click="show = ! show">
{{ $trigger }}
</div>
<div x-show="show" class="py-2 absolute bg-gray-100 w-full mt-2 rounded-xl">
{{ $slot }}
</div>- posts-header파일에서
<button>태그에@click="show = ! show"지웠는지 확인!
-
드롭다운 메뉴의 각 아이템을 보여주는 부분도
dropdown-item.blade.php파일을 만들어 준다. -
svg (아래로 된 화살표처럼 생긴 녀석) 아이콘도
icon.blade.php라는 파일을 만들어서 분리해준다. -
컴포넌트 재사용 파일에서는 무조건 들어갈 반복적인 속성을 아래처럼 넣어준다.
<svg {{ $attributes(['class' => 'transform -rotate-90']) }} >
- 이런식으로 넣어야
태그를 재사용할 때 추가한 class와 기존에 넣어둔 클래스를 모두 사용할 수 있다.
-
재사용 컴포넌트에서
@if ( $name === "down-arrow" ) @endif처럼 조건문을 활용하여 넣어둔 내용 중 일부만 사용할 수도 있다. -
php에서는 문자열을 더할 때 .= 을 사용한다. 예시)
'안녕' . '하세요'=>안녕하세요예시)'안녕' . ' 하세요'=>안녕 하세요
- 영상 6분 9초 쯤에 나오는 문자열 더하는 부분에서 띄어쓰기와 +=인 줄 알고 상당한 시간을 허비했다...
x-dropdown-item을 posts-header에서@foreach로 사용할 때active를 태그에 추가하는 세 가지 방법.
8-1.문자열을 . 으로 더하는 방식
:active="request()->is('categories/' . $category->slug)"
8-2.문자열을 와일드 카드로 더하는 방식 (뒤에꺼가 있는지만 확인해라!)
:active="request()->is('*' . $category->slug)"
8-3.전체 주소를 php 문법을 포함해서 작성하는 방식
:active="request()->is('categories/{$category->slug}')"
-
영상에서는 3번을 활용하는데.. 나는 이상하게 잘 안돼서 1번을 사용함!
-
35강 변경된 코드 주소
https://github.com/kerbong/laravel_lecture/commit/1a28e659ae897a4a576c36ed01f829919acc5cb5
말랑한거봉님