Laravel-log-viewer: ๋กœ๊ทธ ์„ธ๋ถ€ ์ •๋ณด์—์„œ ํ…์ŠคํŠธ๋ฅผ ๋ณต์‚ฌํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 10์›” 30์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: rap2hpoutre/laravel-log-viewer

ํ•œ ๋ฒˆ ํด๋ฆญํ•˜๋ฉด ๋‹ซ๊ธฐ ๋˜๋Š” ์—ด๊ธฐ๊ฐ€ ํ† ๊ธ€๋ฉ๋‹ˆ๋‹ค.
๋กœ๊ทธ ๋ณด๊ธฐ ์„ธ๋ถ€ ์ •๋ณด ๋‚ด์—์„œ ํ…์ŠคํŠธ๋ฅผ ๋ณต์‚ฌํ•˜๊ฑฐ๋‚˜ ์„ ํƒํ•˜๋Š” ๊ฒƒ์€ ์ •๋ง ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ณด๊ธฐ๋ฅผ ๊ฒŒ์‹œํ•œ ํ›„

php artisan vendor:publish \
  --provider="Rap2hpoutre\LaravelLogViewer\LaravelLogViewerServiceProvider" \
  --tag=views

Resources/views/vendor/laravel-log-viewer/log.blade.php๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

๋ณ€ํ™”

$('.table-container tr').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

NS

$('.table-container button').on('click', function () {
        $('#' + $(this).data('display')).toggle();
      });

์ด์ œ ์ž‘์€ fa-search ๋ฒ„ํŠผ์ด ํ–‰์„ ํ™•์žฅํ•˜๋„๋ก ํ† ๊ธ€๋ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

<button type="button"
        class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2" 
        data-display="stack{{{$key}}}">
        <span class="fa fa-search"></span>
</button>

๋” ๋‚˜์€ UX๋ฅผ ์œ„ํ•ด Font Awesome 5+๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ fa fa-search ๋ฅผ fa fa-expand ๋˜๋Š” fas fa-expand-arrows-alt๋กœ ๋ณ€๊ฒฝ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋„ค ์ „์ ์œผ๋กœ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค! ๋‚˜๋Š” ์ด PR์„ ์ˆ˜๋ฝํ•˜์ง€ ๋ง์•˜์–ด์•ผ ํ–ˆ๋‹ค: https://github.com/rap2hpoutre/laravel-log-viewer/pull/91 ๐Ÿ˜…. ๊ทธ๋ž˜๋„ ๋ช‡ ๋ฒˆ์ด๋‚˜ ๋ฌผ์—ˆ๋‹ค. ์ง€๊ธˆ ์ œ๊ฑฐํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๋ถˆํ‰ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค... ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค!

ํ™•์žฅ ๋˜๋Š” ์ถ•์†Œํ•˜๋ ค๋ฉด ์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ์— ํ† ๊ธ€ ๋ฒ„ํŠผ์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ณด๊ธฐ๋ฅผ ๊ฒŒ์‹œํ•œ ํ›„

php artisan vendor:publish \
  --provider="Rap2hpoutre\LaravelLogViewer\LaravelLogViewerServiceProvider" \
  --tag=views

Resources/views/vendor/laravel-log-viewer/log.blade.php๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

๋ณ€ํ™”

$('.table-container tr').on('click', function () {
      $('#' + $(this).data('display')).toggle();
    });

NS

$('.table-container button').on('click', function () {
        $('#' + $(this).data('display')).toggle();
      });

์ด์ œ ์ž‘์€ fa-search ๋ฒ„ํŠผ์ด ํ–‰์„ ํ™•์žฅํ•˜๋„๋ก ํ† ๊ธ€๋ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

<button type="button"
        class="float-right expand btn btn-outline-dark btn-sm mb-2 ml-2" 
        data-display="stack{{{$key}}}">
        <span class="fa fa-search"></span>
</button>

๋” ๋‚˜์€ UX๋ฅผ ์œ„ํ•ด Font Awesome 5+๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ fa fa-search ๋ฅผ fa fa-expand ๋˜๋Š” fas fa-expand-arrows-alt๋กœ ๋ณ€๊ฒฝ ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰