치.브.추 해주는 사이트(...)

여러분. 세상은 넓고 치킨은 많고 우리 맨날 고민하는거 뭡니까? 트럼프가 입으로 똥싸는거? 솔직히 나도 저정도로는 똥 안 쌌음. 노후? 그건 걱정해야지… 세계평화와 국제유가? 유가는 걱정해야지. 기름 안 들어오면 어카나? 그것도 걱정해야지… 근데 그거 말고 내가 맨날 말하는 세계 3대 고민이 뭡니까. 오늘 뭐입지, 오늘 뭐먹지, 오늘 뭐하지 아닙니까.

치킨도 브랜드가 진짜 많거든요? 우리동네만 해도 BBQ(특: 비쌈) 있지 BHC 있지 청년치킨 굽네 호식이 옥돌바베큐(구운 치킨인데 안에 밥 들어있음) 있지... 이거 뭐가 문제예요? 그죠. 브랜드가 문제야 브랜드가... 뭐 먹을지 정하는것부터가 국회의원 토론에 버금가는 조낸 중요한 절차다 이거요. 브랜드 고르고 나면? 그래서 비비큐 황올이냐 자메이카뭐시기냐 또 고르잖음. 그 앞단계에서 브랜드 셀렉션을 좀 줄여보겠다 이겁니다.

---

const chickenBrands = [
    'BHC', 'BBQ', '교촌', '처갓집 양념치킨', 
    '굽네치킨', '페리카나', '네네치킨', '맥시카나', 
    '또래오래', '피자나라 치킨공주', '호식이 두마리 치킨', '60계치킨', 
    '푸라닭', 'KFC', '노랑통닭', '부어치킨', '맥시칸 치킨', '치킨매니아', '지코바', 
    '꾸브라꼬', '땅땅치킨', '훌랄라 숯불치킨', '티바두마리치킨', 
    '스모프 양념통닭', '보드람치킨', '자담치킨', '후참잘 (후라이드 참 잘하는 집)', 
    '멕시칸 치킨', '다사랑치킨', '둘둘치킨', '호치킨', 
    '또봉이통닭', '동키치킨', '림스치킨', '가마치', 
    '장모님치킨', '깐부치킨', '치킨마루', '이춘봉치킨', 
    '치킨플러스', '순살만공격', '깻잎두마리', '디디치킨', 
    '쌀통닭', '오븐에빠진닭', '파파이스', '썬더치킨', 
    '옛날통닭', '기타 (입력)'
]; // 미리 저장해두고 있다가 체크박스 생성할 취킨취킨 브랜드 (나무위키 주요 치킨 브랜드 틀 참조)
// 그... 근데... 맘스터치를 치킨집이라고 봐도 됨...? 버거 파는데 아니었어요?

아니 이건 무엇? 나도 우리나라에 치킨 브랜드가 얼마나 있는지 몰라서 꺼무 들어가서 대한민국의 주요 치킨 브랜드 틀에 있는거 맘터빼고 다 때려박았음. 옛날통닭은 그 있어요 그 전통시장 가면 통닭집에서 통으로 튀겨서 파는건데 직접 뜯어먹는 그거고... 기타는 나중에 설명하겠음. 

 

저 브랜드 다 아냐고요? 일단 집에서 치킨 시켜먹을 일이 별로 없고요… 2집 근처에 없는 브랜드도 많아요… 메인페이지에도 써뒀지만 원래 튀긴 치킨을 별로 안 좋아함. 이게 나이때문에 안 받는게 아니라 유딩때부터 그랬어요. 그때는 치킨도 후라이드 아니면 양념이었는데 후라이드는 치킨무가 있어도 느끼하고 양념은 너무 매워…

 

근데 저 리스트들은 뭐냐고?

저기 두번째 소제목에 치킨 브랜드 목록 있죠? 거기 들어갈겁니다. 거기 들어가는데 치킨 브랜드는 우리 집 근처에 하나만 있는게 아니니까 여러개 고를 수 있어야 하잖아요? 체크박스로 생성해야겠죠?

 

그리드 오랜만에 썼더니 진짜 피똥쌌다… 저게 전체 통틀어서 49개긴 한데, 문제가 하나 있습니다. 7*7로 하면 깔끔할 것 같죠? 안그럼. 브랜드명이 긴 게 있어서 두줄되고 막 개판나요. 그래서 5*n으로 맞춘겁니다. 내가 일부러 저렇게 한 게 아님…

 

근데 맘터는 왜 뺐냐고요? 거기는... 거기는 내가 생각나는 치킨이 없었어... 아니 그럼 KFC는 왜 넣었냐 하실 수도 있는데 거기는 버거도 팔지만 닭도 팔잖아요. 뭐 몇조각 이렇게 팔기도 하고 KFC가서 닭먹을지 버거먹을지 고민도 하지만 나는 맘터가서 닭먹을지 버거먹을지 고민한 적이 한번도 없어요. 그래서 뺐음.

 

일단 기본적인 동작은 구현했는데 여기서 추가로 해야 할 게 있음.

 

1. 저 체크박스들은 길어서 어쩔 수 없음... 이거는 아코디언 패널로 감추던가 해야되는게 그것까지 구현할 수 있을지 모르겠고... 되면 해봅시다.

2. 저 기타가 뭐냐면 동네에 프랜차이즈 말고 다른 치킨도 있잖아요. 옛날통닭도 내가 퉁쳐서 옛날통닭이라고 써둔거지 우리 집 앞 재래시장에서 60년간 짬밥으로 치킨 튀겨오신 김말자 할머니네 통닭집 이름이 옛날통닭인게 아닙니다. 집 근처에는 있었는데 없어졌지만 파닭집 중에도 프랜차이즈 아닌데가 많아요. 그 프랜차이즈가 아닌 곳을 입력받을 수 있게 할겁니다.

3. 체크박스 저 기본체크 다른걸로 바꿀거임.

---

체크박스 아이콘 변경

input[type="checkbox"] {
    display: none;
}

label {
    width: auto;
    height: 55px;
}

일단 기본 인풋을 제거해주고 라벨에 높이와 너비 속성을 줍니다. 저거 동적으로 생성하는거라 일괄처리 가능함.

 

/* 1. 체크 안 됐을 때 (기본 상태): 빈 접시 🍽️ */
label::before {
    content: '🍽️ ';
    cursor: pointer;
}

/* 2. 체크됐을 때: 치킨 🍗 */
label:has(input[type="checkbox"]:checked)::before {
    content: '🍗 ';
}

원래 이렇게 안 하지 않았냐고요? 보통 인풋은 <인풋 타입 어쩌고> 옆에 라벨태그가 붙는데 이 에미나이가 라벨 안에 인풋을 넣어버렸음...

 

선택 안 한건 빈 접시고 선택하면 치킨으로 바뀝니다.

 

기존 체크리스트에 입력받은것도 추가하기

이게 구현되면 이제 여러분은 저기 있는 브랜드 치킨 외에도 60년 경력의 김말자 할머니가 튀겨주는 옛날통닭집과 30년 경력의 파닭집을 선택지에 넣을 수 있다. 근데 단점이 뭐다? 빡세다.

 

// 3. 추천 버튼 클릭 이벤트
chickenBtn.addEventListener('click', () => {
    // 체크된 체크박스만 선택 (:checked 셀렉터 활용)
    const checkedBoxes = document.querySelectorAll('.chicken_list input[type="checkbox"]:checked');

    // 선택된 브랜드가 없다면 경고
    if (checkedBoxes.length === 0) {
        alert('최소한 하나의 브랜드는 선택해주세요!');
        return;
    }

    // 체크된 브랜드들을 담을 배열
    let selectedBrands = [];

    checkedBoxes.forEach(box => {
        if (box.value === '기타 (입력)') {
            // '기타 (입력)'을 체크했다면, 취소 누르기 전까지 계속 입력받기!
            let isAdding = true;
            while (isAdding) {
                const customBrand = prompt('우리 동네 기타 브랜드 이름을 입력해주세요!\n(그만 추가하려면 취소를 누르세요)');
                
                // 사용자가 취소를 누르거나 빈 값을 입력하면 반복 종료
                if (customBrand === null || customBrand.trim() === '') {
                    isAdding = false;
                } else {
                    selectedBrands.push(customBrand.trim());
                }
            }
        } else {
            selectedBrands.push(box.value);
        }
    });

    // 만약 기타를 체크했는데 취소를 눌렀거나 아무것도 안 적었다면 방어 코드
    if (selectedBrands.length === 0) {
        alert('추첨할 유효한 브랜드가 없습니다!');
        return;
    }

    // 랜덤 추첨
    const randomIndex = Math.floor(Math.random() * selectedBrands.length);
    const winner = selectedBrands[randomIndex];

    // 결과 출력
    chickenResult.innerHTML = ''; // 일단 기존 결과를 떼고

    let selectedChicken = document.createElement('p'); // 맹긜어봄
    selectedChicken.innerText = winner;
    selectedChicken.classList.add('selected_chicken');

    chickenResult.appendChild(selectedChicken);
});

에미나이가 똥을 좀 크게 싸긴 했지만 아무튼 된 거 맞음. 저게 왜 반복문으로 들어갔냐고요? 이유는 간단합니다. 아니 우리집 근처에 프랜차이즈가 아닌 치킨집이 여러개일 수 있잖음. 앞집에는 60년 전통의 김말자 할머니 치킨집이 있고 그 옆에는 40년 전통의 박말자 할머니가 튀기다가 아들한테 맡긴 닭집이 있고 뒷집에는 또 50년 전통의 최말자 할머니가 만드는 양념치킨이 있고 또 뒷집의 옆집에는 인도에서 건너오신 핫산씨가 탄두리 치킨을 팔고 또 그 옆집에는 멀리 튀르키예에서 오신 형제가 또 튀르키예식 치킨을 파는데 다 맛집이야 그러면 다 추가하고 싶잖아요.

 

기타를 누르면 이렇게 뜨는데, 취소 누를때까지 계속 입력받고 Esc 누르면 추첨이 시작됩니다. 그래서 이제 체크박스에서 옛날통닭을 뺄거임. 그러면 항목 수가 48개가 되잖아요? 그래서 4*n 형태가 가능하게 되는겁니다.

 

체크박스 숨김 기능

?? 이걸 왜 함? 저게 내가 일부분만 찍어서 올려서 체감이 안 되실 수도 있어요… 근데 글자 수를 줄이고 높이를 줄여도 치킨 브랜드가 페이지 맨 밑에 뜨거든요? 이게 그리고 줄이는데 한계가 있습니다. 치킨 추첨한답시고 현미경 쓸 거 아니잖아요? 글자 7~8포인트로 줄이면 에이씨 안해 룰렛돌려 할 거 다 압니다… 

 

그렇다고 숨김 기능을 안 넣는다? 그러면 여러분이 스크롤을 굴려서 봐야되잖아요. 귀찮잖아요? 선택 끝나고 추첨됐을 때 체크박스를 딱 숨기면 숨기고 어 자바스크립트 자씨가 굽네 먹으라는데요? 할 수 있잖아요. 정보: 파이썬은 파씨다 

 

// 눌러서 펼치기
toggle.addEventListener('click', ()=>{
    if (container.style.display === 'none') {
        container.style.display = 'grid'; // 혹은 본인이 쓰던 정렬 방식 (flex 등)
        toggle.innerText = '[목록 접기]';
    } else {
        // 펼쳐져 있다면? -> 숨기기
        container.style.display = 'none';
        toggle.innerText = '[목록 펼쳐보기]';
    }
});

원래는 그 detail이라는 태그를 쓰면 되는데 저게 틀이 이미 잡혀있는거라 그걸로 바꾸면 CSS로 그리드 잡아둔게 개발살납니다. 디테일은 플렉스고 그리드고 안먹히나봄... 그래서 동적제어를 할 건데, 이번에는 버튼이 아니고 P태그를 추가했음. 그게 돼요?

 

일단 기본적으로는 접혀있음.

 

[목록 펼쳐보기] 텍스트를 누르면 목록이 나옵니다. 여기서 선택하고 추첨하고

 

[목록 접기]를 눌러서 결과를 보면 됩니다.