diff --git a/src/assets/genre/ScienceITBackground.svg b/src/assets/genre/ScienceITBackground.svg new file mode 100644 index 00000000..ce5369a5 --- /dev/null +++ b/src/assets/genre/ScienceITBackground.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/genre/artBackground.svg b/src/assets/genre/artBackground.svg new file mode 100644 index 00000000..0612fb42 --- /dev/null +++ b/src/assets/genre/artBackground.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/genre/humanityBackground.svg b/src/assets/genre/humanityBackground.svg new file mode 100644 index 00000000..8300d318 --- /dev/null +++ b/src/assets/genre/humanityBackground.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/genre/literatureBackground.svg b/src/assets/genre/literatureBackground.svg new file mode 100644 index 00000000..8afcc8cf --- /dev/null +++ b/src/assets/genre/literatureBackground.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/genre/socialScienceBackground.svg b/src/assets/genre/socialScienceBackground.svg new file mode 100644 index 00000000..371baab4 --- /dev/null +++ b/src/assets/genre/socialScienceBackground.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/group/calendar.svg b/src/assets/group/calendar.svg new file mode 100644 index 00000000..95842a13 --- /dev/null +++ b/src/assets/group/calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/group/lock.svg b/src/assets/group/lock.svg new file mode 100644 index 00000000..2a909726 --- /dev/null +++ b/src/assets/group/lock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/common/Post/PostHeader.tsx b/src/components/common/Post/PostHeader.tsx index 25875a1c..4145c9f9 100644 --- a/src/components/common/Post/PostHeader.tsx +++ b/src/components/common/Post/PostHeader.tsx @@ -1,6 +1,5 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; - interface PostHeaderProps { profileImgUrl: string; userName: string; diff --git a/src/components/feed/FollowList.tsx b/src/components/feed/FollowList.tsx index 3415af90..dc969dc7 100644 --- a/src/components/feed/FollowList.tsx +++ b/src/components/feed/FollowList.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import rightArrow from '../../assets/feed/rightArrow.svg'; import people from '../../assets/feed/people.svg'; import character from '../../assets/feed/character.svg'; +import { typography } from '@/styles/global/global'; const followerData = { followers: [ @@ -83,7 +84,7 @@ const Container = styled.div` display: flex; flex-direction: row; color: var(--color-white); - font-size: 11px; + font-size: ${typography.fontSize['2xs']}; font-weight: var(--font-weight-medium); line-height: 20px; } @@ -127,7 +128,7 @@ const FollowContainer = styled.div` text-overflow: ellipsis; text-align: center; white-space: nowrap; - font-size: var(--string-size-small02, 11px); + font-size: ${typography.fontSize['2xs']}; font-weight: var(--string-weight-regular, 400); line-height: 20px; } diff --git a/src/components/feed/UserProfileItem.tsx b/src/components/feed/UserProfileItem.tsx index 6b43b78b..41e3680e 100644 --- a/src/components/feed/UserProfileItem.tsx +++ b/src/components/feed/UserProfileItem.tsx @@ -2,6 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { useState } from 'react'; import styled from '@emotion/styled'; import rightArrow from '../../assets/feed/rightArrow.svg'; +import { typography } from '@/styles/global/global'; export interface UserProfileItemProps { profileImgUrl: string; @@ -143,7 +144,7 @@ const UserProfile = styled.div` align-items: center; gap: 2px; color: var(--color-white); - font-size: 11px; + font-size: ${typography.fontSize['2xs']}; font-weight: var(--font-weight-regular); line-height: 20px; } diff --git a/src/components/group/GroupCard.tsx b/src/components/group/GroupCard.tsx index f12b94d3..1396b271 100644 --- a/src/components/group/GroupCard.tsx +++ b/src/components/group/GroupCard.tsx @@ -8,25 +8,30 @@ interface Props { group: Group; isOngoing?: boolean; type?: 'main' | 'search' | 'modal'; + isRecommend?: boolean; } export const GroupCard = forwardRef( - ({ group, isOngoing, type = 'main' }, ref) => { + ({ group, isOngoing, type = 'main', isRecommend = false }, ref) => { return ( - + - {group.title} + {group.title} - + people

{group.participants}

/ {group.maximumParticipants}명 {isOngoing === true ? ( - {group.deadLine}일 뒤 모집 마감 + + {group.deadLine}일 뒤 모집 마감 + ) : ( - {group.deadLine}일 뒤 종료 + + {group.deadLine}일 뒤 종료 + )} @@ -39,23 +44,23 @@ const Card = styled.div<{ cardType: 'main' | 'search' | 'modal' }>` display: flex; align-items: center; background: ${({ cardType }) => - cardType === 'search' ? 'var(--color-black-main)' : 'var(--color-darkgrey-main)'}; + cardType === 'search' ? colors.black.main : colors.darkgrey.main}; + border-top: ${({ cardType }) => + cardType === 'search' ? `1px solid ${colors.darkgrey.dark}` : 'none'}; + border: ${({ cardType }) => (cardType === 'main' ? `1px solid ${colors.grey[300]}` : 'none')}; border-radius: ${({ cardType }) => (cardType === 'search' ? `none` : '12px')}; box-sizing: border-box; padding: ${({ cardType }) => (cardType === 'search' ? '24px 12px 12px 12px' : '12px')}; gap: 12px; width: 100%; - border: ${({ cardType }) => (cardType === 'main' ? '1px solid var(--color-grey-300)' : 'none')}; - border-top: ${({ cardType }) => - cardType === 'search' ? `1px solid ${colors.darkgrey.dark}` : ''}; `; -const Cover = styled.img<{ cardType: 'main' | 'search' | 'modal' }>` +const Cover = styled.img<{ cardType: 'main' | 'search' | 'modal'; isRecommend?: boolean }>` object-fit: cover; flex-shrink: 0; - - width: ${({ cardType }) => (cardType === 'search' ? '60px' : '80px')}; - height: ${({ cardType }) => (cardType === 'search' ? '80px' : '107px')}; + width: ${({ cardType, isRecommend }) => (cardType === 'search' || isRecommend ? '60px' : '80px')}; + height: ${({ cardType, isRecommend }) => + cardType === 'search' || isRecommend ? '80px' : '107px'}; `; const Info = styled.div` @@ -65,8 +70,9 @@ const Info = styled.div` flex: 1; `; -const Title = styled.h3` - font-size: ${typography.fontSize.lg}; +const Title = styled.h3<{ isRecommend: boolean }>` + font-size: ${({ isRecommend }) => + isRecommend ? typography.fontSize.sm : typography.fontSize.lg}; font-weight: ${typography.fontWeight.semibold}; color: #ffffff; margin-bottom: 10px; @@ -84,31 +90,32 @@ const Bottom = styled.div` gap: 6px; `; -const Participant = styled.div` +const Participant = styled.div<{ isRecommend: boolean }>` display: flex; align-items: center; gap: 6px; - color: var(--color-white); - font-size: var(--font-size-small03); - font-weight: var(--font-weight-medium); + color: ${colors.white}; + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.medium}; img { width: 16px; height: 16px; } `; + const MaximumParticipants = styled.div` - color: var(--color-grey-100); - font-size: var(--font-size-small03); + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.xs}; `; -const RecruitingDeadline = styled.div` - font-size: var(--font-size-small03); - font-weight: var(--font-weight-semibold); - color: var(--color-red); +const RecruitingDeadline = styled.div<{ isRecommend: boolean }>` + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.red}; `; -const OngoingDeadline = styled.div` - font-size: var(--font-size-small03); - font-weight: var(--font-weight-semibold); - color: var(--color-white); +const OngoingDeadline = styled.div<{ isRecommend: boolean }>` + font-size: ${typography.fontSize.xs}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.white}; `; diff --git a/src/components/group/MyGroupBox.tsx b/src/components/group/MyGroupBox.tsx index e7210ac0..2a74a48d 100644 --- a/src/components/group/MyGroupBox.tsx +++ b/src/components/group/MyGroupBox.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import rightChevron from '../../assets/common/right-Chevron.svg'; export interface Group { - id: string; + id: number | string; title: string; participants: number; maximumParticipants?: number; diff --git a/src/components/today-words/MessageList/MessageList.styled.ts b/src/components/today-words/MessageList/MessageList.styled.ts index c7831dae..256fdd34 100644 --- a/src/components/today-words/MessageList/MessageList.styled.ts +++ b/src/components/today-words/MessageList/MessageList.styled.ts @@ -50,7 +50,7 @@ export const UserName = styled.div` export const TimeStamp = styled.div` color: ${semanticColors.text.tertiary}; - font-size: 11px; + font-size: ${typography.fontSize['2xs']}; font-weight: ${typography.fontWeight.regular}; `; diff --git a/src/mocks/groupDetail.mock.ts b/src/mocks/groupDetail.mock.ts new file mode 100644 index 00000000..994eb34b --- /dev/null +++ b/src/mocks/groupDetail.mock.ts @@ -0,0 +1,53 @@ +export const mockGroupDetail = { + title: '서집만 읽는 사람들 3월', + isPrivate: true, + introduction: + '‘서집만 읽는 사람들’ 3월 모임입니다. 이번 달 모임방은 심장보다 단단한 토마토 한 알 완독합니다.', + activityPeriod: { + start: '2025.01.12', + end: '2025.01.28', + }, + members: { + current: 15, + max: 30, + }, + ddayText: '2일 남음', + genre: '문학', + book: { + title: '심장보다 단단한 토마토 한 알', + author: '고선경 저 · 림', + coverUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s', + description: + '유머와 재미, 솔직한 고백 속에서 빛나는 진심, 용기와 사랑을 여전히 간직한 채로 어쩌고저쩌고...', + }, + recommendations: [ + { + id: 1, + title: '방제목입니다다 방 제목입...', + participants: 22, + maximumParticipants: 30, + deadLine: 3, + coverUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s', + }, + { + id: 2, + title: '방제목입니다다 방 제목입...', + participants: 22, + maximumParticipants: 30, + deadLine: 3, + coverUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s', + }, + { + id: 3, + title: '방제목입니다다 방 제목입...', + participants: 22, + maximumParticipants: 30, + deadLine: 3, + coverUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5hmuOQ-2kEsWIyO7-COfdycw9LZt6c01v2A&s', + }, + ], +}; diff --git a/src/pages/groupDetail/GroupDetail.styled.ts b/src/pages/groupDetail/GroupDetail.styled.ts new file mode 100644 index 00000000..d8a44c9a --- /dev/null +++ b/src/pages/groupDetail/GroupDetail.styled.ts @@ -0,0 +1,226 @@ +import styled from '@emotion/styled'; +import { colors, typography } from '@/styles/global/global'; +import { getBackgroundImageByGenre } from '../../utils/getBackgroundImageByGenre'; + +export const Wrapper = styled.div` + display: flex; + position: relative; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 320px; + max-width: 767px; + height: 100%; + margin: 0 auto; + background-color: ${colors.black.main}; + overflow: hidden; +`; + +export const TopBackground = styled.div<{ genre: string }>` + width: 100%; + background: + linear-gradient( + 172deg, + rgba(18, 18, 18, 0) 5.94%, + var(--color-view-viewfield_background_black, #121212) 94% + ), + url(${({ genre }) => getBackgroundImageByGenre(genre)}) no-repeat center / cover; +`; + +export const Header = styled.div` + display: flex; + position: fixed; + padding: 16px 20px; + justify-content: space-between; + width: 100%; + min-width: 320px; + max-width: 767px; + top: 0; + left: 0; + right: 0; + margin: 0 auto; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0) 0%, + var(--color-view-viewfield_background_black, #121212) 100% + ); + backdrop-filter: blur(0px); + z-index: 10; +`; + +export const BannerSection = styled.section` + display: flex; + flex-direction: column; + width: 100%; + padding: 20px; + margin-top: 56px; + gap: 20px; + color: ${colors.white}; +`; + +export const GroupTitle = styled.h1` + font-size: ${typography.fontSize['2xl']}; + font-weight: ${typography.fontWeight.bold}; + display: flex; + gap: 2px; +`; + +export const SubTitle = styled.div` + font-size: ${typography.fontSize['sm']}; + font-weight: ${typography.fontWeight.semibold}; + margin-top: 20px; + color: ${colors.white}; +`; + +export const Intro = styled.p` + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.regular}; + color: ${colors.grey[100]}; +`; + +export const MetaInfo = styled.div` + display: flex; + margin-top: 16px; + gap: 40px; +`; + +export const Meta = styled.div` + display: flex; + flex-direction: column; + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.medium}; + color: ${colors.white}; + gap: 12px; + span { + display: flex; + align-items: center; + gap: 2px; + } +`; + +export const MetaDate = styled.span` + color: ${colors.grey[100]}; + font-size: ${typography.fontSize['2xs']}; + font-weight: ${typography.fontWeight.regular}; +`; + +export const MetaMember = styled.span` + color: ${colors.grey[100]}; + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.medium}; +`; + +export const MetaTotalMember = styled.span` + color: ${colors.white}; + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.medium}; +`; + +export const TagRow = styled.div` + display: flex; + gap: 12px; +`; + +export const Tag = styled.div` + background-color: ${colors.grey[400]}; + color: ${colors.white}; + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.medium}; + padding: 8px 12px; + border-radius: 40px; + strong { + color: ${colors.neongreen}; + } +`; + +export const TagGenre = styled.span` + color: ${colors.character.orange}; +`; + +export const BookSection = styled.section` + display: flex; + flex-direction: column; + width: 94%; + gap: 24px; + background: ${colors.darkgrey.dark}; + margin: 10px 20px 0 20px; + padding: 20px; + border-radius: 16px; +`; + +export const BookHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + color: ${colors.white}; + font-size: ${typography.fontSize['base']}; + font-weight: ${typography.fontWeight.medium}; +`; + +export const BookInfo = styled.div` + display: flex; + gap: 16px; +`; + +export const BookCover = styled.img` + width: 80px; + height: 107px; + object-fit: cover; +`; + +export const BookDetails = styled.div` + display: flex; + flex-direction: column; + font-size: ${typography.fontSize['xs']}; + font-weight: ${typography.fontWeight.medium}; + gap: 20px; + color: ${colors.white}; + margin: auto 0; +`; + +export const BookIntro = styled.div` + > p { + margin-top: 4px; + color: ${colors.grey[200]}; + } +`; + +export const RecommendSection = styled.section` + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; + margin-bottom: 80px; +`; + +export const RecommendText = styled.h2` + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + margin: 40px 20px 0 20px; +`; + +export const GroupCardBox = styled.div` + display: flex; + overflow-x: auto; + padding: 0 20px; + gap: 20px; +`; + +export const BottomButton = styled.button` + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100%; + min-width: 320px; + max-width: 767px; + margin: 0 auto; + height: 50px; + background-color: ${colors.purple.main}; + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + border: none; + z-index: 10; +`; diff --git a/src/pages/groupDetail/GroupDetail.tsx b/src/pages/groupDetail/GroupDetail.tsx new file mode 100644 index 00000000..e7d6d5eb --- /dev/null +++ b/src/pages/groupDetail/GroupDetail.tsx @@ -0,0 +1,140 @@ +import { + Wrapper, + TopBackground, + Header, + BannerSection, + GroupTitle, + SubTitle, + Intro, + MetaInfo, + Meta, + MetaDate, + MetaMember, + MetaTotalMember, + TagRow, + Tag, + TagGenre, + BookSection, + BookHeader, + BookInfo, + BookCover, + BookDetails, + BookIntro, + RecommendSection, + RecommendText, + GroupCardBox, + BottomButton, +} from './GroupDetail.styled'; +import leftArrow from '../../assets/common/leftArrow.svg'; +import moreIcon from '../../assets/common/more.svg'; +import { useNavigate } from 'react-router-dom'; +import { IconButton } from '@/components/common/IconButton'; +import { mockGroupDetail } from '../../mocks/groupDetail.mock'; +import lockIcon from '../../assets/group/lock.svg'; +import calendarIcon from '../../assets/group/calendar.svg'; +import peopleIcon from '../../assets/common/darkPeople.svg'; +import rightChevron from '../../assets/common/right-Chevron.svg'; +import { GroupCard } from '@/components/group/GroupCard'; + +const GroupDetail = () => { + const { + title, + isPrivate, + introduction, + activityPeriod, + members, + ddayText, + genre, + book, + recommendations, + } = mockGroupDetail; + + const navigate = useNavigate(); + + const handleBackButton = () => { + navigate(-1); + }; + + const handleMoreButton = () => {}; + + return ( + + +
+ + +
+ + + {title} {isPrivate && 자물쇠 아이콘} + + +
소개글
+
+ {introduction} + + + + + 모임 활동기간 + + + {activityPeriod.start} ~ {activityPeriod.end} + + + + + 참여 중인 독서메이트 + + + {members.current} + / {members.max}명 + + + + + + 모집 {ddayText} + + + 장르 {genre} + + + + + + +

{book.title}

+ + + + + +
{book.author}
+ + 도서 소개
+

{book.description}

+ + + + + + 이런 모임방은 어때요? + + {recommendations.map(group => ( + + ))} + + + 참여하기 + + ); +}; + +export default GroupDetail; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 25584018..48a6e42b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,6 +18,7 @@ import ApplyBook from './search/ApplyBook'; import OtherFeedPage from './feed/OtherFeedPage'; import FollowerListPage from './feed/FollowerListPage'; import TodayWords from './today-words/TodayWords'; +import GroupDetail from './groupDetail/GroupDetail'; import FeedDetailPage from './feed/FeedDetailPage'; import ScrollToTop from '@/components/common/ScrollToTop'; @@ -31,9 +32,10 @@ const Router = () => { } /> } /> - } /> } /> - } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/src/pages/searchBook/SearchBook.tsx b/src/pages/searchBook/SearchBook.tsx new file mode 100644 index 00000000..9d3b0085 --- /dev/null +++ b/src/pages/searchBook/SearchBook.tsx @@ -0,0 +1,130 @@ +import { + Wrapper, + TopBackground, + Header, + BannerSection, + BookInfo, + BookTitle, + Author, + Intro, + SubTitle, + SubText, + ButtonSection, + RecruitingGroupButton, + RightArea, + WritePostButton, + SaveButton, + FeedSection, + FeedTitle, + FilterContainer, + EmptyState, + EmptyTitle, + EmptySubText, +} from './SearchBook.styled'; +import { useNavigate } from 'react-router-dom'; +import leftArrow from '../../assets/common/leftArrow.svg'; +import moreIcon from '../../assets/common/more.svg'; +import { IconButton } from '@/components/common/IconButton'; +import { mockSearchBook } from '@/mocks/searchBook.mock'; +import saveIcon from '../../assets/common/SaveIcon.svg'; +import rightChevron from '../../assets/common/right-Chevron.svg'; +import plusIcon from '../../assets/common/plus.svg'; +import { Filter } from '@/components/common/Filter'; +import { useState } from 'react'; +import FeedPost from '@/components/feed/FeedPost'; +import { IntroModal } from '@/components/search/IntroModal'; + +const FILTER = ['최신순', '인기순']; + +const SearchBook = () => { + const { title, author, introduction, coverUrl, recruitGroups, posts } = mockSearchBook; + const [selectedFilter, setSelectedFilter] = useState('인기순'); + const [showIntroModal, setShowIntroModal] = useState(false); + + const navigate = useNavigate(); + + const handleBackButton = () => { + navigate(-1); + }; + + const handleIntroClick = () => setShowIntroModal(true); + + const handleCloseIntroModal = () => setShowIntroModal(false); + + const handleMoreButton = () => {}; + + const handleRecruitingGroupButton = () => { + navigate('./group'); + }; + + const handleWritePostButton = () => {}; + + const handleSaveButton = () => {}; + + const hasFeeds = mockSearchBook.posts.length > 0; + + return ( + + +
+ + +
+ + + {title} + {author} + + + 소개 + {introduction} + + + + + 모집중인 모임방 {recruitGroups.length}개{' '} + 오른쪽 화살표 아이콘 + + + + 피드에 글쓰기 더하기 아이콘 + + + 저장 버튼 + + + + + + + 피드 글 둘러보기 + + + + + {hasFeeds ? ( + <> + {posts.map(post => ( + + ))} + + ) : ( + + 이 책으로 작성된 피드가 없어요. + 첫 번째 피드를 작성해보세요! + + )} + + + {showIntroModal && ( + + )} + + ); +}; + +export default SearchBook; diff --git a/src/styles/global/global.ts b/src/styles/global/global.ts index d8a7a542..d92d54e1 100644 --- a/src/styles/global/global.ts +++ b/src/styles/global/global.ts @@ -59,6 +59,7 @@ export const typography = { secondary: 'Paperlogy', }, fontSize: { + '2xs': '11px', xs: '12px', // small text sm: '14px', // body small base: '16px', // body base @@ -183,6 +184,7 @@ export const coreDesignTokens = css` --font-family-primary: ${typography.fontFamily.primary}; --font-family-secondary: ${typography.fontFamily.secondary}; + --font-size-2xs: ${typography.fontSize['2xs']}; --font-size-xs: ${typography.fontSize.xs}; --font-size-sm: ${typography.fontSize.sm}; --font-size-base: ${typography.fontSize.base}; diff --git a/src/utils/getBackgroundImageByGenre.ts b/src/utils/getBackgroundImageByGenre.ts new file mode 100644 index 00000000..da5a1f21 --- /dev/null +++ b/src/utils/getBackgroundImageByGenre.ts @@ -0,0 +1,22 @@ +import artBackground from '../assets/genre/artBackground.svg'; +import humanityBackground from '../assets/genre/humanityBackground.svg'; +import ScienceITBackground from '../assets/genre/ScienceITBackground.svg'; +import literatureBackground from '../assets/genre/literatureBackground.svg'; +import socialScienceBackground from '../assets/genre/socialScienceBackground.svg'; + +export const getBackgroundImageByGenre = (genre: string): string => { + switch (genre) { + case '문학': + return literatureBackground; + case '사회과학': + return socialScienceBackground; + case '과학•IT': + return ScienceITBackground; + case '예술': + return artBackground; + case '인문학': + return humanityBackground; + default: + return literatureBackground; + } +};