[๐ design system] ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ ์ปดํฌ๋ํธ ์์ฑ #55
Conversation
|
๐storybook: https://6695ee4a0eafb3b77660fc29-lmmulqugcz.chromatic.com/ |
| <Image | ||
| src={url} | ||
| alt={url} | ||
| width={DEFAULT_IMG_SIZE_PX} | ||
| height={DEFAULT_IMG_SIZE_PX} | ||
| className={cx("gallery-item", "overlay", variant)} | ||
| key={url + index} | ||
| /> | ||
| </div> | ||
| ) : ( | ||
| <Image | ||
| src={url} | ||
| alt={url} | ||
| width={DEFAULT_IMG_SIZE_PX} | ||
| height={DEFAULT_IMG_SIZE_PX} | ||
| className={cx("gallery-item", variant)} | ||
| key={url + index} | ||
| /> | ||
| ) | ||
| )} |
| @if $i == 5 { | ||
| grid-template-columns: repeat(6, 1fr); | ||
| grid-template-rows: repeat(2, 1fr); | ||
| .gallery-item { | ||
| &:nth-child(1), | ||
| &:nth-child(2) { | ||
| grid-column: span 3; | ||
| } | ||
| &:nth-child(n + 3):nth-child(-n + 5) { | ||
| grid-column: span 2; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
๋๊ธ์ ์ฒจ๋ถํ ์ด๋ฏธ์ง(/์์ ํฌํจ์์ )๋ค์ ๋ค์๊ณผ ๊ฐ์ด ๊ทธ๋ ค์ฃผ๊ธฐ ์ํ ์คํ์ผ์
๋๋ค.
There was a problem hiding this comment.
์ด๋ฏธ์ง์ cover ๊ฐ์๊ฑฐ ์ ์ฉํด์ค๋ ์ข๊ฒ ๋ค์ ..! ใ ใ ใ ใ ๋น์จ์ด ..!
There was a problem hiding this comment.
#62 (comment) ๋ฐ์์๋ฃ!
| &.gallery-img-length-#{$i}:not(.post) { | ||
| @if $i == 5 { | ||
| grid-template-columns: repeat(4, 1fr); | ||
| } |
There was a problem hiding this comment.
์นด๋ ์ปดํฌ๋ํธ์ ๋๊ธ ์ด์ธ์ ๊ฐค๋ฌ๋ฆฌ๋ค์ ๋ค์๊ณผ ๊ฐ์ด ๊ทธ๋ ค์ฃผ๊ธฐ ์ํ ์คํ์ผ๋ง์ ๋๋ค.
| @mixin gallery-template($i) { | ||
| @if ($i==4) { | ||
| grid-template-columns: repeat(4, 1fr); | ||
| grid-template-rows: repeat(3, 1fr); | ||
| .gallery-item { | ||
| &:nth-child(1) { | ||
| grid-column: span 3; | ||
| grid-row: span 3; | ||
| } | ||
| &:nth-child(2), | ||
| &:nth-child(3), | ||
| &:nth-child(4) { | ||
| grid-column: span 1; | ||
| grid-column: span 1; | ||
| } | ||
| } | ||
| } @else if($i==3) { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| grid-template-rows: repeat(2, 1fr); | ||
| .gallery-item { | ||
| &:nth-child(1) { | ||
| grid-column: span 2; | ||
| grid-row: span 2; | ||
| } | ||
| &:nth-child(2), | ||
| &:nth-child(3) { | ||
| grid-column: span 1; | ||
| grid-column: span 1; | ||
| } | ||
| } | ||
| } @else if($i==2) { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-template-rows: repeat(1, 1fr); | ||
| .gallery-item { | ||
| grid-column: span 1; | ||
| grid-row: span 1; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
๋ชจ๋ ๊ฐค๋ฌ๋ฆฌ ์ปดํฌ๋ํธ๋ 1 - 4 ๊ฐ์ ์ด๋ฏธ์ง/์์์ ๋ณด์ฌ์ค ๋ ๊ณตํต์ผ๋ก ๋ณด์ฌ์ค ์คํ์ผ์ ๋๋ค.
| @@ -0,0 +1,71 @@ | |||
| import classNames from "classnames/bind"; | |||
There was a problem hiding this comment.
์ ํ์ผ๋ช ์ ์ _gallery ์ธ๊ฐ์ฉ ?
There was a problem hiding this comment.
index.ts ๋ฅผ ๋งจ ์๋์ ๋ฐฐ์นํ๊ณ ์ถ์ด์ ํ์ผ๋ช ๋ค ์์ ๋ค _๋ฅผ ๋ถ์ฌ์คฌ์ต๋๋น๐
| import Image from "next/image"; | ||
| import Style from "./_gallery.module.scss"; | ||
|
|
||
| const MAX_IMAGE_COUNT = 5; |
There was a problem hiding this comment.
Gallery ์ด๋ฏธ์ง์์ MAX_IMAGE_COUNT ๋ฅผ ์ ํด๋ฒ๋ฆฌ๋๊ฑด ์กฐ๊ธ ์ด์ํ ๊ฒ ๊ฐ์์ ..!
๋ณดํต ์ธ๋ถ์์ ๋ฃ์ด์ฃผ๊ฑฐ๋ ๋ฃ์ด์ฃผ๋ ์ด๋ฏธ์ง ๊ฐฏ์์๋ฐ๋ผ ์์์ ์กฐ์ ๋๋๊ฒ ์ข์ ๊ฒ ๊ฐ์๋ฐ ..!
|
์ค์๋ก ๋จธ์งํ ๊ฑฐ ๊ฐ์์ใ ใ revertํด๋ณด๊ฒ ์ต๋๋คใ ใ |
PULL REQUEST TEMPLATE
PR ์ค๋ช
@appear
๋ค์๊ณผ ๊ฐ์ด ์ฌ๋ฌ ์ด๋ฏธ์ง๋ค์ ๋ณด์ฌ์ค์ผํ ๋ ์ฐ๋ ๊ฐค๋ฌ๋ฆฌ ์ปดํฌ๋ํธ์ ๋๋ค.
์คํฌ๋ฆฐ์ท & URL
1 ~ 4 ๊ฐ์ผ ๊ฒฝ์ฐ๋ ๊ณตํต์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ด ๊ทธ๋ ค์ง๋๋ค