[💅 design system] 이미지 갤러리 컴포넌트 생성 #55
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| @use "../../functions/" as *; | ||
| @use "../../mixins/" as *; | ||
| @use "sass:map"; | ||
|
|
||
| $overlay-color: #fefefe; | ||
|
|
||
| .gallery { | ||
| display: grid; | ||
| gap: space("sm"); | ||
| min-width: min(50vw, 36rem); | ||
| position: relative; | ||
|
|
||
| img { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative !important; | ||
| z-index: z("base") !important; | ||
| } | ||
|
|
||
| .overlay { | ||
| filter: brightness(40%); | ||
| position: absolute; | ||
| } | ||
|
|
||
| .image-container { | ||
| position: relative; | ||
| display: inline-block; | ||
| cursor: pointer; | ||
|
|
||
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| &.post { | ||
| grid-column: span 2; | ||
| grid-row: span 1; | ||
| } | ||
| } | ||
|
|
||
| .display-leftover-img-count { | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| color: $overlay-color; | ||
| z-index: z("default"); | ||
| font-size: font-size(h3); | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| @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; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @for $i from 1 through 5 { | ||
| &.gallery-img-length-#{$i}:not(.post) { | ||
| @if $i == 5 { | ||
| grid-template-columns: repeat(4, 1fr); | ||
| } | ||
|
Comment on lines
+97
to
+100
There was a problem hiding this comment. 카드 컴포넌트와 댓글 이외의 갤러리들은 다음과 같이 그려주기 위한 스타일링입니다. 
|
||
| @include gallery-template($i); | ||
|
|
||
| .gallery-item { | ||
| @if $i == 5 { | ||
| &:nth-child(1) { | ||
| grid-column: span 2; | ||
| grid-row: span 2; | ||
| } | ||
| &:nth-child(n + 2):nth-child(-n + 5) { | ||
| grid-column: span 1; | ||
| grid-row: span 1; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Post gallery | ||
| &.post { | ||
| @for $i from 1 through 5 { | ||
| &.gallery-img-length-#{$i} { | ||
| @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; | ||
| } | ||
| } | ||
| } | ||
|
Comment on lines
+122
to
+134
There was a problem hiding this comment. 댓글에 첨부한 이미지(/영상 포함예정)들은 다음과 같이 그려주기 위한 스타일입니다. There was a problem hiding this comment. 이미지에 cover 같은거 적용해줘도 좋겠네요 ..! ㅋㅋㅋㅋ 비율이 ..! There was a problem hiding this comment. #62 (comment) 반영완료! |
||
| @include gallery-template($i); | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { useEffect } from "react"; | ||
| import { useAppTheme } from "../../hooks"; | ||
| import Gallery from "./_gallery"; | ||
|
|
||
| const meta: Meta<typeof Gallery> = { | ||
| title: "tripie-ui/Gallery/Default", | ||
| component: Gallery, | ||
| tags: ["autodocs"], | ||
| decorators: [ | ||
| (story, context) => { | ||
| const { mode, setMode } = useAppTheme(); | ||
| const selectedTheme = context.globals.theme || mode; | ||
|
|
||
| useEffect(() => { | ||
| setMode(selectedTheme); | ||
| }, [selectedTheme]); | ||
|
|
||
| return <div className={`${context.globals.theme}`}>{story()}</div>; | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| name: "Default", | ||
| args: { | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const ImageCount2: Story = { | ||
| name: "ImageCount2", | ||
| args: { | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const ImageCount3: Story = { | ||
| name: "ImageCount3", | ||
| args: { | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const ImageCount4: Story = { | ||
| name: "ImageCount4", | ||
| args: { | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const MaxImage5: Story = { | ||
| name: "MaxImage5", | ||
| args: { | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const OverMaxImageWithCount: Story = { | ||
| name: "OverMaxImageWithCount - displayLeftOverImgCount", | ||
| args: { | ||
| displayLeftOverImgCount: true, | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const OverMaxImageWithoutCount: Story = { | ||
| name: "OverMaxImageWithout Count", | ||
| args: { | ||
| displayLeftOverImgCount: false, | ||
| urls: [ | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| "https://media.triple.guide/triple-cms/c_limit,f_auto,h_1024,w_1024/f4208212-7c76-4d0b-9872-9651faa1a735.jpeg", | ||
| ], | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import classNames from "classnames/bind"; | ||
|
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 를 정해버리는건 조금 어색한 것 같아요 ..! |
||
|
|
||
| export type GalleryProps = { | ||
| urls: string[]; | ||
| displayLeftOverImgCount?: boolean; | ||
| variant?: "default" | "post"; | ||
| } & Omit<React.ComponentProps<"div">, "children">; | ||
|
|
||
| const cx = classNames.bind(Style); | ||
| const DEFAULT_IMG_SIZE_PX = 1024; | ||
|
|
||
| const Gallery = ({ | ||
| urls, | ||
| className, | ||
| displayLeftOverImgCount = false, | ||
| variant = "default", | ||
| ...props | ||
| }: GalleryProps) => { | ||
| const totalImgUrlCount = urls.length; | ||
| const displayedImages = urls.slice(0, MAX_IMAGE_COUNT); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cx( | ||
| "gallery", | ||
| variant, | ||
| `gallery-img-length-${displayedImages.length}` | ||
| )} | ||
| {...props} | ||
| > | ||
| {displayedImages.map((url, index) => | ||
| displayLeftOverImgCount && index === 4 ? ( | ||
| <div className={cx("image-container", variant)}> | ||
| <span className={cx("display-leftover-img-count", variant)}> | ||
| +{totalImgUrlCount - MAX_IMAGE_COUNT} | ||
| </span> | ||
| <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} | ||
| /> | ||
| ) | ||
| )} | ||
|
Comment on lines
+41
to
+60
|
||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const PostGallery = (props: Omit<GalleryProps, "variant">) => ( | ||
| <Gallery {...props} variant="post" /> | ||
| ); | ||
|
|
||
| Gallery.Post = PostGallery; | ||
|
|
||
| export default Gallery; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
모든 갤러리 컴포넌트는 1 - 4 개의 이미지/영상을 보여줄 때 공통으로 보여줄 스타일입니다.