15. Community show

readable 패키지 추가

readable

composer require pharaonic/laravel-readable

Community 컨트롤러 수정

public function show(Community $community)
{
  $posts = [];
  $joined = $community->users->contains(auth()->id());

  $community->loadCount('users');

  return view("communities.show", compact('community', 'posts', 'joined'));
}

show view 생성

// communities/show.blade.php
@extends('layouts.app')

@section('content')
    <section class="section">
        <div class="container">
            <div class="columns is-centered is-desktop">
                <div class="column is-8">
                    <p class="title">
                        <span class="mr-5">{{ $community->name }}</span>
                        <a href="{{ route($joined ? 'communities.leave' : 'communities.join', $community) }}"
                            class="button is-info is-rounded is-outlined has-text-weight-bold">{{ __($joined ? 'Leave' : 'Join') }}</a>
                    </p>
                    <p class="subtitle is-6">
                        communities/{{ $community->name }}
                    </p>
                    <div class="columns">
                        <div class="column is-8">
                            <nav class="panel has-background-white">
                                <div class="panel-block">
                                    <div class="buttons">
                                        <button
                                            class="button is-small is-info is-light is-inverted is-rounded has-text-weight-bold">{{ __('New') }}</button>
                                        <button
                                            class="button is-small is-info is-light is-inverted is-rounded has-text-weight-bold">{{ __('Top') }}</button>
                                    </div>
                                </div>

                                @forelse ($posts as $post)
                                    <div class="panel-block panel-icon-top">
                                        <span class="panel-icon">
                                            <a class="icon has-text-danger">
                                                <i class="far fa-caret-square-up fa-lg" aria-hidden="true"></i>
                                            </a>
                                            <span class="icon has-text-black has-text-weight-bold">
                                                {{ ReadableHumanNumber(0, true, 1) }}
                                            </span>
                                            <a class="icon has-text-info">
                                                <i class="far fa-caret-square-down fa-lg" aria-hidden="true"></i>
                                            </a>
                                        </span>

                                        <div class="pannel-content pl-2">
                                            <div class="mb-2 is-size-7 has-text-grey">
                                                Posted yeomc {{ ReadableDiffDateTime(now()) }}
                                            </div>
                                            <h5 class="title is-5 mb-3">post title</h5>
                                            <p>{{ Str::words('hi post description', 20, ' ...') }}</p>
                                            <div class="buttons are-small has-addons mt-2">
                                                <button class="button is-white has-text-weight-bold has-text-grey">
                                                    <span class="icon is-small">
                                                        <i class="far fa-comment-alt"></i>
                                                    </span>
                                                    <span>{{ ReadableHumanNumber(0, true, 1) }}
                                                        {{ __('Comments') }}</span>
                                                </button>
                                                <button class="button is-white has-text-weight-bold has-text-grey">
                                                    <span class="icon is-small">
                                                        <i class="far fa-edit"></i>
                                                    </span>
                                                    <span>{{ __('Edit') }}</span>
                                                </button>
                                                <button class="button is-white has-text-weight-bold has-text-grey">
                                                    <span class="icon is-small">
                                                        <i class="far fa-trash-alt"></i>
                                                    </span>
                                                    <span>{{ __('Delete') }}</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="section has-text-centered">
                                        <div class="title is-5">{{ _('There are no posts in this subreddit') }}</div>
                                        <div class="subtitle is-6">{{ _('Be the first to till this fertile land.') }}
                                        </div>
                                        <a class="button is-info is-rounded is-fullwidth has-text-weight-bold">
                                            {{ __('Add a Post') }}
                                        </a>
                                    </div>
                                @endforelse
                            </nav>
                        </div>
                        <div class="column">
                            <nav class="panel is-info has-background-white">
                                <p class="panel-heading is-size-6">
                                    {{ __('About Community') }}
                                </p>
                                <div class="panel-block">
                                    <div>
                                        <p class="mb-3">{{ $community->description }}</p>
                                        <p class="has-text-weight-bold">
                                            {{ ReadableHumanNumber($community->users_count, $community->users_count > 1000, $community->users_count > 1000 ? 1 : 0) }}
                                        </p>
                                        <p class="has-text-weight-bold is-size-7">{{ __('Members') }}</p>
                                    </div>
                                </div>
                                <div class="panel-block">
                                    <span class="panel-icon">
                                        <i class="far fa-calendar-check" aria-hidden="true"></i>
                                    </span>
                                    {{ __('Created') }} {{ $community->created_at->format('Y년 n월 j일') }}
                                </div>
                                <div class="panel-block">
                                    <a class="button is-info is-rounded is-fullwidth has-text-weight-bold">
                                        {{ __('Create Post') }}
                                    </a>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

css 추가

.panel-icon-top {
  align-items: start !important;
}

변경된 css build

npm run dev

git commit

git add .
git commit -m "feat: create community show view"