컴포넌트
게시글에 사용되는 컴포넌트 목록입니다.
기본
Article
게시글을 감싸는 필수 컴포넌트입니다.
<Article>{children}</Article><Article> 컴포넌트를 이용한 예시는 [예시 링크]에서 확인할 수 있습니다.
ArticleLink
블로그 글의 고유 주소 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.ArticleLink />CategoryLink
카테고리 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.CategoryLink />RedirectCommentLink
댓글을 열고 닫을 수 있는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.RedirectCommentLink />Thumbnail
대표 이미지 썸네일이 표시되는 영역입니다. (대표 이미지가 없는 경우 표시되지 않음)
<Article.Thumbnail>{children}</Article.Thumbnail>해당 컴포넌트 아래에 올 수 있는 변수
ThumbnailImg
대표 이미지 컴포넌트 입니다. img 태그 (opens in a new tab)를 기반으로 하며,
상위 컴포넌트로 <Article.Thumbnail>이 필요합니다.
<Article.Thumbnail>
<Article.ThumbnailImg />
</Article.Thumbnail>CommentCount
댓글의 갯수를 출력하는 영역입니다.
<Article.CommentCount>{children}</Article.CommentCount>해당 컴포넌트 아래에 올 수 있는 변수
관리기능 (어드민)
Admin
글 관리기능을 보여주는 컴포넌트입니다. (관리 권한 있는 경우만 표시됩니다)
<Article.Admin>{children}</Article.Admin><Article.Admin> 아래에 올 수 있는 변수
AdminModifyLink
게시글을 수정하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.AdminModifyLink />AdminModifyLinkWithNewWindow
새 창으로 게시글을 수정하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.AdminModifyLinkWithNewWindow />AdminStateChangeLink
게시글 상태를 변경하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.AdminStateChangeLink />AdminTrackBackLink
관련 글을 트랙백하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.AdminTrackBackLink />AdminDeleteLink
게시글을 삭제하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.AdminDeleteLink />태그
Tag
글과 관련된 태그가 출력되는 영역을 감싸는 컴포넌트입니다.
<Article.Tag>{children}</Article.Tag><Article.Tag> 아래에 올 수 있는 변수
퍼머링크 / 인덱스
TODO: 퍼머링크 / 인덱스 세부 안내 텍스트 추가
퍼머링크 페이지에서와 인덱스 페이지에서 표시될 내용을 구분할 수 있습니다. 만약 퍼머링크 페이지 또는 인덱스 페이지 영역 밖에서 사용되는 컴포넌트 및 변수는 둘 모두에서 표시됩니다.
Permalink
퍼머링크 영역을 감싸는 컴포넌트입니다. <Article>의 기본 컴포넌트와 기본 변수를 동일하게 사용할 수 있습니다.
<Article.Permalink>{children}</Article.Permalink>Index
인덱스 영역을 감싸는 컴포넌트입니다. <Article>의 기본 컴포넌트와 기본 변수를 동일하게 사용할 수 있습니다.
<Article.Index>{children}</Article.Index>카테고리의 다른 글
Related
글이 속한 카테고리의 다른 글을 보여주는 영역을 감싸는 컴포넌트입니다. 카테고리에 속하지 않은 글에는 표시되지 않습니다.
<Article.Related>{children}</Article.Related><Article.Related> 아래에 올 수 있는 변수
AdminStateChangeLink
카테고리의 다른 글의 주소로 이동하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.RelatedLink />RelatedThumbnail
대표 이미지 썸네일을 표시하는 영역을 감싸는 컴포넌트입니다. 대표 이미지가 있는 경우에만 표시됩니다.
<Article.RelatedThumbnail>{children}</Article.RelatedThumbnail><Article.RelatedThumbnail> 아래에 올 수 있는 변수
RelatedThumbnailImg
카테고리의 다른 글의 대표 이미지 썸네일 이미지 컴포넌트 입니다. img 태그 (opens in a new tab)를 기반으로 합니다.
<Article.RelatedThumbnailImg /> // <img src={RELATED_THUMBNAIL_LINK} alt="Related Article Thumbnail" {...props} />;이전 글 / 다음 글
Prev
이전 글 영역을 감싸는 컴포넌트입니다. 이전 글이 있는 경우 표시됩니다.
<Article.Prev>{children}</Article.Prev><Article.Prev> 아래에 올 수 있는 변수
PrevLink
이전 글의 주소로 이동하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.PrevLink />PrevThumbNail
이전 글의 대표 이미지 썸네일을 표시할 수 있는 영역을 감싸는 컴포넌트입니다. 대표 이미지가 있는 경우 표시됩니다.
<Article.PrevThumbNail>{children}</Article.PrevThumbNail><Article.RelatedThumbnail> 아래에 올 수 있는 변수
PrevThumbNailImg
이전 글의 대표 이미지 썸네일 이미지 컴포넌트 입니다. img 태그 (opens in a new tab)를 기반으로 합니다.
<Article.PrevThumbNailImg /> // <img src={PREV_THUMBLNAIL_LINK} alt="Prev Article Thumbnail" {...props} />Next
다음 글 영역을 감싸는 컴포넌트입니다. 다음 글이 있는 경우 표시됩니다.
<Article.Next>{children}</Article.Next><Article.Next> 아래에 올 수 있는 변수
NextLink
다음 글의 주소로 이동하는 링크입니다. a 태그 (opens in a new tab)를 기반으로 합니다.
<Article.NextLink />NextThumbNail
다음 글의 대표 이미지 썸네일을 표시할 수 있는 영역을 감싸는 컴포넌트입니다. 대표 이미지가 있는 경우 표시됩니다.
<Article.NextThumbNail>{children}</Article.NextThumbNail><Article.RelatedThumbnail> 아래에 올 수 있는 변수
NextThumbNailImg
다음 글의 대표 이미지 썸네일 이미지 컴포넌트 입니다. img 태그 (opens in a new tab)를 기반으로 합니다.
<Article.NextThumbNailImg /> // <img src={NEXT_THUMBLNAIL_LINK} alt="Next Article Thumbnail" {...props} />변수
<Article> 컴포넌트 아래에서만 표시되는 변수 목록입니다.
기본
ARTICLE_TITLE
블로그 글의 제목
<div>{ARTICLE_TITLE}</div>ARTICLE_CATEGORY
카테고리명
<div>{ARTICLE_CATEGORY}</div>ARTICLE_DATE
글쓴 날짜/시간 (yyyy. m. d. HH:MM)
<div>{ARTICLE_DATE}</div>ARTICLE_SIMPLE_DATE
글쓴 날짜 (yyyy. m. d.)
<div>{ARTICLE_SIMPLE_DATE}</div>ARTICLE_DATE_YEAR
글쓴 세부시간 - 연도 (yyyy)
<div>{ARTICLE_DATE_YEAR}</div>ARTICLE_DATE_MONTH
글쓴 세부시간 - 월 (mm)
<div>{ARTICLE_DATE_MONTH}</div>ARTICLE_DATE_DAY
글쓴 세부시간 - 일 (dd)
<div>{ARTICLE_DATE_DAY}</div>ARTICLE_DATE_HOUR
글쓴 세부시간 - 시 (HH)
<div>{ARTICLE_DATE_HOUR}</div>ARTICLE_DATE_MINUTE
글쓴 세부시간 - 분 (MM)
<div>{ARTICLE_DATE_MINUTE}</div>ARTICLE_DATE_SECOND
글쓴 세부시간 - 초 (SS)
<div>{ARTICLE_DATE_SECOND}</div>ARTICLE_AUTHOR
작성자 이름 (*팀블로그용 치환자)
<div>{ARTICLE_AUTHOR}</div>ARTICLE_DESCRIPTION
블로그 본문 내용
<div>{ARTICLE_DESCRIPTION}</div>ARTICLE_THUMBNAIL_URL
대표 이미지 썸네일 주소. 상위 컴포넌트로 <Article.Thumbnail>이 필요합니다.
<img src={ARTICLE_THUMBNAIL_URL} {...props} />ARTICLE_THUMBNAIL_RAW_URL
대표 이미지 원본 주소. 상위 컴포넌트로 <Article.Thumbnail>이 필요합니다.
<div>{ARTICLE_THUMBNAIL_RAW_URL}</div>ARTICLE_COMMENT_COUNT
답글 수. 상위 컴포넌트로 <Article.CommentCount>이 필요합니다.
<div>{ARTICLE_COMMENT_COUNT}</div>관리기능 (어드민)
ADMIN_CURRENT_STATE
글의 현재 상태. 상위 컴포넌트로 <Article.Admin>이 필요합니다.
스킨에서 '공개' 또는 '비공개'로 치환됩니다.
<div>{ADMIN_CURRENT_STATE}</div>ADMIN_NEXT_STATE
글의 이후 상태. 상위 컴포넌트로 <Article.Admin>이 필요합니다.
스킨에서 '공개' 또는 '비공개'로 치환됩니다.
<div>{ADMIN_NEXT_STATE}</div>태그
TAG_LABEL
태그 반복 출력. 상위 컴포넌트로 <Article.Tag>이 필요합니다.
<span>{TAG_LABEL}</span>카테고리의 다른 글
RELATED_ARTICLE_TYPE
카테고리의 다른 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type). 상위 컴포넌트로 <Article.Related>가 필요합니다.
컴포넌트의 className 태그에 할당하여 사용합니다.
<li className={RELATED_ARTICLE_TYPE}>RELATED_ARTICLE_LINK
카테고리의 다른 글의 주소. 상위 컴포넌트로 <Article.Related>가 필요합니다. a tag의 href에 할당하여 사용합니다.
<a href={RELATED_ARTICLE_LINK} {...props} />RELATED_ARTICLE_TITLE
카테고리의 다른 글의 제목. 상위 컴포넌트로 <Article.Related>가 필요합니다.
<span>{RELATED_ARTICLE_TITLE}</span>RELATED_ARTICLE_DATE
카테고리의 다른 글의 발행시간. 상위 컴포넌트로 <Article.Related>가 필요합니다.
<span>{RELATED_ARTICLE_DATE}</span>RELATED_THUMBNAIL_LINK
카테고리의 다른글의 대표 이미지 썸네일 주소. 상위 컴포넌트로 <Article.RelatedThumbnail>가 필요하며, img tag의 src에 할당하여 사용합니다.
<img src={RELATED_THUMBNAIL_LINK} alt="Related Article Thumbnail" />이전 글 / 다음 글
PREV_TYPE
이전 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type). 상위 컴포넌트로 <Article.Prev>가 필요합니다.
<li className={PREV_TYPE}>PREV_LINK
이전 글의 주소. 상위 컴포넌트로 <Article.Prev>가 필요합니다. a tag의 href에 할당하여 사용합니다.
컴포넌트의 className 태그에 할당하여 사용합니다.
<a href={PREV_LINK} {...props} />PREV_TITLE
이전 글의 제목. 상위 컴포넌트로 <Article.Prev>가 필요합니다.
<span>{PREV_TITLE}</span>PREV_DATE
이전 글의 발행시간. 상위 컴포넌트로 <Article.Prev>가 필요합니다.
<span>{PREV_DATE}</span>PREV_LINK
이전 글의 대표 이미지 썸네일 주소. 상위 컴포넌트로 <Article.PrevThumbnail>가 필요하며, img tag의 src에 할당하여 사용합니다.
<img src={PREV_LINK} alt="Prev Article Thumbnail" />NEXT_TYPE
다음 글의 type (대표이미지 없음: text_type, 대표이미지 있음: thumb_type). 상위 컴포넌트로 <Article.Next>가 필요합니다.
컴포넌트의 className 태그에 할당하여 사용합니다.
<li className={NEXT_TYPE}>NEXT_LINK
다음 글의 주소. 상위 컴포넌트로 <Article.Next>가 필요합니다. a tag의 href에 할당하여 사용합니다.
<a href={NEXT_LINK} {...props} />NEXT_TITLE
다음 글의 제목. 상위 컴포넌트로 <Article.Next>가 필요합니다.
<span>{NEXT_TITLE}</span>NEXT_DATE
다음 글의 발행시간. 상위 컴포넌트로 <Article.Next>가 필요합니다.
<span>{NEXT_DATE}</span>NEXT_LINK
다음 글의 대표 이미지 썸네일 주소. 상위 컴포넌트로 <Article.NextThumbnail>가 필요하며, img tag의 src에 할당하여 사용합니다.
<img src={NEXT_LINK} alt="Next Article Thumbnail" />