import React, { useState } from "react"; const columns = [ { year: "2020", month: "04", title: "안녕하세요. 대표이사 박승애입니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F20%E1%84%82%E1%85%A7%E1%86%AB4%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E1%84%8B%E1%85%A1%E1%86%AB%E1%84%82%E1%85%A7%E1%86%BC%E1%84%92%E1%85%A1%E1%84%89%E1%85%A6%E1%84%8B%E1%85%AD.%20%E1%84%83%E1%85%A2%E1%84%91%E1%85%AD%E1%84%8B%E1%85%B5%E1%84%89%E1%85%A1%20%E1%84%87%E1%85%A1%E1%86%A8%E1%84%89%E1%85%B3%E1%86%BC%E1%84%8B%E1%85%A2%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%82%E1%85%B5%E1%84%83%E1%85%A1_.pdf?alt=media&token=35869f55-b544-4d6f-8b0c-d33588fa5015" }, { year: "2020", month: "05", title: "잘 쉬는 것도 능력입니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F20%E1%84%82%E1%85%A7%E1%86%AB5%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E1%84%8C%E1%85%A1%E1%86%AF%20%E1%84%89%E1%85%B1%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%80%E1%85%A5%E1%86%BA%E1%84%83%E1%85%A9%20%E1%84%82%E1%85%B3%E1%86%BC%E1%84%85%E1%85%A7%E1%86%A8%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%82%E1%85%B5%E1%84%83%E1%85%A1_.pdf?alt=media&token=5e4c9e2d-7f10-4f8d-8b72-6bd1307c75cd" }, { year: "2020", month: "08", title: "심리적 안전감, 그것이 시작입니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F20%EB%85%848%EC%9B%94%20-%20%EC%8B%AC%EB%A6%AC%EC%A0%81%20%EC%95%88%EC%A0%84%EA%B0%90%2C%20%EA%B7%B8%EA%B2%83%EC%9D%B4%20%EC%8B%9C%EC%9E%91%EC%9E%85%EB%8B%88%EB%8B%A4.pdf?alt=media" }, { year: "2020", month: "12", title: "무엇이든 물어보세요", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F20%EB%85%8412%EC%9B%94%20-%20%EB%AC%B4%EC%97%87%EC%9D%B4%EB%93%A0%20%EB%AC%BC%EC%96%B4%EB%B3%B4%EC%84%B8%EC%9A%94.pdf?alt=media" }, { year: "2020", month: "12", title: "일 잘하는 사람은 상대를 궁금하게 하지 않는다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F20%EB%85%8412%EC%9B%94%20-%20%EC%9D%BC%20%EC%9E%98%ED%95%98%EB%8A%94%20%EC%82%AC%EB%9E%8C%EC%9D%80%20%EC%83%81%EB%8C%80%EB%A5%BC%20%EA%B6%81%EA%B8%88%ED%95%98%EA%B2%8C%20%ED%95%98%EC%A7%80%20%EC%95%8A%EB%8A%94%EB%8B%A4.pdf?alt=media" }, { year: "2021", month: "01", title: "방향을 확고히 하고 변화의 속도를 내는 해", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F21%EB%85%841%EC%9B%94%20-%20%EB%B0%A9%ED%96%A5%EC%9D%84%20%ED%99%95%EA%B3%A0%ED%9E%88%20%ED%95%98%EA%B3%A0%20%EB%B3%80%ED%99%94%EC%9D%98%20%EC%86%8D%EB%8F%84%EB%A5%BC%20%EB%82%B4%EB%8A%94%20%ED%95%B4.pdf?alt=media" }, { year: "2021", month: "02", title: "리더와 구성원이 함께 성장하기 위한 시간입니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F21%EB%85%842%EC%9B%94%20-%20%EB%A6%AC%EB%8D%94%EC%99%80%20%EA%B5%AC%EC%84%B1%EC%9B%90%EC%9D%B4%20%ED%95%A8%EA%BB%98%20%EC%84%B1%EC%9E%A5%ED%95%98%EA%B8%B0%20%EC%9C%84%ED%95%9C%20%EC%8B%9C%EA%B0%84%EC%9E%85%EB%8B%88%EB%8B%A4.pdf?alt=media" }, { year: "2021", month: "03", title: "일하기 좋은 환경, 시스템과 문화가 함께 해야 가능", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F21%EB%85%843%EC%9B%94%20-%20%EC%9D%BC%ED%95%98%EA%B8%B0%20%EC%A2%8B%EC%9D%80%20%ED%99%98%EA%B2%BD%2C%20%EC%8B%9C%EC%8A%A4%ED%85%9C%EA%B3%BC%20%EB%AC%B8%ED%99%94%EA%B0%80%20%ED%95%A8%EA%BB%98%20%ED%95%B4%EC%95%BC%20%EA%B0%80%EB%8A%A5.pdf?alt=media" }, { year: "2021", month: "07", title: "지란지교소프트가 이 세상에 있어야 하는 이유", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F21%EB%85%847%EC%9B%94%20-%20%EC%A7%80%EB%9E%80%EC%A7%80%EA%B5%90%EC%86%8C%ED%94%84%ED%8A%B8%EA%B0%80%20%EC%9D%B4%20%EC%84%B8%EC%83%81%EC%97%90%20%EC%9E%88%EC%96%B4%EC%95%BC%20%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0.pdf?alt=media" }, { year: "2021", month: "11", title: "2022년, 변화를 통한 더 큰 성장이 시작되는 해", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F21%EB%85%8411%EC%9B%94%20-%202022%EB%85%84%2C%20%EB%B3%80%ED%99%94%EB%A5%BC%20%ED%86%B5%ED%95%9C%20%EB%8D%94%20%ED%81%B0%20%EC%84%B1%EC%9E%A5%EC%9D%B4%20%EC%8B%9C%EC%9E%91%EB%90%98%EB%8A%94%20%ED%95%B4.pdf?alt=media" }, { year: "2022", month: "04", title: "복귀 신고합니다!", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F22%EB%85%844%EC%9B%94-%20%EB%B3%B5%EA%B7%80%20%EC%8B%A0%EA%B3%A0%ED%95%A9%EB%8B%88%EB%8B%A4!.pdf?alt=media" }, { year: "2022", month: "08", title: "지란지교소프트를 좋아하는 이유", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F22%EB%85%848%EC%9B%94%20-%20%EC%A7%80%EB%9E%80%EC%A7%80%EA%B5%90%EC%86%8C%ED%94%84%ED%8A%B8%EB%A5%BC%20%EC%A2%8B%EC%95%84%ED%95%98%EB%8A%94%20%EC%9D%B4%EC%9C%A0.pdf?alt=media" }, { year: "2022", month: "11", title: "기억에 남는 선배 리더", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F22%EB%85%8411%EC%9B%94%20-%20%EB%B0%95%EC%84%B8%EC%9A%94%20%EA%B8%B0%EC%96%B5%EC%97%90%20%EB%82%A8%EB%8A%94%20%EC%84%A0%EB%B0%B0%20%EB%A6%AC%EB%8D%94.pdf?alt=media" }, { year: "2023", month: "06", title: "변함없는 방향, 변화하는 전략", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F23%EB%85%846%EC%9B%94%20-%20%EB%B3%80%ED%95%A8%EC%97%86%EB%8A%94%20%EB%B0%A9%ED%96%A5%2C%20%EB%B3%80%ED%99%94%ED%95%98%EB%8A%94%20%EC%A0%84%EB%9E%B5.pdf?alt=media" }, { year: "2024", month: "09", title: "당신은 굿파트너입니까?", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F24%EB%85%849%EC%9B%94%20-%20%EB%8B%B9%EC%8B%A0%EC%9D%80%20%EA%B5%BF%ED%8C%8C%ED%8A%B8%EB%84%88%EC%9E%85%EB%8B%88%EA%B9%8C_.pdf?alt=media" }, { year: "2024", month: "10", title: "사과에는 힘이 있다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F24%EB%85%8410%EC%9B%94%20-%20%EC%82%AC%EA%B3%BC%EC%97%90%EB%8A%94%20%ED%9E%98%EC%9D%B4%20%EC%9E%88%EB%8B%A4_.pdf?alt=media" }, { year: "2024", month: "11", title: "헛되던 경험은 없어요", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F24%EB%85%8411%EC%9B%94%20-%20%ED%97%9B%EB%90%98%EB%8D%98%20%EA%B2%BD%ED%97%98%EC%9D%80%20%EC%97%86%EC%96%B4%EC%9A%94.pdf?alt=media" }, { year: "2024", month: "12", title: "길을 아는 것과 길을 걷는 것", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F24%EB%85%8412%EC%9B%94%20-%20%EA%B8%B8%EC%9D%84%20%EC%95%84%EB%8A%94%20%EA%B2%83%EA%B3%BC%20%EA%B8%B8%EC%9D%84%20%EA%B1%B7%EB%8A%94%20%EA%B2%83.pdf?alt=media" }, { year: "2025", month: "05", title: "덜 말해도 더 통하는 팀", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%EB%85%845%EC%9B%94%20-%20%EB%8D%9C%20%EB%A7%90%ED%95%B4%EB%8F%84%20%EB%8D%94%20%ED%86%B5%ED%95%98%EB%8A%94%20%ED%8C%80.pdf?alt=media" }, { year: "2025", month: "06", title: "다름을 궁금해하고, 가까운 목표를 미루는 마음", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%EB%85%846%EC%9B%94%20-%20%EB%8B%A4%EB%A6%84%EC%9D%84%20%EA%B6%81%EA%B8%88%ED%95%B4%ED%95%98%EA%B3%A0%2C%20%EA%B0%80%EA%B9%8C%EC%9A%B4%20%EB%AA%A9%ED%91%9C%EB%A5%BC%20%EB%AF%B8%EB%A3%A8%EB%8A%94%20%EB%A7%88%EC%9D%8C.pdf?alt=media" }, { year: "2025", month: "07", title: "진심은 결국 말하게 만든다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%EB%85%847%EC%9B%94%20-%20%EC%A7%84%EC%8B%AC%EC%9D%80%20%EA%B2%B0%EA%B5%AD%20%EB%A7%90%ED%95%98%EA%B2%8C%20%EB%A7%8C%EB%93%A0%EB%8B%A4.pdf?alt=media" }, { year: "2025", month: "09", title: "'나'의 질문이 '우리'의 해답이 됩니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%EB%85%849%EC%9B%94%20-%20%E2%80%98%EB%82%98%E2%80%99%EC%9D%98%20%EC%A7%88%EB%AC%B8%EC%9D%B4%20%E2%80%98%EC%9A%B0%EB%A6%AC%E2%80%99%EC%9D%98%20%ED%95%B4%EB%8B%B5%EC%9D%B4%20%EB%90%A9%EB%8B%88%EB%8B%A4.pdf?alt=media" }, { year: "2025", month: "10", title: "결국, 알아주는 사람은 알아봅니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%EB%85%84%2010%EC%9B%94%20-%20%EA%B2%B0%EA%B5%AD%2C%20%EC%95%8C%EC%95%84%EC%A3%BC%EB%8A%94%20%EC%82%AC%EB%9E%8C%EC%9D%80%20%EC%95%8C%EC%95%84%EB%B4%85%EB%8B%88%EB%8B%A4_.pdf?alt=media" }, { year: "2025", month: "11", title: "'내가 고객이라면' 에서 시작하기", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%E1%84%82%E1%85%A7%E1%86%AB%2011%E1%84%8B%E1%85%AF%E1%86%AF%20-%20_%E1%84%82%E1%85%A2%E1%84%80%E1%85%A1%20%E1%84%80%E1%85%A9%E1%84%80%E1%85%A2%E1%86%A8%E1%84%8B%E1%85%B5%E1%84%85%E1%85%A1%E1%84%86%E1%85%A7%E1%86%AB_%20%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A5%20%E1%84%89%E1%85%B5%E1%84%8C%E1%85%A1%E1%86%A8%E1%84%92%E1%84%80%E1%85%B5.pdf?alt=media" }, { year: "2025", month: "12", title: "실패했지만, 도망치지 않았습니다.", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F25%E1%84%82%E1%85%A7%E1%86%AB%2012%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E2%80%9C%E1%84%89%E1%85%B5%E1%86%AF%E1%84%91%E1%85%A2%E1%84%92%E1%85%A2%E1%86%BB%E1%84%8C%E1%85%B5%E1%84%86%E1%85%A1%E1%86%AB%2C%20%E1%84%83%E1%85%A9%E1%84%86%E1%85%A1%E1%86%BC%E1%84%8E%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8B%E1%85%A1%E1%86%AD%E1%84%8B%E1%85%A1%E1%86%BB%E1%84%89%E1%85%B3%E1%86%B8%E1%84%82%E1%85%B5%E1%84%83%E1%85%A1.%E2%80%9D.pdf?alt=media&token=38b62917-8310-45fa-acb1-e4985a9fcb31" }, { year: "2026", month: "01", title: "좋은 보고는 질문을 줄입니다", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F26%E1%84%82%E1%85%A7%E1%86%AB%201%E1%84%8B%E1%85%AF%E1%86%AF%20-%20_%E1%84%8C%E1%85%A9%E1%87%82%E1%84%8B%E1%85%B3%E1%86%AB%20%E1%84%87%E1%85%A9%E1%84%80%E1%85%A9%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%8C%E1%85%B5%E1%86%AF%E1%84%86%E1%85%AE%E1%86%AB%E1%84%8B%E1%85%B3%E1%86%AF%20%E1%84%8C%E1%85%AE%E1%86%AF%E1%84%8B%E1%85%B5%E1%86%B8%E1%84%82%E1%85%B5%E1%84%83%E1%85%A1._.pdf?alt=media&token=4ae3126d-3186-45ee-a61f-15fee2c31063" }, { year: "2026", month: "02", title: "인격과 의견의 분리", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F26%E1%84%82%E1%85%A7%E1%86%AB%202%E1%84%8B%E1%85%AF%E1%86%AF%20-%20_%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%80%E1%85%A7%E1%86%A8%E1%84%80%E1%85%AA%20%E1%84%8B%E1%85%B4%E1%84%80%E1%85%A7%E1%86%AB%E1%84%8B%E1%85%B4%20%E1%84%87%E1%85%AE%E1%86%AB%E1%84%85%E1%85%B5_.pdf?alt=media&token=c2c240ee-84e3-45f9-8106-dfc833c0c719" }, { year: "2026", month: "04", title: "우리가 에너지를 쓰는 방향", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F26%E1%84%82%E1%85%A7%E1%86%AB%204%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E1%84%8B%E1%85%AE%E1%84%85%E1%85%B5%E1%84%80%E1%85%A1%20%E1%84%8B%E1%85%A6%E1%84%82%E1%85%A5%E1%84%8C%E1%85%B5%E1%84%85%E1%85%B3%E1%86%AF%20%E1%84%8A%E1%85%B3%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%87%E1%85%A1%E1%86%BC%E1%84%92%E1%85%A3%E1%86%BC.pdf?alt=media" }, { year: "2026", month: "05", title: "좋은 충돌", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F26%E1%84%82%E1%85%A7%E1%86%AB%205%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E1%84%8C%E1%85%A9%E1%87%82%E1%84%8B%E1%85%B3%E1%86%AB%20%E1%84%8E%E1%85%AE%E1%86%BC%E1%84%83%E1%85%A9%E1%86%AF.pdf?alt=media" }, { year: "2026", month: "06", title: "우리는 지금 어디로 가고 있을까", url: "https://firebasestorage.googleapis.com/v0/b/sunbisites.firebasestorage.app/o/sites%2F4fc4155a62a14f6780db%2Fassets%2F26%E1%84%82%E1%85%A7%E1%86%AB%206%E1%84%8B%E1%85%AF%E1%86%AF%20-%20%E1%84%8B%E1%85%AE%E1%84%85%E1%85%B5%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%8C%E1%85%B5%E1%84%80%E1%85%B3%E1%86%B7%20%E1%84%8B%E1%85%A5%E1%84%83%E1%85%B5%E1%84%85%E1%85%A9%20%E1%84%80%E1%85%A1%E1%84%80%E1%85%A9%20%E1%84%8B%E1%85%B5%E1%86%BB%E1%84%8B%E1%85%B3%E1%86%AF%E1%84%81%E1%85%A1_.pdf?alt=media" }, ]; const ITEMS_PER_PAGE = 10; const years = [...new Set(columns.map(c => c.year))].sort((a, b) => b - a); export default function ColumnList() { const [activeYear, setActiveYear] = useState("all"); const [currentPage, setCurrentPage] = useState(1); const filtered = activeYear === "all" ? columns : columns.filter(c => c.year === activeYear); const sorted = [...filtered].sort((a, b) => { if (b.year !== a.year) return b.year - a.year; return b.month - a.month; }); const totalPages = Math.ceil(sorted.length / ITEMS_PER_PAGE); const paginated = sorted.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE); const handleYearChange = (year) => { setActiveYear(year); setCurrentPage(1); }; return (

{/* 헤더 */}

Writing – 박쎄오레터 / 생각 아카이브

{/* 연도 필터 */}

{years.map(y => ( ))}

{/* 칼럼 목록 */}

{paginated.map((col, i) => (

{ e.currentTarget.style.borderColor = "#2563eb"; e.currentTarget.style.boxShadow = "0 4px 12px rgba(37,99,235,0.12)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "#e2e8f0"; e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.04)"; }} >

{col.year} {col.month}월

{col.title}

→

))}

{/* 페이지네이션 */} {totalPages > 1 && (

{Array.from({ length: totalPages }, (_, i) => i + 1).map(page => ( ))}

)}

{sorted.length}개 중 {(currentPage - 1) * ITEMS_PER_PAGE + 1}–{Math.min(currentPage * ITEMS_PER_PAGE, sorted.length)}번째

); }