메인 갤러리 수정

app/Exceptions/Handler.php

@@ -2,11 +2,16 @@
 
 namespace App\Exceptions;
 
+use App\Models\Setting;
+use Carbon\Carbon;
+use ErrorException;
 use Exception;
 use Illuminate\Auth\Access\AuthorizationException;
 use Illuminate\Auth\AuthenticationException;
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Session\TokenMismatchException;
@@ -17,6 +22,7 @@ use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException;
 use Throwable;
 
+
 class Handler extends ExceptionHandler
 {
     /**
@@ -58,7 +64,7 @@ class Handler extends ExceptionHandler
      * @return void
      * @throws Throwable
      */
-/*
+    /*
         public function report(Throwable $e)
         {
             if (app()->bound('sentry') && $this->shouldReport($e)) {
@@ -66,21 +72,32 @@ class Handler extends ExceptionHandler
             }
             parent::report($e);
         }
-*/
+    */
     /**
      * Render an exception into an HTTP response.
      *
      * @param Request $request
      * @param Throwable $exception
-     * @return JsonResponse|Response
+     * @return RedirectResponse|Response
      * @throws Throwable
      */
-/*
+
     public function render($request, Throwable $exception)
     {
         DB::rollBack();
 
-        logger($exception);
+        // Page Header
+        $page = [
+            'code' => 'error',
+            'title' => '',
+            'subTitle' => '',
+            'description' => '',
+            'link' => '/',
+            'is_main' => true
+        ];
+
+        $pages = config('pages');
+
 
         if ($request->ajax() || $request->wantsJson() || $request->expectsJson()) {
             $response = $this->errorJson($exception);
@@ -105,12 +122,24 @@ class Handler extends ExceptionHandler
                 'link' => ''
             ],
             'errorCode' => $errorCode,
-            'exception' => $exception
+            'exception' => $exception,
+            'now' => (string)Carbon::now(),
+            'page' => $page,
+            'pages' => $pages,
+            'settings' => $this->setSettings()
         ];
 
+        if ($exception instanceof UnauthorizedHttpException
+            || $exception instanceof AuthenticationException
+            || $exception instanceof AuthorizationException
+            || $exception instanceof VerifyCsrfToken
+            || $exception instanceof TokenMismatchException) {
+            return redirect()->route('cms.login');
+        }
+
         return response()->view('errors', $data, $errorCode);
     }
-*/
+
 
     /**
      * Render an exception into an HTTP response.
@@ -119,7 +148,7 @@ class Handler extends ExceptionHandler
      * @return bool|JsonResponse
      * @throws Throwable
      */
-    private function errorJson(Eexception $exception) {
+    private function errorJson(Throwable $exception) {
         $errorCode = 500;
 
         if (method_exists($exception, 'getStatusCode')) {
@@ -214,4 +243,20 @@ class Handler extends ExceptionHandler
 
         return false;
     }
+
+    private function setSettings() {
+
+        // 전역변수 설정
+        $_settings = Setting::all();
+
+        $settings = [];
+        if ($_settings) {
+            foreach ($_settings as $row) {
+                $settings[$row['key']] = $row['value'];
+            }
+        }
+        //logger($settings);
+
+        return (object)$settings;
+    }
 }

app/Http/Controllers/Admin/BoardController.php

@@ -8,7 +8,7 @@ use App\Libs\TraitBoard;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Contracts\View\View;
+use Illuminate\Support\Facades\View;
 
 class BoardController extends Controller
 {
@@ -46,9 +46,9 @@ class BoardController extends Controller
         $this->page['title'] = $data['board']->name;
         $this->page['subTitle'] = $data['board']->name;
 
-        $view = 'admin.board.index';
+        $view = 'admin.board.'. $data['board']->skin .'.index';
-        if ($code == 'inquiry') {
+        if (!View::exists($view)) {
-            $view = 'admin.board.inquiry.index';
+            $view = 'admin.board.default.index';
         }
 
         return $this->setView($view, $data);
@@ -72,9 +72,9 @@ class BoardController extends Controller
         $this->page['title'] = $data['board']->name;
         $this->page['subTitle'] = $data['board']->name . ' 상세';
 
-        $view = 'admin.board.view';
+        $view = 'admin.board.'. $data['board']->skin .'.view';
-        if ($code == 'inquiry') {
+        if (!View::exists($view)) {
-            $view = 'admin.board.inquiry.view';
+            $view = 'admin.board.default.view';
         }
 
         return $this->setView($view, compact('data'));
@@ -99,7 +99,12 @@ class BoardController extends Controller
         $this->page['title'] = $data->board->name;
         $this->page['subTitle'] = $data->board->name . ($data->mode == 'modify' ? ' 수정' : ' 등록');
 
-        return $this->setView('admin.board.create', compact('data'));
+        $view = 'admin.board.'. $data['board']->skin .'.create';
+        if (!View::exists($view)) {
+            $view = 'admin.board.default.create';
+        }
+
+        return $this->setView($view, compact('data'));
     }
 
     /**

app/Http/Controllers/Admin/IndexController.php

@@ -13,23 +13,13 @@ class IndexController extends Controller
 
     // Page Header
     protected $page = [
-        'code' => 'cms.home',
+        'code' => 'cms.index',
-        'title' => '청담K',
+        'title' => '',
         'icon' => 'fa-home',
         'description' => '',
         'link' => '/cms'
     ];
 
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        // $this->middleware('auth');
-    }
-
     /**
      * Show the application dashboard.
      *
@@ -39,6 +29,8 @@ class IndexController extends Controller
     {
         $data = [];
 
+        $this->page['title'] = config('app.name');
+
         return $this->setView('admin.index', $data);
     }
 }

app/Http/Controllers/Front/IndexController.php

@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Front;
 use App\Http\Controllers\Controller;
 use Illuminate\Contracts\View\View;
 use App\Libs\TraitBoard;
+use Illuminate\Http\Request;
 
 class IndexController extends Controller
 {
@@ -24,16 +25,64 @@ class IndexController extends Controller
      *
      * @Verb : GET
      * @Path : /
+     * @param Request $request
      * @return View
      */
-    public function index()
+    public function index(Request $request)
     {
-        // $data = [
+        $data = $this->getPostList($request, 'gallery', 2);
-        //     'notice' => $this->getLatest('notice'),
+        logger(json_decode(json_encode($data), true));
-        //     'news' => $this->getLatest('news'),
+        logger($data['data']->total());
-        // ];
 
-        // return $this->setView('index', $data);
+        $pages['total'] = $data['data']->total();
-        return $this->setView('index');
+        $pages['items'] = $data['data']->perPage() * $data['data']->currentPage();
+        $pages['mores']  = $data['data']->hasMorePages();
+
+        return $this->setView('index', ['list' => $data['data'], 'pages' => $pages]);
+    }
+
+    /**
+     * 메인 갤러리 목록
+     *
+     * @Verb : GET
+     * @Path : /
+     * @param Request $request
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function galleryList(Request $request)
+    {
+        $result = $this->getPostList($request, 'gallery', 4);
+//        logger(json_decode(json_encode($result), true));
+
+        $lists = [];
+        $pages = [];
+        if (!empty($result['data'])) {
+            $data = $result['data'];
+            $lists = $data->toArray();
+
+            $pages['total'] = $data->total();
+            $pages['items'] = $data->perPage() * $data->currentPage();
+            $pages['mores']  = $data->hasMorePages();
+        }
+
+        return $this->sendJson('데이터 추출 완료', 'success', ['lists' => $lists['data'], 'pages' => $pages]);
+    }
+
+    /**
+     * 메인 갤러리 상세
+     *
+     * @Verb : GET
+     * @Path : /main/gallery
+     * @param Request $request
+     * @return View
+     */
+    public function galleryView(Request $request)
+    {
+        $uid = $request->get('uid', '');
+
+        $data = $this->showPost($request, 'gallery', $uid);
+        logger(['uid' => $uid]);
+
+        return $this->sendJson('데이터 추출 완료', 'success', $data);
     }
 }

app/Libs/TraitBoard.php

@@ -147,6 +147,7 @@ trait TraitBoard
 
         $board = $this->getBoardInfo($code);
         $data = $this->getPostInfo($uid);
+        logger(json_decode(json_encode($data), true));
 
         if ($data) {
             $prev = BoardArticle::query()
@@ -231,8 +232,7 @@ trait TraitBoard
                 'mode' => 'required|string',
                 'code' => 'required|string|max:20',
                 'board_id' => 'required|integer',
-                'subject' => 'required|string|max:255',
+                'subject' => 'required|string|max:255'
-                'content' => 'required|string'
             ];
 
             $boardCode = $request->code;

config/pages.php

@@ -1,9 +1,5 @@
 <?php
 return [
-    'gallery' => '갤러리소개',
-    'greeting' => '대표인사말',
-    'groups' => '조직도',
-    'visit' => '오시는길',
     'privacy' => '개인정보처리방침',
     'terms' => '이용약관',
 ];

public/css/admin.css

@@ -360,6 +360,7 @@ textarea.required {
 
 .brand-link .brand-text {
     font-size: 1.4rem;
+    font-weight: 600;
     line-height: 1.0rem;
 }
 
@@ -408,7 +409,7 @@ textarea.required {
 .nav-link.active:not(.open):before {
     content: '●';
     position: absolute;
-    top: calc(50% - 9px);
+    top: calc(50% - 11px);
     right: 10px;
     font-size: 1.0rem;
     height: 10px;
@@ -483,13 +484,13 @@ textarea.required {
 
 .fileSize {
     display: inline-block;
-    padding-right: 5px;
+    padding-left: 3px;
+    font-size: 0.95rem;
 }
 
 .fileSize em {
     color: #f30;
     font-weight: 400;
-    font-size: 0.95rem;
     font-style: normal;
 }
 
@@ -638,3 +639,30 @@ textarea.required {
 .editorImage {
     margin-bottom: 10px 0;
 }
+
+.preview-images {
+    list-style: none;
+    margin: 5px 5px;
+    padding: 0;
+    display:inline-block;
+}
+
+.preview-images li {
+    position: relative;
+    display: inline-block;
+    list-style: none;
+    margin: 5px 5px;
+    padding: 0;
+}
+.preview-images li .image-item {
+    position: relative;
+    height: 100px;
+    border-radius: 5px;
+    z-index: 1;
+}
+.preview-images li .image-del {
+    position: absolute;
+    z-index: 999;
+    top: 0.3rem;
+    right: 0.3rem;
+}

public/css/main.css

@@ -0,0 +1,771 @@
+.main-portfolio .container,
+.main-introduce .container,
+.main-inquiry .container {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+/* [ Gallery ] */
+.g-main {
+    padding: 0;
+}
+
+.g-main figure .g-img,
+.g-main figure .img-wrapper img {
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: all .7s ease-in-out;
+    -moz-transition: all .7s ease-in-out;
+    -o-transition: all .7s ease-in-out;
+    -ms-transition: all .7s ease-in-out;
+    transition: all .7s ease-in-out;
+    height: 225px;
+}
+
+.g-main figure:hover .g-img,
+.g-main figure:hover .img-wrapper img {
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: scale(1.2, 1.2);
+    -o-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
+    -webkit-transform: scale(1.2, 1.2);
+    -webkit-transition: all .7s ease-in-out;
+    -moz-transition: all .7s ease-in-out;
+    -o-transition: all .7s ease-in-out;
+    -ms-transition: all .7s ease-in-out;
+    transition: all .7s ease-in-out;
+}
+
+.g-main figure .over-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 13% 11%;
+    width: 78%;
+    height: 78%;
+}
+
+.g-main figure:hover .over-box {
+    background-color: rgba(0,0,0,1);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    -webkit-transition: all .7s ease-in-out;
+    -moz-transition: all .7s ease-in-out;
+    -o-transition: all .7s ease-in-out;
+    -ms-transition: all .7s ease-in-out;
+    transition: all .7s ease-in-out;
+}
+
+.g-main figcaption {
+    padding: 20%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    opacity: 0;
+    -webkit-transition: all .7s ease-in-out;
+    -moz-transition: all .7s ease-in-out;
+    -o-transition: all .7s ease-in-out;
+    -ms-transition: all .7s ease-in-out;
+    transition: all .7s ease-in-out;
+    text-align: center;
+}
+
+.g-main figure:hover figcaption {
+    opacity: 1;
+    -webkit-transition: all .7s ease-in-out;
+    -moz-transition: all .7s ease-in-out;
+    -o-transition: all .7s ease-in-out;
+    -ms-transition: all .7s ease-in-out;
+    transition: all .7s ease-in-out;
+}
+
+.g-main figcaption .inner-box {
+    margin-top: 0;
+    position: relative;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+}
+
+.g-main h5.figure {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.2em;
+    color: #ffffff;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.g-main .line {
+    width: 20px;
+    border-color: #606060;
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+
+.g-main p.figure {
+    font-size: 12px;
+    color: #a3a2a2;
+    position: relative;
+    left: 0;
+    bottom: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    margin-top: 20px;
+    margin-bottom: 0;
+    fill: #a3a2a2;
+}
+
+.next-item {
+    display: none;
+}
+
+.gallery-more {
+    font-size: 12px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid transparent;
+    text-align: center;
+    padding-bottom: 2rem;
+}
+
+.gallery-more:hover {
+    color: #000;
+    background-color: #fff;
+    border-color: transparent;
+}
+
+.gallery-more em {
+    color: #c30;
+    font-style: normal;
+    font-weight: bold;
+}
+
+@media only screen and (max-width:991px) {
+    .g-main .line,
+    .g-main p.figure {
+        margin-top: 16px;
+    }
+}
+@media only screen and (max-width:767px) {
+    .g-main figcaption {
+        padding: 15%;
+    }
+    .g-main h5.figure {
+        -webkit-line-clamp: 1;
+    }
+    .g-main .line,
+    .g-main p.figure {
+        margin-top: 16px;
+    }
+}
+
+.g-main .g-list { padding-left: 0; padding-right: 0; }
+.g-main .g-list .grid { float: left; }
+.g-main .g-list .grid.empty-txt { width: 100%!important; max-width: 100%!important; text-align: center!important; padding-top: 50px!important; padding-bottom: 50px!important; background-color: transparent!important; }
+
+
+.g-main .g-list .grid figure,
+.g-main .g-list .grid .img-wrapper { position: relative; overflow: hidden; }
+.g-main .g-list .grid .img-wrapper > .g-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.g-main .g-list .grid .figure:nth-child(0).hide + .figure,
+.g-main .g-list .grid .figure:nth-child(0).hide + .line,
+.g-main .g-list .grid .figure:nth-child(0).hide + .view-text { margin-top: 0!important; }
+
+.g-main .g-list[data-align="left"] figcaption { text-align: left; }
+.g-main .g-list[data-align="center"] figcaption { text-align: center; }
+.g-main .g-list[data-align="right"] figcaption { text-align: right; }
+
+.g-main[data-gpd="0"] .g-list .grid { padding: 0; }
+.g-main[data-gpd="1"] .g-list .grid { padding: 0 1px; }
+.g-main[data-gpd="2"] .g-list .grid { padding: 0 2px; }
+.g-main[data-gpd="3"] .g-list .grid { padding: 0 3px; }
+.g-main[data-gpd="4"] .g-list .grid { padding: 0 4px; }
+.g-main[data-gpd="5"] .g-list .grid { padding: 0 5px; }
+.g-main[data-gpd="6"] .g-list .grid { padding: 0 6px; }
+.g-main[data-gpd="7"] .g-list .grid { padding: 0 7px; }
+.g-main[data-gpd="8"] .g-list .grid { padding: 0 8px; }
+.g-main[data-gpd="9"] .g-list .grid { padding: 0 9px; }
+.g-main[data-gpd="10"] .g-list .grid { padding: 0 10px; }
+.g-main[data-gpd="11"] .g-list .grid { padding: 0 11px; }
+.g-main[data-gpd="12"] .g-list .grid { padding: 0 12px; }
+.g-main[data-gpd="13"] .g-list .grid { padding: 0 13px; }
+.g-main[data-gpd="14"] .g-list .grid { padding: 0 14px; }
+.g-main[data-gpd="15"] .g-list .grid { padding: 0 15px; }
+.g-main[data-gpd="16"] .g-list .grid { padding: 0 16px; }
+.g-main[data-gpd="17"] .g-list .grid { padding: 0 17px; }
+.g-main[data-gpd="18"] .g-list .grid { padding: 0 18px; }
+.g-main[data-gpd="19"] .g-list .grid { padding: 0 19px; }
+
+@media (min-width: 992px) {
+    .g-main[data-gcol="1"] .g-list .grid { width: 100%; }
+    .g-main[data-gcol="2"] .g-list .grid { width: 50%; }
+    .g-main[data-gcol="3"] .g-list .grid { width: 33.33333333333333%; }
+    .g-main[data-gcol="4"] .g-list .grid { width: 25%; }
+    .g-main[data-gcol="5"] .g-list .grid { width: 20%; }
+    .g-main[data-gcol="6"] .g-list .grid { width: 16.666666666666664%; }
+
+    .g-main[data-gcol="2"] .g-list .grid:nth-child(2n + 3) { clear: left; }
+    .g-main[data-gcol="3"] .g-list .grid:nth-child(3n + 4) { clear: left; }
+    .g-main[data-gcol="4"] .g-list .grid:nth-child(4n + 5) { clear: left; }
+    .g-main[data-gcol="5"] .g-list .grid:nth-child(5n + 6) { clear: left; }
+    .g-main[data-gcol="6"] .g-list .grid:nth-child(6n + 7) { clear: left; }
+
+    .g-main[data-gpd="1"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="1"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="1"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="1"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="1"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="1"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 2px; }
+    .g-main[data-gpd="2"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="2"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="2"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="2"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="2"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="2"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 4px; }
+    .g-main[data-gpd="3"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="3"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="3"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="3"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="3"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="3"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 6px; }
+    .g-main[data-gpd="4"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="4"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="4"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="4"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="4"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="4"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 8px; }
+    .g-main[data-gpd="5"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="5"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="5"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="5"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="5"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="5"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 10px; }
+    .g-main[data-gpd="6"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="6"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="6"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="6"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="6"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="6"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 12px; }
+    .g-main[data-gpd="7"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="7"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="7"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="7"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="7"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="7"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 14px; }
+    .g-main[data-gpd="8"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="8"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="8"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="8"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="8"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="8"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 16px; }
+    .g-main[data-gpd="9"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="9"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="9"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="9"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="9"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="9"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 18px; }
+    .g-main[data-gpd="10"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="10"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="10"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="10"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="10"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="10"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 20px; }
+    .g-main[data-gpd="11"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="11"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="11"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="11"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="11"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="11"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 22px; }
+    .g-main[data-gpd="12"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="12"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="12"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="12"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="12"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="12"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 24px; }
+    .g-main[data-gpd="13"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="13"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="13"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="13"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="13"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="13"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 26px; }
+    .g-main[data-gpd="14"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="14"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="14"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="14"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="14"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="14"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 28px; }
+    .g-main[data-gpd="15"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="15"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="15"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="15"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="15"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="15"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 30px; }
+    .g-main[data-gpd="16"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="16"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="16"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="16"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="16"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="16"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 32px; }
+    .g-main[data-gpd="17"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="17"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="17"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="17"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="17"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="17"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 34px; }
+    .g-main[data-gpd="18"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="18"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="18"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="18"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="18"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="18"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 36px; }
+    .g-main[data-gpd="19"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="19"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="19"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="19"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="19"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="19"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 38px; }
+    .g-main[data-gpd="20"][data-gcol="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="20"][data-gcol="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="20"][data-gcol="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="20"][data-gcol="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="20"][data-gcol="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="20"][data-gcol="6"] .g-list .grid:nth-child(n + 7) { margin-top: 40px; }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .g-main[data-gcol][data-gcol-t="1"] .g-list .grid { width: 100%; }
+    .g-main[data-gcol][data-gcol-t="2"] .g-list .grid { width: 50%; }
+    .g-main[data-gcol][data-gcol-t="3"] .g-list .grid { width: 33.33333333333333%; }
+    .g-main[data-gcol][data-gcol-t="4"] .g-list .grid { width: 25%; }
+    .g-main[data-gcol][data-gcol-t="5"] .g-list .grid { width: 20%; }
+    .g-main[data-gcol][data-gcol-t="6"] .g-list .grid { width: 16.666666666666664%; }
+
+    .g-main[data-gcol][data-gcol-t="2"] .g-list .grid:nth-child(2n + 3) { clear: left; }
+    .g-main[data-gcol][data-gcol-t="3"] .g-list .grid:nth-child(3n + 4) { clear: left; }
+    .g-main[data-gcol][data-gcol-t="4"] .g-list .grid:nth-child(4n + 5) { clear: left; }
+    .g-main[data-gcol][data-gcol-t="5"] .g-list .grid:nth-child(5n + 6) { clear: left; }
+    .g-main[data-gcol][data-gcol-t="6"] .g-list .grid:nth-child(6n + 7) { clear: left; }
+
+    .g-main[data-gpd="1"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="1"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="1"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="1"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="1"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="1"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 2px; }
+    .g-main[data-gpd="2"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="2"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="2"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="2"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="2"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="2"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 4px; }
+    .g-main[data-gpd="3"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="3"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="3"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="3"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="3"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="3"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 6px; }
+    .g-main[data-gpd="4"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="4"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="4"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="4"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="4"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="4"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 8px; }
+    .g-main[data-gpd="5"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="5"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="5"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="5"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="5"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="5"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 10px; }
+    .g-main[data-gpd="6"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="6"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="6"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="6"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="6"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="6"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 12px; }
+    .g-main[data-gpd="7"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="7"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="7"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="7"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="7"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="7"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 14px; }
+    .g-main[data-gpd="8"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="8"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="8"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="8"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="8"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="8"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 16px; }
+    .g-main[data-gpd="9"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="9"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="9"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="9"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="9"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="9"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 18px; }
+    .g-main[data-gpd="10"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="10"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="10"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="10"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="10"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="10"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 20px; }
+    .g-main[data-gpd="11"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="11"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="11"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="11"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="11"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="11"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 22px; }
+    .g-main[data-gpd="12"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="12"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="12"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="12"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="12"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="12"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 24px; }
+    .g-main[data-gpd="13"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="13"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="13"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="13"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="13"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="13"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 26px; }
+    .g-main[data-gpd="14"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="14"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="14"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="14"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="14"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="14"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 28px; }
+    .g-main[data-gpd="15"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="15"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="15"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="15"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="15"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="15"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 30px; }
+    .g-main[data-gpd="16"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="16"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="16"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="16"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="16"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="16"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 32px; }
+    .g-main[data-gpd="17"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="17"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="17"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="17"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="17"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="17"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 34px; }
+    .g-main[data-gpd="18"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="18"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="18"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="18"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="18"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="18"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 36px; }
+    .g-main[data-gpd="19"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="19"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="19"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="19"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="19"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="19"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 38px; }
+    .g-main[data-gpd="20"][data-gcol-t="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="20"][data-gcol-t="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="20"][data-gcol-t="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="20"][data-gcol-t="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="20"][data-gcol-t="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="20"][data-gcol-t="6"] .g-list .grid:nth-child(n + 7) { margin-top: 40px; }
+}
+
+@media (max-width: 767px) {
+    .g-main[data-gcol][data-gcol-m="1"] .g-list .grid { width: 100%; }
+    .g-main[data-gcol][data-gcol-m="2"] .g-list .grid { width: 50%; }
+    .g-main[data-gcol][data-gcol-m="3"] .g-list .grid { width: 33.33333333333333%; }
+    .g-main[data-gcol][data-gcol-m="4"] .g-list .grid { width: 25%; }
+    .g-main[data-gcol][data-gcol-m="5"] .g-list .grid { width: 20%; }
+    .g-main[data-gcol][data-gcol-m="6"] .g-list .grid { width: 16.666666666666664%; }
+
+    .g-main[data-gcol][data-gcol-m="2"] .g-list .grid:nth-child(2n + 3) { clear: left; }
+    .g-main[data-gcol][data-gcol-m="3"] .g-list .grid:nth-child(3n + 4) { clear: left; }
+    .g-main[data-gcol][data-gcol-m="4"] .g-list .grid:nth-child(4n + 5) { clear: left; }
+    .g-main[data-gcol][data-gcol-m="5"] .g-list .grid:nth-child(5n + 6) { clear: left; }
+    .g-main[data-gcol][data-gcol-m="6"] .g-list .grid:nth-child(6n + 7) { clear: left; }
+
+    .g-main[data-gpd="1"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="1"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="1"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="1"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="1"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="1"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 2px; }
+    .g-main[data-gpd="2"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="2"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="2"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="2"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="2"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="2"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 4px; }
+    .g-main[data-gpd="3"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="3"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="3"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="3"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="3"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="3"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 6px; }
+    .g-main[data-gpd="4"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="4"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="4"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="4"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="4"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="4"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 8px; }
+    .g-main[data-gpd="5"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="5"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="5"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="5"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="5"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="5"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 10px; }
+    .g-main[data-gpd="6"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="6"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="6"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="6"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="6"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="6"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 12px; }
+    .g-main[data-gpd="7"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="7"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="7"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="7"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="7"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="7"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 14px; }
+    .g-main[data-gpd="8"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="8"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="8"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="8"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="8"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="8"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 16px; }
+    .g-main[data-gpd="9"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="9"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="9"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="9"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="9"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="9"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 18px; }
+    .g-main[data-gpd="10"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="10"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="10"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="10"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="10"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="10"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 20px; }
+    .g-main[data-gpd="11"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="11"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="11"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="11"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="11"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="11"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 22px; }
+    .g-main[data-gpd="12"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="12"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="12"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="12"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="12"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="12"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 24px; }
+    .g-main[data-gpd="13"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="13"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="13"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="13"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="13"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="13"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 26px; }
+    .g-main[data-gpd="14"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="14"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="14"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="14"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="14"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="14"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 28px; }
+    .g-main[data-gpd="15"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="15"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="15"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="15"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="15"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="15"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 30px; }
+    .g-main[data-gpd="16"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="16"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="16"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="16"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="16"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="16"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 32px; }
+    .g-main[data-gpd="17"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="17"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="17"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="17"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="17"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="17"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 34px; }
+    .g-main[data-gpd="18"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="18"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="18"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="18"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="18"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="18"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 36px; }
+    .g-main[data-gpd="19"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="19"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="19"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="19"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="19"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="19"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 38px; }
+    .g-main[data-gpd="20"][data-gcol-m="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="20"][data-gcol-m="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="20"][data-gcol-m="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="20"][data-gcol-m="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="20"][data-gcol-m="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="20"][data-gcol-m="6"] .g-list .grid:nth-child(n + 7) { margin-top: 40px; }
+}
+
+@media (max-width: 450px) {
+    .g-main[data-gcol][data-gcol-s="1"] .g-list .grid { width: 100%; }
+    .g-main[data-gcol][data-gcol-s="2"] .g-list .grid { width: 50%; }
+    .g-main[data-gcol][data-gcol-s="3"] .g-list .grid { width: 33.33333333333333%; }
+    .g-main[data-gcol][data-gcol-s="4"] .g-list .grid { width: 25%; }
+    .g-main[data-gcol][data-gcol-s="5"] .g-list .grid { width: 20%; }
+    .g-main[data-gcol][data-gcol-s="6"] .g-list .grid { width: 16.666666666666664%; }
+
+    .g-main[data-gcol][data-gcol-s="2"] .g-list .grid:nth-child(2n + 3) { clear: left; }
+    .g-main[data-gcol][data-gcol-s="3"] .g-list .grid:nth-child(3n + 4) { clear: left; }
+    .g-main[data-gcol][data-gcol-s="4"] .g-list .grid:nth-child(4n + 5) { clear: left; }
+    .g-main[data-gcol][data-gcol-s="5"] .g-list .grid:nth-child(5n + 6) { clear: left; }
+    .g-main[data-gcol][data-gcol-s="6"] .g-list .grid:nth-child(6n + 7) { clear: left; }
+
+    .g-main[data-gpd="1"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="1"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="1"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="1"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="1"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="1"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 2px; }
+    .g-main[data-gpd="2"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="2"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="2"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="2"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="2"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="2"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 4px; }
+    .g-main[data-gpd="3"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="3"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="3"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="3"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="3"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="3"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 6px; }
+    .g-main[data-gpd="4"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="4"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="4"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="4"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="4"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="4"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 8px; }
+    .g-main[data-gpd="5"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="5"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="5"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="5"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="5"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="5"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 10px; }
+    .g-main[data-gpd="6"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="6"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="6"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="6"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="6"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="6"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 12px; }
+    .g-main[data-gpd="7"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="7"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="7"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="7"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="7"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="7"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 14px; }
+    .g-main[data-gpd="8"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="8"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="8"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="8"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="8"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="8"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 16px; }
+    .g-main[data-gpd="9"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="9"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="9"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="9"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="9"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="9"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 18px; }
+    .g-main[data-gpd="10"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="10"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="10"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="10"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="10"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="10"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 20px; }
+    .g-main[data-gpd="11"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="11"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="11"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="11"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="11"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="11"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 22px; }
+    .g-main[data-gpd="12"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="12"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="12"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="12"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="12"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="12"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 24px; }
+    .g-main[data-gpd="13"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="13"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="13"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="13"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="13"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="13"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 26px; }
+    .g-main[data-gpd="14"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="14"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="14"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="14"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="14"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="14"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 28px; }
+    .g-main[data-gpd="15"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="15"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="15"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="15"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="15"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="15"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 30px; }
+    .g-main[data-gpd="16"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="16"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="16"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="16"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="16"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="16"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 32px; }
+    .g-main[data-gpd="17"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="17"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="17"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="17"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="17"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="17"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 34px; }
+    .g-main[data-gpd="18"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="18"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="18"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="18"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="18"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="18"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 36px; }
+    .g-main[data-gpd="19"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="19"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="19"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="19"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="19"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="19"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 38px; }
+    .g-main[data-gpd="20"][data-gcol-s="1"] .g-list .grid:nth-child(n + 2),
+    .g-main[data-gpd="20"][data-gcol-s="2"] .g-list .grid:nth-child(n + 3),
+    .g-main[data-gpd="20"][data-gcol-s="3"] .g-list .grid:nth-child(n + 4),
+    .g-main[data-gpd="20"][data-gcol-s="4"] .g-list .grid:nth-child(n + 5),
+    .g-main[data-gpd="20"][data-gcol-s="5"] .g-list .grid:nth-child(n + 6),
+    .g-main[data-gpd="20"][data-gcol-s="6"] .g-list .grid:nth-child(n + 7) { margin-top: 40px; }
+}
+

public/js/app.js

@@ -1,7 +1,169 @@
-$(function() {
+//-------------------------------------------------
+// ajaxSetup 세팅
+//-------------------------------------------------
+var errorForm = null;
+var openAjaxCount = 0;
+var closeAjaxCount = 0;
+var openBlockUI = 0;
 
+$.ajaxSetup({
+    cache: false,
+    dataType: 'json',
+    headers: {
+        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+    }
+});
+
+$(document).ajaxError(handleAjaxError);
+$(document).ajaxComplete(function(event, xhr,settings){
+    if(!settings.hideLoading) closeAjaxLoading();
+    errorForm = null;
+});
+
+$(document).ajaxSend(function (event, xhr, settings) {
+    xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
+
+    resetAjaxFormErrorMessage();
+
+    /*
+    if(!settings.hideLoading) {
+        if(typeof settings.bindForm == "undefined") openAjaxLoading(null);
+        else openAjaxLoading(settings.bindForm);
+    }
+    */
+});
+
+$(document).ajaxSuccess(function(event, xhr, settings) {
+    // if(!settings.hideLoading) closeAjaxLoading();
+
+    errorForm = null;
 });
 
+// Ajax 에러 헨들러
+function handleAjaxError(event, xhr, status, err) {
+    if (xhr.status === 401) {
+        // 로그아웃 된 상태
+        window.location.reload();
+    } else if (xhr.status === 419) {
+        alert('페이지가 만료되었습니다. 페이지를 다시 새로고침 합니다.');
+        window.location.reload();
+    } else if (xhr.status === 422) {
+        // Validaton 실패
+        var data = JSON.parse(xhr.responseText);
+        showAjaxFormErrorMessage(data);
+    }
+    else {
+        console.log(err);
+        if(err !== 'abort') alert(xhr.responseText);
+    }
+    closeAjaxLoading();
+    errorForm = null;
+}
+
+function showAjaxFormErrorMessage(data) {
+    var fistElement = null;
+    var message = "";
+
+    for (var i in data.errors) {
+        var name = i;
+        var element = null;
+
+        if (errorForm == null) {
+            element = $("[name=" + name + "]:not(:disabled)");
+            errorForm = element.closest("form");
+        } else {
+            element = errorForm.find("[name=" + name + "]:not(:disabled)");
+        }
+
+        if (element.length === 0) {
+            alert(message);
+            return;
+        }
+
+        // var row = element.closest(".form-group", errorForm);
+        // if(row.length === 0) row = element.closest("div.row", errorForm);
+
+        errorForm.find("[type=submit]").prop("disabled", false);
+
+        var dialog = element.closest(".modal-dialog");
+        if (dialog.length > 0) {
+            dialog.find(".modal-footer").find("[type=submit]").prop("disabled", false);
+        }
+
+        element.addClass("is-invalid");
+
+        message = $.isArray(data.errors[i]) ? data.errors[i][0] : data.errors[i];
+
+        //element.tooltip('enable');
+        element.addClass('has-tooltip');
+        element.attr('data-toggle', 'tooltip');
+        element.attr('data-title', message);
+
+        if (fistElement === null) {
+            fistElement = element;
+        }
+    }
+
+    if (fistElement !== null) {
+        fistElement.focus();
+    }
+}
+function resetAjaxFormErrorMessage() {
+    if (errorForm != null) {
+        errorForm.find(".is-invalid").removeClass("is-invalid");
+        errorForm.find(".has-tooltip").removeClass('has-tooltip');
+        //errorForm.find('[data-toggle="tooltip"]').tooltip('disable');
+    }
+}
+
+function openAjaxLoading(form) {
+    if (openAjaxCount > 0) return;
+
+    //console.log("openAjaxCount : "+openAjaxCount);
+    if (openAjaxCount === closeAjaxCount) {
+        openAjaxCount++;
+        if (form != null) {
+            //form.off("upload.progress");
+            form.bind("upload.progress", function (e, data) {
+                //console.log($("#blockUITitle"));
+                //Object {total: 38336387, upload: 38336387, percent: 100}
+                $(".blockUITitle:last-child").text(Math.floor(data.percent) + "% 업르드중... 잠시만 기다리세요...");
+                if (data.percent >= 100) {
+                    form.off("upload.progress");
+                }
+            });
+        }
+
+        $.blockUI({
+            message: '<span class="text-white"><i class="fal fa-compass fa-4x fa-spin"></i><div class="blockUITitle">Please wait.</div></span>',
+            css: {border: '0', background: 'none'},
+            baseZ: 9000
+        });
+
+        // 에러가 날경우 닫지 못하는 문제로 15초가 넘으면 닫도록 처리함
+        // 오래 걸리는 작업때문에 주석 > 푸시등
+        /*
+        openBlockUI = setTimeout(function(){
+            closeAjaxLoading();
+            alert("[에러!!] 요청한 내용을 처리하지 못했습니다.")
+        }, 5000);
+        */
+    }
+}
+
+function closeAjaxLoading() {
+    if (openAjaxCount === 0 || closeAjaxCount > 0) return;
+
+    closeAjaxCount++;
+    if (openAjaxCount === closeAjaxCount) {
+        clearTimeout(openBlockUI);
+        $.unblockUI();
+        openAjaxCount = 0;
+        closeAjaxCount = 0;
+    }
+}
+//-------------------------------------------------
+
 var extExecutes = "php,php3,php4,phps,phtm,phtml,htm,html,sh,ph,inc,cgi,pl,tpl,exe,com,bat,dll,cpl,asp,aspx,vbs,java,jsp";
 var extImages = "gif,jpg,jpeg,png,bmp";
 

public/js/main.js

@@ -0,0 +1,116 @@
+$(document).ready(function() {
+    resizeGallery();
+
+    $('.gallery-more').css('cursor', 'pointer').on('click', function() {
+        $('.next-item').slideDown('fast');
+        $(this).remove();
+    });
+
+    $('#writeForm').submit(function () {
+        if (!$("#name").checkEmpty('이름을 입력해 주세요.')) return false;
+        if (!$("#phone").checkEmpty('연락처를 입력해 주세요.')) return false;
+        if (!$("#email").checkEmpty('이메일을 입력해 주세요.')) return false;
+        if (!$("#content").checkEmpty('문의내용을 입력해 주세요.')) return false;
+        $.post($(this).attr('action'), $(this).serialize(), function(result) {
+            alert(result.message);
+            if (result.code == 'success') {
+                window.location.reload();
+            }
+        }).fail(function(result) {
+            console.log(result);
+            alert('문의 등록에 실패했습니다!!\n잠시 후 다시 시도해 주세요.');
+        });
+
+        return false;
+    });
+});
+
+$(window).on('resize', function() {
+    resizeGallery();
+});
+
+function resizeGallery() {
+    $('.g-main').each(function() {
+        if($(this).find('.empty-txt').length > 0 || $(this).find('.grid').length == 0) return;
+
+        var gel = $(this).find('.grid').eq(0);
+        var gw = parseFloat(gel[0].getBoundingClientRect().width);
+        var gpl = parseFloat(gel.css('padding-left').replace(/[^0-9]/g,''));
+        var gpr = parseFloat(gel.css('padding-right').replace(/[^0-9]/g,''));
+        var g_img_height = (gw - (gpl+gpr)) * parseFloat(1);
+
+        $(this).find('.grid .g-img').css('height', g_img_height + 'px');
+    });
+}
+
+$(document).ready(function() {
+    var currentPage = 1;
+
+    function getGalleryData(uid) {
+        $.get('/main/gallery/view', { 'uid': uid }, function(result) {
+            var data = result.data;
+            if (result.code == 'success' && data.assets && data.assets.length > 0) {
+                var assets = data.assets;
+                console.log(result.code);
+                var gallery = [];
+                $.each(assets, function(idx, asset) {
+                    var item = {
+                        'src': "/image/"+ asset.uid,
+                        'thumb': "/image/rate/h80/"+ asset.uid,
+                        'caption': data.subject,
+                    };
+                    gallery.push(item);
+                });
+                Fancybox.show(gallery, {
+                    // Your options go here
+                });
+            }
+        });
+    }
+
+
+    function getGalleryList() {
+        $.get('/main/gallery', { 'page': currentPage }, function(result) {
+            if (!result.data.lists.length) {
+                return false;
+            }
+
+            var lists = result.data.lists;
+            var pages = result.data.pages;
+
+            $.each(lists, function(i, list) {
+                var galleryBox = $('#galleryBox');
+                galleryBox.find('.portfolio').attr('data-uid', list.uid);
+                galleryBox.find('.portfolio-img').html('<img src="/image/600x600/'+ list.assets[0].uid +'" />');
+                galleryBox.find('.portfolio-title').html(list.subject);
+                galleryBox.find('.portfolio-desc').html(list.content.replaceAll('\r\n', '<br>'));
+                $('#portfolio-list').append(galleryBox.html());
+            });
+
+            $('.portfolio').on('click', function(e) {
+                e.preventDefault();
+                getGalleryData($(this).data('uid'));
+            });
+
+            if (pages.mores) {
+                $('.now-count').html(pages.items);
+                $('.max-count').html(pages.total);
+            } else {
+                $('#galleryMore').remove();
+            }
+
+            currentPage++;
+
+        }).fail(function(result) {
+            console.log(result.responseJSON);
+        });
+    }
+
+    getGalleryList();
+
+    $('#galleryMore').on('click', function(e) {
+        e.preventDefault();
+        getGalleryList();
+    })
+
+});

resources/views/admin/board/default/create.blade.php

@@ -87,12 +87,12 @@
         <div class="card-footer">
             <div class="row">
                 <span>
-                    <button type="submit" class="btn btn-success">@if($data->mode == 'modify') 수정 @else 등록 @endif</button>
+                    <button type="submit" class="btn btn-success"><i class="fas fa-pen"></i> @if($data->mode == 'modify') 수정 @else 등록 @endif</button>
                     @if($data->mode == 'modify')
-                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete">삭제</a>
+                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete"><i class="far fa-trash-alt"></i> 삭제</a>
                     @endif
                 </span>
-                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"> 목록 </a></span>
+                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"><i class="fas fa-list-alt"></i>  목록 </a></span>
             </div>
         </div>
     </div>

resources/views/admin/board/gallery/create.blade.php

@@ -0,0 +1,291 @@
+@extends('layouts.admin')
+
+@section('content')
+    <form id="writeForm" method="post" accept-charset="utf-8" enctype="multipart/form-data" action="{{ route('cms.board.store', null, false) }}" onsubmit="return false;">
+    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+    <input type="hidden" name="mode" value="{{ $data->mode }}" />
+    <input type="hidden" name="code" value="{{ $data->code }}" />
+    <input type="hidden" name="board_id" value="{{ $data->board_id }}" />
+    <input type="hidden" name="uid" value="{{ $data->uid }}" />
+    <input type="hidden" name="category" value="{{ $data->category }}" />
+    <div class="card card-default">
+        <div class="card-body">
+            <div class="form-group">
+                <label for="input-subject">제목 입력</label>
+                <input type="text" class="form-control" name="subject" id="input-subject" required value="{{ $data->subject }}" />
+            </div>
+            <div class="form-group">
+                <label for="input-content">서브 타이틀</label>
+                <textarea class="form-control autosize" name="content" id="input-content" rows="3">{{ $data->content }}</textarea>
+            </div>
+            <div class="form-group" style="position:relative;">
+                <label for="form-control" id="fileBtn">이미지 추가</label>
+                <span class="fileSize mobileNone">(<em id="fileSize">0</em>)</span>
+                <div id="dropzone" class="frame-wrap clearfix">
+                    <div id="dropzoneDesc" class="dropzone-desc">여기를 클릭하거나 파일을 마우스로 드래그하여 업로드할 수도있습니다.</div>
+                    <input type="file" name="selectFiles[]" id="selectFiles" class="dropzone-file" multiple="multiple" accept="image/gif,image/jpeg,image/png" />
+                    <div id="dropzoneList" class="dropzone-list">
+                        <ul id="previewFiles" class="preview-images">
+                            @if ($data->assets)
+                                @foreach ($data->assets as $i => $asset)
+                                    <li class="old-file" data-uid="{{ $asset->uid }}" data-size="{{ $asset->asset->size }}">
+                                        <a href="{{ route('image', [$asset->uid], false) }}" data-fancybox="gallery"><img class="image-item" src="{{ route('image.thumbnail.rate', ['h100', $asset->uid], false) }}" alt="{{ $asset->uid }}" /></a>
+                                        <img src="/assets/img/button/btn_delete.gif" class="image-del" alt="삭제" />
+                                    </li>
+                                @endforeach
+                            @endif
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="card-footer">
+            <div class="row">
+                <span>
+                    <button type="submit" class="btn btn-success"><i class="fas fa-pen"></i> @if($data->mode == 'modify') 수정 @else 등록 @endif</button>
+                    @if($data->mode == 'modify')
+                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete"><i class="far fa-trash-alt"></i> 삭제</a>
+                    @endif
+                </span>
+                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"><i class="fas fa-list-alt"></i>  목록 </a></span>
+            </div>
+        </div>
+    </div>
+    </form>
+@stop
+
+@push('scripts')
+    <script type="text/javascript">
+        function gotoList() {
+            window.location.href = '{{ route('cms.board.list', [$data->code], false) }}';
+        }
+
+        var fileIndex = 0; // 파일 번호
+        var totalSize = 0; // 전체 파일용량
+        var fileList = []; // 파일 목록
+        var sizeList = []; // 파일용량 목록
+
+        // 드래그앤드롭 파일 첨부
+        function fileDropDown() {
+            var dropzone = $("#dropzone");
+            dropzone.on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
+            });
+            dropzone.on('dragleave', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
+            });
+            dropzone.on('dragover', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
+            });
+            dropzone.on('drop', function (e) {
+                e.preventDefault();
+                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
+
+                var files = e.originalEvent.dataTransfer.files;
+                if (files != null) {
+                    if (files.length < 1) {
+                        console.log("파일이 선택되지 않았습니다.");
+                        return false;
+                    } else {
+                        selectFiles(files);
+                    }
+                } else {
+                    console.log("ERROR!!");
+                }
+            });
+        }
+
+        function toggleFileBox() {
+            if ($('#previewFiles li').length > 0) {
+                $('.dropzone-desc').hide();
+                $('.dropzone-list').show();
+            } else {
+                $('.dropzone-desc').show();
+                $('.dropzone-list').hide();
+            }
+        }
+
+        function setFileSize() {
+            var strSize = 0;
+            if (!isNaN(totalSize)){
+                strSize = getFileSize(totalSize);
+            }
+
+            $('#fileSize').html(strSize);
+        }
+
+        // 첨부파일 추가
+        function addFile(fSource, fName, fSize, isImage) {
+            if (isImage === -1) {
+                return false;
+            }
+
+            var appendHtml = $('<li class="new-file" data-index="'+ fileIndex +'"></li>');
+            $('#previewFiles').append(appendHtml);
+
+            var reader = new FileReader();
+            reader.onload = function(e) {
+                appendHtml.append(
+                    '<a href="'+ e.target.result +'" data-fancybox="gallery"><img class="image-item" src="'+ e.target.result +'" alt="'+ fName +'" /></a>'+
+                    '<img class="image-del" src="/assets/img/button/btn_delete.gif" alt="삭제" />'
+                );
+            };
+            reader.readAsDataURL(fSource);
+
+            totalSize += fSize;
+
+            sizeList[fileIndex] = fSize;
+            fileList[fileIndex] = fSource;
+
+            fileIndex++;
+
+            setFileSize();
+            toggleFileBox();
+        }
+
+        // 첨부파일 션택 완료
+        function selectFiles(files) {
+            if (files == null) {
+                console.log('파일이 선택되지 않았습니다.');
+                return false;
+            }
+
+            for (var i = 0; i < files.length; i++) {
+                var fileName = files[i].name;
+                var fileNameArr = fileName.split('\.');
+                var fileExtension = fileNameArr[fileNameArr.length - 1];
+                var fileSize = files[i].size;
+
+                var isImage = $.inArray(fileExtension, extImages.split(','));
+                if (fileSize <= 0) {
+                    alert('비어 있는 파일입니다.');
+                    return;
+                } else if ($.inArray(fileExtension, extExecutes.split(',')) !== -1) {
+                    alert('업로드가 허용되지 않는 파일입니다.');
+                } else {
+                    addFile(files[i], fileName, fileSize, $.inArray(fileExtension, extImages.split(',')));
+                }
+            }
+        }
+
+        $(document).ready(function() {
+            fileDropDown();
+
+            $('#selectFiles').bind('change', function() {
+                selectFiles(this.files);
+                $(this).val('');
+            });
+
+            $('#fileBtn').click(function() {
+                $('#selectFiles').click();
+            });
+
+            if ($('.old-file').length) {
+                $('.old-file').each(function() {
+                    totalSize += parseInt($(this).data('size'));
+                });
+            }
+
+            setFileSize();
+            toggleFileBox();
+
+            // 드래그존 클릭시 파일 선택
+            $('#dropzone').on('click', function(e) {
+                var targetID = e.target.id;
+                console.log(e.target);
+                if (targetID == 'dropzone' || targetID == 'dropzoneDesc' || targetID == 'dropzoneList' || targetID == 'previewFiles') {
+                    $('#selectFiles').click();
+                }
+            });
+
+            // 파일 삭제
+            $('#previewFiles').on('click', '.image-del', function(e) {
+                var objItem = $(this).parent();
+
+                objItem.remove();
+
+                if (objItem.hasClass('old-file')) {
+                    $('#writeForm').append('<input type="hidden" name="delFiles[]" value="'+ objItem.data('uid') +'" />');
+                    totalSize -= parseInt(objItem.data('size'));
+                } else {
+                    var fIndex = objItem.data('index');
+
+                    totalSize -= parseInt(sizeList[fIndex]);
+
+                    delete fileList[fIndex];
+                    delete sizeList[fIndex];
+                }
+
+                setFileSize();
+                toggleFileBox();
+            });
+
+            $('input[name=subject]').focus();
+
+            $('#writeForm').submit(function (e) {
+                e.preventDefault();
+
+                if (!$('#input-subject').checkEmpty('제목을 입력해 주세요.')) return false;
+
+                if ($('input[name=mode]').val() == 'add' && !fileList.length) {
+                    alert('이미지를 업로드해 주세요.');
+                    return false;
+                }
+
+                var formData = new FormData(this);
+                var uploadFiles = Object.keys(fileList);
+                for (var i = 0; i < uploadFiles.length; i++) {
+                    formData.append('files[]', fileList[uploadFiles[i]]);
+                }
+
+                $.ajax({
+                    url   : $(this).attr('action'),
+                    type  : 'POST',
+                    data : formData,
+                    enctype : 'multipart/form-data',
+                    processData : false,
+                    contentType : false,
+                    dataType : 'json',
+                    cache : false,
+                    async : false,
+                    success: function(result) {
+                        if (result.code == 'success') {
+                            if ($(this).find("input[name='uid']").val()) {
+                                window.location.reload();
+                            } else {
+                                gotoList();
+                            }
+                        } else {
+                            alert(result.message);
+                        }
+                    }
+                });
+            });
+
+            $('.btn-delete').click(function() {
+                if(confirm('게시물을 삭제하시겠습니까?')) {
+                    $.post($(this).attr('href'), {'uid': $('#writeForm input[name=uid]').val() }, function (result) {
+                        if (result.code = 'success') {
+                            gotoList();
+                        } else {
+                            alert(result.message);
+                        }
+                    }).fail(function(result) {
+                        var data = result.responseJSON;
+                        if (!data.success) {
+                            alert(data.message);
+                        }
+                    });
+                }
+
+                return false;
+            });
+        });
+    </script>
+@endpush

resources/views/admin/board/gallery/index.blade.php

@@ -0,0 +1,57 @@
+@extends('layouts.admin')
+
+@section('content')
+    <div class="card">
+        <div class="card-body">
+            <form id="search-form">
+                <input type="hidden" name="field" value="subject" />
+                <div class="form-row">
+                    <div class="col-auto form-inline">
+                        <div class="input-group">
+                            <input type="text" name="word" class="form-control" size="20" value="{{ @$search['word'] }}" placeholder="검색어 입력" />
+                            <div class="input-group-append">
+                                <button type="submit" class="btn btn-info"><i class="fas fa-search"></i> 검색</button>
+                            </div>
+                            <div class="input-group-append">
+                                <a href="{{ route('cms.board.create', [$code], false) }}" class="btn btn-danger"><i class="fas fa-pen"></i> 등록</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-body pl-3 pr-3 pt-1 pb-1">
+            <table class="table text-center">
+                <thead>
+                <tr>
+                    <th class="width-50">순번</th>
+                    <th class="text-left">제목</th>
+                    <th class="width-70 mobileNone">작성자</th>
+                    <th class="width-70">등록일</th>
+                </tr>
+                </thead>
+                <tbody>
+                @foreach($data as $i => $row)
+                    <tr>
+                        <td>{{ $row->number }}</td>
+                        <td class="ellipsis ellipsis-wide text-left"><span><a href="{{ route('cms.board.modify', [$code, $row->uid], false) }}" class="view-link">{{ Str::limit($row->subject, 100, ' ‥') }}</a></span></td>
+                        <td class="nowrap mobileNone"><span>{{ $row->name }}</span></td>
+                        <td class="nowrap">{{ str_replace('-', '.', substr($row->created_at, 0, 10)) }}</td>
+                    </tr>
+                @endforeach
+                @if(!$data->count())
+                    <tr>
+                        <td colspan="4" class="none-data">데이터가 없습니다.</td>
+                    </tr>
+                @endif
+                </tbody>
+            </table>
+        </div>
+        {{ $data->render('admin.paginator') }}
+    </div>
+@stop
+
+@push('scripts')
+@endpush

resources/views/admin/board/inquiry/create.blade.php

@@ -0,0 +1,402 @@
+@extends('layouts.admin')
+
+@section('content')
+    <form id="writeForm" method="post" accept-charset="utf-8" enctype="multipart/form-data" action="{{ route('cms.board.store', null, false) }}" onsubmit="return false;">
+    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+    <input type="hidden" name="mode" value="{{ $data->mode }}" />
+    <input type="hidden" name="code" value="{{ $data->code }}" />
+    <input type="hidden" name="board_id" value="{{ $data->board_id }}" />
+    <input type="hidden" name="uid" value="{{ $data->uid }}" />
+    <input type="hidden" name="category" value="{{ $data->category }}" />
+    <div class="card card-default">
+        <div class="card-body">
+            <div class="form-group">
+                <label for="input-subject">제목</label>
+                <input type="text" class="form-control" name="subject" id="input-subject" required value="{{ $data->subject }}" />
+            </div>
+            <div class="form-group">
+                <label for="input-content">내용</label>
+                <div id="editor"></div>
+                <textarea class="form-control autosize" name="content" id="input-content" rows="8" placeholder="내용을 입력해 주세요." style="display:none;">{{ $data->content }}</textarea>
+            </div>
+            @if($data->code == 'news')
+            <div class="form-group">
+                <label for="input-image">목록 이미지</label>
+                <div class="custom-file">
+                    <input type="file" name="image" id="input-image" class="custom-file-input" accept="image/gif,image/jpeg,image/png">
+                    <label class="custom-file-label" for="input-image">이미지 선택</label>
+                </div>
+            </div>
+            @if ($data->image)
+            <div class="form-group">
+                <div class="form-group-box list-image-del">
+                    <i class="fas fa-trash" title="삭제"></i>
+                    <a href="/image/{{ $data->image }}" data-fancybox="gallery-list"><span class="prev-image">{{ $data->asset->orgin_name }}</span></a>
+                </div>
+            </div>
+            @endif
+            @endif
+            <div class="form-group" style="position:relative;">
+                <label for="form-control" id="fileBtn">첨부파일</label>
+                <span class="fileSize mobileNone">(<em id="fileSize">0</em>)</span>
+                <div id="dropzone" class="frame-wrap clearfix">
+                    <div id="dropzoneDesc" class="dropzone-desc">여기를 클릭하거나 파일을 마우스로 드래그하여 업로드할 수 있습니다.</div>
+                    <input type="file" name="selectFiles[]" id="selectFiles" class="dropzone-file" multiple="multiple" />
+                    <div id="dropzoneList" class="dropzone-list">
+                        <ul id="previewFiles" class="preview-files">
+                            @if ($data->assets)
+                                @foreach ($data->assets as $i => $asset)
+                                    <li class="old-file" data-uid="{{ $asset->uid }}" data-size="{{ $asset->asset->size }}">
+                                        <i class="fas fa-trash" title="삭제"></i>
+                                        @if($asset->asset->width && $asset->asset->height)
+                                            <a href="{{ route('download', [$asset->uid], false) }}" class="file-item" data-fancybox="gallery">{{ $asset->asset->orgin_name }} ({{ human_filesize($asset->asset->size) }})</a>
+                                        @else
+                                            <a href="{{ route('image', [$asset->uid], false) }}" class="file-item">{{ $asset->asset->orgin_name }} ({{ human_filesize($asset->asset->size) }})</a>
+                                        @endif
+                                    </li>
+                                @endforeach
+                            @endif
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="notice">옵션 설정</label>
+                <div class="form-group-box">
+                    <div class="custom-control custom-checkbox custom-control-inline">
+                        <input type="checkbox" id="notice" class="custom-control-input" name="notice" value="1" {{ $data->notice ? 'checked="checked "' : '' }}/>
+                        <label for="notice" class="custom-control-label">공지글</label>
+                    </div>
+                </div>
+            </div>
+            @if($data->uid)
+            <div class="form-group">
+                <label for="view_count">조회수</label>
+                <input type="text" class="form-control" id="view_count" disabled="disabled" value="{{ $data->view_count }}" />
+            </div>
+            <div class="form-group">
+                <label for="input-name">작성자</label>
+                <input type="text" class="form-control" name="name" id="input-name" disabled="disabled" value="{{ $data->name }}" />
+            </div>
+            <div class="form-group">
+                <label for="created_at">작성일시</label>
+                <input type="text" class="form-control" id="created_at" disabled="disabled" value="{{ $data->created_at }}" />
+            </div>
+            @endif
+        </div>
+        <div class="card-footer">
+            <div class="row">
+                <span>
+                    <button type="submit" class="btn btn-success"><i class="fas fa-pen"></i> @if($data->mode == 'modify') 수정 @else 등록 @endif</button>
+                    @if($data->mode == 'modify')
+                        <a href="{{ route('cms.board.delete', null, false) }}" class="btn btn-secondary ml-2 btn-delete"><i class="far fa-trash-alt"></i> 삭제</a>
+                    @endif
+                </span>
+                <span><a href="javascript:;" onclick="gotoList();" class="btn btn-primary btn-list ml-2"><i class="fas fa-list-alt"></i>  목록 </a></span>
+            </div>
+        </div>
+    </div>
+    </form>
+@stop
+
+@push('styles')
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.css">
+@endpush
+
+@push('scripts')
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-bs4.min.js"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/summernote@0.8.20/dist/lang/summernote-ko-KR.min.js"></script>
+    <script type="text/javascript">
+        function gotoList() {
+            window.location.href = '{{ route('cms.board.list', [$data->code], false) }}';
+        }
+
+        var fileIndex = 0; // 파일 번호
+        var totalSize = 0; // 전체 파일용량
+        var fileList = []; // 파일 목록
+        var sizeList = []; // 파일용량 목록
+
+        // 드래그앤드롭 파일 첨부
+        function fileDropDown() {
+            var dropzone = $("#dropzone");
+            dropzone.on('dragenter', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
+            });
+            dropzone.on('dragleave', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
+            });
+            dropzone.on('dragover', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                dropzone.css({'background-color': '#FFEFEE', 'border': '1px dashed #999'});
+            });
+            dropzone.on('drop', function (e) {
+                e.preventDefault();
+                dropzone.css({'background-color': '#F3F3F3', 'border': '1px solid #e5e5e5'});
+
+                var files = e.originalEvent.dataTransfer.files;
+                if (files != null) {
+                    if (files.length < 1) {
+                        console.log("파일이 선택되지 않았습니다.");
+                        return false;
+                    } else {
+                        selectFiles(files);
+                    }
+                } else {
+                    console.log("ERROR!!");
+                }
+            });
+        }
+
+        function toggleFileBox() {
+            if ($('#previewFiles li').length > 0) {
+                $('.dropzone-desc').hide();
+                $('.dropzone-list').show();
+            } else {
+                $('.dropzone-desc').show();
+                $('.dropzone-list').hide();
+            }
+        }
+
+        function setFileSize() {
+            var strSize = getFileSize(totalSize);
+
+            $('#fileSize').html(strSize);
+        }
+
+        // 첨부파일 추가
+        function addFile(fSource, fName, fSize, isImage) {
+            var appendHtml = $('<li class="new-file" data-index="'+ fileIndex +'"><i class="fas fa-trash"></i></li>');
+
+            if (isImage !== -1) {
+                appendHtml.append('<a href="#" class="file-item" data-fancybox="gallery">'+ fName +' ('+ getFileSize(fSize) +')</a>');
+                $('#previewFiles').append(appendHtml);
+
+                var reader = new FileReader();
+                reader.onload = function(e) {
+                    appendHtml.find('a').attr('href', e.target.result);
+                };
+                reader.readAsDataURL(fSource);
+            } else {
+                appendHtml.append('<span class="file-item">'+ fName +' ('+ getFileSize(fSize) +')</span>');
+                $('#previewFiles').append(appendHtml);
+            }
+
+            totalSize += fSize;
+
+            sizeList[fileIndex] = fSize;
+            fileList[fileIndex] = fSource;
+
+            fileIndex++;
+
+            setFileSize();
+            toggleFileBox();
+        }
+
+        // 첨부파일 션택 완료
+        function selectFiles(files) {
+            if (files == null) {
+                console.log('파일이 선택되지 않았습니다.');
+                return false;
+            }
+
+            for (var i = 0; i < files.length; i++) {
+                var fileName = files[i].name;
+                var fileNameArr = fileName.split('\.');
+                var fileExtension = fileNameArr[fileNameArr.length - 1];
+                var fileSize = files[i].size;
+
+                if (fileSize <= 0) {
+                    alert('비어 있는 파일입니다.');
+                    return;
+                } else if ($.inArray(fileExtension, extExecutes.split(',')) !== -1) {
+                    alert('업로드가 허용되지 않는 파일입니다.');
+                } else {
+                    addFile(files[i], fileName, fileSize, $.inArray(fileExtension, extImages.split(',')));
+                }
+            }
+        }
+
+        $(document).ready(function() {
+            fileDropDown();
+
+            $('#selectFiles').bind('change', function() {
+                selectFiles(this.files);
+                $(this).val('');
+            });
+
+            $('#fileBtn').click(function() {
+                $('#selectFiles').click();
+            });
+
+            if ($('.old-file').length) {
+                $('.old-file').each(function() {
+                    totalSize += parseInt($(this).data('size'));
+                });
+            }
+
+            setFileSize();
+            toggleFileBox();
+
+            // 드래그존 클릭시 파일 선택
+            $('#dropzone').on('click', function(e) {
+                var targetID = e.target.id;
+                console.log(e.target);
+                if (targetID == 'dropzone' || targetID == 'dropzoneDesc' || targetID == 'dropzoneList' || targetID == 'previewFiles') {
+                    $('#selectFiles').click();
+                }
+            });
+
+            // 파일 삭제
+            $('.list-image-del').on('click', '.fa-trash', function(e) {
+                var objItem = $(this).parent();
+
+                objItem.remove();
+
+                $('#writeForm').append('<input type="hidden" name="delImage" value="1" />');
+            });
+
+            // 파일 삭제
+            $('#previewFiles').on('click', '.fa-trash', function(e) {
+                var objItem = $(this).parent();
+
+                objItem.remove();
+
+                if (objItem.hasClass('old-file')) {
+                    $('#writeForm').append('<input type="hidden" name="delFiles[]" value="'+ objItem.data('uid') +'" />');
+                    totalSize -= parseInt(objItem.data('size'));
+                } else {
+                    var fIndex = objItem.data('index');
+
+                    totalSize -= parseInt(sizeList[fIndex]);
+
+                    delete fileList[fIndex];
+                    delete sizeList[fIndex];
+                }
+
+                setFileSize();
+                toggleFileBox();
+            });
+
+            $('#editor').html($('textarea[name=content]').val());
+            var $editor = $('#editor').summernote({
+                height: 300,
+                placeholder: '내용을 입력해 주세요.',
+                dialogsInBody: true,
+                dialogsFade: true,
+                codeviewFilter: false,
+                codeviewIframeFilter: true,
+                lang: 'ko-KR',
+                toolbar: [
+                    ['fontsize', ['fontsize']],
+                    ['font', ['bold', 'italic', 'underline']],
+                    ['font', ['strikethrough', 'superscript', 'subscript']],
+                    ['color', ['color']],
+                    ['para', ['ul', 'ol', 'paragraph', 'height']],
+                    ['insert', ['table', 'picture', 'video', 'link', 'hr']],
+                    ['font', ['undo', 'redo', 'clear']],
+                    ['view', ['fullscreen', 'codeview', 'help']]
+                ],
+                callbacks: {
+                    onImageUpload: function (files) {
+                        for (var i = 0; i < files.length; i++) {
+                            //if (i > 10) {
+                            //    alert('Only 10 images can be registered.');
+                            //    return;
+                            //}
+                            sendEditorImage(this, files[i]);
+                        }
+                    },
+                    onPaste: function (e) {
+                        var clipboardData = e.originalEvent.clipboardData;
+                        if (clipboardData && clipboardData.items && clipboardData.items.length) {
+                            var item = clipboardData.items[0];
+                            if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
+                                e.preventDefault();
+                            }
+                        }
+                    }
+                }
+            });
+
+            if ($('input[name=subject]').length) {
+                $('input[name=subject]').focus();
+            } else if ($('#editor').length) {
+                $('#editor').summernote('focus');
+            } else if ($('textarea[name=content]').length) {
+                $('textarea[name=content]').focus();
+            }
+
+            $('#writeForm').submit(function (e) {
+                e.preventDefault();
+
+                if ($('#input-subject').length) {
+                    if (!$('#input-subject').checkEmpty('제목을 입력해 주세요.')) return false;
+                }
+
+                if ($('#editor').length) {
+                    $('#input-content').val($('#editor').summernote('code'));
+                    if ($('#editor').summernote('isEmpty')) {
+                        alert('내용을 입력해 주세요.');
+                        $('#editor').summernote('focus');
+                        return false;
+                    }
+                } else if (!$('#input-content').checkEmpty('내용을 입력해 주세요.')) {
+                    return false;
+                }
+
+                var formData = new FormData(this);
+                var uploadFiles = Object.keys(fileList);
+                for (var i = 0; i < uploadFiles.length; i++) {
+                    formData.append('files[]', fileList[uploadFiles[i]]);
+                }
+
+                $.ajax({
+                    url   : $(this).attr('action'),
+                    type  : 'POST',
+                    data : formData,
+                    enctype : 'multipart/form-data',
+                    processData : false,
+                    contentType : false,
+                    dataType : 'json',
+                    cache : false,
+                    async : false,
+                    success: function(result) {
+                        if (result.code == 'success') {
+                            if ($(this).find("input[name='uid']").val()) {
+                                window.location.reload();
+                            } else {
+                                gotoList();
+                            }
+                        } else {
+                            alert(result.message);
+                        }
+                    }
+                });
+            });
+
+            $('.btn-delete').click(function() {
+                if(confirm('게시글을 삭제하시겠습니까?')) {
+                    $.post($(this).attr('href'), {'uid': $('#writeForm input[name=uid]').val() }, function (result) {
+                        if (result.code = 'success') {
+                            gotoList();
+                        } else {
+                            alert(result.message);
+                        }
+                    }).fail(function(result) {
+                        var data = result.responseJSON;
+                        if (!data.success) {
+                            alert(data.message);
+                        }
+                    });
+                }
+
+                return false;
+            });
+        });
+    </script>
+@endpush

resources/views/board/default/index.blade.php

@@ -8,9 +8,9 @@
             <div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
             <div class="header-mobile-logo d-block d-xl-none"><img src="/images/word-logo-white.png" class="img-fluid"></div>
         </div>
-        <div class="board-links">
+        <div class="board-links">0
             <a href="{{ route('board.list', ['notice'], false) }}"@if($board->code == 'notice') class="active"@endif><div>공지사항</div></a>
-            <a href="{{ route('board.list', ['news'], false) }}"@if($board->code == 'news') class="active"@endif><div>뉴스</div></a>
+            <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
             <a href="{{ route('board.create', ['inquiry'], false) }}"@if($board->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
         </div>
     </div>

resources/views/board/default/view.blade.php

@@ -10,7 +10,7 @@
         </div>
         <div class="board-links">
             <a href="{{ route('board.list', ['notice'], false) }}"@if($data->code == 'notice') class="active"@endif><div>공지사항</div></a>
-            <a href="{{ route('board.list', ['news'], false) }}"@if($data->code == 'news') class="active"@endif><div>뉴스</div></a>
+            <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
             <a href="{{ route('board.create', ['inquiry'], false) }}"@if($data->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
         </div>
     </div>

resources/views/board/gallery/index.blade.php

@@ -0,0 +1,71 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="d-flex bg-white">
+    <div class="left-image-section board-left-section flex-column d-none d-xl-flex">
+        <div class="page-header">
+            <div class="menu-root d-none d-xl-block">{{ $page['title'] }}@if($page['subTitle']) <i class="fa-solid fa-chevron-right"></i> {{ $page['subTitle'] }}@endif</div>
+            <div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
+            <div class="header-mobile-logo d-block d-xl-none"><img src="/images/word-logo-white.png" class="img-fluid"></div>
+        </div>
+        <div class="board-links">
+            <a href="{{ route('board.list', ['notice'], false) }}"@if($board->code == 'notice') class="active"@endif><div>공지사항</div></a>
+            <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
+            <a href="{{ route('board.create', ['inquiry'], false) }}"@if($board->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
+        </div>
+    </div>
+    <div class="board-section news-list">
+        @if($data)
+            <section class="news-column">
+                @foreach($data as $i => $row)
+                    @if($i > 0 && $i % 2 == 0)
+            </section>
+            <section class="news-column">
+                @endif
+                <div class="news-item">
+                    <a href="{{ route('board.view', [$board->code, $row->uid], false) }}">
+                        <div class="img-containter-fit"><img src="@if($row->image){{ route('image.thumbnail.rate', ['w800', $row->image], false) }}@else{{ '/images/no-img.png' }}@endif" class="img-fluid" onerror="this.src='/images/no-img.png'"/></div>
+                        <div class="font-16 news-title cut-text">{{ $row->subject }}</div>
+                        <div class="font-14 news-date">{{ date('Y.m.d', strtotime($row->created_at)) }}</div>
+                    </a>
+                </div>
+                @endforeach
+            </section>
+        @else
+            <div class="none-data">게시글이 없습니다.</div>
+        @endif
+   </div>
+</div>
+@endsection
+
+@push('style')
+<link rel="stylesheet" type="text/css" href="/css/board.css?v={{ $now }}">
+@endpush
+
+@push('scripts')
+<script type="text/javascript" src="/js/board.js?v={{ $now }}"></script>
+<script type="text/javascript">
+const scrollContainer = document.querySelector('.news-list');
+
+var ww = window.innerWidth;
+var scrollEventHandler = function(evt){
+    evt.preventDefault();
+    scrollContainer.scrollLeft += evt.deltaY;
+}
+
+initEvent(ww);
+
+$(window).resize(function () {
+    ww = window.innerWidth;
+    initEvent(ww);
+});
+
+function initEvent(ww){
+    if(ww >= 1200){
+        scrollContainer.addEventListener('wheel',scrollEventHandler);
+    }else{
+        scrollContainer.removeEventListener('wheel',scrollEventHandler);
+    }
+}
+</script>
+@endpush

resources/views/board/gallery/main.blade.php

@@ -0,0 +1,20 @@
+@extends('layouts.app')
+
+@push('scripts')
+    <script type="text/javascript">
+        var gallery = [];
+        @if($data && $data->assets)
+        @foreach($data->assets as $i => $row)
+        var item = {
+            'src': "{{ route('image', [$row->asset->uid]) }}",
+            'thumb': "{{ route('image.thumbnail.rate', ['h80', $row->asset->uid]) }}",
+            'caption': "{{ $data->subject }}",
+        };
+        gallery.push(item);
+        @endforeach
+        @endif
+        Fancybox.show(gallery, {
+            // Your options go here
+        });
+    </script>
+@endpush

resources/views/board/gallery/view.blade.php

@@ -0,0 +1,73 @@
+@extends('layouts.app')
+
+@section('content')
+    <div class="d-flex flex-column flex-xl-row bg-white">
+        <div class="left-image-section board-left-section flex-column d-none d-xl-flex">
+            <div class="page-header">
+                <div class="menu-root d-none d-xl-block">{{ $page['title'] }}@if($page['subTitle']) <i class="fa-solid fa-chevron-right"></i> {{ $page['subTitle'] }}@endif</div>
+                <div class="header-title d-none d-xl-block">@if($page['subTitle']){{ $page['subTitle'] }}@else{{ $page['title']}}@endif</div>
+                <div class="header-mobile-logo d-block d-xl-none"><img src="/images/word-logo-white.png" class="img-fluid"></div>
+            </div>
+            <div class="board-links">
+                <a href="{{ route('board.list', ['notice'], false) }}"@if($data->code == 'notice') class="active"@endif><div>공지사항</div></a>
+                <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
+                <a href="{{ route('board.create', ['inquiry'], false) }}"@if($data->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
+            </div>
+        </div>
+        <div class="board-section notice-view">
+            <div class="board-title d-flex">
+                <div class="font-28" style="flex:1">{!! $data->subject !!}</div>
+                <div class="complete-logo d-none d-xl-block">
+                    <img src="/images/complete-logo.png" class="img-fluid"/>
+                </div>
+            </div>
+            <div class="board-date font-16 line-top line-bottom">{{ date('Y.m.d H:i', strtotime($data->created_at)) }}</div>
+            <div class="board-content line-bottom">
+                @if($data->images && count($data->images))
+                    @foreach($data->images as $i => $asset)
+                        <p class="board-image"><img src="{{ route('image', [$asset->uid], false) }}" alt="" /></p>
+                    @endforeach
+                @endif
+                <div class="board-detail">
+                    {!! $data->content !!}
+                </div>
+                @if($data->files && count($data->files))
+                    <div class="board-file">
+                        <p><i class="fas fa-folder"></i>첨부파일</p>
+                        <ul class="file-btn">
+                            @foreach($data->files as $i => $asset)
+                                <li><a class="cut-text" href="{{ route('download', [$asset->uid], false) }}"><i class="fas fa-file"></i>{{ $asset->orgin_name }} ({{ human_filesize($asset->size) }})</a></li>
+                            @endforeach
+                        </ul>
+                    </div>
+                @endif
+            </div>
+            <div class="board-controll justify-content-between">
+                <a href="{{ route('board.list', [$data->code], false) }}" class="white-round-btn font-16">목록</a>
+                @if($data->prev || $data->next)
+                    <div>
+                        @if($data->prev)
+                            <a href="{{ route('board.view', [$data->code, $data->prev->uid], false) }}"><img src="/images/icons/btn-prev.png" alt="이전글" style="width:36px" /></a>
+                        @endif
+                        @if($data->next)
+                            <a href="{{ route('board.view', [$data->code, $data->next->uid], false) }}"><img src="/images/icons/btn-next.png" alt="다음글" style="width:36px " /></a>
+                        @endif
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+@endsection
+
+@push('style')
+<link rel="stylesheet" type="text/css" href="/css/board.css?v={{ $now }}">
+@endpush
+
+@push('scripts')
+<script type="text/javascript" src="/js/board.js?v={{ $now }}"></script>
+<script type="text/javascript">
+$(window).on('load', function() {
+    imagesLoad($(".board-content img"));
+});
+</script>
+@endpush

resources/views/board/inquiry/create.blade.php

@@ -10,7 +10,7 @@
         </div>
         <div class="board-links">
             <a href="{{ route('board.list', ['notice'], false) }}"@if($data->code == 'notice') class="active"@endif><div>공지사항</div></a>
-            <a href="{{ route('board.list', ['news'], false) }}"@if($data->code == 'news') class="active"@endif><div>뉴스</div></a>
+            <a href="{{ route('board.list', ['gallery'], false) }}"@if($board->code == 'gallery') class="active"@endif><div>시공사진</div></a>
             <a href="{{ route('board.create', ['inquiry'], false) }}"@if($data->code == 'inquiry') class="active"@endif><div>문의하기</div></a>
         </div>
     </div>

resources/views/index.blade.php

@@ -7,8 +7,10 @@
 @endsection
 
 @push('style')
+<link rel="stylesheet" type="text/css" href="/css/main.css?v={{ $now }}">
 @endpush
 
 @push('scripts')
+<script type="text/javascript" src="/js/main.js?v={{ $now }}"></script>
 @endpush
 

resources/views/layouts/admin-header.blade.php

@@ -17,7 +17,7 @@
             </span>
         </li>
         <li class="nav-item">
-            <a class="nav-link pl-3 pr-0 nav-big-icon" href="/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="홈페이지">
+            <a class="nav-link pl-3 pr-0 nav-big-icon" href="{{ route('index') }}" target="_blank" data-toggle="tooltip" data-placement="bottom" title="홈페이지">
                 <i class="fas fa-home"></i>
             </a>
         </li>
@@ -30,40 +30,42 @@
 </nav>
 <aside class="main-sidebar sidebar-dark-primary elevation-4">
     <h1>
-        <a href="{{ route('cms.index', null, false) }}" class="brand-link ">
+        <a href="{{ route('cms.index', null, false) }}" class="brand-link pl-4">
-            <img src="/images/logo-admin.png" alt="청담K" class="brand-image" style="opacity:.8">
+            <!--img src="/images/logo-admin.png" alt="{{ $settings->site_name }}" class="brand-image"-->
-            <span class="brand-text font-weight-light">청담K</span>
+            <span class="brand-text">{{ $settings->site_name }}</span>
         </a>
     </h1>
     <div class="sidebar">
         <nav class="mt-2">
             <ul class="nav nav-pills nav-sidebar flex-column" role="menu">
-                <li class="nav-header">게시판</li>
+                <!--
                 <li class="nav-item">
                     <a href="{{ route('cms.board.list', ['notice'], false) }}" class="nav-link{{ (@$page['code'] == 'cms.board.notice') ? ' active' : '' }}">
                         <i class="nav-icon fas fa-book"></i>
                         <p>공지사항</p>
                     </a>
                 </li>
+                -->
                 <li class="nav-item">
-                    <a href="{{ route('cms.board.list', ['news'], false) }}" class="nav-link{{ (@$page['code'] == 'cms.board.news') ? ' active' : '' }}">
+                    <a href="{{ route('cms.board.list', ['gallery'], false) }}" class="nav-link{{ (@$page['code'] == 'cms.board.gallery') ? ' active' : '' }}">
                         <i class="nav-icon fas fa-columns"></i>
-                        <p>뉴스</p>
+                        <p>포트폴리오</p>
                     </a>
                 </li>
                 <li class="nav-item">
                     <a href="{{ route('cms.board.list', ['inquiry'], false) }}" class="nav-link{{ (@$page['code'] == 'cms.board.inquiry') ? ' active' : '' }}">
                         <i class="nav-icon fas fa-question-circle"></i>
-                        <p>문의하기</p>
+                        <p>문의내역</p>
                     </a>
                 </li>
-                <li class="nav-header">운영 / 설정</li>
+                <!--
                 <li class="nav-item">
                     <a href="{{ route('cms.partner.list', null, false) }}" class="nav-link{{ (@$page['code'] == 'cms.partner') ? ' active' : '' }}">
                         <i class="nav-icon fas fa-flag"></i>
                         <p>제휴업체</p>
                     </a>
                 </li>
+                -->
                 <li class="nav-item">
                     <a href="{{ route('cms.setting.list', null, false) }}" class="nav-link{{ (@$page['code'] == 'cms.setting') ? ' active' : '' }}">
                         <i class="nav-icon fas fa-cog"></i>

resources/views/layouts/admin.blade.php

@@ -27,7 +27,7 @@
 <link rel="stylesheet" href="/assets/css/datagrid/datatables/datatables.bundle.css">
 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
-<link rel="stylesheet" href="/css/admin_custom.css">
+<link rel="stylesheet" href="/css/admin.css">
 <link rel="stylesheet" href="/css/admin_mobile.css">
 @stack('styles')
 </head>

resources/views/layouts/app.blade.php

@@ -1,65 +1,63 @@
 @php
-$title = '청담K - The Hub Of Global K-art';
+$title = '쏠라아이, 프리미엄 태양광 파고라/썬룸/주차장 설계 및 시공 전문회사';
 
 if (!empty($page['subTitle'])) {
     $title = $page['subTitle'];
 } else if (!empty($page['title'])) {
     $title = $page['title'];
-} else if (!empty($settings->meta_title)) {
+} else if (!empty($settings->title)) {
-    $title = $settings->meta_title;
+    $title = $settings->title;
 }
 @endphp
 <!doctype html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
-    <title>{{ $title }}</title>
+<title>{{ $title }}</title>
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+<meta http-equiv="Content-type" content="text/html; charset=utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="language" content="Korean">
+<meta name="language" content="Korean">
-    <meta name="author" content="청담K">
+<meta name="author" content="{{ $settings->site_name }}">
-    <meta name="robots" content="index, follow"/>
+<meta name="robots" content="index, follow"/>
-    <meta name="csrf-token" content="{{ csrf_token() }}">
+<meta name="csrf-token" content="{{ csrf_token() }}">
-    @include('layouts.seo')
+@include('layouts.seo')
-    <link rel="icon" type="image/png" href="/images/favicon.png" />
+<link rel="icon" type="image/png" href="/images/favicon.png" />
-    {{-- <link rel="alternate" type="application/rss+xml" title="청담K" href="http://www..co.kr/rss.xml" /> --}}
+{{--<link rel="alternate" type="application/rss+xml" title="{{ $settings->site_name }}" href="http://www..co.kr/rss.xml" />--}}
-    <link rel="dns-prefetch" href="//fonts.gstatic.com">
+<link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Jost"/>
+<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Jost"/>
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"/>
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"/>
-    <link rel="stylesheet" type="text/css" href="//unpkg.com/pageable@latest/dist/pageable.min.css"/>
+<link rel="stylesheet" type="text/css" href="//unpkg.com/pageable@latest/dist/pageable.min.css"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" integrity="sha512-nSomje7hTV0g6A5X/lEZq8koYb5XZtrWD7GU2+aIJD35CePx89oxSM+S7k3hqNSpHajFbtmrjavZFxSEfl6pQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" integrity="sha512-nSomje7hTV0g6A5X/lEZq8koYb5XZtrWD7GU2+aIJD35CePx89oxSM+S7k3hqNSpHajFbtmrjavZFxSEfl6pQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
-    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}?v={{ $now }}">
+<link rel="stylesheet" type="text/css" href="/css/app.css?v={{ $now }}">
-    @stack('style')
+@stack('style')
 </head>
 <body>
-    <div id="app">
+<div id="app">
     @include('layouts.header')
-        <main class="">
+    <main>
         @yield('content')
     </main>
-    </div>
+</div>
 
-    @include('layouts.footer')
+@include('layouts.footer')
-
-    <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="//unpkg.com/pageable@latest/dist/pageable.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha512-ZHauUc/vByS6JUz/Hl1o8s2kd4QJVLAbkz8clgjtbKUJT+AG1c735aMtVLJftKQYo+LD62QryvoNa+uqy+rCHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
-    <script type="text/javascript" src="//kit.fontawesome.com/280c51cde6.js" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
-    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=52cafe4f03c6eb124e97eafc302f7240"></script>
-    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
-    <script type="text/javascript" src="/assets/js/formplugins/autosize/autosize.min.js"></script>
-    <script type="text/javascript" src="/js/app.js?v={{ $now }}"></script>
-
-    @stack('scripts')
 
+<script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
+<script type="text/javascript" src="//unpkg.com/pageable@latest/dist/pageable.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha512-ZHauUc/vByS6JUz/Hl1o8s2kd4QJVLAbkz8clgjtbKUJT+AG1c735aMtVLJftKQYo+LD62QryvoNa+uqy+rCHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+<script type="text/javascript" src="//kit.fontawesome.com/280c51cde6.js" crossorigin="anonymous"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
+{{--<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=52cafe4f03c6eb124e97eafc302f7240"></script>--}}
+<script type="text/javascript" src="//cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
+<script type="text/javascript" src="/assets/js/formplugins/autosize/autosize.min.js"></script>
+<script type="text/javascript" src="/js/app.js?v={{ $now }}"></script>
+@stack('scripts')
 </body>
 </html>

resources/views/layouts/blank.blade.php

@@ -5,10 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="language" content="Korean">
-    <meta name="author" content="청담K">
+    <meta name="author" content="{{ $settings->site_name }}">
     <meta name="robots" content="index, follow"/>
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <title>청담K</title>
+    <title>{{ $settings->site_name }}</title>
     @stack('style')
 </head>
 <body>

resources/views/layouts/header.blade.php

@@ -2,7 +2,7 @@
     <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light">
             <div class="container-fluid">
-              <a class="navbar-brand" href="#">솔라아이</a>
+              <a class="navbar-brand" href="#">{{ $settings->site_name }}</a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
               </button>

resources/views/layouts/seo.blade.php

@@ -1,15 +1,15 @@
-    <meta name="title" content="{{ $title }}" />
+<meta name="title" content="{{ $title }}" />
-    <meta name="description" content="{{ $settings->description }}" />
+<meta name="description" content="{{ $settings->description }}" />
-    <meta name="keywords" content="{{ $settings->keywords }}" />
+<meta name="keywords" content="{{ $settings->keywords }}" />
-    <meta property="og:type" content="website">
+<meta property="og:type" content="website">
-    <meta property="og:title" content="{{ $title }}">
+<meta property="og:title" content="{{ $title }}">
-    <meta property="og:description" content="{{ $settings->description }}">
+<meta property="og:description" content="{{ $settings->description }}">
-    <meta property="og:image" content="/images/greeting/image2.png">
+<meta property="og:image" content="/images/greeting/image2.png">
-    <meta property="og:url" content="{{ request()->url() }}">
+<meta property="og:url" content="{{ request()->url() }}">
-    <meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="{{ $title }}">
+<meta name="twitter:title" content="{{ $title }}">
-    <meta name="twitter:description" content="{{ $settings->description }}">
+<meta name="twitter:description" content="{{ $settings->description }}">
-    <meta name="twitter:image" content="/images/greeting/image2.png">
+<meta name="twitter:image" content="/images/greeting/image2.png">
-    <meta name="twitter:domain" content="{{ config('app.url') }}">
+<meta name="twitter:domain" content="{{ config('app.url') }}">
-    <link rel="icon" type="image/png" href="/images/favicon.png" />
+<link rel="icon" type="image/png" href="/images/favicon.png" />
-    <link rel="canonical" href="{{ config('app.url') }}">
+<link rel="canonical" href="{{ config('app.url') }}">

resources/views/pages/inquiry.blade.php

@@ -9,10 +9,13 @@
             <div class="inquiry-form">
                 <div class="row">
                     <div class="col-12 col-md-6">
-                        <form id="writeForm" method="post" accept-charset="utf-8" action="">
+                        <form id="writeForm" method="post" accept-charset="utf-8" action="{{ route('board.store', null, false) }}">
                             <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                             <input type="hidden" name="mode" value="add" />
-                            <input type="hidden" name="id" value="0" />
+                            <input type="hidden" name="code" value="inquiry" />
+                            <input type="hidden" name="board_id" value="3" />
+                            <input type="hidden" name="uid" value="" />
+                            <input type="hidden" name="category" value="" />
                             <div class="row">
                                 <div class="col-12">
                                     <input type="text" class="k-input" name="name" id="name" value="" placeholder="이름" required />
@@ -37,22 +40,22 @@
 
                             <div class="inquiry-box-desc">
                                 질문이 있거나 도움이 필요한 경우<br>
-                                왼쪽 양식을 작성해주세요.<br>
+                                왼쪽 양식을 작성해 주세요.<br>
-                                빠른 시간내 답변 드리겠습니다.
+                                빠른 시간 내에 답변 드리겠습니다.
                             </div>
                         </div>
                         <div class="inquiry-box">
                             <div class="inquiry-box-title">주소</div>
 
                             <div class="inquiry-box-desc">
-                                -
+                                {{ $settings->site_address }}
                             </div>
                         </div>
                         <div class="inquiry-box mb-0">
                             <div class="inquiry-box-title">연락처</div>
 
                             <div class="inquiry-box-desc">
-                                -
+                                {{ $settings->site_phone }}
                             </div>
                         </div>
                     </div>
@@ -62,31 +65,3 @@
     </div>
 </section>
 
-@push('scripts')
-<script type="text/javascript">
-$(document).ready(function() {
-    $('#writeForm').submit(function () {
-        if (!$("#name").checkEmpty('이름을 입력해 주세요.')) return false;
-        if (!$("#phone").checkEmpty('연락처를 입력해 주세요.')) return false;
-        if (!$("#email").checkEmpty('이메일을 입력해 주세요.')) return false;
-        if (!$("#content").checkEmpty('문의내용을 입력해 주세요.')) return false;
-        // if (!$('#invalidCheck3').prop('checked')) {
-        //     alert('개인정보처리방침에 동의해 주세요.');
-        //     return false;
-        // }
-
-        $.post($(this).attr('action'), $(this).serialize(), function(result) {
-            alert(result.message);
-            if (result.code == 'success') {
-                window.history.go(-1);
-            }
-        }).fail(function(result) {
-            console.log(result);
-            alert('문의 등록에 실패했습니다!!\n잠시 후 다시 시도해 주세요.');
-        });
-
-        return false;
-    });
-});
-</script>
-@endpush

resources/views/pages/introduce.blade.php

@@ -11,9 +11,9 @@
                 </div>
                 <div class="text-title">쏠라아이</div>
                 <div class="text-desc mt-3">
-                    쏠라아이는 프리미엄 태양광 파고라,썬룸 및 주차장 전문 시공 업체로<br>
+                    쏠라아이는 프리미엄 태양광 파고라, 썬룸 및 주차장 전문 시공 업체로<br>
                     디자인과 고품질로 고객님들에 만족도를 드리고 있습니다. <br>
-                    빨리 시공하기보다는 한땀한땀 장인정신으로기본과 원칙을 준수하여 제대로 시공해드립니다.
+                    빨리 시공하기보다는 한 땀 한 땀 장인정신으로 기본과 원칙을 준수하여 제대로 시공해 드립니다.
                 </div>
             </div>
             <hr class="ai-hr">

resources/views/pages/portfolio.blade.php

@@ -1,95 +1,19 @@
 <section class="main-portfolio" id="portfolio">
     <div class="container text-center">
-        <div class="row">
+        <div class="row" id="portfolio-list"></div>
-            <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
+        <div id="galleryMore" class="more-button">더보기 <span class="now-count">0</span> / <span class="max-count">0</span></div>
-                <div class="portfolio-img">
-                    <img src="/images/testimg.png"/>
-                </div>
-                <div class="portfolio-inner">
-                    <div class="portfolio-box">
-                        <div class="portfolio-title">
-                            태양광 카포트
-                        </div>
-                        <div class="portfolio-hr"></div>
-                        <div class="portfolio-desc">
-                            태양광 발전량은 일조 시간이 중요해요!
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            
-            <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
-                <div class="portfolio-img">
-                    <img src="/images/testimg.png"/>
-                </div>
-                <div class="portfolio-inner">
-                    <div class="portfolio-box">
-                        <div class="portfolio-title">
-                            태양광 카포트
-                        </div>
-                        <div class="portfolio-hr"></div>
-                        <div class="portfolio-desc">
-                            태양광 발전량은 일조 시간이 중요해요!
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            
-            <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
-                <div class="portfolio-img">
-                    <img src="/images/testimg.png"/>
-                </div>
-                <div class="portfolio-inner">
-                    <div class="portfolio-box">
-                        <div class="portfolio-title">
-                            태양광 카포트
-                        </div>
-                        <div class="portfolio-hr"></div>
-                        <div class="portfolio-desc">
-                            태양광 발전량은 일조 시간이 중요해요!
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            
-            <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
-                <div class="portfolio-img">
-                    <img src="/images/testimg.png"/>
-                </div>
-                <div class="portfolio-inner">
-                    <div class="portfolio-box">
-                        <div class="portfolio-title">
-                            태양광 카포트
-                        </div>
-                        <div class="portfolio-hr"></div>
-                        <div class="portfolio-desc">
-                            태양광 발전량은 일조 시간이 중요해요!
-                        </div>
-                    </div>
-                </div>
     </div>
+</section>
 
+<div id="galleryBox" style="display:none;">
     <div class="col-6 col-md-4 col-lg-3 mb-4 portfolio">
-                <div class="portfolio-img">
+        <div class="portfolio-img"></div>
-                    <img src="/images/testimg.png"/>
-                </div>
         <div class="portfolio-inner">
             <div class="portfolio-box">
-                        <div class="portfolio-title">
+                <div class="portfolio-title"></div>
-                            태양광 카포트
-                        </div>
                 <div class="portfolio-hr"></div>
-                        <div class="portfolio-desc">
+                <div class="portfolio-desc"></div>
-                            태양광 발전량은 일조 시간이 중요해요!
-                        </div>
-                    </div>
             </div>
         </div>
     </div>
-
+</div>
-        <div class="more-button">더보기 <span class="now-count">8</span> / <span class="max-count">24</span></div>
-    </div>
-</section>

resources/views/partner/index.blade.php

@@ -10,14 +10,6 @@
             <div class="header-mobile-logo d-block d-xl-none m-0 padding-b-2"><img src="/images/word-logo-white.png" class="img-fluid"></div>
         </div>
         <div class="page-body">
-            <div class="big-title-section company-big-title-section">
-                <div class="big-title company-big-title">
-                    청담K는 <br>
-                    기업과 협력을 통해 <br>
-                    예술의 가치를 높이고 <br>
-                    있습니다.
-                </div>
-            </div>
             <div class="list-section">
                 @if($data)
                     <section class="company-column">

resources/views/test.blade.php

@@ -5,15 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="language" content="Korean">
-    <meta name="author" content="청담K">
+    <meta name="author" content="쏠라아이">
     <meta name="robots" content="index, follow"/>
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
     @include('layouts.seo')
 
-    <title>청담K @yield('page-title')@yield('article-title')</title>
+    <title>쏠라아이 @yield('page-title')@yield('article-title')</title>
 
-    {{-- <link rel="alternate" type="application/rss+xml" title="청담K" href="http://www..co.kr/rss.xml" /> --}}
+    {{-- <link rel="alternate" type="application/rss+xml" title="쏠라아이" href="http://www..co.kr/rss.xml" /> --}}
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost"/>

routes/web.php

@@ -14,25 +14,25 @@ use Illuminate\Support\Facades\Auth;
 |
 */
 
-Route::domain(config('app.domain'))->group(function () {
+// 파일 다운로드
-    // 파일 다운로드
+Route::get('/file/{uid}', 'AssetController@download')->name('file');
-    Route::get('/file/{uid}', 'AssetController@download')->name('file');
+Route::get('/download/{uid}', 'AssetController@download')->name('download');
-    Route::get('/download/{uid}', 'AssetController@download')->name('download');
+// 이미지
-    // 이미지
+Route::get('/image/{uid}', 'AssetController@download')->name('image');
-    Route::get('/image/{uid}', 'AssetController@download')->name('image');
+// 파일 업로드
-    // 파일 업로드
+Route::post('/file/upload', 'AssetController@upload')->name('file.upload');
-    Route::post('/file/upload', 'AssetController@upload')->name('file.upload');
+// 이미지 썸네일
-    // 이미지 썸네일
+Route::get('/image/{size}/{uid}', 'AssetController@downloadImage')->name('image.thumbnail');
-    Route::get('/image/{size}/{uid}', 'AssetController@downloadImage')->name('image.thumbnail');
+// 이미지 썸네일(비율)
-    // 이미지 썸네일(비율)
+Route::get('/image/rate/{rate}/{uid}', 'AssetController@downloadImageRate')->name('image.thumbnail.rate');
-    Route::get('/image/rate/{rate}/{uid}', 'AssetController@downloadImageRate')->name('image.thumbnail.rate');
-});
 
 Route::domain(config('app.domain'))->namespace('Front')->group(function () {
-    Route::get('/', 'IndexController@index')->name('index');
-
     // 메인
     Route::get('/', 'IndexController@index')->name('index');
+    // 메인, 갤러리
+    Route::get('/main/gallery', 'IndexController@galleryList')->name('main.gallery');
+    // 메인, 갤러리 상세
+    Route::get('/main/gallery/view', 'IndexController@galleryView')->name('main.gallery.view');
 
     // 일반페이지
     Route::get('/pages/{code}', 'PagesController@index')->name('pages');
@@ -50,77 +50,6 @@ Route::domain(config('app.domain'))->namespace('Front')->group(function () {
     Route::get('/partner', 'PartnerController@index')->name('partner');
 });
 
-/*
-$prefix = config('admin.prefix') .'.';
-
-// 관리자만 접근 가능
-Route::domain(config('app.domain'))->prefix('cms')->as('adm.')->group(function () {
-    Route::get('login', 'Auth\LoginController@showLoginForm')->name('login');
-    Route::post('login', 'Auth\LoginController@login')->name('login.check');
-    Route::get('logout', 'Auth\LoginController@logout')->name('logout');
-});
-
-// 관리자만 접근 가능
-Route::domain(config('app.domain'))->middleware(['auth.admin', 'admin'])->namespace('Admin')->prefix('cms')->as('adm.')->group(function () {
-    Route::get('/', 'IndexController@index')->name('index');
-    // 회원
-    Route::get('/user', 'UserController@index')->name('user.list');
-    // 회원 등록
-    Route::get('/user/create', 'UserController@create')->name('user.create');
-    // 회원 수정
-    Route::get('/user/modify/{uid}', 'UserController@create')->name('user.update');
-    // 회원 비밀번호 변경
-    Route::post('/user/change/password', 'UserController@passwordChange')->name('user.change.password');
-    // 회원 저장
-    Route::post('/user/store', 'UserController@store')->name('user.store');
-    // 회원 탈퇴
-    Route::post('/user/signout', 'UserController@signout')->name('user.signout');
-    // 회원 복구
-    Route::post('/user/restore', 'UserController@restore')->name('user.restore');
-
-    // 게시판, 게시물 목록
-    Route::get('/board/{code}', 'BoardController@index')->name('board.list');
-    // 게시판, 게시물 상세
-    Route::get('/board/{code}/view/{uid}', 'BoardController@view')->name('board.view');
-    // 게시판, 게시물 등록
-    Route::get('/board/{code}/create', 'BoardController@create')->name('board.create');
-    // 게시판, 게시물 수정
-    Route::get('/board/{code}/modify/{uid}', 'BoardController@create')->name('board.modify');
-    // 게시판, 게시물 저장
-    Route::post('/board/store', 'BoardController@store')->name('board.store');
-    // 게시판, 에디터 이미지 업로드
-    Route::post('/board/image/upload', 'BoardController@imageUpload')->name('board.image.upload');
-    // 게시판, 댓글 저장
-    Route::post('/board/comment/store', 'BoardController@commentStore')->name('board.comment.store');
-    // 게시판, 댓글 삭제
-    Route::post('/board/comment/delete', 'BoardController@commentDelete')->name('board.comment.delete');
-    // 게시판, 첨부 이미지 삭제
-    Route::post('/board/asset/delete', 'BoardController@assetDelete')->name('board.asset.delete');
-    // 게시판, 게시물 삭제
-    Route::post('/board/delete', 'BoardController@delete')->name('board.delete');
-
-    // 제휴업체, 목록
-    Route::get('/partner', 'PartnerController@index')->name('partner.list');
-    // 제휴업체, 등록
-    Route::get('/partner/create', 'PartnerController@create')->name('partner.create');
-    // 제휴업체, 수정
-    Route::get('/partner/modify/{uid}', 'PartnerController@create')->name('partner.modify');
-    // 제휴업체, 저장
-    Route::post('/partner/store', 'PartnerController@store')->name('partner.store');
-    // 제휴업체, 삭제
-    Route::post('/partner/delete', 'PartnerController@delete')->name('partner.delete');
-
-    // 설정, 목록
-    Route::get('/setting', 'SettingController@index')->name('setting.list');
-    // 설정, 등록/수정
-    Route::get('/setting/create', 'SettingController@create')->name('setting.create');
-    // 설정, 저장
-    Route::post('/setting/store', 'SettingController@store')->name('setting.store');
-    // 설정, 삭제
-    Route::post('/setting/delete', 'SettingController@delete')->name('setting.delete');
-});
-*/
-
 Route::get('/test', function () {
     return view('test');
 });