블로그 작업노트 15: 해시태그 최적화 작업

해시태그

내 블로그에서 해시태그

public function showSearch(Request $request)
{
    // Retrieve the keyword from the request
    $keyword = $request->input('keyword');

    // Initialize the query
    $posts = Post::query();
    
    // Check if keyword is present
    if (!empty($keyword)) {
        if (strpos($keyword, 'coll:') === 0) {
            // "coll:"로 시작하는 키워드 검색
            $collectionKeyword = str_replace('coll:', '', $keyword);
    
            // collection 컬럼에서 검색
            $posts = Post::where('collection', 'LIKE', "%{$collectionKeyword}%")
                ->orderByDesc('created_at')
                ->paginate()->appends($request->input());
        } elseif (strpos($keyword, 'cate:') === 0) {
            // "cate:"로 시작하는 키워드 검색
            $categoryKeyword = str_replace('cate:', '', $keyword);
    
            // category 컬럼에서 검색
            $posts = Post::where('category', 'LIKE', "%{$categoryKeyword}%")
                ->orderByDesc('created_at')
                ->paginate()
                ->appends($request->input());
        } else {
            // Normal search for title, if no prefix is present
            $posts = Post::where('title', 'LIKE', "%{$keyword}%")
                ->orWhereRaw('FIND_IN_SET(?, keywords)', [$keyword])
                ->orderByDesc('created_at')
                ->paginate()
                ->appends($request->input());
        }
    } else {
        $posts = [];
    }

    // Return the results to the view
    return view('search', compact('posts'));
}Copy

상단 검색창에서 "aws"로 검색하면 나오는 화면

글쓰기 화면에서 해시태그

해시태그 입력하는 인풋창에 포커스를 주변 나오게 설계

public static function getKeywordsByCategory()
{
    // Fetch 'keywords' and 'category' columns, grouped by category
    $categoriesWithKeywords = self::query()
        ->selectRaw("category, GROUP_CONCAT(keywords SEPARATOR ',') as all_keywords")
        ->groupBy('category')
        ->get()
        ->mapWithKeys(function ($item) {
            // Split keywords by comma and trim whitespace
            $keywordsArray = array_map('trim', explode(',', $item->all_keywords));

            // Remove duplicates and sort by frequency
            $keywordCounts = array_count_values($keywordsArray);
            arsort($keywordCounts);

            return [$item->category => array_keys($keywordCounts)];
        });

    return $categoriesWithKeywords;
}Copy

[
    "개발" => ["Laravel", "php", "AWS", "Nginx", ...],
    "애니" => ["판타지", "이세계", "슬로우라이프", ...],
    "기록" => ["블로그", "그림", ...],
]Copy

<div class="grp_keyword_input">
    <input type="text" class="form-control" id="keywords" name="keywords" value="{{ $post->keywords ?? '' }}" onchange="updateActiveKeywords(this)" required>
    <div class="grp_keywords">
        @foreach(\App\Models\Post::getKeywordsByCategory() as $category => $keywords)
            <div class="grp_keyword_category mb-2">
                <div class="category">{{ $category }}</div>
                @foreach($keywords as $keyword)
                    <span role="button" class="keyword" onclick="appendKeyword('{{ $keyword }}')" data-keyword="{{ $keyword }}">#{{ $keyword }}</span>
                @endforeach
            </div>
        @endforeach
    </div>
</div>Copy

function appendKeyword(keyword) {
    // Get the input element by ID
    const input = document.getElementById('keywords');

    // Get the current value of the input
    let currentValue = input.value.trim();

    // Normalize the current value
    if (currentValue) {
        // Handle cases where the input is just commas or improperly formatted
        currentValue = currentValue
            .replace(/,+/g, ',')          // Replace multiple commas with a single comma
            .replace(/(^,|,$)/g, '')     // Remove leading/trailing commas
            .replace(/\s*,\s*/g, ', ');  // Normalize spaces around commas

        // Check if the value is empty after normalization (e.g., only commas were present)
        if (!currentValue) {
            input.value = keyword; // Set the keyword as the new value
        } else {
            // Split current value into an array by comma
            const keywordsArray = currentValue.split(',').map(k => k.trim());

            // Prevent adding duplicate keywords
            if (!keywordsArray.includes(keyword)) {
                // Add the new keyword to the input value
                input.value = keywordsArray.join(', ') + ', ' + keyword;
            }
        }
    } else {
        // If no current value, set the input value to the keyword
        input.value = keyword;
    }

    // Trigger 'change' event and set focus
    input.dispatchEvent(new Event('change'));
    setTimeout(() => input.focus(), 0);
}

function updateActiveKeywords(inputElement) {
    // 입력 필드의 키워드들을 가져오기
    const inputKeywords = inputElement.value
        .split(',') // 쉼표로 분리
        .map(keyword => keyword.trim()) // 각 키워드 공백 제거
        .filter(keyword => keyword); // 빈 값 제거

    // grp_keywords 내부의 모든 .keyword 요소 가져오기
    const keywordElements = document.querySelectorAll('.grp_keywords .keyword');

    // 모든 키워드 요소에 대해 검사
    keywordElements.forEach(element => {
        const keyword = element.getAttribute('data-keyword').trim(); // data-keyword 값 가져오기

        if (inputKeywords.includes(keyword)) {
            element.classList.add('active'); // 입력 필드에 있는 키워드라면 .active 클래스 추가
        } else {
            element.classList.remove('active'); // 그렇지 않다면 .active 클래스 제거
        }
    });
}
updateActiveKeywords(document.getElementById('keywords'));Copy