페이지 (공유링크 카드 별표 토글)

2026-09-10 ServiceOn Blog 작업일지입니다. 오늘은 32건의 작업을 진행했습니다.

현상/기능

링크카드에서 별표 클릭해서 등록/해제 할 수 있게 한다

작업

카드 별 클릭으로 토글. 첫 클릭만 아이디/비번, 이후 같은 세션은 바로 저장
`POST /api/share-links/star`

페이지 (공유링크 카테고리 셀렉트)

현상/기능

새 공유 링크의 카테고리 select box 를 좀 예쁘게 꾸며라

작업

네이티브 select 제거. 폴더 아이콘·쉐브론·체크 있는 커스텀 드롭다운

페이지 (공유링크 + 버튼 위치)

현상/기능

공유링크 추가 + 버튼을 카테고리 라인 맨 오른쪽으로

작업

제목 앞 + 제거. 카테고리 칩 줄 오른쪽 끝에 + 배치

페이지 (공유링크 별표)

현상/기능

공유 링크내에서 별표 추가하고, 카테고리 항목 맨 앞에 별표 추가

작업

카드에 별표 표시. 필터 칩 맨 앞 「별표」
등록/수정 카테고리 영역 맨 앞 별표 토글. 별표 링크가 목록 위로

페이지 (공유링크 카테고리 추가 실패)

현상/기능

카테고리는 어떻게 추가 하나? 추가가 안되는데

작업

추가를 id/비번 API에 묶지 않음. 팝업에서 바로 선택 목록에 넣고 등록 시 저장
이름만 적고 등록해도 카테고리로 사용. 오류는 폼 상단에도 표시

페이지 (공유링크 카드 수정)

현상/기능

링크 카드를 클릭하면 링크가 열리는데 수정할 수 있어야 한다

작업

카드 클릭 → 등록과 같은 팝업으로 수정. 아이디/비번 후 저장
사이트 열기는 카드 오른쪽 외부링크 아이콘 / 팝업의 링크 열기
`ShareLinkBoard`가 + 등록·카드 수정 상태를 묶음

페이지 (공유링크 카테고리)

현상/기능

공유링크에 카테고리를 만든다
내용 입력 시 카테고리 선택, 없으면 바로 추가

작업

공개 `/links` 등록 팝업·관리자 등록에 카테고리 선택/즉시 추가
공개 목록에 카테고리 칩 필터. `ShareLinkCategoryField` 분리
`POST /api/share-link-categories` (공개는 id/비번 검증)

페이지 (공유링크 공개 등록)

현상/기능

links 페이지 분류 제거
좌측 상단 + 팝업에 admin 등록창과 같게 + 아이디/비번 + 등록
등록 시 입력한 계정으로 로그인해서 공유링크 저장

작업

`/links` 분류 칩 제거. `ShareLinkCompose` + 버튼·팝업
`POST /api/share-links`가 관리자 비번 검증 후 upsert. 세션 쿠키 없음

페이지 (날짜띠 커스텀 달력)

현상/기능

달력 컴포넌트가 이것뿐인가? 좀 더 예쁜거 없나

작업

브라우저 기본 date input 제거. `DateCalendar` 월 그리드 팝오버
선택일 앰버, 오늘 시안, 글 있는 날 점, 오늘로 이동

페이지 (날짜띠 달력)

현상/기능

달력에 특정날짜로 가게 기능이 추가되어야 한다

작업

날짜띠 오른쪽에 `DatePickerButton` 달력. 선택한 날로 이동, 주 스트립도 갱신

페이지 (날짜띠 하루 이동)

현상/기능

날짜의 좌우클릭하면 날짜가 하루씩 바꾸게

작업

`shiftDay` ±1일. 8/30 왼쪽 → 8/29, 주가 바뀌면 스트립도 이전 주
DateStrip 화살표 라벨: 이전 날 / 다음 날

페이지 (매거진 카드 타이틀 위치)

현상/기능

타이틀의 따라 위치가 달라진다

작업

제목 `min-h` 2줄, 요약 `min-h` 2줄 예약. 1줄 제목이어도 버튼 위치 동일

페이지 (매거진 카드 여백)

현상/기능

공간을 줄여줘

작업

버튼 `mt-auto` 제거. 요약 바로 아래에 버튼
`.hero-mag` 21rem → 17.5rem. 안쪽 패딩·간격 축소

페이지 (매거진 카드 글자 잘림)

현상/기능

글자가 잘린다

작업

요약 `flex-1 overflow-hidden` 제거(줄 중간 절단 방지). `line-clamp-2` 말줄임만 사용
`.hero-mag` 21rem. 제목 크기 조금 축소. 버튼은 하단 유지

페이지 (매거진 카드 버튼 잘림)

현상/기능

높이를 고정하니 잘린다. 버튼이 잘리지 않도록 조절

작업

`.hero-mag` 높이 19rem 고정. 플렉스 하단 고정으로 `일간호 읽기` 항상 노출
요약만 남은 공간에서 클램프

페이지 (검색에 공유링크)

현상/기능

공유링크도 검색에 포함

작업

`/posts` 검색이 글 + 공유링크(제목·요약·URL)를 함께 필터
분류·형식 전체일 때만 공유링크 표시. 행에 공유링크 태그

페이지 (검색 분류 칩 순서)

현상/기능

/posts?q=GPU 검색 시 분류를 전체 IT/AI 소식 Working 순으로

작업

`CATEGORY_CHIP_OPTIONS`: 전체 → IT·AI 소식 → Working

페이지 (매거진 카드 고정 높이)

현상/기능

매거진 카드 높이가 항상고정

작업

`.hero-mag` 높이 16.5rem 고정 (min/max 동일). 날짜·제목 길이와 무관
제목 `line-clamp-2`, 요약 2줄. 넘치면 카드 안에서 자름

페이지 (상단 메뉴 순서)

현상/기능

상단메뉴에서 포트폴리오와 Working 위치를 변경

작업

`MainNav` 순서: 홈 / IT·AI 소식 / 포트폴리오 / Working / 공유링크

페이지 (매거진 카드 제목 접미사)

현상/기능

접미사 문구는 "-" 이후는 모두 안보이게 처리

작업

`CompactMagazineHero` 제목: 공백+대시(` - `, ` — ` 등) 이후 전부 숨김
날짜/브리핑 문구에 의존하지 않음. `GPT-5` 같은 단어 하이픈은 유지

페이지 (날짜띠 주 이동)

현상/기능

8/30에서 좌측 버튼을 누르면 이전 주로 넘어가면서 8/29가 되어야 하는데 8/23이 선택된다

작업

`shiftWeek`: 같은 요일 ±7일이 아니라 이전 주는 토요일, 다음 주는 일요일
예: 2026-08-30(일) → 이전 주 = 2026-08-29(토)

페이지 (매거진 카드 제목 접미사)

현상/기능

매거진 카드 타이틀 접미를 삭제했는데 다른 날짜 들어가면 나온다. 모든 날짜의 접미부분을 다 안보이게

작업

`CompactMagazineHero` 접미사: `-YYYY년 M월 d일` 이후 전부 제거
`뉴스브리핑`뿐 아니라 `이슈 브리핑` 등 다른 날짜 표기도 숨김

페이지 (홈 2×2 보드)

현상/기능

홈의 목록이 리스트 형태로 되어 있는 부분을 2x2 형태로 영역을 만들고
1x1 IT·AI 소식, 1x2 포트폴리오, 2x1 Working, 2x2 공유링크
지금 리스트를 작게 만들어서 넣어

작업

신규. 홈 2×2 셀에 축소 목록 3건
`PostListPage`가 홈일 때 포트폴리오·공유링크 SSR 주입
`PostRow` / 포트폴리오·링크 본 페이지는 그대로

페이지 (IT·AI 소식 매거진 카드 제목)

현상/기능

매거진 카드의 타이틀에는 -2026년... 이 항목은 없애줘

작업

`CompactMagazineHero` 표시 제목에서 `-YYYY년 M월 d일 AI·IT 뉴스브리핑` 접미사 제거
DB/상세 페이지 원제목은 그대로

페이지 (IT·AI 소식 매거진 높이)

현상/기능

수정한 매거진 항목의 높이를 30% 줄여줘

작업

`.hero-mag` min-height 17.5/19rem → 12.25/13.3rem
`CompactMagazineHero` 상하 패딩·제목·요약 간격 축소, 요약 2줄 클램프

페이지 (IT·AI 소식 매거진 이미지 그라데이션)

현상/기능

이미지를 그라데이션효과를 줘

작업

`CompactMagazineHero` 오른쪽 이미지를 마스크 흐림 대신 카드색 그라데이션 오버레이로 처리
좌→우(불투명→투명), 상·하 가장자리도 카드색으로 부드럽게 맞춤

페이지 (IT·AI 소식 매거진 히어로)

현상/기능

상단 '오늘의 브리핑 · 2026.09.10' 삭제
매거진과 날짜 위치 변경
매거진 이미지를 오른쪽에 붙이고 왼쪽에서 오른쪽으로 흐릿하게 밝아지게

작업

`CompactMagazineHero` 키커 제거. 오른쪽 매거진 이미지(좌 흐림·투명 → 우 선명)
`/cards`: 매거진 → 날짜띠 → 광고 → 카드. 홈은 매거진 → 날짜띠 유지

페이지 (IT·AI 소식 통합)

현상/기능

카드뉴스와 매거진을 하나로 묶자. IT·AI 소식 클릭 시 한 페이지. 순서: 매거진-광고-오늘 카드 1번-광고-나머지 카드

작업

`/cards`가 매거진+카드뉴스 통합. `format=all`. 형식 탭 제거
`ItAiNewsFeed`: 매거진 → 광고 → 카드 1번 → 광고 → 나머지
`/magazine`은 `/cards`로 redirect (date 쿼리 유지)
매거진 상세 브레드크럼·하단 버튼은 IT·AI 소식(`/cards`)으로

페이지 (공개 메뉴 라벨)

현상/기능

모든 메뉴에서 AI뉴스를 IT/AI 소식으로 바꾸고, 카드뉴스를 카드소식으로 변경
히스토리를 Working 으로 변경하고 툴팁이 들어간다면 '프로젝트별 작업이력' 으로 한다

작업

공개 라벨: `AI 뉴스` → `IT/AI 소식`, `카드뉴스` → `카드소식`, `히스토리` → `Working`
Working 툴팁/`title`/`aria-label`: 프로젝트별 작업이력 (헤더, 푸터, 홈 입구, 분류 칩, `/history` 제목)
`CATEGORY_CHIP_OPTIONS` / `POST_FORMAT_LABELS` / 브레드크럼 / 형식 탭 / 메타 제목 반영
경로 `/cards/history` · 슬러그 `ai_newsdev_history` 유지
표기 수정: `IT/AI` → `IT·AI`, `카드소식` → `카드뉴스`로 되돌림

페이지 (AI 뉴스 카드 목록)

현상/기능

AI 뉴스 카드뉴스 목록에서 좌측에 본문의 이미지를 추가

작업

`PostRow`에 `showImage` 옵션. `imageUrl` 또는 본문 첫 `<img>`를 좌측 썸네일로
`CardFeedItem`(AI 뉴스 `/cards` 목록)만 `showImage` 사용. 홈·히스토리·아카이브 행은 그대로
`getFirstContentImageSrc` / `isUsablePostImage`. 트래커 URL 제외
이미지가 출처와 같은 줄에 붙고 날짜가 밀리던 문제: 날짜·태그 줄은 위쪽 전체 폭, 이미지는 제목·요약 왼쪽(`items-start`)
홈 AI 뉴스 입구 `PostRow`에도 `showImage` 동일 적용. 히스토리·지난 일간호는 그대로

n8n 워크플로우 (SO-블로그 파이프라인 / 매거진)

현상/기능

제목을 `{오늘의 뉴스 종합타이틀} - 2026년 9월 10일 AI·IT 뉴스브리핑` 형식으로 바꾸고, 본문 전체를 하나의 요약이미지로 추가하고, 오늘 뉴스 전체를 블로그처럼 서술하며 관련 뉴스는 블로그 주소를 연결하고, 마지막은 오늘의 요약으로 정리한다

작업

n8n `SO-블로그 파이프라인` (n8n-워크플로우) 초안만 수정. **publish 안 함** (activeVersionId `eb47f473-…` 유지)
`Build Magazine Brief` 추가: 오늘 카드 후보 + KST `dateLabel` + `https://blog.serviceon.kr/posts/{id}`
매거진 제목 규칙: `{종합타이틀} - {yyyy년 M월 d일} AI·IT 뉴스브리핑`. 이슈 브리핑/기술 뉴스 끝맺음 금지
본문: 기사별 h2 나열 대신 블로그 서술. 관련 뉴스는 blogUrl 링크. 마지막 `<h2>오늘의 요약</h2>`
요약이미지: `imagePrompt`를 하루 전체 한 장면으로. `Prepare Blog Post`가 본문 맨 앞에 이미지 1장 삽입
카드 글주소 일치: `Filter New Articles`에 `cardId`, `Prepare Card Post`가 그 id 사용
매거진 Agent / Validate / Prepare / Insert / Pick Cover / Gmail은 기존처럼 disabled였음. Insert Card Post 10인자 문제는 당시 그대로
웹 `/magazine` 기존 글(예: 8월 30일 호)은 다시 쓰지 않음

n8n 워크플로우 (발행 시작)

현상/기능

모두 켜고 발행시작

작업

매거진 쓰기 경로 켬: `AI Agent`, `Validate Magazine Output`, `Pick Cover Image`, `Prepare Blog Post`, `Insert Blog Post`, `Send a message`
예전 Anthropic 카드 스택(`AI Agent - Card` 등)은 연결이 없어 그대로 끔
`Insert Card Post` / `Insert Blog Post`를 히스토리와 같이 `저장 절차` 11인자(tags 포함)로 수정
워크플로우 publish. 현재 activeVersionId `f8029009-…`
production 실행 #77은 매거진 검증(`오늘의 요약` 없음)으로 error. 이후 요약·카드링크 없으면 자동 첨부하도록 수정
#78 success: 카드 10장 + 매거진 1건 저장. 기사 첫 이미지가 트래커 URL이라 본문 이미지가 깨짐
매거진 커버는 항상 생성 이미지 사용. #79 success로 같은 매거진(`c792bce4-…`)을 요약 PNG로 갱신
예전 Anthropic 카드 스택은 연결이 없어 그대로 끔
공개: `/magazine`, `/posts/c792bce4-acac-11f1-8b7e-024e21a51863`