-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
This reverts commit 34b4efb.
- Loading branch information
Showing
46 changed files
with
3,358 additions
and
22 deletions.
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
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,13 @@ | ||
| import theme from '@/styles/theme'; | ||
| import { ChakraProvider } from '@chakra-ui/react'; | ||
| import { NextPage } from 'next/types'; | ||
|
|
||
| interface PropTypes { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const ChakraThemeProvider: NextPage<PropTypes> = ({ children }) => { | ||
| return <ChakraProvider theme={theme}>{children}</ChakraProvider>; | ||
| }; | ||
|
|
||
| export default ChakraThemeProvider; |
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,115 @@ | ||
| import { | ||
| ChakraStyledOptions, | ||
| extendTheme, | ||
| ThemeOverride, | ||
| } from '@chakra-ui/react'; | ||
|
|
||
| const fontSizes = { | ||
| xs: '1.2rem', | ||
| sm: '1.4rem', | ||
| md: '1.6rem', | ||
| lg: '1.8rem', | ||
| xl: '2rem', | ||
| '2xl': '2.2rem', | ||
| } as const; | ||
|
|
||
| const buttonSizes = { | ||
| md: { | ||
| padding: '1.3rem 1rem', | ||
| height: '3.5rem', | ||
| }, | ||
| lg: { | ||
| padding: '2.5rem 1.8rem', | ||
| height: '4.5rem', | ||
| }, | ||
| } as const; | ||
|
|
||
| const colors = { | ||
| main: '#F6AD55', // Main Theme | ||
| red: { | ||
| 800: '#F56565', // button (NoticeTheme) | ||
| 900: '#FF0000', // validation (NoticeTheme) | ||
| }, | ||
| yellow: { | ||
| 200: '#FFD4802E', | ||
| 900: '#FFA436', | ||
| }, | ||
| black: { | ||
| 400: '#C1C0C0', // subHeader (Slider) | ||
| 500: '#AFAFAF', // placeHolder (BookSearch) | ||
| 600: '#ACACAC', // placeHolder (MeetingEdit) | ||
| 700: '#727272', // subHeader (MeetingDetail) | ||
| 800: '#3D3D3D', // meetingPeriod (MeetingDetail) | ||
| 900: '#000000', // black | ||
| }, | ||
| white: { | ||
| 400: '#CFCFCF', // placeHolder (MyPage) | ||
| 500: '#D9D9D9', // addBook (MeetingCreate) | ||
| 600: '#E3E3E3', // bookBorder (Bookaive) | ||
| 700: '#E2E8F0', // inputBorder (Common) | ||
| 800: '#FAFAFA', // backGround | ||
| 900: '#FFFFFF', // white | ||
| }, | ||
| kakao: { | ||
| brown: '#191600', | ||
| yellow: '#fee102', | ||
| }, | ||
| } as const; | ||
|
|
||
| interface SchemeTypings { | ||
| component: 'button'; | ||
| colorScheme: 'orange' | 'kakao' | 'orange-fill' | 'grey' | 'grey-fill'; | ||
| cssProps: ChakraStyledOptions; | ||
| } | ||
|
|
||
| const scheme: Record< | ||
| SchemeTypings['component'], | ||
| Record<SchemeTypings['colorScheme'], Partial<SchemeTypings['cssProps']>> | ||
| > = { | ||
| button: { | ||
| orange: { | ||
| color: colors.main, | ||
| border: `${colors.main} 0.1rem solid`, | ||
| }, | ||
| 'orange-fill': { | ||
| color: colors.white[900], | ||
| backgroundColor: colors.main, | ||
| _hover: { | ||
| opacity: 0.8, | ||
| }, | ||
| }, | ||
| grey: { | ||
| color: colors.black[900], | ||
| border: `${colors.white[400]} 0.1rem solid`, | ||
| backgroundColor: colors.white[900], | ||
| _hover: { | ||
| color: colors.black['800'], | ||
| backgroundColor: colors.white[400], | ||
| }, | ||
| }, | ||
| 'grey-fill': { | ||
| color: colors.black[600], | ||
| backgroundColor: colors.white[400], | ||
| }, | ||
| kakao: { | ||
| color: colors.kakao.brown, | ||
| backgroundColor: colors.kakao.yellow, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const shadows = { | ||
| default: '0px 0px 7px -5px #000000', // BoxShadow (MeetingList Box) | ||
| }; | ||
|
|
||
| const theme: ThemeOverride = extendTheme({ | ||
| fontSizes, | ||
| buttonSizes, | ||
| colors, | ||
| scheme, | ||
| shadows, | ||
| }); | ||
|
|
||
| export default theme; | ||
|
|
||
| export type ChakraTheme = typeof theme; |
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,148 @@ | ||
| import { | ||
| Avatar, | ||
| AvatarGroup, | ||
| Box, | ||
| Flex, | ||
| Text, | ||
| useDisclosure, | ||
| useTheme, | ||
| VStack, | ||
| } from '@chakra-ui/react'; | ||
| import Image from 'next/image'; | ||
|
|
||
| import IconButton from '@/ui/common/IconButton'; | ||
|
|
||
| import type { APIBookDetail, APIBookmarkedUserList } from '@/types/book'; | ||
| import Link from 'next/link'; | ||
|
|
||
| import { checkAuthentication } from '@/utils/helpers'; | ||
| import { useState } from 'react'; | ||
| import LoginBottomSheet from '../LoginBottomSheet'; | ||
|
|
||
| type Props = Pick< | ||
| APIBookDetail, | ||
| 'title' | 'author' | 'contents' | 'imageUrl' | 'url' | ||
| > & | ||
| Omit<APIBookmarkedUserList, 'bookId'> & { | ||
| onBookmarkClick: (isBookMarked: boolean) => void; | ||
| }; | ||
|
|
||
| const BookInfo = ({ | ||
| title, | ||
| author, | ||
| contents, | ||
| imageUrl, | ||
| url: contentsUrl, | ||
| onBookmarkClick, | ||
| ...bookmarkInfo | ||
| }: Props) => { | ||
| const isAuthenticated = checkAuthentication(); | ||
| const theme = useTheme(); | ||
| const [bookmark, setBookmark] = useState(bookmarkInfo.isInMyBookshelf); | ||
|
|
||
| const { | ||
| isOpen: isLoginBottomSheetOpen, | ||
| onOpen: onLoginBottomSheetOpen, | ||
| onClose: onLoginBottomSheetsClose, | ||
| } = useDisclosure(); | ||
|
|
||
| const handleBookmarkClick = () => { | ||
| if (!isAuthenticated) { | ||
| onLoginBottomSheetOpen(); | ||
| return; | ||
| } | ||
|
|
||
| setBookmark(prev => { | ||
| const next = !prev; | ||
| onBookmarkClick(next); | ||
| return next; | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Flex gap="2rem" align="flex-end"> | ||
| <Box | ||
| shadow="lg" | ||
| position="relative" | ||
| width="18rem" | ||
| height="24rem" | ||
| flexShrink={0} | ||
| > | ||
| <Image | ||
| src={imageUrl.replace('R120x174.q85', 'R300x0.q100')} | ||
| alt="book" | ||
| fill | ||
| sizes="300px" | ||
| /> | ||
| </Box> | ||
| <VStack align="flex-start"> | ||
| <IconButton | ||
| name="bookmark-legacy" | ||
| color={theme.colors.main} | ||
| strokeWidth="0.15rem" | ||
| onClick={handleBookmarkClick} | ||
| fill={bookmark} | ||
| mb="0.5rem" | ||
| ml="-0.1rem" | ||
| /> | ||
| <Text fontSize="lg" fontWeight="bold"> | ||
| {title} | ||
| </Text> | ||
| <Text fontSize="sm">{author}</Text> | ||
| </VStack> | ||
| </Flex> | ||
| <Text fontSize="md"> | ||
| {contents} ... | ||
| {contentsUrl && ( | ||
| <Text | ||
| as={Link} | ||
| href={contentsUrl} | ||
| color="main" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| 더보기 | ||
| </Text> | ||
| )} | ||
| </Text> | ||
|
|
||
| {!isAuthenticated && ( | ||
| <LoginBottomSheet | ||
| isOpen={isLoginBottomSheetOpen} | ||
| onClose={onLoginBottomSheetsClose} | ||
| /> | ||
| )} | ||
|
|
||
| <Flex align="center" minH="2rem"> | ||
| <AvatarGroup> | ||
| {bookmarkInfo.users.map(({ userId, profileImage }) => ( | ||
| <Avatar | ||
| as={Link} | ||
| href={`/profile/${userId}`} | ||
| key={userId} | ||
| src={profileImage} | ||
| /> | ||
| ))} | ||
| </AvatarGroup> | ||
| <Text fontSize="sm" pl="0.8rem"> | ||
| {getUserInfoText(bookmarkInfo.totalCount, bookmarkInfo.users.length)} | ||
| </Text> | ||
| </Flex> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const getUserInfoText = (totalCount: number, avatarCount: number) => { | ||
| const otherCount = totalCount - avatarCount; | ||
|
|
||
| if (otherCount === 0 && totalCount === 0) { | ||
| return '아직 이 책을 책장에 꽂은 사람이 없어요.'; | ||
| } else if (otherCount === 0) { | ||
| return '님이 이 책을 책장에 꽂았어요.'; | ||
| } | ||
|
|
||
| return `외 ${otherCount}명이 이 책을 책장에 꽂았어요.`; | ||
| }; | ||
|
|
||
| export default BookInfo; |
Oops, something went wrong.