diff --git a/storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js.map b/storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js.map deleted file mode 100644 index b05291a2c..000000000 --- a/storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-common-Header-Header-stories.14ddc03a.iframe.bundle.js","mappings":";;;;;;;;AAWA;;AAEA;;;;;AASA;;;;;;;;;AAWA;;;;AAMA;;;;AAIA;AAGA;;;;;;;;;AASA;;AAIA;;;AAKA;;;;;;AA6BA;;;AAhBA;;;;;;;;;;;;AAYA;;AAIA;;;;;;;;;;;;;AAaA;;AAIA;;;;;;;;AAUA;;;;;;;;;;;;;;;AAkBA;;;;;;;;;;AAYA;;;;;AChJA;;;AAKA;;;AAIA;;AAMA;;;;AAOA;;;;;;;;AAQA;;;;;AAOA;AAGA;;AC3CA;;;;;;ACCA;;AAEA;;;;ACFA;AACA;AACA;;;ACEA;;ACDA;;;AAGA;;;AAGA;;AAEA;;ACHA;;;;;;;;;;;;;ACIA;;;;AAIA;;;AAGA;AAGA;;;ACfA;;ACJA;;;;;;;ACIA;;AAEA;;;;;AAKA;;;;;;;;;AAWA;;AAEA;;;;;;;;AAQA;;;;;AAOA;;;;;AAOA;;;;;;AAQA;;;;;;;;;AASA;AAGA;AACA;;;AAMA;;;;;;;;ACxEA;;;;;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAWA;;;;;;;;;;;;;ACzBA;;;;;;AAMA;;;;;;;;AAQA;;;;;;;;AAUA;;;;;;;AAOA;AAGA;;;;AAMA;;;;AAIA;;;;;;;;;AASA;;AAIA;AACA;AAGA;;;;AAMA;;;;AAMA;;;;;;AAMA;AAGA;;;AAGA;;;;;AC7FA;;;;AAMA;;;;;;AAMA;;;;;;;;AAQA;;;;;;;;AAUA;;;;;;;;AAQA;AAGA;;;;AAMA;;;;AAIA;AAGA;;;;AAMA;;;AAKA;;AAIA;;;;AAMA;;;;;;;;AAUA;AACA;AAOA;;AAAA;;;;;;;;;ACxFA;;;;;;;AAOA;;;;;;;;;;;;AAYA;AAGA;;;;;;;AAOA;;AAIA;;;AAGA;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;;;;;AAeA;;AAHA;AAGA;;;;;;;AASA;;;;;;;;;AAWA;;;;AAIA;AAGA;;;;;;;;;;;;AAYA;;AAIA;;;;;;;;;;;;AAYA;;AAIA;;AAEA;;AAIA","sources":["webpack://frontend/./src/components/common/Header/Header.styled.ts","webpack://frontend/./src/components/common/Accordion/AccordionHeader/AccordionHeader.styled.tsx","webpack://frontend/./src/components/common/Accordion/AccordionItem/AccordionItem.styled.tsx","webpack://frontend/./src/components/common/Accordion/Accordion.styled.tsx","webpack://frontend/./src/components/common/Accordion/AccordionBody/AccordionBody.styled.ts","webpack://frontend/./src/components/common/Accordion/AccordionBody/AccordionBody.tsx","webpack://frontend/./src/components/common/Menu/MenuList/MenuList.styled.ts","webpack://frontend/./src/components/common/Menu/MenuList/MenuList.tsx","webpack://frontend/./src/components/common/Menu/MenuItem/MenuItem.styled.ts","webpack://frontend/./src/components/common/Menu/MenuItem/MenuItem.tsx","webpack://frontend/./src/components/common/Menu/Menu.tsx","webpack://frontend/./src/components/team/TeamColorEditModal/TeamColorEditModal.styled.ts","webpack://frontend/./src/components/team/TeamPlaceMenu/TeamPlaceMenu.styled.ts","webpack://frontend/./src/components/user/AccountDeleteModal/AccountDeleteModal.styled.ts","webpack://frontend/./src/components/user/ServiceCenterModal/ServiceCenterModal.styled.ts","webpack://frontend/./src/components/user/UserInfoModal/UserInfoModal.styled.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport type { HeaderModalType } from '~/components/common/Header/Header';\n\nexport const Header = styled.header<{ $isMobile: boolean }>`\n display: flex;\n justify-content: space-between;\n\n width: 100%;\n height: 64px;\n padding: 0 14px;\n\n border-bottom: 2px solid ${({ theme }) => theme.color.GRAY200};\n\n ${({ $isMobile }) =>\n $isMobile &&\n css`\n height: 110px;\n flex-wrap: wrap;\n flex-direction: row-reverse;\n `}\n`;\n\nexport const InnerContainer = styled.div`\n display: flex;\n column-gap: 20px;\n width: 100%;\n & > div {\n display: flex;\n align-items: center;\n column-gap: 12px;\n }\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n align-items: center;\n column-gap: 10px;\n`;\n\nexport const Divider = styled.div`\n width: 1px;\n height: 24px;\n\n background-color: ${({ theme }) => theme.color.GRAY500};\n`;\n\nexport const TeamBadgeEditIconWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: 20px;\n height: 20px;\n\n color: ${({ theme }) => theme.color.WHITE};\n }\n`;\n\nexport const TeamNameWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ProfileImage = styled.img`\n width: 40px;\n height: 40px;\n\n border-radius: 50%;\n object-fit: cover;\n`;\n\nexport const teamPlaceName = css`\n font-size: 24px;\n font-weight: bold;\n`;\n\nexport const notificationButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 44px;\n height: 44px;\n padding: 0;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamPlaceInfoButton = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n width: 44px;\n height: 44px;\n padding: 0;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userInfoButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 50px;\n height: 50px;\n padding: 0;\n`;\n\nexport const teamColorButton = (\n modalOpenType: HeaderModalType | undefined,\n isModalOpen: boolean,\n) => css`\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n\n & svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n opacity: ${modalOpenType === 'teamColor' && isModalOpen ? 1 : 0};\n }\n\n &:hover {\n opacity: 0.8;\n }\n\n &:hover svg {\n opacity: 1;\n }\n`;\n\nexport const explainText = css`\n font-size: 10px;\n`;\n","import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const Container = styled.div<{ $isOpen: boolean }>`\n cursor: pointer;\n\n ${({ $isOpen = false }) => {\n if ($isOpen)\n return css`\n outline: 3px ridge rgba(0, 46, 210, 0.381);\n border-radius: 2px;\n `;\n }}\n svg {\n transition: transform 0.2s ease-in-out;\n ${({ $isOpen = false }) => {\n if ($isOpen)\n return css`\n transform: rotate(-180deg);\n `;\n\n return css`\n transform: rotate(0);\n `;\n }}\n }\n`;\n\nexport const accordionButton = ($padding: CSSProperties['padding']) => css`\n display: flex;\n position: relative;\n justify-content: space-between;\n align-items: center;\n overflow-anchor: none;\n\n width: 100%;\n padding: ${$padding};\n text-align: left;\n\n border: 0;\n border-radius: 0;\n`;\n\nexport const DisabledWrapper = styled.div<{\n $padding: CSSProperties['padding'];\n}>`\n ${({ $padding }) => accordionButton($padding)}\n`;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n border-bottom: 1px solid ${({ theme }) => theme.color.GRAY300};\n\n &:last-child {\n border-bottom: none;\n }\n`;\n","import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const Container = styled.div<{ $width: CSSProperties['width'] }>`\n width: ${({ $width = 'auto' }) => $width};\n\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\n border-radius: 4px;\n`;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ $isOpen: boolean; $height: number }>`\n overflow: hidden;\n height: ${({ $isOpen, $height }) => ($isOpen ? $height + 24 : 0)}px;\n padding: ${({ $isOpen }) => ($isOpen ? '10px 18px 12px' : '0 18px')};\n border-top: 1px solid ${({ theme }) => theme.color.GRAY300};\n\n transition: 0.35s ease;\n`;\n","import { useState, type PropsWithChildren, useRef, useEffect } from 'react';\nimport * as S from './AccordionBody.styled';\nimport { useAccordion } from '~/hooks/useAccordion';\n\ninterface AccordionBodyProps {\n id: number;\n}\n\nconst AccordionBody = (props: PropsWithChildren) => {\n const { id, children } = props;\n const { openedAccordion } = useAccordion();\n const [bodyHeight, setBodyHeight] = useState(0);\n const ref = useRef(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(() => {\n setBodyHeight(() => {\n return ref.current ? ref.current.clientHeight : 0;\n });\n });\n\n resizeObserver.observe(ref.current);\n\n return () => resizeObserver.disconnect();\n });\n\n const getResultHeight = () => {\n if (id === openedAccordion) {\n return bodyHeight;\n }\n\n return 0;\n };\n\n return (\n \n
{children}
\n \n );\n};\n\nexport default AccordionBody;\n","import { styled } from 'styled-components';\nimport type { MenuListProps } from '~/components/common/Menu/MenuList/MenuList';\n\nexport const Wrapper = styled.ul.withConfig({\n shouldForwardProp: (prop) => !['width'].includes(prop),\n})`\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.MENU};\n\n max-height: 200px;\n width: ${({ width }) => width};\n overflow-y: auto;\n\n background-color: ${({ theme }) => theme.color.WHITE};\n\n border: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 6px;\n`;\n","import { useRef, useEffect } from 'react';\nimport type { MouseEventHandler, PropsWithChildren } from 'react';\nimport { useMenu } from '~/hooks/useMenu';\nimport { useClickOutside } from '~/hooks/useClickOutside';\nimport { useListKeyboardNavigation } from '~/hooks/useListKeyboardNavigation';\nimport * as S from './MenuList.styled';\n\nexport interface MenuListProps {\n width?: string;\n onSelect?: (value: string) => void;\n}\n\nconst MenuList = (props: PropsWithChildren) => {\n const { children, onSelect, width = '100%' } = props;\n\n const {\n isMenuOpen,\n selectedValue,\n handleMenuOpen,\n handleSelectedValueChange,\n } = useMenu();\n\n const ref = useRef(null);\n\n useClickOutside(ref, (e: Event) => {\n const { target } = e;\n\n if (target instanceof HTMLButtonElement) {\n return;\n }\n\n if ((target as HTMLElement).closest('button')) {\n return;\n }\n\n handleMenuOpen();\n });\n\n const handleMenuClick: MouseEventHandler = (e) => {\n const { target } = e;\n\n if (!(target instanceof HTMLLIElement)) {\n return;\n }\n\n const { textContent } = target;\n\n if (!textContent) {\n return;\n }\n\n selectItem(textContent);\n };\n\n const selectItem = (value: string) => {\n onSelect?.(value);\n handleSelectedValueChange(value);\n handleMenuOpen();\n };\n\n const {\n handlers: { handleMouseEnter, handleMouseLeave, handleKeyDown },\n } = useListKeyboardNavigation(ref, handleMenuOpen, selectItem);\n\n useEffect(() => {\n if (isMenuOpen && ref.current) {\n ref.current.focus();\n }\n }, [isMenuOpen]);\n\n useEffect(() => {\n if (selectedValue === '' || !isMenuOpen) {\n return;\n }\n\n if (!ref.current) {\n return;\n }\n\n const target = Array.from(ref.current.children).find(\n (child) => child.textContent?.replace('✓', '') === selectedValue,\n );\n\n if (!(target instanceof HTMLLIElement)) {\n return;\n }\n\n const { offsetTop } = target;\n\n ref.current.scrollTo(0, offsetTop);\n }, [isMenuOpen, selectedValue]);\n\n return (\n <>\n {isMenuOpen && (\n \n {children}\n \n )}\n \n );\n};\n\nexport default MenuList;\n","import { css, styled } from 'styled-components';\nimport type { MenuItemProps } from '~/components/common/Menu/MenuItem/MenuItem';\n\nexport const Wrapper = styled.li>`\n position: relative;\n\n padding: 8px 26px;\n\n cursor: pointer;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY100};\n }\n\n &.selected {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n\n ${({ css }) => css}\n`;\n\nexport const checkMark = css`\n position: absolute;\n left: 10px;\n`;\n","import type { PropsWithChildren } from 'react';\nimport type { CSSProp } from 'styled-components';\nimport Text from '~/components/common/Text/Text';\nimport { useMenu } from '~/hooks/useMenu';\nimport * as S from './MenuItem.styled';\n\nexport interface MenuItemProps {\n value: string;\n css?: CSSProp;\n}\n\nconst MenuItem = (props: PropsWithChildren) => {\n const { children, value, css } = props;\n const { selectedValue } = useMenu();\n const isSelected = selectedValue === value;\n\n return (\n <>\n \n {isSelected && (\n \n ✓\n \n )}\n {children}\n \n \n );\n};\n\nexport default MenuItem;\n","import type { PropsWithChildren } from 'react';\nimport { MenuProvider } from '~/components/common/Menu/MenuContext';\nimport MenuButton from '~/components/common/Menu/MenuButton/MenuButton';\nimport MenuList from '~/components/common/Menu/MenuList/MenuList';\nimport MenuItem from '~/components/common/Menu/MenuItem/MenuItem';\nimport * as S from './Menu.styled';\n\nconst Menu = (props: PropsWithChildren) => {\n const { children } = props;\n\n return (\n \n {children}\n \n );\n};\n\nMenu.Button = MenuButton;\nMenu.List = MenuList;\nMenu.Item = MenuItem;\n\nexport default Menu;\n","import { styled, css } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const BubbleContainer = styled.div`\n position: fixed;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 200px;\n padding: 18px 22px 12px;\n\n background-color: ${({ theme }) => theme.color.WHITE};\n border-radius: 10px;\n\n transform: translate(36px, 64px);\n\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n`;\n\nexport const Triangle = styled.div`\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.MODAL} + 1;\n top: -12px;\n left: 20%;\n\n width: 28px;\n height: 28px;\n\n border-radius: 4px;\n background-color: ${({ theme }) => theme.color.WHITE};\n\n box-shadow: -1px 1px rgb(178 178 178 / 0.6);\n\n transform: rotate(135deg);\n`;\n\nexport const InnerContainer = styled.div`\n display: flex;\n flex-direction: column;\n\n gap: 6px;\n`;\n\nexport const BadgeContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n position: relative;\n justify-items: center;\n row-gap: 14px;\n`;\n\nexport const BadgeWrapper = styled.div<{ $isClicked: boolean }>`\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: 28px;\n height: 28px;\n\n border-radius: 50%;\n ${({ $isClicked }) => {\n if ($isClicked)\n return css`\n border: 2px solid ${({ theme }) => theme.color.GRAY350};\n `;\n }}\n\n cursor: pointer;\n`;\n\nexport const colorEditButton = css`\n padding: 4px;\n\n font-size: 12px;\n`;\n","import { css } from 'styled-components';\n\nexport const teamInfo = css`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const teamPlaceButton = css`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n width: 300px;\n height: 40px;\n padding: 0;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 4px;\n\n & svg {\n width: 24px;\n height: 24px;\n padding: 0;\n }\n`;\n\nexport const teamPlaceName = css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n width: 260px;\n\n font-size: 22px;\n line-height: 22px;\n white-space: nowrap;\n`;\n\nexport const teamName = css`\n font-size: 24px;\n font-weight: bold;\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Backdrop = styled.div`\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 1;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n background-color: rgba(0, 0, 0, 0.3);\r\n`;\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n z-index: ${({ theme }) => theme.zIndex.MODAL};\r\n\r\n width: 490px;\r\n max-width: 100%;\r\n padding: 24px;\r\n row-gap: 24px;\r\n\r\n border-radius: 12px;\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n\r\n box-shadow:\r\n 0 0 1px #1b1d1f33,\r\n 0 15px 25px #1b1d1f33,\r\n 0 5px 10px #1b1d1f1f;\r\n\r\n transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport const ModalHeader = styled.div`\r\n display: flex;\r\n justify-content: flex-end;\r\n\r\n width: 100%;\r\n height: 38px;\r\n\r\n border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};\r\n`;\r\n\r\nexport const ModalBody = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 16px;\r\n`;\r\n\r\nexport const WarningBox = styled.div`\r\n padding: 16px;\r\n\r\n border-radius: 4px;\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & ul > li {\r\n margin: 0 0 6px 16px;\r\n\r\n list-style: initial;\r\n }\r\n\r\n & ul > li::marker {\r\n color: ${({ theme }) => theme.color.GRAY700};\r\n }\r\n`;\r\n\r\nexport const Username = styled.span`\r\n color: ${({ theme }) => theme.color.PRIMARY};\r\n`;\r\n\r\nexport const AccountDeleteForm = styled.form`\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 12px;\r\n`;\r\n\r\nexport const closeButton = css`\r\n width: 32px;\r\n height: 38px;\r\n padding: 0;\r\n`;\r\n\r\nexport const deleteConfirmInput = css`\r\n padding: 0 10px;\r\n\r\n font-size: 16px;\r\n\r\n border-radius: 4px;\r\n border: 1px solid ${({ theme }) => theme.color.GRAY400};\r\n`;\r\n\r\nexport const accountDeleteButton = css`\r\n width: 100%;\r\n\r\n background-color: ${({ theme }) => theme.color.RED};\r\n`;\r\n","import { styled, css } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n z-index: ${({ theme }) => theme.zIndex.MODAL - 1};\n\n width: 100%;\n height: 100%;\n`;\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 490px;\n max-width: 100%;\n padding: 18px 20px 20px 20px;\n row-gap: 10px;\n\n border-radius: 12px;\n background-color: ${({ theme }) => theme.color.WHITE};\n\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n\n transform: translate(-50%, -50%);\n`;\n\nexport const ModalHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n height: 36px;\n\n border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};\n`;\n\nexport const ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: 6px;\n`;\n\nexport const ExplainBox = styled.div`\n padding: 10px;\n\n border-radius: 4px;\n background-color: ${({ theme }) => theme.color.GRAY100};\n`;\n\nexport const AccountBodyContainer = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: 10px;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n column-gap: 10px;\n`;\n\nexport const UrlWrapper = styled.a`\n width: 100%;\n`;\n\nexport const closeButton = css`\n width: 32px;\n height: 38px;\n padding: 0;\n`;\n\nexport const dangerousButton = css`\n display: flex;\n position: relative;\n align-self: flex-end;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n`;\n\nexport const dangerousText = css`\n color: ${({ theme }) => theme.color.RED};\n`;\n\nexport const explainText = css`\n white-space: pre;\n`;\n\nexport const mailText = css`\n text-decoration-line: underline;\n`;\n","import { css, styled } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n position: absolute;\n overflow: hidden;\n top: 50px;\n right: 20px;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 270px;\n height: 420px;\n padding: 20px 30px;\n gap: 10px;\n\n border-radius: 8px;\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n background-color: ${({ theme }) => theme.color.WHITE};\n`;\n\nexport const UserInfoForm = styled.form`\n display: flex;\n align-items: center;\n\n column-gap: 6px;\n\n &:focus {\n outline: ${({ theme }) => theme.color.PRIMARY};\n }\n`;\n\nexport const UserNameInputContainer = styled.div`\n width: 200px;\n\n border: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 4px;\n`;\n\nexport const UserNameContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 20px;\n column-gap: 5px;\n`;\n\nexport const ProfileImage = styled.img`\n width: 200px;\n height: 200px;\n margin: 10px auto;\n\n border-radius: 50%;\n object-fit: cover;\n`;\n\nexport const serviceCenterButton = css`\n display: flex;\n position: relative;\n align-self: flex-end;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n`;\n\nexport const hoverText = css`\n opacity: 0;\n color: ${({ theme }) => theme.color.RED};\n`;\n\nexport const logoutButton = css`\n display: flex;\n align-items: center;\n\n margin: 0 auto;\n padding: 8px;\n gap: 2px;\n`;\n\nexport const userName = css`\n overflow: hidden;\n\n max-width: 140px;\n\n font-weight: 500;\n white-space: pre;\n text-overflow: ellipsis;\n text-align: center;\n`;\n\nexport const email = css`\n margin: 0 auto;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.GRAY600};\n`;\n\nexport const userInfoEditButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 22px;\n height: 22px;\n padding: 2px;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userInfoSubmitButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 22px;\n height: 22px;\n padding: 2px;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userNameLength = css`\n font-size: 12px;\n color: ${({ theme }) => theme.color.GRAY600};\n white-space: pre;\n`;\n\nexport const userNameInput = css`\n border: none;\n border-radius: 4px;\n\n &:focus {\n outline: none;\n }\n`;\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js b/storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js similarity index 93% rename from storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js rename to storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js index b8879b79b..c9246a996 100644 --- a/storybook/components-common-Header-Header-stories.14ddc03a.iframe.bundle.js +++ b/storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js @@ -9,7 +9,7 @@ border-bottom: 2px solid ${({theme})=>theme.color.GRAY200}; ${({$isMobile})=>$isMobile&&styled_components_browser_esm.iv` - height: 110px; + height: 90px; flex-wrap: wrap; flex-direction: row-reverse; `} @@ -46,12 +46,17 @@ display: flex; align-items: center; `,ProfileImage=styled_components_browser_esm.zo.img` - width: 40px; - height: 40px; + ${({$isMobile})=>$isMobile?styled_components_browser_esm.iv` + width: 30px; + height: 30px; + `:styled_components_browser_esm.iv` + width: 40px; + height: 40px; + `} border-radius: 50%; object-fit: cover; -`,teamPlaceInfoButton=(styled_components_browser_esm.iv` +`,userInfoButton=(styled_components_browser_esm.iv` font-size: 24px; font-weight: bold; `,styled_components_browser_esm.iv` @@ -68,30 +73,21 @@ &:hover { background-color: ${({theme})=>theme.color.GRAY200}; } -`,styled_components_browser_esm.iv` +`,$isMobile=>styled_components_browser_esm.iv` display: flex; - flex-direction: column; align-items: center; justify-content: center; - width: 44px; - height: 44px; - padding: 0; - - border-radius: 50%; - - &:hover { - background-color: ${({theme})=>theme.color.GRAY200}; - } -`),userInfoButton=styled_components_browser_esm.iv` - display: flex; - align-items: center; - justify-content: center; + ${$isMobile?styled_components_browser_esm.iv` + width: 30px; + height: 30px; + `:styled_components_browser_esm.iv` + width: 50px; + height: 50px; + `} - width: 50px; - height: 50px; padding: 0; -`,teamColorButton=(modalOpenType,isModalOpen)=>styled_components_browser_esm.iv` +`),teamColorButton=(modalOpenType,isModalOpen)=>styled_components_browser_esm.iv` display: flex; position: relative; justify-content: center; @@ -118,7 +114,28 @@ } `,explainText=styled_components_browser_esm.iv` font-size: 10px; -`;var TeamBadge=__webpack_require__("./src/components/team/TeamBadge/TeamBadge.tsx"),useTeamPlace=__webpack_require__("./src/hooks/useTeamPlace.ts"),TeamPlaceMenu=__webpack_require__("./src/components/team/TeamPlaceMenu/TeamPlaceMenu.tsx"),routes=__webpack_require__("./src/constants/routes.ts"),Button=__webpack_require__("./src/components/common/Button/Button.tsx"),constants_localStorage=__webpack_require__("./src/constants/localStorage.ts"),TeamPlaceInfoModal=__webpack_require__("./src/components/team/TeamPlaceInfoModal/TeamPlaceInfoModal.tsx"),useModal=__webpack_require__("./src/hooks/useModal.ts"),useFetchUserInfo=__webpack_require__("./src/hooks/queries/useFetchUserInfo.ts"),UserInfoModal=__webpack_require__("./src/components/user/UserInfoModal/UserInfoModal.tsx"),TeamColorEditModal=__webpack_require__("./src/components/team/TeamColorEditModal/TeamColorEditModal.tsx"),AccountDeleteModal=__webpack_require__("./src/components/user/AccountDeleteModal/AccountDeleteModal.tsx"),ServiceCenterModal=__webpack_require__("./src/components/user/ServiceCenterModal/ServiceCenterModal.tsx"),getIsMobile=__webpack_require__("./src/utils/getIsMobile.ts"),Text=__webpack_require__("./src/components/common/Text/Text.tsx"),team=__webpack_require__("./src/apis/team.ts"),query=__webpack_require__("./src/constants/query.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Header_stories={title:"common/Header",component:()=>{const{teamPlaces,teamPlaceId,changeTeamPlace,teamPlaceColor,displayName}=(0,useTeamPlace.l)(),navigate=(0,dist.s0)(),{openModal,isModalOpen}=(0,useModal.d)(),isMobile=(0,getIsMobile.W)(),queryClient=(0,QueryClientProvider.NL)(),{userInfo}=(0,useFetchUserInfo.j)(),[teamName,setTeamName]=(0,react.useState)(displayName??""),[modalOpenType,setModalOpenType]=(0,react.useState)(),prefetchTeamPlaceInfo=async()=>{teamPlaceId&&(await queryClient.prefetchQuery(["teamPlaceMembers",teamPlaceId],(()=>(0,team.b9)(teamPlaceId)),{staleTime:query.i.TEAM_PLACE_MEMBERS}),await queryClient.prefetchQuery(["teamPlaceInviteCode",teamPlaceId],(()=>(0,team.rH)(teamPlaceId)),{staleTime:query.i.TEAM_PLACE_INVITE_CODE}))},handleTeamNameChange=(0,react.useCallback)((value=>{if(""===value)return void setTeamName((()=>""));const newTeamPlace=teamPlaces.find((teamPlace=>teamPlace.displayName===value));void 0!==newTeamPlace&&(changeTeamPlace(newTeamPlace.id),setTeamName((()=>value)),location.pathname===routes.y.TEAM_SELECT&&navigate(isMobile?routes.y.TEAM_CALENDAR:routes.y.TEAM_OVERVIEW))}),[changeTeamPlace,teamPlaces]);return(0,react.useEffect)((()=>{const id=localStorage.getItem(constants_localStorage.J.TEAM_PLACE_ID);teamPlaceId===Number(id)&&handleTeamNameChange(displayName)}),[handleTeamNameChange,displayName,teamPlaceId]),(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)(Header,{tabIndex:0,$isMobile:isMobile,children:[(0,jsx_runtime.jsxs)(InnerContainer,{children:[!isMobile&&(0,jsx_runtime.jsx)(react_router_dom_dist.rU,{to:routes.y.TEAM_OVERVIEW,"aria-label":"모아보기 페이지로 가기",children:(0,jsx_runtime.jsx)(svg.K7,{})}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsxs)(Button.Z,{type:"button",variant:"plain",onClick:()=>{setModalOpenType((()=>"teamColor")),openModal()},css:teamColorButton(modalOpenType,isModalOpen),"aria-label":"팀 색상 변경하기",children:[(0,jsx_runtime.jsx)(TeamBadge.Z,{size:"lg",teamPlaceColor}),(0,jsx_runtime.jsx)(TeamBadgeEditIconWrapper,{children:(0,jsx_runtime.jsx)(svg.dY,{})})]}),(0,jsx_runtime.jsx)(TeamNameWrapper,{children:(0,jsx_runtime.jsx)(TeamPlaceMenu.Z,{displayValue:teamName,onSelect:handleTeamNameChange})})]})]}),(0,jsx_runtime.jsxs)(ButtonContainer,{children:[(0,jsx_runtime.jsxs)(Button.Z,{type:"button",variant:"plain",onFocus:prefetchTeamPlaceInfo,onMouseEnter:prefetchTeamPlaceInfo,onClick:()=>{setModalOpenType((()=>"team")),openModal()},css:teamPlaceInfoButton,"aria-label":"팀 정보 보기",children:[(0,jsx_runtime.jsx)(svg.Ww,{height:isMobile?"32":"22"}),!isMobile&&(0,jsx_runtime.jsx)(Text.Z,{as:"span",css:explainText,children:"팀 정보"})]}),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(Button.Z,{type:"button",variant:"plain",css:userInfoButton,onClick:()=>{setModalOpenType((()=>"user")),openModal()},"aria-label":"프로필 보기",children:(0,jsx_runtime.jsx)(ProfileImage,{src:userInfo?.profileImageUrl,alt:"프로필 사진"})})]})]}),"team"===modalOpenType&&(0,jsx_runtime.jsx)(TeamPlaceInfoModal.Z,{}),"user"===modalOpenType&&(0,jsx_runtime.jsx)(UserInfoModal.Z,{onServiceCenterButtonClick:()=>{setModalOpenType((()=>"serviceCenter")),openModal()}}),"serviceCenter"===modalOpenType&&(0,jsx_runtime.jsx)(ServiceCenterModal.Z,{onAccountDeleteButtonClick:()=>{setModalOpenType((()=>"accountDelete")),openModal()}}),"teamColor"===modalOpenType&&(0,jsx_runtime.jsx)(TeamColorEditModal.Z,{}),"accountDelete"===modalOpenType&&(0,jsx_runtime.jsx)(AccountDeleteModal.Z,{})]})},tags:["autodocs"]},Default={args:{}};Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {}\n}",...Default.parameters?.docs?.source}}};const __namedExportsOrder=["Default"]},"./src/apis/user.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{CS:()=>fetchUserInfo,NJ:()=>modifyUserInfo,xU:()=>deleteUserAccount});var _apis_http__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/apis/http.ts");const fetchUserInfo=()=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.get("/api/me"),modifyUserInfo=body=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.patch("/api/me",body),deleteUserAccount=()=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.delete("/api/me/account")},"./src/components/common/Accordion/Accordion.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>Accordion_Accordion});var react=__webpack_require__("./node_modules/react/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const AccordionContext=(0,react.createContext)({}),AccordionProvider=props=>{const{children}=props,[openedAccordion,setOpenedAccordion]=(0,react.useState)(),value={openedAccordion,handleOpenedAccordionChange:id=>{setOpenedAccordion(openedAccordion===id?()=>{}:()=>id)}};return(0,jsx_runtime.jsx)(AccordionContext.Provider,{value,children})};AccordionProvider.displayName="AccordionProvider";try{AccordionProvider.displayName="AccordionProvider",AccordionProvider.__docgenInfo={description:"",displayName:"AccordionProvider",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/common/Accordion/AccordionContext.tsx#AccordionProvider"]={docgenInfo:AccordionProvider.__docgenInfo,name:"AccordionProvider",path:"src/components/common/Accordion/AccordionContext.tsx#AccordionProvider"})}catch(__react_docgen_typescript_loader_error){}var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const Container=styled_components_browser_esm.ZP.div` +`;var TeamBadge=__webpack_require__("./src/components/team/TeamBadge/TeamBadge.tsx"),useTeamPlace=__webpack_require__("./src/hooks/useTeamPlace.ts"),TeamPlaceMenu=__webpack_require__("./src/components/team/TeamPlaceMenu/TeamPlaceMenu.tsx"),routes=__webpack_require__("./src/constants/routes.ts"),Button=__webpack_require__("./src/components/common/Button/Button.tsx"),constants_localStorage=__webpack_require__("./src/constants/localStorage.ts"),TeamPlaceInfoModal=__webpack_require__("./src/components/team/TeamPlaceInfoModal/TeamPlaceInfoModal.tsx"),useModal=__webpack_require__("./src/hooks/useModal.ts"),useFetchUserInfo=__webpack_require__("./src/hooks/queries/useFetchUserInfo.ts"),UserInfoModal=__webpack_require__("./src/components/user/UserInfoModal/UserInfoModal.tsx"),TeamColorEditModal=__webpack_require__("./src/components/team/TeamColorEditModal/TeamColorEditModal.tsx"),AccountDeleteModal=__webpack_require__("./src/components/user/AccountDeleteModal/AccountDeleteModal.tsx"),ServiceCenterModal=__webpack_require__("./src/components/user/ServiceCenterModal/ServiceCenterModal.tsx"),getIsMobile=__webpack_require__("./src/utils/getIsMobile.ts"),Text=__webpack_require__("./src/components/common/Text/Text.tsx"),team=__webpack_require__("./src/apis/team.ts"),query=__webpack_require__("./src/constants/query.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Header_stories={title:"common/Header",component:()=>{const{teamPlaces,teamPlaceId,changeTeamPlace,teamPlaceColor,displayName}=(0,useTeamPlace.l)(),navigate=(0,dist.s0)(),{openModal,isModalOpen}=(0,useModal.d)(),isMobile=(0,getIsMobile.W)(),queryClient=(0,QueryClientProvider.NL)(),{userInfo}=(0,useFetchUserInfo.j)(),[teamName,setTeamName]=(0,react.useState)(displayName??""),[modalOpenType,setModalOpenType]=(0,react.useState)(),prefetchTeamPlaceInfo=async()=>{teamPlaceId&&(await queryClient.prefetchQuery(["teamPlaceMembers",teamPlaceId],(()=>(0,team.b9)(teamPlaceId)),{staleTime:query.i.TEAM_PLACE_MEMBERS}),await queryClient.prefetchQuery(["teamPlaceInviteCode",teamPlaceId],(()=>(0,team.rH)(teamPlaceId)),{staleTime:query.i.TEAM_PLACE_INVITE_CODE}))},handleTeamNameChange=(0,react.useCallback)((value=>{if(""===value)return void setTeamName((()=>""));const newTeamPlace=teamPlaces.find((teamPlace=>teamPlace.displayName===value));void 0!==newTeamPlace&&(changeTeamPlace(newTeamPlace.id),setTeamName((()=>value)),location.pathname===routes.y.TEAM_SELECT&&navigate(isMobile?routes.y.TEAM_CALENDAR:routes.y.TEAM_OVERVIEW))}),[changeTeamPlace,teamPlaces]);return(0,react.useEffect)((()=>{const id=localStorage.getItem(constants_localStorage.J.TEAM_PLACE_ID);teamPlaceId===Number(id)&&handleTeamNameChange(displayName)}),[handleTeamNameChange,displayName,teamPlaceId]),(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)(Header,{tabIndex:0,$isMobile:isMobile,children:[(0,jsx_runtime.jsxs)(InnerContainer,{children:[!isMobile&&(0,jsx_runtime.jsx)(react_router_dom_dist.rU,{to:routes.y.TEAM_OVERVIEW,"aria-label":"모아보기 페이지로 가기",children:(0,jsx_runtime.jsx)(svg.K7,{})}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsxs)(Button.Z,{type:"button",variant:"plain",onClick:()=>{setModalOpenType((()=>"teamColor")),openModal()},css:teamColorButton(modalOpenType,isModalOpen),"aria-label":"팀 색상 변경하기",children:[(0,jsx_runtime.jsx)(TeamBadge.Z,{size:"lg",teamPlaceColor}),(0,jsx_runtime.jsx)(TeamBadgeEditIconWrapper,{children:(0,jsx_runtime.jsx)(svg.dY,{})})]}),(0,jsx_runtime.jsx)(TeamNameWrapper,{children:(0,jsx_runtime.jsx)(TeamPlaceMenu.Z,{displayValue:teamName,onSelect:handleTeamNameChange})})]})]}),(0,jsx_runtime.jsxs)(ButtonContainer,{children:[(0,jsx_runtime.jsxs)(Button.Z,{type:"button",variant:"plain",onFocus:prefetchTeamPlaceInfo,onMouseEnter:prefetchTeamPlaceInfo,onClick:()=>{setModalOpenType((()=>"team")),openModal()},css:($isMobile=isMobile,styled_components_browser_esm.iv` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + ${$isMobile?styled_components_browser_esm.iv` + width: 30px; + height: 30px; + `:styled_components_browser_esm.iv` + width: 44px; + height: 44px; + `} + + padding: 0; + + border-radius: 50%; + + &:hover { + background-color: ${({theme})=>theme.color.GRAY200}; + } +`),"aria-label":"팀 정보 보기",children:[(0,jsx_runtime.jsx)(svg.Ww,{height:isMobile?"32":"22"}),!isMobile&&(0,jsx_runtime.jsx)(Text.Z,{as:"span",css:explainText,children:"팀 정보"})]}),(0,jsx_runtime.jsx)(Divider,{}),(0,jsx_runtime.jsx)(Button.Z,{type:"button",variant:"plain",css:userInfoButton(isMobile),onClick:()=>{setModalOpenType((()=>"user")),openModal()},"aria-label":"프로필 보기",children:(0,jsx_runtime.jsx)(ProfileImage,{$isMobile:isMobile,src:userInfo?.profileImageUrl,alt:"프로필 사진"})})]})]}),"team"===modalOpenType&&(0,jsx_runtime.jsx)(TeamPlaceInfoModal.Z,{}),"user"===modalOpenType&&(0,jsx_runtime.jsx)(UserInfoModal.Z,{onServiceCenterButtonClick:()=>{setModalOpenType((()=>"serviceCenter")),openModal()}}),"serviceCenter"===modalOpenType&&(0,jsx_runtime.jsx)(ServiceCenterModal.Z,{onAccountDeleteButtonClick:()=>{setModalOpenType((()=>"accountDelete")),openModal()}}),"teamColor"===modalOpenType&&(0,jsx_runtime.jsx)(TeamColorEditModal.Z,{}),"accountDelete"===modalOpenType&&(0,jsx_runtime.jsx)(AccountDeleteModal.Z,{})]});var $isMobile},tags:["autodocs"]},Default={args:{}};Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {}\n}",...Default.parameters?.docs?.source}}};const __namedExportsOrder=["Default"]},"./src/apis/user.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{CS:()=>fetchUserInfo,NJ:()=>modifyUserInfo,xU:()=>deleteUserAccount});var _apis_http__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/apis/http.ts");const fetchUserInfo=()=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.get("/api/me"),modifyUserInfo=body=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.patch("/api/me",body),deleteUserAccount=()=>_apis_http__WEBPACK_IMPORTED_MODULE_0__.d.delete("/api/me/account")},"./src/components/common/Accordion/Accordion.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>Accordion_Accordion});var react=__webpack_require__("./node_modules/react/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const AccordionContext=(0,react.createContext)({}),AccordionProvider=props=>{const{children}=props,[openedAccordion,setOpenedAccordion]=(0,react.useState)(),value={openedAccordion,handleOpenedAccordionChange:id=>{setOpenedAccordion(openedAccordion===id?()=>{}:()=>id)}};return(0,jsx_runtime.jsx)(AccordionContext.Provider,{value,children})};AccordionProvider.displayName="AccordionProvider";try{AccordionProvider.displayName="AccordionProvider",AccordionProvider.__docgenInfo={description:"",displayName:"AccordionProvider",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/common/Accordion/AccordionContext.tsx#AccordionProvider"]={docgenInfo:AccordionProvider.__docgenInfo,name:"AccordionProvider",path:"src/components/common/Accordion/AccordionContext.tsx#AccordionProvider"})}catch(__react_docgen_typescript_loader_error){}var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const Container=styled_components_browser_esm.ZP.div` cursor: pointer; ${({$isOpen=!1})=>{if($isOpen)return styled_components_browser_esm.iv` @@ -588,4 +605,4 @@ outline: none; } `;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const UserInfoModal=props=>{const{userInfo,userName,userNameRef,isUserInfoEditing,handlers:{handleClose,handleLogoutClick,handleUserNameChange,handleUserInfoEditButtonClick,handleUserInfoSubmit}}=useUserInfoModal(),{onServiceCenterButtonClick}=props;if(!userInfo)return(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{});const{name,profileImageUrl,email}=userInfo;return(0,jsx_runtime.jsxs)(Modal.Z,{children:[(0,jsx_runtime.jsx)(Backdrop,{onClick:handleClose}),(0,jsx_runtime.jsxs)(Container,{children:[(0,jsx_runtime.jsx)(Text.Z,{as:"span",size:"lg",weight:"semiBold",children:"프로필"}),(0,jsx_runtime.jsx)(ProfileImage,{src:profileImageUrl,alt:"프로필 이미지"}),(0,jsx_runtime.jsx)(UserNameContainer,{ref:userNameRef,children:isUserInfoEditing?(0,jsx_runtime.jsxs)(UserInfoForm,{onSubmit:handleUserInfoSubmit,children:[(0,jsx_runtime.jsxs)(UserNameInputContainer,{children:[(0,jsx_runtime.jsx)(Input.Z,{width:"160px",height:"32px",placeholder:name,value:userName,onChange:handleUserNameChange,minLength:1,maxLength:constants_user.O,css:userNameInput,autoFocus:!0}),(0,jsx_runtime.jsx)(Text.Z,{as:"span",css:userNameLength,children:`${userName.length}/${constants_user.O}`})]}),(0,jsx_runtime.jsx)(Button.Z,{variant:"plain",css:userInfoSubmitButton,children:(0,jsx_runtime.jsx)(svg.yZ,{})})]}):(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Text.Z,{as:"span",size:"xl",css:UserInfoModal_styled_userName,children:name}),(0,jsx_runtime.jsx)(Button.Z,{type:"button",variant:"plain","aria-label":"닉네임 수정하기",css:userInfoEditButton,onClick:handleUserInfoEditButtonClick,children:(0,jsx_runtime.jsx)(svg.dY,{})})]})}),(0,jsx_runtime.jsx)(Text.Z,{as:"span",css:UserInfoModal_styled_email,children:email}),(0,jsx_runtime.jsxs)(Button.Z,{type:"button",variant:"normal",css:logoutButton,onClick:handleLogoutClick,children:["로그아웃",(0,jsx_runtime.jsx)(svg.R0,{})]}),(0,jsx_runtime.jsx)(Button.Z,{type:"button",variant:"plain",css:serviceCenterButton,onClick:onServiceCenterButtonClick,"aria-label":"고객문의",children:(0,jsx_runtime.jsx)(Text.Z,{size:"sm",children:"고객문의"})})]})]})};UserInfoModal.displayName="UserInfoModal";const UserInfoModal_UserInfoModal=UserInfoModal;try{UserInfoModal.displayName="UserInfoModal",UserInfoModal.__docgenInfo={description:"",displayName:"UserInfoModal",props:{onServiceCenterButtonClick:{defaultValue:null,description:"",name:"onServiceCenterButtonClick",required:!0,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/user/UserInfoModal/UserInfoModal.tsx#UserInfoModal"]={docgenInfo:UserInfoModal.__docgenInfo,name:"UserInfoModal",path:"src/components/user/UserInfoModal/UserInfoModal.tsx#UserInfoModal"})}catch(__react_docgen_typescript_loader_error){}},"./src/constants/url.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{D_:()=>TEAM_BY_TEAM_REPOSITORY,Mx:()=>TEAM_BY_TEAM_HOW_TO_USE_URL,O8:()=>USER_FEEDBACK_URL,sE:()=>ICALENDAR_USER_GUIDE_URL});const ICALENDAR_USER_GUIDE_URL="https://teambyteam.notion.site/a99a38a030d74be88e761a1dcb1559a1",USER_FEEDBACK_URL="https://forms.gle/Tk8DZ5Xzsc5615Ar7",TEAM_BY_TEAM_HOW_TO_USE_URL="https://teambyteam.notion.site/f84827ca26334913a1c724dfb9436887",TEAM_BY_TEAM_REPOSITORY="https://github.com/woowacourse-teams/2023-team-by-team"},"./src/hooks/queries/useFetchUserInfo.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{j:()=>useFetchUserInfo});var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@tanstack/react-query/build/lib/useQuery.mjs"),_apis_user__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/apis/user.ts"),_constants_query__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/constants/query.ts");const useFetchUserInfo=()=>{const{data}=(0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_2__.a)(["userInfo"],_apis_user__WEBPACK_IMPORTED_MODULE_0__.CS,{staleTime:_constants_query__WEBPACK_IMPORTED_MODULE_1__.i.USER_INFO});return{userInfo:data}}},"./src/hooks/useToken.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{d:()=>useToken});var react=__webpack_require__("./node_modules/react/index.js"),constants_localStorage=__webpack_require__("./src/constants/localStorage.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const TokenContext=(0,react.createContext)({}),TokenProvider=({children})=>{const[accessToken,setAccessToken]=(0,react.useState)((()=>localStorage.getItem(constants_localStorage.J.ACCESS_TOKEN)??"")),[refreshToken,setRefreshToken]=(0,react.useState)((()=>localStorage.getItem(constants_localStorage.J.REFRESH_TOKEN)??"")),value={accessToken,refreshToken,updateToken:(accessToken,refreshToken)=>{setAccessToken((()=>accessToken??"")),setRefreshToken((()=>refreshToken??"")),localStorage.setItem(constants_localStorage.J.ACCESS_TOKEN,accessToken),localStorage.setItem(constants_localStorage.J.REFRESH_TOKEN,refreshToken)},resetToken:()=>{setAccessToken((()=>"")),setRefreshToken((()=>"")),localStorage.removeItem(constants_localStorage.J.ACCESS_TOKEN),localStorage.removeItem(constants_localStorage.J.REFRESH_TOKEN)}};return(0,jsx_runtime.jsx)(TokenContext.Provider,{value,children})};TokenProvider.displayName="TokenProvider";try{TokenProvider.displayName="TokenProvider",TokenProvider.__docgenInfo={description:"",displayName:"TokenProvider",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/contexts/TokenContext.tsx#TokenProvider"]={docgenInfo:TokenProvider.__docgenInfo,name:"TokenProvider",path:"src/contexts/TokenContext.tsx#TokenProvider"})}catch(__react_docgen_typescript_loader_error){}const useToken=()=>{const context=(0,react.useContext)(TokenContext);if(void 0===context)throw new Error("useToken must be used within a TokenContext");return context}},"./src/utils/arrayOf.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C:()=>arrayOf});const arrayOf=count=>[...new Array(count).keys()]},"./src/utils/getIsMobile.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W:()=>getIsMobile});const getIsMobile=()=>{const isIos=null!==window.navigator.userAgent.match(/ipad|iphone/i),isAndroid=null!==window.navigator.userAgent.match(/Android/i);return!(!isIos&&!isAndroid)}}}]); -//# sourceMappingURL=components-common-Header-Header-stories.14ddc03a.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js.map b/storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js.map new file mode 100644 index 000000000..a53faf42b --- /dev/null +++ b/storybook/components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-common-Header-Header-stories.aa0c20f2.iframe.bundle.js","mappings":";;;;;;;;AAWA;;AAEA;;;;;AASA;;;;;;;;;AAWA;;;;AAMA;;;;AAIA;AAGA;;;;;;;;;AASA;;AAIA;;;AAKA;AACA;;;AAKA;;;;;;;AAwDA;;;AAzCA;;;;;;;;;;;;AAYA;;AA6BA;;;;;AAKA;;;AAIA;;;;;;AASA;;;;;;;;;;;;;;;AAkBA;;;;;;;;;;AAYA;;;;;;;;AAnEA;;;AAIA;;;;;;;;;;AAWA;;ACoDA;;;ACxKA;;;AAKA;;;AAIA;;AAMA;;;;AAOA;;;;;;;;AAQA;;;;;AAOA;AAGA;;AC3CA;;;;;;ACCA;;AAEA;;;;ACFA;AACA;AACA;;;ACEA;;ACDA;;;AAGA;;;AAGA;;AAEA;;ACHA;;;;;;;;;;;;;ACIA;;;;AAIA;;;AAGA;AAGA;;;ACfA;;ACJA;;;;;;;ACIA;;AAEA;;;;;AAKA;;;;;;;;;AAWA;;AAEA;;;;;;;;AAQA;;;;;AAOA;;;;;AAOA;;;;;;AAQA;;;;;;;;;AASA;AAGA;AACA;;;AAMA;;;;;;;;ACxEA;;;;;;;;;;AAUA;;;;;;;;AAUA;;;;;;;;;AAWA;;;;;;;;;;;;;ACzBA;;;;;;AAMA;;;;;;;;AAQA;;;;;;;;AAUA;;;;;;;AAOA;AAGA;;;;AAMA;;;;AAIA;;;;;;;;;AASA;;AAIA;AACA;AAGA;;;;AAMA;;;;AAMA;;;;;;AAMA;AAGA;;;AAGA;;;;;AC7FA;;;;AAMA;;;;;;AAMA;;;;;;;;AAQA;;;;;;;;AAUA;;;;;;;;AAQA;AAGA;;;;AAMA;;;;AAIA;AAGA;;;;AAMA;;;AAKA;;AAIA;;;;AAMA;;;;;;;;AAUA;AACA;AAOA;;AAAA;;;;;;;;;ACxFA;;;;;;;AAOA;;;;;;;;;;;;AAYA;AAGA;;;;;;;AAOA;;AAIA;;;AAGA;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;;;;;AAeA;;AAHA;AAGA;;;;;;;AASA;;;;;;;;;AAWA;;;;AAIA;AAGA;;;;;;;;;;;;AAYA;;AAIA;;;;;;;;;;;;AAYA;;AAIA;;AAEA;;AAIA","sources":["webpack://frontend/./src/components/common/Header/Header.styled.ts","webpack://frontend/./src/components/common/Header/Header.tsx","webpack://frontend/./src/components/common/Accordion/AccordionHeader/AccordionHeader.styled.tsx","webpack://frontend/./src/components/common/Accordion/AccordionItem/AccordionItem.styled.tsx","webpack://frontend/./src/components/common/Accordion/Accordion.styled.tsx","webpack://frontend/./src/components/common/Accordion/AccordionBody/AccordionBody.styled.ts","webpack://frontend/./src/components/common/Accordion/AccordionBody/AccordionBody.tsx","webpack://frontend/./src/components/common/Menu/MenuList/MenuList.styled.ts","webpack://frontend/./src/components/common/Menu/MenuList/MenuList.tsx","webpack://frontend/./src/components/common/Menu/MenuItem/MenuItem.styled.ts","webpack://frontend/./src/components/common/Menu/MenuItem/MenuItem.tsx","webpack://frontend/./src/components/common/Menu/Menu.tsx","webpack://frontend/./src/components/team/TeamColorEditModal/TeamColorEditModal.styled.ts","webpack://frontend/./src/components/team/TeamPlaceMenu/TeamPlaceMenu.styled.ts","webpack://frontend/./src/components/user/AccountDeleteModal/AccountDeleteModal.styled.ts","webpack://frontend/./src/components/user/ServiceCenterModal/ServiceCenterModal.styled.ts","webpack://frontend/./src/components/user/UserInfoModal/UserInfoModal.styled.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport type { HeaderModalType } from '~/components/common/Header/Header';\n\nexport const Header = styled.header<{ $isMobile: boolean }>`\n display: flex;\n justify-content: space-between;\n\n width: 100%;\n height: 64px;\n padding: 0 14px;\n\n border-bottom: 2px solid ${({ theme }) => theme.color.GRAY200};\n\n ${({ $isMobile }) =>\n $isMobile &&\n css`\n height: 90px;\n flex-wrap: wrap;\n flex-direction: row-reverse;\n `}\n`;\n\nexport const InnerContainer = styled.div`\n display: flex;\n column-gap: 20px;\n width: 100%;\n & > div {\n display: flex;\n align-items: center;\n column-gap: 12px;\n }\n`;\n\nexport const ButtonContainer = styled.div`\n display: flex;\n align-items: center;\n column-gap: 10px;\n`;\n\nexport const Divider = styled.div`\n width: 1px;\n height: 24px;\n\n background-color: ${({ theme }) => theme.color.GRAY500};\n`;\n\nexport const TeamBadgeEditIconWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n width: 20px;\n height: 20px;\n\n color: ${({ theme }) => theme.color.WHITE};\n }\n`;\n\nexport const TeamNameWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ProfileImage = styled.img<{ $isMobile: boolean }>`\n ${({ $isMobile }) =>\n $isMobile\n ? css`\n width: 30px;\n height: 30px;\n `\n : css`\n width: 40px;\n height: 40px;\n `}\n\n border-radius: 50%;\n object-fit: cover;\n`;\n\nexport const teamPlaceName = css`\n font-size: 24px;\n font-weight: bold;\n`;\n\nexport const notificationButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 44px;\n height: 44px;\n padding: 0;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamPlaceInfoButton = ($isMobile: boolean) => css`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n ${$isMobile\n ? css`\n width: 30px;\n height: 30px;\n `\n : css`\n width: 44px;\n height: 44px;\n `}\n\n padding: 0;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userInfoButton = ($isMobile: boolean) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n ${$isMobile\n ? css`\n width: 30px;\n height: 30px;\n `\n : css`\n width: 50px;\n height: 50px;\n `}\n\n padding: 0;\n`;\n\nexport const teamColorButton = (\n modalOpenType: HeaderModalType | undefined,\n isModalOpen: boolean,\n) => css`\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n\n & svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n opacity: ${modalOpenType === 'teamColor' && isModalOpen ? 1 : 0};\n }\n\n &:hover {\n opacity: 0.8;\n }\n\n &:hover svg {\n opacity: 1;\n }\n`;\n\nexport const explainText = css`\n font-size: 10px;\n`;\n","import { useCallback, useEffect, useState } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { EditIcon, LogoIcon, TeamIcon } from '~/assets/svg';\nimport * as S from './Header.styled';\nimport TeamBadge from '~/components/team/TeamBadge/TeamBadge';\nimport { useTeamPlace } from '~/hooks/useTeamPlace';\nimport TeamPlaceMenu from '~/components/team/TeamPlaceMenu/TeamPlaceMenu';\nimport { PATH_NAME } from '~/constants/routes';\nimport Button from '~/components/common/Button/Button';\nimport { LOCAL_STORAGE_KEY } from '~/constants/localStorage';\nimport TeamPlaceInfoModal from '~/components/team/TeamPlaceInfoModal/TeamPlaceInfoModal';\nimport { useModal } from '~/hooks/useModal';\nimport { useFetchUserInfo } from '~/hooks/queries/useFetchUserInfo';\nimport UserInfoModal from '~/components/user/UserInfoModal/UserInfoModal';\nimport TeamColorEditModal from '~/components/team/TeamColorEditModal/TeamColorEditModal';\nimport AccountDeleteModal from '~/components/user/AccountDeleteModal/AccountDeleteModal';\nimport ServiceCenterModal from '~/components/user/ServiceCenterModal/ServiceCenterModal';\nimport { getIsMobile } from '~/utils/getIsMobile';\nimport Text from '~/components/common/Text/Text';\nimport { fetchTeamPlaceInviteCode, fetchTeamPlaceMembers } from '~/apis/team';\nimport { STALE_TIME } from '~/constants/query';\n\nexport type HeaderModalType =\n | 'team'\n | 'user'\n | 'teamColor'\n | 'accountDelete'\n | 'serviceCenter';\n\nconst Header = () => {\n const {\n teamPlaces,\n teamPlaceId,\n changeTeamPlace,\n teamPlaceColor,\n displayName,\n } = useTeamPlace();\n const navigate = useNavigate();\n const { openModal, isModalOpen } = useModal();\n\n const isMobile = getIsMobile();\n\n const queryClient = useQueryClient();\n\n const { userInfo } = useFetchUserInfo();\n\n const [teamName, setTeamName] = useState(displayName ?? '');\n const [modalOpenType, setModalOpenType] = useState();\n\n const prefetchTeamPlaceInfo = async () => {\n if (!teamPlaceId) {\n return;\n }\n\n await queryClient.prefetchQuery(\n ['teamPlaceMembers', teamPlaceId],\n () => fetchTeamPlaceMembers(teamPlaceId),\n {\n staleTime: STALE_TIME.TEAM_PLACE_MEMBERS,\n },\n );\n await queryClient.prefetchQuery(\n ['teamPlaceInviteCode', teamPlaceId],\n () => fetchTeamPlaceInviteCode(teamPlaceId),\n {\n staleTime: STALE_TIME.TEAM_PLACE_INVITE_CODE,\n },\n );\n };\n\n const handleTeamNameChange = useCallback(\n (value: string) => {\n if (value === '') {\n setTeamName(() => '');\n return;\n }\n\n const newTeamPlace = teamPlaces.find(\n (teamPlace) => teamPlace.displayName === value,\n );\n\n if (newTeamPlace === undefined) {\n return;\n }\n\n changeTeamPlace(newTeamPlace.id);\n setTeamName(() => value);\n\n if (location.pathname === PATH_NAME.TEAM_SELECT) {\n isMobile\n ? navigate(PATH_NAME.TEAM_CALENDAR)\n : navigate(PATH_NAME.TEAM_OVERVIEW);\n }\n },\n /*eslint-disable-next-line*/\n [changeTeamPlace, teamPlaces],\n );\n\n const handleTeamButtonClick = () => {\n setModalOpenType(() => 'team');\n openModal();\n };\n\n const handleUserButtonClick = () => {\n setModalOpenType(() => 'user');\n openModal();\n };\n\n const handleTeamColorButtonClick = () => {\n setModalOpenType(() => 'teamColor');\n openModal();\n };\n\n const handleAccountDeleteButtonClick = () => {\n setModalOpenType(() => 'accountDelete');\n openModal();\n };\n\n const handleServiceCenterButtonClick = () => {\n setModalOpenType(() => 'serviceCenter');\n openModal();\n };\n\n useEffect(() => {\n const id = localStorage.getItem(LOCAL_STORAGE_KEY.TEAM_PLACE_ID);\n\n if (teamPlaceId !== Number(id)) return;\n\n handleTeamNameChange(displayName);\n }, [handleTeamNameChange, displayName, teamPlaceId]);\n\n return (\n <>\n \n \n {!isMobile && (\n \n \n \n )}\n
\n \n \n \n \n \n \n \n \n \n
\n \n\n \n \n \n {!isMobile && (\n \n 팀 정보\n \n )}\n \n\n \n\n \n \n \n \n \n\n {modalOpenType === 'team' && }\n {modalOpenType === 'user' && (\n \n )}\n {modalOpenType === 'serviceCenter' && (\n \n )}\n {modalOpenType === 'teamColor' && }\n {modalOpenType === 'accountDelete' && }\n \n );\n};\n\nexport default Header;\n","import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const Container = styled.div<{ $isOpen: boolean }>`\n cursor: pointer;\n\n ${({ $isOpen = false }) => {\n if ($isOpen)\n return css`\n outline: 3px ridge rgba(0, 46, 210, 0.381);\n border-radius: 2px;\n `;\n }}\n svg {\n transition: transform 0.2s ease-in-out;\n ${({ $isOpen = false }) => {\n if ($isOpen)\n return css`\n transform: rotate(-180deg);\n `;\n\n return css`\n transform: rotate(0);\n `;\n }}\n }\n`;\n\nexport const accordionButton = ($padding: CSSProperties['padding']) => css`\n display: flex;\n position: relative;\n justify-content: space-between;\n align-items: center;\n overflow-anchor: none;\n\n width: 100%;\n padding: ${$padding};\n text-align: left;\n\n border: 0;\n border-radius: 0;\n`;\n\nexport const DisabledWrapper = styled.div<{\n $padding: CSSProperties['padding'];\n}>`\n ${({ $padding }) => accordionButton($padding)}\n`;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n border-bottom: 1px solid ${({ theme }) => theme.color.GRAY300};\n\n &:last-child {\n border-bottom: none;\n }\n`;\n","import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const Container = styled.div<{ $width: CSSProperties['width'] }>`\n width: ${({ $width = 'auto' }) => $width};\n\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\n border-radius: 4px;\n`;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ $isOpen: boolean; $height: number }>`\n overflow: hidden;\n height: ${({ $isOpen, $height }) => ($isOpen ? $height + 24 : 0)}px;\n padding: ${({ $isOpen }) => ($isOpen ? '10px 18px 12px' : '0 18px')};\n border-top: 1px solid ${({ theme }) => theme.color.GRAY300};\n\n transition: 0.35s ease;\n`;\n","import { useState, type PropsWithChildren, useRef, useEffect } from 'react';\nimport * as S from './AccordionBody.styled';\nimport { useAccordion } from '~/hooks/useAccordion';\n\ninterface AccordionBodyProps {\n id: number;\n}\n\nconst AccordionBody = (props: PropsWithChildren) => {\n const { id, children } = props;\n const { openedAccordion } = useAccordion();\n const [bodyHeight, setBodyHeight] = useState(0);\n const ref = useRef(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(() => {\n setBodyHeight(() => {\n return ref.current ? ref.current.clientHeight : 0;\n });\n });\n\n resizeObserver.observe(ref.current);\n\n return () => resizeObserver.disconnect();\n });\n\n const getResultHeight = () => {\n if (id === openedAccordion) {\n return bodyHeight;\n }\n\n return 0;\n };\n\n return (\n \n
{children}
\n \n );\n};\n\nexport default AccordionBody;\n","import { styled } from 'styled-components';\nimport type { MenuListProps } from '~/components/common/Menu/MenuList/MenuList';\n\nexport const Wrapper = styled.ul.withConfig({\n shouldForwardProp: (prop) => !['width'].includes(prop),\n})`\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.MENU};\n\n max-height: 200px;\n width: ${({ width }) => width};\n overflow-y: auto;\n\n background-color: ${({ theme }) => theme.color.WHITE};\n\n border: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 6px;\n`;\n","import { useRef, useEffect } from 'react';\nimport type { MouseEventHandler, PropsWithChildren } from 'react';\nimport { useMenu } from '~/hooks/useMenu';\nimport { useClickOutside } from '~/hooks/useClickOutside';\nimport { useListKeyboardNavigation } from '~/hooks/useListKeyboardNavigation';\nimport * as S from './MenuList.styled';\n\nexport interface MenuListProps {\n width?: string;\n onSelect?: (value: string) => void;\n}\n\nconst MenuList = (props: PropsWithChildren) => {\n const { children, onSelect, width = '100%' } = props;\n\n const {\n isMenuOpen,\n selectedValue,\n handleMenuOpen,\n handleSelectedValueChange,\n } = useMenu();\n\n const ref = useRef(null);\n\n useClickOutside(ref, (e: Event) => {\n const { target } = e;\n\n if (target instanceof HTMLButtonElement) {\n return;\n }\n\n if ((target as HTMLElement).closest('button')) {\n return;\n }\n\n handleMenuOpen();\n });\n\n const handleMenuClick: MouseEventHandler = (e) => {\n const { target } = e;\n\n if (!(target instanceof HTMLLIElement)) {\n return;\n }\n\n const { textContent } = target;\n\n if (!textContent) {\n return;\n }\n\n selectItem(textContent);\n };\n\n const selectItem = (value: string) => {\n onSelect?.(value);\n handleSelectedValueChange(value);\n handleMenuOpen();\n };\n\n const {\n handlers: { handleMouseEnter, handleMouseLeave, handleKeyDown },\n } = useListKeyboardNavigation(ref, handleMenuOpen, selectItem);\n\n useEffect(() => {\n if (isMenuOpen && ref.current) {\n ref.current.focus();\n }\n }, [isMenuOpen]);\n\n useEffect(() => {\n if (selectedValue === '' || !isMenuOpen) {\n return;\n }\n\n if (!ref.current) {\n return;\n }\n\n const target = Array.from(ref.current.children).find(\n (child) => child.textContent?.replace('✓', '') === selectedValue,\n );\n\n if (!(target instanceof HTMLLIElement)) {\n return;\n }\n\n const { offsetTop } = target;\n\n ref.current.scrollTo(0, offsetTop);\n }, [isMenuOpen, selectedValue]);\n\n return (\n <>\n {isMenuOpen && (\n \n {children}\n \n )}\n \n );\n};\n\nexport default MenuList;\n","import { css, styled } from 'styled-components';\nimport type { MenuItemProps } from '~/components/common/Menu/MenuItem/MenuItem';\n\nexport const Wrapper = styled.li>`\n position: relative;\n\n padding: 8px 26px;\n\n cursor: pointer;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY100};\n }\n\n &.selected {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n\n ${({ css }) => css}\n`;\n\nexport const checkMark = css`\n position: absolute;\n left: 10px;\n`;\n","import type { PropsWithChildren } from 'react';\nimport type { CSSProp } from 'styled-components';\nimport Text from '~/components/common/Text/Text';\nimport { useMenu } from '~/hooks/useMenu';\nimport * as S from './MenuItem.styled';\n\nexport interface MenuItemProps {\n value: string;\n css?: CSSProp;\n}\n\nconst MenuItem = (props: PropsWithChildren) => {\n const { children, value, css } = props;\n const { selectedValue } = useMenu();\n const isSelected = selectedValue === value;\n\n return (\n <>\n \n {isSelected && (\n \n ✓\n \n )}\n {children}\n \n \n );\n};\n\nexport default MenuItem;\n","import type { PropsWithChildren } from 'react';\nimport { MenuProvider } from '~/components/common/Menu/MenuContext';\nimport MenuButton from '~/components/common/Menu/MenuButton/MenuButton';\nimport MenuList from '~/components/common/Menu/MenuList/MenuList';\nimport MenuItem from '~/components/common/Menu/MenuItem/MenuItem';\nimport * as S from './Menu.styled';\n\nconst Menu = (props: PropsWithChildren) => {\n const { children } = props;\n\n return (\n \n {children}\n \n );\n};\n\nMenu.Button = MenuButton;\nMenu.List = MenuList;\nMenu.Item = MenuItem;\n\nexport default Menu;\n","import { styled, css } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const BubbleContainer = styled.div`\n position: fixed;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 200px;\n padding: 18px 22px 12px;\n\n background-color: ${({ theme }) => theme.color.WHITE};\n border-radius: 10px;\n\n transform: translate(36px, 64px);\n\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n`;\n\nexport const Triangle = styled.div`\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.MODAL} + 1;\n top: -12px;\n left: 20%;\n\n width: 28px;\n height: 28px;\n\n border-radius: 4px;\n background-color: ${({ theme }) => theme.color.WHITE};\n\n box-shadow: -1px 1px rgb(178 178 178 / 0.6);\n\n transform: rotate(135deg);\n`;\n\nexport const InnerContainer = styled.div`\n display: flex;\n flex-direction: column;\n\n gap: 6px;\n`;\n\nexport const BadgeContainer = styled.div`\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n position: relative;\n justify-items: center;\n row-gap: 14px;\n`;\n\nexport const BadgeWrapper = styled.div<{ $isClicked: boolean }>`\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: 28px;\n height: 28px;\n\n border-radius: 50%;\n ${({ $isClicked }) => {\n if ($isClicked)\n return css`\n border: 2px solid ${({ theme }) => theme.color.GRAY350};\n `;\n }}\n\n cursor: pointer;\n`;\n\nexport const colorEditButton = css`\n padding: 4px;\n\n font-size: 12px;\n`;\n","import { css } from 'styled-components';\n\nexport const teamInfo = css`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const teamPlaceButton = css`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n\n width: 300px;\n height: 40px;\n padding: 0;\n\n border-bottom: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 4px;\n\n & svg {\n width: 24px;\n height: 24px;\n padding: 0;\n }\n`;\n\nexport const teamPlaceName = css`\n overflow: hidden;\n text-overflow: ellipsis;\n\n width: 260px;\n\n font-size: 22px;\n line-height: 22px;\n white-space: nowrap;\n`;\n\nexport const teamName = css`\n font-size: 24px;\n font-weight: bold;\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Backdrop = styled.div`\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 1;\r\n\r\n width: 100%;\r\n height: 100%;\r\n\r\n background-color: rgba(0, 0, 0, 0.3);\r\n`;\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n z-index: ${({ theme }) => theme.zIndex.MODAL};\r\n\r\n width: 490px;\r\n max-width: 100%;\r\n padding: 24px;\r\n row-gap: 24px;\r\n\r\n border-radius: 12px;\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n\r\n box-shadow:\r\n 0 0 1px #1b1d1f33,\r\n 0 15px 25px #1b1d1f33,\r\n 0 5px 10px #1b1d1f1f;\r\n\r\n transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport const ModalHeader = styled.div`\r\n display: flex;\r\n justify-content: flex-end;\r\n\r\n width: 100%;\r\n height: 38px;\r\n\r\n border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};\r\n`;\r\n\r\nexport const ModalBody = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 16px;\r\n`;\r\n\r\nexport const WarningBox = styled.div`\r\n padding: 16px;\r\n\r\n border-radius: 4px;\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & ul > li {\r\n margin: 0 0 6px 16px;\r\n\r\n list-style: initial;\r\n }\r\n\r\n & ul > li::marker {\r\n color: ${({ theme }) => theme.color.GRAY700};\r\n }\r\n`;\r\n\r\nexport const Username = styled.span`\r\n color: ${({ theme }) => theme.color.PRIMARY};\r\n`;\r\n\r\nexport const AccountDeleteForm = styled.form`\r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 12px;\r\n`;\r\n\r\nexport const closeButton = css`\r\n width: 32px;\r\n height: 38px;\r\n padding: 0;\r\n`;\r\n\r\nexport const deleteConfirmInput = css`\r\n padding: 0 10px;\r\n\r\n font-size: 16px;\r\n\r\n border-radius: 4px;\r\n border: 1px solid ${({ theme }) => theme.color.GRAY400};\r\n`;\r\n\r\nexport const accountDeleteButton = css`\r\n width: 100%;\r\n\r\n background-color: ${({ theme }) => theme.color.RED};\r\n`;\r\n","import { styled, css } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n z-index: ${({ theme }) => theme.zIndex.MODAL - 1};\n\n width: 100%;\n height: 100%;\n`;\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 490px;\n max-width: 100%;\n padding: 18px 20px 20px 20px;\n row-gap: 10px;\n\n border-radius: 12px;\n background-color: ${({ theme }) => theme.color.WHITE};\n\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n\n transform: translate(-50%, -50%);\n`;\n\nexport const ModalHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n height: 36px;\n\n border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};\n`;\n\nexport const ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: 6px;\n`;\n\nexport const ExplainBox = styled.div`\n padding: 10px;\n\n border-radius: 4px;\n background-color: ${({ theme }) => theme.color.GRAY100};\n`;\n\nexport const AccountBodyContainer = styled.div`\n display: flex;\n flex-direction: column;\n row-gap: 10px;\n`;\n\nexport const ContentContainer = styled.div`\n display: flex;\n column-gap: 10px;\n`;\n\nexport const UrlWrapper = styled.a`\n width: 100%;\n`;\n\nexport const closeButton = css`\n width: 32px;\n height: 38px;\n padding: 0;\n`;\n\nexport const dangerousButton = css`\n display: flex;\n position: relative;\n align-self: flex-end;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n`;\n\nexport const dangerousText = css`\n color: ${({ theme }) => theme.color.RED};\n`;\n\nexport const explainText = css`\n white-space: pre;\n`;\n\nexport const mailText = css`\n text-decoration-line: underline;\n`;\n","import { css, styled } from 'styled-components';\n\nexport const Backdrop = styled.div`\n position: fixed;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n position: absolute;\n overflow: hidden;\n top: 50px;\n right: 20px;\n z-index: ${({ theme }) => theme.zIndex.MODAL};\n\n width: 270px;\n height: 420px;\n padding: 20px 30px;\n gap: 10px;\n\n border-radius: 8px;\n box-shadow:\n 0 0 1px #1b1d1f33,\n 0 15px 25px #1b1d1f33,\n 0 5px 10px #1b1d1f1f;\n background-color: ${({ theme }) => theme.color.WHITE};\n`;\n\nexport const UserInfoForm = styled.form`\n display: flex;\n align-items: center;\n\n column-gap: 6px;\n\n &:focus {\n outline: ${({ theme }) => theme.color.PRIMARY};\n }\n`;\n\nexport const UserNameInputContainer = styled.div`\n width: 200px;\n\n border: 1px solid ${({ theme }) => theme.color.GRAY200};\n border-radius: 4px;\n`;\n\nexport const UserNameContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 20px;\n column-gap: 5px;\n`;\n\nexport const ProfileImage = styled.img`\n width: 200px;\n height: 200px;\n margin: 10px auto;\n\n border-radius: 50%;\n object-fit: cover;\n`;\n\nexport const serviceCenterButton = css`\n display: flex;\n position: relative;\n align-self: flex-end;\n align-items: center;\n padding: 0px;\n\n cursor: pointer;\n`;\n\nexport const hoverText = css`\n opacity: 0;\n color: ${({ theme }) => theme.color.RED};\n`;\n\nexport const logoutButton = css`\n display: flex;\n align-items: center;\n\n margin: 0 auto;\n padding: 8px;\n gap: 2px;\n`;\n\nexport const userName = css`\n overflow: hidden;\n\n max-width: 140px;\n\n font-weight: 500;\n white-space: pre;\n text-overflow: ellipsis;\n text-align: center;\n`;\n\nexport const email = css`\n margin: 0 auto;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.GRAY600};\n`;\n\nexport const userInfoEditButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 22px;\n height: 22px;\n padding: 2px;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userInfoSubmitButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 22px;\n height: 22px;\n padding: 2px;\n\n border-radius: 50%;\n\n &:hover {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const userNameLength = css`\n font-size: 12px;\n color: ${({ theme }) => theme.color.GRAY600};\n white-space: pre;\n`;\n\nexport const userNameInput = css`\n border: none;\n border-radius: 4px;\n\n &:focus {\n outline: none;\n }\n`;\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js.map b/storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js.map deleted file mode 100644 index 368cbb5fe..000000000 --- a/storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js","mappings":";;AAMA;;;;AAQA;;;;;AAQA;;;;;AAKA;;AAMA;;;;;AAQA;;;;;;;;;;;;;;AAcA;;;;;;;;;AASA;;AAIA;;;;;;;;;;;;;;AAcA;;AAIA;;;ACzEA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA","sources":["webpack://frontend/./src/components/common/NavigationBar/NavigationBar.styled.ts","webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts"],"sourcesContent":["import { styled } from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { css } from 'styled-components';\n\nexport const Nav = styled.nav<{ $isMobile: boolean }>`\n display: flex;\n ${({ $isMobile }) => {\n if ($isMobile)\n return css`\n width: 100%;\n height: 60px;\n padding: 10px;\n `;\n\n return css`\n width: 70px;\n height: 100%;\n padding: 14px 0 18px 0;\n `;\n }}\n`;\n\nexport const MenuContainer = styled.div<{ $isMobile: boolean }>`\n display: flex;\n align-items: center;\n\n width: 100%;\n ${({ $isMobile }) => {\n if ($isMobile)\n return css`\n justify-content: space-between;\n `;\n\n return css`\n flex-direction: column;\n\n gap: 30px;\n `;\n }}\n`;\n\nexport const MenuLink = styled(NavLink)`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n width: 62px;\n height: 62px;\n padding: 4px;\n\n border-radius: 50%;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n\n & > span {\n margin-top: 3px;\n font-size: 13px;\n }\n\n &.active {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamAddButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n width: 62px;\n height: 62px;\n padding: 4px;\n\n border-radius: 50%;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamAddText = css`\n font-size: 11px;\n`;\n","import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js b/storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js similarity index 99% rename from storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js rename to storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js index 2c2793d9b..a3e10e817 100644 --- a/storybook/components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js +++ b/storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js @@ -3,7 +3,6 @@ ${({$isMobile})=>$isMobile?styled_components_browser_esm.iv` width: 100%; height: 60px; - padding: 10px; `:styled_components_browser_esm.iv` width: 70px; height: 100%; @@ -132,4 +131,4 @@ ${props=>props.css} } `;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Text=props=>{const{as="p",size,weight,css,children}=props;return(0,jsx_runtime.jsx)(TextWrapper,{as,size,css,weight,children})};Text.displayName="Text";const Text_Text=Text;try{Text.displayName="Text",Text.__docgenInfo={description:"",displayName:"Text",props:{as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"h6"'},{value:'"p"'},{value:'"span"'},{value:'"strong"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xxs"'},{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'}]}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:"enum",value:[{value:'"bold"'},{value:'"normal"'},{value:'"light"'},{value:'"semiBold"'}]}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSSProp"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/common/Text/Text.tsx#Text"]={docgenInfo:Text.__docgenInfo,name:"Text",path:"src/components/common/Text/Text.tsx#Text"})}catch(__react_docgen_typescript_loader_error){}},"./src/constants/routes.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>PATH_NAME});const PATH_NAME={LANDING:"/",POLICY:"/policy",LOGIN:"/login",START:"/start",JOIN:"/join",CREATE:"/create",TEAM_SELECT:"/team",TEAM_OVERVIEW:"/team/overview",TEAM_CALENDAR:"/team/calendar",TEAM_FEED:"/team/feed",TEAM_LINK:"/team/link"}},"./src/utils/getIsMobile.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W:()=>getIsMobile});const getIsMobile=()=>{const isIos=null!==window.navigator.userAgent.match(/ipad|iphone/i),isAndroid=null!==window.navigator.userAgent.match(/Android/i);return!(!isIos&&!isAndroid)}}}]); -//# sourceMappingURL=components-common-NavigationBar-NavigationBar-stories.6ecf63af.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js.map b/storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js.map new file mode 100644 index 000000000..bf6f6fc6e --- /dev/null +++ b/storybook/components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-common-NavigationBar-NavigationBar-stories.89b0f117.iframe.bundle.js","mappings":";;AAMA;;;AAOA;;;;;AAQA;;;;;AAKA;;AAMA;;;;;AAQA;;;;;;;;;;;;;;AAcA;;;;;;;;;AASA;;AAIA;;;;;;;;;;;;;;AAcA;;AAIA;;;ACxEA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA","sources":["webpack://frontend/./src/components/common/NavigationBar/NavigationBar.styled.ts","webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts"],"sourcesContent":["import { styled } from 'styled-components';\nimport { NavLink } from 'react-router-dom';\nimport { css } from 'styled-components';\n\nexport const Nav = styled.nav<{ $isMobile: boolean }>`\n display: flex;\n ${({ $isMobile }) => {\n if ($isMobile)\n return css`\n width: 100%;\n height: 60px;\n `;\n\n return css`\n width: 70px;\n height: 100%;\n padding: 14px 0 18px 0;\n `;\n }}\n`;\n\nexport const MenuContainer = styled.div<{ $isMobile: boolean }>`\n display: flex;\n align-items: center;\n\n width: 100%;\n ${({ $isMobile }) => {\n if ($isMobile)\n return css`\n justify-content: space-between;\n `;\n\n return css`\n flex-direction: column;\n\n gap: 30px;\n `;\n }}\n`;\n\nexport const MenuLink = styled(NavLink)`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n width: 62px;\n height: 62px;\n padding: 4px;\n\n border-radius: 50%;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n\n & > span {\n margin-top: 3px;\n font-size: 13px;\n }\n\n &.active {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamAddButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n width: 62px;\n height: 62px;\n padding: 4px;\n\n border-radius: 50%;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.color.GRAY200};\n }\n`;\n\nexport const teamAddText = css`\n font-size: 11px;\n`;\n","import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js deleted file mode 100644 index daeffb1ce..000000000 --- a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js +++ /dev/null @@ -1,82 +0,0 @@ -"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[8006],{"./src/components/feed/ImageUploadDrawer/ImageUploadDrawer.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,Opened:()=>Opened,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ImageUploadDrawer_stories});var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const Container=styled_components_browser_esm.zo.div` - display: flex; - position: absolute; - - ${({$isMobile})=>$isMobile?styled_components_browser_esm.iv` - bottom: 10px; - width: 100%; - `:styled_components_browser_esm.iv` - bottom: 46px; - left: 30px; - - width: calc(100% - 60px); - `} - - height: 136px; - - border-radius: 20px 20px 0 0; - background: linear-gradient(30deg, #bfc3ff, #eaebff); - - transition: 0.35s; - transform: translateY(${({$isOpen})=>$isOpen?"-163px":"0"}); -`,ContentWrapper=styled_components_browser_esm.zo.div` - overflow-x: auto; - overflow-y: hidden; - flex-grow: 1; - - padding: 20px 20px 0 20px; -`,CloseButtonWrapper=styled_components_browser_esm.zo.div` - width: 64px; - height: 100%; - padding: 14px; -`,closeButton=styled_components_browser_esm.iv` - width: 36px; - height: 36px; - padding: 0; - - svg { - width: 36px; - height: 36px; - } - - svg > path { - fill: #7f84ff; - } -`;var Button=__webpack_require__("./src/components/common/Button/Button.tsx"),svg=__webpack_require__("./src/assets/svg/index.ts"),getIsMobile=__webpack_require__("./src/utils/getIsMobile.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ImageUploadDrawer=props=>{const{isOpen,onClose,children,isUploading}=props,isMobile=(0,getIsMobile.W)();return(0,jsx_runtime.jsxs)(Container,{$isOpen:isOpen,$isMobile:isMobile,children:[(0,jsx_runtime.jsx)(ContentWrapper,{children}),!isUploading&&(0,jsx_runtime.jsx)(CloseButtonWrapper,{children:(0,jsx_runtime.jsx)(Button.Z,{variant:"plain",type:"button",css:closeButton,onClick:onClose,"aria-label":"이미지 업로드 메뉴 닫기",children:(0,jsx_runtime.jsx)(svg.gH,{})})})]})};ImageUploadDrawer.displayName="ImageUploadDrawer";const ImageUploadDrawer_ImageUploadDrawer=ImageUploadDrawer;try{ImageUploadDrawer.displayName="ImageUploadDrawer",ImageUploadDrawer.__docgenInfo={description:"",displayName:"ImageUploadDrawer",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},isUploading:{defaultValue:null,description:"",name:"isUploading",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx#ImageUploadDrawer"]={docgenInfo:ImageUploadDrawer.__docgenInfo,name:"ImageUploadDrawer",path:"src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx#ImageUploadDrawer"})}catch(__react_docgen_typescript_loader_error){}const ImageUploadDrawer_stories={title:"feed/ImageUploadDrawer",component:ImageUploadDrawer_ImageUploadDrawer,tags:["autodocs"],decorators:[Story=>(0,jsx_runtime.jsx)("div",{style:{width:"100%",height:"500px",border:"1px solid black",position:"relative"},children:(0,jsx_runtime.jsx)(Story,{})})],argTypes:{isOpen:{description:"서랍장이 열려 있는지의 여부입니다. 이 prop을 조작하여 서랍장을 열고 닫을 수 있습니다."},children:{description:"랜더링할 자식 요소를 의미합니다. `ThumbnailList` 컴포넌트가 여기에 오면 됩니다."},onClose:{description:"서랍장이 닫히게 될 때 실행시킬 함수를 의미합니다. 서랍장을 실질적으로 닫는 함수를 여기에 넣어 주시면 됩니다."}},parameters:{docs:{description:{component:"`ImageUploadDrawer`는 이미지 업로드 메뉴를 담고 있는 서랍장 컴포넌트입니다. 사용자의 의사에 따라 열고 닫을 수 있습니다.\n이 컴포넌트는 `position: absolute` 속성을 가지며, 기본적으로 최하단에 위치할 것입니다. 컴포넌트를 사용하기 위해서는 부모 요소에 `display: relative` 속성을 적용해 주셔야 합니다.\n스토리에 표시되는 검은 윤곽선의 컨테이너는 단지 이해를 돕기 위한 것으로, 컴포넌트에 포함되지 않습니다."}}}},Default={args:{isOpen:!1,children:(0,jsx_runtime.jsx)("div",{style:{fontSize:"32px",padding:"40px"},children:"이 자리에 썸네일 리스트 컴포넌트가 올 것입니다."}),onClose:()=>{alert("onClose();")},isUploading:!1}},Opened={args:{isOpen:!0,children:(0,jsx_runtime.jsx)("div",{style:{fontSize:"32px",padding:"40px"},children:"이 자리에 썸네일 리스트 컴포넌트가 올 것입니다."}),onClose:()=>{alert("onClose();")},isUploading:!1}};Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {\n isOpen: false,\n children:
\n 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.\n
,\n onClose: () => {\n alert('onClose();');\n },\n isUploading: false\n }\n}",...Default.parameters?.docs?.source}}},Opened.parameters={...Opened.parameters,docs:{...Opened.parameters?.docs,source:{originalSource:"{\n args: {\n isOpen: true,\n children:
\n 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.\n
,\n onClose: () => {\n alert('onClose();');\n },\n isUploading: false\n }\n}",...Opened.parameters?.docs?.source}}};const __namedExportsOrder=["Default","Opened"]},"./src/components/common/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>Button_Button});var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const paddingSize={sm:"6px",md:"12px",lg:"18px"},variants={primary:styled_components_browser_esm.iv` - background-color: ${({theme})=>theme.color.PRIMARY}; - color: ${({theme})=>theme.color.WHITE}; - `,normal:styled_components_browser_esm.iv` - background-color: ${({theme})=>theme.color.WHITE}; - color: ${({theme})=>theme.color.GRAY900}; - border: 1px solid ${({theme})=>theme.color.GRAY300}; - `,plain:styled_components_browser_esm.iv` - background-color: transparent; - color: ${({theme})=>theme.color.GRAY900}; - `},ButtonWrapper=styled_components_browser_esm.zo.button.withConfig({shouldForwardProp:prop=>!["css","variant","size"].includes(prop)})` - font-size: 16px; - line-height: 16px; - text-align: center; - - ${({size="md"})=>styled_components_browser_esm.iv` - padding: ${paddingSize[size]}; - `}; - - ${({variant="primary"})=>variants[variant]}; - - ${({variant="primary"})=>{if("plain"!==variant)return styled_components_browser_esm.iv` - &:disabled { - opacity: 0.6; - } - - &:not([disabled]):hover { - opacity: 0.8; - } - - border-radius: 4px; - - transition: 0.2s; - `}}; - - ${props=>props.css} -`;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=props=>{const{children,size,type="submit",variant,...rest}=props;return(0,jsx_runtime.jsx)(ButtonWrapper,{type,size,variant,...rest,children})};Button.displayName="Button";const Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'},{value:'"lg"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"button"'},{value:'"reset"'},{value:'"submit"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"normal"'},{value:'"primary"'},{value:'"plain"'}]}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSSProp"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/common/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/common/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/utils/getIsMobile.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W:()=>getIsMobile});const getIsMobile=()=>{const isIos=null!==window.navigator.userAgent.match(/ipad|iphone/i),isAndroid=null!==window.navigator.userAgent.match(/Android/i);return!(!isIos&&!isAndroid)}}}]); -//# sourceMappingURL=components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js.map b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js.map deleted file mode 100644 index d8b4df5ec..000000000 --- a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.58c23d75.iframe.bundle.js","mappings":";;;;AAMA;;;AAQA;;;;;;;;;;;;;AAcA;AAGA;;;;;;AAQA;;;;AAMA;;;;;;;;;;;;;;AChCA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA","sources":["webpack://frontend/./src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts","webpack://frontend/./src/components/common/Button/Button.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.div<{ $isOpen: boolean; $isMobile: boolean }>`\r\n display: flex;\r\n position: absolute;\r\n\r\n ${({ $isMobile }) => {\r\n if ($isMobile) {\r\n return css`\r\n bottom: 10px;\r\n width: 100%;\r\n `;\r\n }\r\n\r\n return css`\r\n bottom: 46px;\r\n left: 30px;\r\n\r\n width: calc(100% - 60px);\r\n `;\r\n }}\r\n\r\n height: 136px;\r\n\r\n border-radius: 20px 20px 0 0;\r\n background: linear-gradient(30deg, #bfc3ff, #eaebff);\r\n\r\n transition: 0.35s;\r\n transform: translateY(${({ $isOpen }) => ($isOpen ? '-163px' : '0')});\r\n`;\r\n\r\nexport const ContentWrapper = styled.div`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n flex-grow: 1;\r\n\r\n padding: 20px 20px 0 20px;\r\n`;\r\n\r\nexport const CloseButtonWrapper = styled.div`\r\n width: 64px;\r\n height: 100%;\r\n padding: 14px;\r\n`;\r\n\r\nexport const closeButton = css`\r\n width: 36px;\r\n height: 36px;\r\n padding: 0;\r\n\r\n svg {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n\r\n svg > path {\r\n fill: #7f84ff;\r\n }\r\n`;\r\n","import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js new file mode 100644 index 000000000..00b2dd4bf --- /dev/null +++ b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js @@ -0,0 +1,84 @@ +"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[8006],{"./src/components/feed/ImageUploadDrawer/ImageUploadDrawer.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CustomDistanceOpened:()=>CustomDistanceOpened,Default:()=>Default,Opened:()=>Opened,__namedExportsOrder:()=>__namedExportsOrder,default:()=>ImageUploadDrawer_stories});var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const Container=styled_components_browser_esm.zo.div` + display: flex; + position: absolute; + + ${({$isMobile})=>$isMobile?styled_components_browser_esm.iv` + bottom: 10px; + width: 100%; + `:styled_components_browser_esm.iv` + bottom: 46px; + left: 30px; + + width: calc(100% - 60px); + `} + + height: 136px; + + border-radius: 20px 20px 0 0; + background: linear-gradient(30deg, #bfc3ff, #eaebff); + + transition: 0.35s; + transform: translateY( + ${({$isOpen,$slideDistance})=>$isOpen?`-${$slideDistance}px`:0} + ); +`,ContentWrapper=styled_components_browser_esm.zo.div` + overflow-x: auto; + overflow-y: hidden; + flex-grow: 1; + + padding: 20px 20px 0 20px; +`,CloseButtonWrapper=styled_components_browser_esm.zo.div` + width: 64px; + height: 100%; + padding: 14px; +`,closeButton=styled_components_browser_esm.iv` + width: 36px; + height: 36px; + padding: 0; + + svg { + width: 36px; + height: 36px; + } + + svg > path { + fill: #7f84ff; + } +`;var Button=__webpack_require__("./src/components/common/Button/Button.tsx"),svg=__webpack_require__("./src/assets/svg/index.ts"),getIsMobile=__webpack_require__("./src/utils/getIsMobile.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ImageUploadDrawer=props=>{const{isOpen,onClose,children,isUploading,slideDistance}=props,isMobile=(0,getIsMobile.W)();return(0,jsx_runtime.jsxs)(Container,{$isOpen:isOpen,$isMobile:isMobile,$slideDistance:slideDistance,children:[(0,jsx_runtime.jsx)(ContentWrapper,{children}),!isUploading&&(0,jsx_runtime.jsx)(CloseButtonWrapper,{children:(0,jsx_runtime.jsx)(Button.Z,{variant:"plain",type:"button",css:closeButton,onClick:onClose,"aria-label":"이미지 업로드 메뉴 닫기",children:(0,jsx_runtime.jsx)(svg.gH,{})})})]})};ImageUploadDrawer.displayName="ImageUploadDrawer";const ImageUploadDrawer_ImageUploadDrawer=ImageUploadDrawer;try{ImageUploadDrawer.displayName="ImageUploadDrawer",ImageUploadDrawer.__docgenInfo={description:"",displayName:"ImageUploadDrawer",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},slideDistance:{defaultValue:null,description:"",name:"slideDistance",required:!0,type:{name:"number"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},isUploading:{defaultValue:null,description:"",name:"isUploading",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx#ImageUploadDrawer"]={docgenInfo:ImageUploadDrawer.__docgenInfo,name:"ImageUploadDrawer",path:"src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx#ImageUploadDrawer"})}catch(__react_docgen_typescript_loader_error){}const ImageUploadDrawer_stories={title:"feed/ImageUploadDrawer",component:ImageUploadDrawer_ImageUploadDrawer,tags:["autodocs"],decorators:[Story=>(0,jsx_runtime.jsx)("div",{style:{width:"100%",height:"500px",border:"1px solid black",position:"relative"},children:(0,jsx_runtime.jsx)(Story,{})})],argTypes:{isOpen:{description:"서랍장이 열려 있는지의 여부입니다. 이 prop을 조작하여 서랍장을 열고 닫을 수 있습니다."},children:{description:"랜더링할 자식 요소를 의미합니다. `ThumbnailList` 컴포넌트가 여기에 오면 됩니다."},slideDistance:{description:"서랍장이 열리게 될 경우 얼마나 많은 거리를 위로 움직여야 할 지를 의미합니다. 입력값은 숫자이며 단위는 `px`입니다."},onClose:{description:"서랍장이 닫히게 될 때 실행시킬 함수를 의미합니다. 서랍장을 실질적으로 닫는 함수를 여기에 넣어 주시면 됩니다."}},parameters:{docs:{description:{component:"`ImageUploadDrawer`는 이미지 업로드 메뉴를 담고 있는 서랍장 컴포넌트입니다. 사용자의 의사에 따라 열고 닫을 수 있습니다.\n이 컴포넌트는 `position: absolute` 속성을 가지며, 기본적으로 최하단에 위치할 것입니다. 컴포넌트를 사용하기 위해서는 부모 요소에 `display: relative` 속성을 적용해 주셔야 합니다.\n스토리에 표시되는 검은 윤곽선의 컨테이너는 단지 이해를 돕기 위한 것으로, 컴포넌트에 포함되지 않습니다."}}}},Default={args:{isOpen:!1,slideDistance:163,children:(0,jsx_runtime.jsx)("div",{style:{fontSize:"32px",padding:"40px"},children:"이 자리에 썸네일 리스트 컴포넌트가 올 것입니다."}),onClose:()=>{alert("onClose();")},isUploading:!1}},Opened={args:{isOpen:!0,slideDistance:163,children:(0,jsx_runtime.jsx)("div",{style:{fontSize:"32px",padding:"40px"},children:"이 자리에 썸네일 리스트 컴포넌트가 올 것입니다."}),onClose:()=>{alert("onClose();")},isUploading:!1}},CustomDistanceOpened={args:{isOpen:!0,slideDistance:0,children:(0,jsx_runtime.jsx)("div",{style:{fontSize:"32px",padding:"40px"},children:"이 자리에 썸네일 리스트 컴포넌트가 올 것입니다."}),onClose:()=>{alert("onClose();")},isUploading:!1}};Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"{\n args: {\n isOpen: false,\n slideDistance: 163,\n children:
\n 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.\n
,\n onClose: () => {\n alert('onClose();');\n },\n isUploading: false\n }\n}",...Default.parameters?.docs?.source}}},Opened.parameters={...Opened.parameters,docs:{...Opened.parameters?.docs,source:{originalSource:"{\n args: {\n isOpen: true,\n slideDistance: 163,\n children:
\n 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.\n
,\n onClose: () => {\n alert('onClose();');\n },\n isUploading: false\n }\n}",...Opened.parameters?.docs?.source}}},CustomDistanceOpened.parameters={...CustomDistanceOpened.parameters,docs:{...CustomDistanceOpened.parameters?.docs,source:{originalSource:"{\n args: {\n isOpen: true,\n slideDistance: 0,\n children:
\n 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.\n
,\n onClose: () => {\n alert('onClose();');\n },\n isUploading: false\n }\n}",...CustomDistanceOpened.parameters?.docs?.source}}};const __namedExportsOrder=["Default","Opened","CustomDistanceOpened"]},"./src/components/common/Button/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>Button_Button});var styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const paddingSize={sm:"6px",md:"12px",lg:"18px"},variants={primary:styled_components_browser_esm.iv` + background-color: ${({theme})=>theme.color.PRIMARY}; + color: ${({theme})=>theme.color.WHITE}; + `,normal:styled_components_browser_esm.iv` + background-color: ${({theme})=>theme.color.WHITE}; + color: ${({theme})=>theme.color.GRAY900}; + border: 1px solid ${({theme})=>theme.color.GRAY300}; + `,plain:styled_components_browser_esm.iv` + background-color: transparent; + color: ${({theme})=>theme.color.GRAY900}; + `},ButtonWrapper=styled_components_browser_esm.zo.button.withConfig({shouldForwardProp:prop=>!["css","variant","size"].includes(prop)})` + font-size: 16px; + line-height: 16px; + text-align: center; + + ${({size="md"})=>styled_components_browser_esm.iv` + padding: ${paddingSize[size]}; + `}; + + ${({variant="primary"})=>variants[variant]}; + + ${({variant="primary"})=>{if("plain"!==variant)return styled_components_browser_esm.iv` + &:disabled { + opacity: 0.6; + } + + &:not([disabled]):hover { + opacity: 0.8; + } + + border-radius: 4px; + + transition: 0.2s; + `}}; + + ${props=>props.css} +`;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const Button=props=>{const{children,size,type="submit",variant,...rest}=props;return(0,jsx_runtime.jsx)(ButtonWrapper,{type,size,variant,...rest,children})};Button.displayName="Button";const Button_Button=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'},{value:'"lg"'}]}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"button"'},{value:'"reset"'},{value:'"submit"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"normal"'},{value:'"primary"'},{value:'"plain"'}]}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSSProp"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/common/Button/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/components/common/Button/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/utils/getIsMobile.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{W:()=>getIsMobile});const getIsMobile=()=>{const isIos=null!==window.navigator.userAgent.match(/ipad|iphone/i),isAndroid=null!==window.navigator.userAgent.match(/Android/i);return!(!isIos&&!isAndroid)}}}]); +//# sourceMappingURL=components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js.map b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js.map new file mode 100644 index 000000000..e5e339fec --- /dev/null +++ b/storybook/components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"components-feed-ImageUploadDrawer-ImageUploadDrawer-stories.90cad964.iframe.bundle.js","mappings":";;;;AAUA;;;AAQA;;;;;;;;;;;;;;AAeA;;AAIA;;;;;;AAQA;;;;AAMA;;;;;;;;;;;;;;ACtCA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA","sources":["webpack://frontend/./src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts","webpack://frontend/./src/components/common/Button/Button.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.div<{\r\n $isOpen: boolean;\r\n $isMobile: boolean;\r\n $slideDistance: number;\r\n}>`\r\n display: flex;\r\n position: absolute;\r\n\r\n ${({ $isMobile }) => {\r\n if ($isMobile) {\r\n return css`\r\n bottom: 10px;\r\n width: 100%;\r\n `;\r\n }\r\n\r\n return css`\r\n bottom: 46px;\r\n left: 30px;\r\n\r\n width: calc(100% - 60px);\r\n `;\r\n }}\r\n\r\n height: 136px;\r\n\r\n border-radius: 20px 20px 0 0;\r\n background: linear-gradient(30deg, #bfc3ff, #eaebff);\r\n\r\n transition: 0.35s;\r\n transform: translateY(\r\n ${({ $isOpen, $slideDistance }) => ($isOpen ? `-${$slideDistance}px` : 0)}\r\n );\r\n`;\r\n\r\nexport const ContentWrapper = styled.div`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n flex-grow: 1;\r\n\r\n padding: 20px 20px 0 20px;\r\n`;\r\n\r\nexport const CloseButtonWrapper = styled.div`\r\n width: 64px;\r\n height: 100%;\r\n padding: 14px;\r\n`;\r\n\r\nexport const closeButton = css`\r\n width: 36px;\r\n height: 36px;\r\n padding: 0;\r\n\r\n svg {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n\r\n svg > path {\r\n fill: #7f84ff;\r\n }\r\n`;\r\n","import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js b/storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js similarity index 99% rename from storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js rename to storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js index eb19e5950..803a87e9f 100644 --- a/storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js +++ b/storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js @@ -157,7 +157,7 @@ position: relative; overflow: hidden; - padding: 16px 28px; + padding: 10px 24px; `,ThreadHeader=styled_components_browser_esm.zo.div` display: flex; align-items: center; @@ -180,7 +180,7 @@ height: 136px; padding: 40px 20px 0 20px; margin-top: -20px; - margin-bottom: ${({$marginBottom})=>$marginBottom?"40px":"20px"}; + margin-bottom: ${({$marginBottom})=>$marginBottom?"30px":"10px"}; background: ${({theme,$isMe})=>$isMe?theme.gradient.BLURPLE("116px"):theme.gradient.WHITE("116px")}; @@ -195,7 +195,7 @@ width: 100%; white-space: pre-wrap; - font-size: ${"md"===threadSize?18:16}px; + font-size: ${"md"===threadSize?16:14}px; color: ${({theme})=>isMe?theme.color.WHITE:theme.color.BLACK}; word-break: break-all; @@ -269,4 +269,4 @@ border-radius: 12px; `;var Button=__webpack_require__("./src/components/common/Button/Button.tsx"),png=__webpack_require__("./src/assets/png/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ViewableThumbnail=props=>{const{image,size="md",onClick}=props,{isExpired,name,url}=image;return(0,jsx_runtime.jsx)(Container,{$size:size,children:(0,jsx_runtime.jsx)(Button.Z,{variant:"plain",type:"button",css:viewButton,onClick,"aria-label":`${name} 이미지 자세히 보기`,children:(0,jsx_runtime.jsx)(Image,{src:isExpired?png.wp:url,alt:name,onError:e=>{e.currentTarget.src=png.wp,e.currentTarget.alt="손상된 이미지"}})})})};ViewableThumbnail.displayName="ViewableThumbnail";const ViewableThumbnail_ViewableThumbnail=ViewableThumbnail;try{ViewableThumbnail.displayName="ViewableThumbnail",ViewableThumbnail.__docgenInfo={description:"",displayName:"ViewableThumbnail",props:{image:{defaultValue:null,description:"",name:"image",required:!0,type:{name:"ThreadImage"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/feed/ViewableThumbnail/ViewableThumbnail.tsx#ViewableThumbnail"]={docgenInfo:ViewableThumbnail.__docgenInfo,name:"ViewableThumbnail",path:"src/components/feed/ViewableThumbnail/ViewableThumbnail.tsx#ViewableThumbnail"})}catch(__react_docgen_typescript_loader_error){}},"./src/constants/feed.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{KD:()=>THREAD_TYPE,Yz:()=>THREAD_SIZE,rW:()=>DEFAULT_MAX_THREAD_HEIGHT,vO:()=>MAX_UPLOAD_IMAGE_COUNT});const DEFAULT_MAX_THREAD_HEIGHT=500,THREAD_TYPE={THREAD:"thread",NOTIFICATION:"notification"},THREAD_SIZE=20,MAX_UPLOAD_IMAGE_COUNT=4},"./src/utils/formatWriteTime.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>formatWriteTime});const formatWriteTime=rawDateTime=>rawDateTime.replaceAll("-","/")}}]); -//# sourceMappingURL=components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js.map b/storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js.map similarity index 96% rename from storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js.map rename to storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js.map index 7446327ef..5a0bb2962 100644 --- a/storybook/components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js.map +++ b/storybook/components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js.map @@ -1 +1 @@ -{"version":3,"file":"components-feed-Thread-Thread-stories.f76be279.iframe.bundle.js","mappings":";AAaA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA;;;;;;;;;;;ACvCA;;;;;;;AASA;;;;;;;;;;AAUA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPA;;;;;;;;;;ACbA;;;;;;AAMA;AAGA;;;;;AAKA;;AAEA;AAGA;;AAIA;AACA;;;;;AAQA;;;;;AAOA;;;;;;AAQA;;;;AAMA;;;;;;;AASA;;;;;AAQA;;AAEA;;;;AAOA;;;;AAIA;AAGA;;;;AAIA;AACA;;;;;;;;;;;AC5FA;;AAEA;;;;AAIA;;AAGA;;;AAIA;;AAGA;;;AAGA;;;;;;;;;;AClBA;;;AAMA;;;;;;;AASA;;;;;;;;ACvBA;AACA;;AAEA;AAGA;;;;;;;AASA","sources":["webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts","webpack://frontend/./src/components/feed/DeletableThumbnail/DeletableThumbnail.styled.ts","webpack://frontend/./src/components/feed/ImageAddButton/ImageAddButton.styled.ts","webpack://frontend/./src/components/feed/Thread/Thread.styled.ts","webpack://frontend/./src/components/feed/ThreadExpandButton/ThreadExpandButton.styled.ts","webpack://frontend/./src/components/feed/ThumbnailList/ThumbnailList.styled.ts","webpack://frontend/./src/components/feed/ViewableThumbnail/ViewableThumbnail.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li`\r\n display: inline-block;\r\n flex-shrink: 0;\r\n position: relative;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const deleteButton = css`\r\n position: absolute;\r\n top: -4px;\r\n right: -4px;\r\n\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n\r\n border-radius: 4px;\r\n box-shadow: 0 3px 6px ${({ theme }) => theme.color.GRAY400};\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n`;\r\n","import { styled } from 'styled-components';\r\n\r\nexport const FakeButton = styled.div`\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n background-color: #dee1ff;\r\n\r\n transition: 0.2s;\r\n\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: #e8eaff;\r\n }\r\n\r\n & svg {\r\n color: #9792ff;\r\n }\r\n`;\r\n\r\nexport const FileUploadInput = styled.input`\r\n display: none;\r\n`;\r\n","import { css, styled } from 'styled-components';\nimport type { ThreadSize } from '~/types/size';\n\nexport const Container = styled.div<{ $isMe: boolean }>`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n gap: 10px;\n\n z-index: 0;\n`;\n\nexport const BodyContainer = styled.div<{ $isMe: boolean }>`\n display: flex;\n align-items: flex-end;\n\n gap: 10px;\n\n ${({ $isMe }) => $isMe && 'flex-direction: row-reverse'};\n`;\n\nexport const ContentContainer = styled.div<{ $isMe: boolean; $height: number }>`\n display: flex;\n flex-direction: column;\n\n max-width: 80%;\n max-height: ${({ $height }) => $height}px;\n\n ${({ $isMe, theme }) => {\n if ($isMe)\n return css`\n background-color: ${theme.color.PRIMARY900};\n border-radius: 12px 12px 0 12px;\n `;\n\n return css`\n background-color: ${theme.color.GRAY150};\n border-radius: 0 12px 12px 12px;\n `;\n }}\n\n transition: 0.3s;\n`;\n\nexport const ContentWrapper = styled.div`\n position: relative;\n overflow: hidden;\n\n padding: 16px 28px;\n`;\n\nexport const ThreadHeader = styled.div`\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n height: 36px;\n`;\n\nexport const Author = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const ProfileImg = styled.img`\n width: 30px;\n height: 30px;\n\n border-radius: 50%;\n\n object-fit: cover;\n`;\n\nexport const ThumbnailListWrapper = styled.div<{\n $isMe: boolean;\n $marginBottom: boolean;\n}>`\n width: 100%;\n height: 136px;\n padding: 40px 20px 0 20px;\n margin-top: -20px;\n margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '40px' : '20px')};\n\n background: ${({ theme, $isMe }) =>\n $isMe ? theme.gradient.BLURPLE('116px') : theme.gradient.WHITE('116px')};\n\n z-index: 1;\n box-sizing: border-box;\n`;\n\nexport const threadInfoText = css`\n white-space: pre-wrap;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.BLACK};\n`;\n\nexport const contentField = (threadSize: ThreadSize, isMe: boolean) => css`\n width: 100%;\n white-space: pre-wrap;\n\n font-size: ${threadSize === 'md' ? 18 : 16}px;\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n word-break: break-all;\n`;\n","import { styled, css } from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const expandButton = (isMe: boolean, size: 'md' | 'sm') => css`\n width: 100%;\n height: ${size === 'md' ? '80px' : '70px'};\n padding: 30px 10px 10px 10px;\n margin-top: -30px;\n\n ${isMe\n ? css`\n border-bottom-left-radius: 12px;\n `\n : css`\n border-radius: 0 0 12px 12px;\n `}\n background: ${({ theme }) =>\n isMe ? theme.gradient.BLURPLE('50px') : theme.gradient.WHITE('50px')};\n\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n & svg {\n width: ${size === 'md' ? '32px' : '26px'};\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.ul<{\r\n $mode: 'delete' | 'view';\r\n $size: 'md' | 'sm' | undefined;\r\n}>`\r\n display: flex;\r\n flex-direction: row;\r\n flex-shrink: 0;\r\n column-gap: 12px;\r\n\r\n width: 100%;\r\n\r\n ${({ $mode, $size }) => {\r\n if ($mode === 'view')\r\n if ($size === 'sm')\r\n return css`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding-bottom: 20px;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: visible;\r\n `;\r\n }}\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li<{ $size?: 'md' | 'sm' }>`\r\n flex-shrink: 0;\r\n\r\n width: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n height: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n\r\n border-radius: ${({ $size = 'md' }) => ($size === 'md' ? '12px' : '10px')};\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const viewButton = css`\r\n width: 100%;\r\n height: 100%;\r\n padding: 0;\r\n\r\n border-radius: 12px;\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"components-feed-Thread-Thread-stories.1175d70e.iframe.bundle.js","mappings":";AAaA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA;;;;;;;;;;;ACvCA;;;;;;;AASA;;;;;;;;;;AAUA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPA;;;;;;;;;;ACbA;;;;;;AAMA;AAGA;;;;;AAKA;;AAEA;AAGA;;AAIA;AACA;;;;;AAQA;;;;;AAOA;;;;;;AAQA;;;;AAMA;;;;;;;AASA;;;;;AAQA;;AAEA;;;;AAOA;;;;AAIA;AAGA;;;;AAIA;AACA;;;;;;;;;;;AC5FA;;AAEA;;;;AAIA;;AAGA;;;AAIA;;AAGA;;;AAGA;;;;;;;;;;AClBA;;;AAMA;;;;;;;AASA;;;;;;;;ACvBA;AACA;;AAEA;AAGA;;;;;;;AASA","sources":["webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts","webpack://frontend/./src/components/feed/DeletableThumbnail/DeletableThumbnail.styled.ts","webpack://frontend/./src/components/feed/ImageAddButton/ImageAddButton.styled.ts","webpack://frontend/./src/components/feed/Thread/Thread.styled.ts","webpack://frontend/./src/components/feed/ThreadExpandButton/ThreadExpandButton.styled.ts","webpack://frontend/./src/components/feed/ThumbnailList/ThumbnailList.styled.ts","webpack://frontend/./src/components/feed/ViewableThumbnail/ViewableThumbnail.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li`\r\n display: inline-block;\r\n flex-shrink: 0;\r\n position: relative;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const deleteButton = css`\r\n position: absolute;\r\n top: -4px;\r\n right: -4px;\r\n\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n\r\n border-radius: 4px;\r\n box-shadow: 0 3px 6px ${({ theme }) => theme.color.GRAY400};\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n`;\r\n","import { styled } from 'styled-components';\r\n\r\nexport const FakeButton = styled.div`\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n background-color: #dee1ff;\r\n\r\n transition: 0.2s;\r\n\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: #e8eaff;\r\n }\r\n\r\n & svg {\r\n color: #9792ff;\r\n }\r\n`;\r\n\r\nexport const FileUploadInput = styled.input`\r\n display: none;\r\n`;\r\n","import { css, styled } from 'styled-components';\nimport type { ThreadSize } from '~/types/size';\n\nexport const Container = styled.div<{ $isMe: boolean }>`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n gap: 10px;\n\n z-index: 0;\n`;\n\nexport const BodyContainer = styled.div<{ $isMe: boolean }>`\n display: flex;\n align-items: flex-end;\n\n gap: 10px;\n\n ${({ $isMe }) => $isMe && 'flex-direction: row-reverse'};\n`;\n\nexport const ContentContainer = styled.div<{ $isMe: boolean; $height: number }>`\n display: flex;\n flex-direction: column;\n\n max-width: 80%;\n max-height: ${({ $height }) => $height}px;\n\n ${({ $isMe, theme }) => {\n if ($isMe)\n return css`\n background-color: ${theme.color.PRIMARY900};\n border-radius: 12px 12px 0 12px;\n `;\n\n return css`\n background-color: ${theme.color.GRAY150};\n border-radius: 0 12px 12px 12px;\n `;\n }}\n\n transition: 0.3s;\n`;\n\nexport const ContentWrapper = styled.div`\n position: relative;\n overflow: hidden;\n\n padding: 10px 24px;\n`;\n\nexport const ThreadHeader = styled.div`\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n height: 36px;\n`;\n\nexport const Author = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const ProfileImg = styled.img`\n width: 30px;\n height: 30px;\n\n border-radius: 50%;\n\n object-fit: cover;\n`;\n\nexport const ThumbnailListWrapper = styled.div<{\n $isMe: boolean;\n $marginBottom: boolean;\n}>`\n width: 100%;\n height: 136px;\n padding: 40px 20px 0 20px;\n margin-top: -20px;\n margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '30px' : '10px')};\n\n background: ${({ theme, $isMe }) =>\n $isMe ? theme.gradient.BLURPLE('116px') : theme.gradient.WHITE('116px')};\n\n z-index: 1;\n box-sizing: border-box;\n`;\n\nexport const threadInfoText = css`\n white-space: pre-wrap;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.BLACK};\n`;\n\nexport const contentField = (threadSize: ThreadSize, isMe: boolean) => css`\n width: 100%;\n white-space: pre-wrap;\n\n font-size: ${threadSize === 'md' ? 16 : 14}px;\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n word-break: break-all;\n`;\n","import { styled, css } from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const expandButton = (isMe: boolean, size: 'md' | 'sm') => css`\n width: 100%;\n height: ${size === 'md' ? '80px' : '70px'};\n padding: 30px 10px 10px 10px;\n margin-top: -30px;\n\n ${isMe\n ? css`\n border-bottom-left-radius: 12px;\n `\n : css`\n border-radius: 0 0 12px 12px;\n `}\n background: ${({ theme }) =>\n isMe ? theme.gradient.BLURPLE('50px') : theme.gradient.WHITE('50px')};\n\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n & svg {\n width: ${size === 'md' ? '32px' : '26px'};\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.ul<{\r\n $mode: 'delete' | 'view';\r\n $size: 'md' | 'sm' | undefined;\r\n}>`\r\n display: flex;\r\n flex-direction: row;\r\n flex-shrink: 0;\r\n column-gap: 12px;\r\n\r\n width: 100%;\r\n\r\n ${({ $mode, $size }) => {\r\n if ($mode === 'view')\r\n if ($size === 'sm')\r\n return css`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding-bottom: 20px;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: visible;\r\n `;\r\n }}\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li<{ $size?: 'md' | 'sm' }>`\r\n flex-shrink: 0;\r\n\r\n width: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n height: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n\r\n border-radius: ${({ $size = 'md' }) => ($size === 'md' ? '12px' : '10px')};\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const viewButton = css`\r\n width: 100%;\r\n height: 100%;\r\n padding: 0;\r\n\r\n border-radius: 12px;\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js b/storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js similarity index 99% rename from storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js rename to storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js index 900f29ed5..2173921ea 100644 --- a/storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js +++ b/storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js @@ -185,7 +185,7 @@ position: relative; overflow: hidden; - padding: 16px 28px; + padding: 10px 24px; `,ThreadHeader=styled_components_browser_esm.zo.div` display: flex; align-items: center; @@ -208,7 +208,7 @@ height: 136px; padding: 40px 20px 0 20px; margin-top: -20px; - margin-bottom: ${({$marginBottom})=>$marginBottom?"40px":"20px"}; + margin-bottom: ${({$marginBottom})=>$marginBottom?"30px":"10px"}; background: ${({theme,$isMe})=>$isMe?theme.gradient.BLURPLE("116px"):theme.gradient.WHITE("116px")}; @@ -223,7 +223,7 @@ width: 100%; white-space: pre-wrap; - font-size: ${"md"===threadSize?18:16}px; + font-size: ${"md"===threadSize?16:14}px; color: ${({theme})=>isMe?theme.color.WHITE:theme.color.BLACK}; word-break: break-all; @@ -297,4 +297,4 @@ border-radius: 12px; `;var Button=__webpack_require__("./src/components/common/Button/Button.tsx"),png=__webpack_require__("./src/assets/png/index.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const ViewableThumbnail=props=>{const{image,size="md",onClick}=props,{isExpired,name,url}=image;return(0,jsx_runtime.jsx)(Container,{$size:size,children:(0,jsx_runtime.jsx)(Button.Z,{variant:"plain",type:"button",css:viewButton,onClick,"aria-label":`${name} 이미지 자세히 보기`,children:(0,jsx_runtime.jsx)(Image,{src:isExpired?png.wp:url,alt:name,onError:e=>{e.currentTarget.src=png.wp,e.currentTarget.alt="손상된 이미지"}})})})};ViewableThumbnail.displayName="ViewableThumbnail";const ViewableThumbnail_ViewableThumbnail=ViewableThumbnail;try{ViewableThumbnail.displayName="ViewableThumbnail",ViewableThumbnail.__docgenInfo={description:"",displayName:"ViewableThumbnail",props:{image:{defaultValue:null,description:"",name:"image",required:!0,type:{name:"ThreadImage"}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"sm"'},{value:'"md"'}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/feed/ViewableThumbnail/ViewableThumbnail.tsx#ViewableThumbnail"]={docgenInfo:ViewableThumbnail.__docgenInfo,name:"ViewableThumbnail",path:"src/components/feed/ViewableThumbnail/ViewableThumbnail.tsx#ViewableThumbnail"})}catch(__react_docgen_typescript_loader_error){}},"./src/constants/feed.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{KD:()=>THREAD_TYPE,Yz:()=>THREAD_SIZE,rW:()=>DEFAULT_MAX_THREAD_HEIGHT,vO:()=>MAX_UPLOAD_IMAGE_COUNT});const DEFAULT_MAX_THREAD_HEIGHT=500,THREAD_TYPE={THREAD:"thread",NOTIFICATION:"notification"},THREAD_SIZE=20,MAX_UPLOAD_IMAGE_COUNT=4},"./src/constants/query.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{i:()=>STALE_TIME});const STALE_TIME={SCHEDULES:3e4,DAILY_SCHEDULES:3e4,MY_SCHEDULES:3e4,MY_DAILY_SCHEDULES:3e4,USER_INFO:3e5,TEAM_PLACE_MEMBERS:6e4,TEAM_PLACE_INVITE_CODE:1/0,TEAM_LINKS:6e4,TEAM_FEED:3e5,ICALENDAR_URL:1/0}},"./src/hooks/useTeamPlace.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{l:()=>useTeamPlace});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_contexts_TeamPlaceContext__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/contexts/TeamPlaceContext.tsx");const useTeamPlace=()=>{const context=(0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_contexts_TeamPlaceContext__WEBPACK_IMPORTED_MODULE_1__.Q);if(void 0===context)throw new Error("useTeamPlace must be used within a TeamPlaceContext");return context}},"./src/utils/formatWriteTime.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>formatWriteTime});const formatWriteTime=rawDateTime=>rawDateTime.replaceAll("-","/")}}]); -//# sourceMappingURL=components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js.map \ No newline at end of file diff --git a/storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js.map b/storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js.map similarity index 97% rename from storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js.map rename to storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js.map index 04732eeb4..67d93eeb6 100644 --- a/storybook/components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js.map +++ b/storybook/components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js.map @@ -1 +1 @@ -{"version":3,"file":"components-feed-ThreadList-ThreadList-stories.45f63654.iframe.bundle.js","mappings":";;;;;;AAaA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA;;;;;;;;;;;ACvCA;;;;;;;AASA;;;;;;;;;;AAUA;AACA;;;;;;;;;;;;;ACtBA;;;;;;;AASA;;;AAKA;;AAEA;AAGA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;ACNA;;;;;;;;;;ACbA;;;;;;AAMA;AAGA;;;;;AAKA;;AAEA;AAGA;;AAIA;AACA;;;;;AAQA;;;;;AAOA;;;;;;AAQA;;;;AAMA;;;;;;;AASA;;;;;AAQA;;AAEA;;;;AAOA;;;;AAIA;AAGA;;;;AAIA;AACA;;;;;;;;;;;AC5FA;;AAEA;;;;AAIA;;AAGA;;;AAIA;;AAGA;;;AAGA;;;;;;;;;;AClBA;;;AAMA;;;;;;;AASA;;;;;;;;ACvBA;AACA;;AAEA;AAGA;;;;;;;AASA","sources":["webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts","webpack://frontend/./src/components/feed/DeletableThumbnail/DeletableThumbnail.styled.ts","webpack://frontend/./src/components/feed/EmptyFeedPlaceholder/EmptyFeedPlaceholder.styled.ts","webpack://frontend/./src/components/feed/ImageAddButton/ImageAddButton.styled.ts","webpack://frontend/./src/components/feed/Thread/Thread.styled.ts","webpack://frontend/./src/components/feed/ThreadExpandButton/ThreadExpandButton.styled.ts","webpack://frontend/./src/components/feed/ThumbnailList/ThumbnailList.styled.ts","webpack://frontend/./src/components/feed/ViewableThumbnail/ViewableThumbnail.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li`\r\n display: inline-block;\r\n flex-shrink: 0;\r\n position: relative;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const deleteButton = css`\r\n position: absolute;\r\n top: -4px;\r\n right: -4px;\r\n\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n\r\n border-radius: 4px;\r\n box-shadow: 0 3px 6px ${({ theme }) => theme.color.GRAY400};\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 100%;\r\n height: 100%;\r\n`;\r\n\r\nexport const PlaceholderContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n row-gap: 18px;\r\n\r\n width: 380px;\r\n`;\r\n\r\nexport const FeedEmptyImage = styled.img`\r\n width: 18%;\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const titleText = css`\r\n font-size: 28px;\r\n color: ${({ theme }) => theme.color.GRAY400};\r\n`;\r\n\r\nexport const clickToAddText = css`\r\n font-size: 20px;\r\n color: ${({ theme }) => theme.color.GRAY500};\r\n`;\r\n","import { styled } from 'styled-components';\r\n\r\nexport const FakeButton = styled.div`\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n background-color: #dee1ff;\r\n\r\n transition: 0.2s;\r\n\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: #e8eaff;\r\n }\r\n\r\n & svg {\r\n color: #9792ff;\r\n }\r\n`;\r\n\r\nexport const FileUploadInput = styled.input`\r\n display: none;\r\n`;\r\n","import { css, styled } from 'styled-components';\nimport type { ThreadSize } from '~/types/size';\n\nexport const Container = styled.div<{ $isMe: boolean }>`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n gap: 10px;\n\n z-index: 0;\n`;\n\nexport const BodyContainer = styled.div<{ $isMe: boolean }>`\n display: flex;\n align-items: flex-end;\n\n gap: 10px;\n\n ${({ $isMe }) => $isMe && 'flex-direction: row-reverse'};\n`;\n\nexport const ContentContainer = styled.div<{ $isMe: boolean; $height: number }>`\n display: flex;\n flex-direction: column;\n\n max-width: 80%;\n max-height: ${({ $height }) => $height}px;\n\n ${({ $isMe, theme }) => {\n if ($isMe)\n return css`\n background-color: ${theme.color.PRIMARY900};\n border-radius: 12px 12px 0 12px;\n `;\n\n return css`\n background-color: ${theme.color.GRAY150};\n border-radius: 0 12px 12px 12px;\n `;\n }}\n\n transition: 0.3s;\n`;\n\nexport const ContentWrapper = styled.div`\n position: relative;\n overflow: hidden;\n\n padding: 16px 28px;\n`;\n\nexport const ThreadHeader = styled.div`\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n height: 36px;\n`;\n\nexport const Author = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const ProfileImg = styled.img`\n width: 30px;\n height: 30px;\n\n border-radius: 50%;\n\n object-fit: cover;\n`;\n\nexport const ThumbnailListWrapper = styled.div<{\n $isMe: boolean;\n $marginBottom: boolean;\n}>`\n width: 100%;\n height: 136px;\n padding: 40px 20px 0 20px;\n margin-top: -20px;\n margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '40px' : '20px')};\n\n background: ${({ theme, $isMe }) =>\n $isMe ? theme.gradient.BLURPLE('116px') : theme.gradient.WHITE('116px')};\n\n z-index: 1;\n box-sizing: border-box;\n`;\n\nexport const threadInfoText = css`\n white-space: pre-wrap;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.BLACK};\n`;\n\nexport const contentField = (threadSize: ThreadSize, isMe: boolean) => css`\n width: 100%;\n white-space: pre-wrap;\n\n font-size: ${threadSize === 'md' ? 18 : 16}px;\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n word-break: break-all;\n`;\n","import { styled, css } from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const expandButton = (isMe: boolean, size: 'md' | 'sm') => css`\n width: 100%;\n height: ${size === 'md' ? '80px' : '70px'};\n padding: 30px 10px 10px 10px;\n margin-top: -30px;\n\n ${isMe\n ? css`\n border-bottom-left-radius: 12px;\n `\n : css`\n border-radius: 0 0 12px 12px;\n `}\n background: ${({ theme }) =>\n isMe ? theme.gradient.BLURPLE('50px') : theme.gradient.WHITE('50px')};\n\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n & svg {\n width: ${size === 'md' ? '32px' : '26px'};\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.ul<{\r\n $mode: 'delete' | 'view';\r\n $size: 'md' | 'sm' | undefined;\r\n}>`\r\n display: flex;\r\n flex-direction: row;\r\n flex-shrink: 0;\r\n column-gap: 12px;\r\n\r\n width: 100%;\r\n\r\n ${({ $mode, $size }) => {\r\n if ($mode === 'view')\r\n if ($size === 'sm')\r\n return css`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding-bottom: 20px;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: visible;\r\n `;\r\n }}\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li<{ $size?: 'md' | 'sm' }>`\r\n flex-shrink: 0;\r\n\r\n width: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n height: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n\r\n border-radius: ${({ $size = 'md' }) => ($size === 'md' ? '12px' : '10px')};\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const viewButton = css`\r\n width: 100%;\r\n height: 100%;\r\n padding: 0;\r\n\r\n border-radius: 12px;\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file +{"version":3,"file":"components-feed-ThreadList-ThreadList-stories.a61a83cf.iframe.bundle.js","mappings":";;;;;;AAaA;AACA;AAGA;AACA;AACA;AACA;AAGA;;AAEA;AAIA;;;;;AAOA;AAEA;;;AAIA;;AAIA;;;;;;;;;;;;AAeA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AChBA;AACA;;;AAGA;;;;;;;;;;;ACvCA;;;;;;;AASA;;;;;;;;;;AAUA;AACA;;;;;;;;;;;;;ACtBA;;;;;;;AASA;;;AAKA;;AAEA;AAGA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;ACNA;;;;;;;;;;ACbA;;;;;;AAMA;AAGA;;;;;AAKA;;AAEA;AAGA;;AAIA;AACA;;;;;AAQA;;;;;AAOA;;;;;;AAQA;;;;AAMA;;;;;;;AASA;;;;;AAQA;;AAEA;;;;AAOA;;;;AAIA;AAGA;;;;AAIA;AACA;;;;;;;;;;;AC5FA;;AAEA;;;;AAIA;;AAGA;;;AAIA;;AAGA;;;AAGA;;;;;;;;;;AClBA;;;AAMA;;;;;;;AASA;;;;;;;;ACvBA;AACA;;AAEA;AAGA;;;;;;;AASA","sources":["webpack://frontend/./src/components/common/Button/Button.styled.ts","webpack://frontend/./src/components/common/Text/Text.styled.ts","webpack://frontend/./src/components/feed/DeletableThumbnail/DeletableThumbnail.styled.ts","webpack://frontend/./src/components/feed/EmptyFeedPlaceholder/EmptyFeedPlaceholder.styled.ts","webpack://frontend/./src/components/feed/ImageAddButton/ImageAddButton.styled.ts","webpack://frontend/./src/components/feed/Thread/Thread.styled.ts","webpack://frontend/./src/components/feed/ThreadExpandButton/ThreadExpandButton.styled.ts","webpack://frontend/./src/components/feed/ThumbnailList/ThumbnailList.styled.ts","webpack://frontend/./src/components/feed/ViewableThumbnail/ViewableThumbnail.styled.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\r\nimport type { CSSProp } from 'styled-components';\r\nimport type { ButtonVariant, ButtonProps } from './Button';\r\nimport type { ButtonSize } from '~/types/size';\r\n\r\nconst paddingSize: Record = {\r\n sm: '6px',\r\n md: '12px',\r\n lg: '18px',\r\n};\r\n\r\nconst variants: Record = {\r\n primary: css`\r\n background-color: ${({ theme }) => theme.color.PRIMARY};\r\n color: ${({ theme }) => theme.color.WHITE};\r\n `,\r\n\r\n normal: css`\r\n background-color: ${({ theme }) => theme.color.WHITE};\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n border: 1px solid ${({ theme }) => theme.color.GRAY300};\r\n `,\r\n\r\n plain: css`\r\n background-color: transparent;\r\n color: ${({ theme }) => theme.color.GRAY900};\r\n `,\r\n};\r\n\r\nexport const ButtonWrapper = styled.button.withConfig({\r\n shouldForwardProp: (prop) => !['css', 'variant', 'size'].includes(prop),\r\n})`\r\n font-size: 16px;\r\n line-height: 16px;\r\n text-align: center;\r\n\r\n ${({ size = 'md' }) => {\r\n return css`\r\n padding: ${paddingSize[size]};\r\n `;\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n return variants[variant];\r\n }};\r\n\r\n ${({ variant = 'primary' }) => {\r\n if (variant !== 'plain') {\r\n return css`\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n\r\n &:not([disabled]):hover {\r\n opacity: 0.8;\r\n }\r\n\r\n border-radius: 4px;\r\n\r\n transition: 0.2s;\r\n `;\r\n }\r\n }};\r\n\r\n ${(props) => props.css}\r\n`;\r\n","import { styled } from 'styled-components';\nimport type { TextSize } from '~/types/size';\nimport type { TextProps, Weight } from './Text';\n\nconst fontWeight: Record = {\n light: 100,\n normal: 400,\n semiBold: 600,\n bold: 800,\n};\n\nconst fontSize: Record = {\n xxs: '10px',\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n xxl: '22px',\n};\n\nexport const TextWrapper = styled.p.withConfig({\n shouldForwardProp: (prop) => !['size', 'weight', 'css'].includes(prop),\n})`\n h1&,\n h2&,\n h3&,\n h4&,\n h5&,\n h6& {\n font-weight: bold;\n }\n h1& {\n font-size: 36px;\n }\n h2& {\n font-size: 32px;\n }\n h3& {\n font-size: 28px;\n }\n h4& {\n font-size: 24px;\n }\n p&,\n span&,\n strong&,\n small& {\n font-size: ${({ size = 'md' }) => fontSize[size] || 'initial'};\n font-weight: ${({ weight = 'normal' }) => fontWeight[weight] || 'initial'};\n }\n && {\n ${(props) => props.css}\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li`\r\n display: inline-block;\r\n flex-shrink: 0;\r\n position: relative;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const deleteButton = css`\r\n position: absolute;\r\n top: -4px;\r\n right: -4px;\r\n\r\n width: 24px;\r\n height: 24px;\r\n padding: 0;\r\n\r\n border-radius: 4px;\r\n box-shadow: 0 3px 6px ${({ theme }) => theme.color.GRAY400};\r\n background-color: ${({ theme }) => theme.color.GRAY100};\r\n\r\n & svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 100%;\r\n height: 100%;\r\n`;\r\n\r\nexport const PlaceholderContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n row-gap: 18px;\r\n\r\n width: 380px;\r\n`;\r\n\r\nexport const FeedEmptyImage = styled.img`\r\n width: 18%;\r\n margin-bottom: 10px;\r\n`;\r\n\r\nexport const titleText = css`\r\n font-size: 28px;\r\n color: ${({ theme }) => theme.color.GRAY400};\r\n`;\r\n\r\nexport const clickToAddText = css`\r\n font-size: 20px;\r\n color: ${({ theme }) => theme.color.GRAY500};\r\n`;\r\n","import { styled } from 'styled-components';\r\n\r\nexport const FakeButton = styled.div`\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n width: 96px;\r\n height: 96px;\r\n\r\n border-radius: 12px;\r\n background-color: #dee1ff;\r\n\r\n transition: 0.2s;\r\n\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: #e8eaff;\r\n }\r\n\r\n & svg {\r\n color: #9792ff;\r\n }\r\n`;\r\n\r\nexport const FileUploadInput = styled.input`\r\n display: none;\r\n`;\r\n","import { css, styled } from 'styled-components';\nimport type { ThreadSize } from '~/types/size';\n\nexport const Container = styled.div<{ $isMe: boolean }>`\n display: flex;\n flex-direction: column;\n\n width: 100%;\n gap: 10px;\n\n z-index: 0;\n`;\n\nexport const BodyContainer = styled.div<{ $isMe: boolean }>`\n display: flex;\n align-items: flex-end;\n\n gap: 10px;\n\n ${({ $isMe }) => $isMe && 'flex-direction: row-reverse'};\n`;\n\nexport const ContentContainer = styled.div<{ $isMe: boolean; $height: number }>`\n display: flex;\n flex-direction: column;\n\n max-width: 80%;\n max-height: ${({ $height }) => $height}px;\n\n ${({ $isMe, theme }) => {\n if ($isMe)\n return css`\n background-color: ${theme.color.PRIMARY900};\n border-radius: 12px 12px 0 12px;\n `;\n\n return css`\n background-color: ${theme.color.GRAY150};\n border-radius: 0 12px 12px 12px;\n `;\n }}\n\n transition: 0.3s;\n`;\n\nexport const ContentWrapper = styled.div`\n position: relative;\n overflow: hidden;\n\n padding: 10px 24px;\n`;\n\nexport const ThreadHeader = styled.div`\n display: flex;\n align-items: center;\n column-gap: 8px;\n\n height: 36px;\n`;\n\nexport const Author = styled.div`\n display: flex;\n align-items: center;\n gap: 10px;\n`;\n\nexport const ProfileImg = styled.img`\n width: 30px;\n height: 30px;\n\n border-radius: 50%;\n\n object-fit: cover;\n`;\n\nexport const ThumbnailListWrapper = styled.div<{\n $isMe: boolean;\n $marginBottom: boolean;\n}>`\n width: 100%;\n height: 136px;\n padding: 40px 20px 0 20px;\n margin-top: -20px;\n margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '30px' : '10px')};\n\n background: ${({ theme, $isMe }) =>\n $isMe ? theme.gradient.BLURPLE('116px') : theme.gradient.WHITE('116px')};\n\n z-index: 1;\n box-sizing: border-box;\n`;\n\nexport const threadInfoText = css`\n white-space: pre-wrap;\n\n font-size: 14px;\n color: ${({ theme }) => theme.color.BLACK};\n`;\n\nexport const contentField = (threadSize: ThreadSize, isMe: boolean) => css`\n width: 100%;\n white-space: pre-wrap;\n\n font-size: ${threadSize === 'md' ? 16 : 14}px;\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n word-break: break-all;\n`;\n","import { styled, css } from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n\n width: 100%;\n height: 100%;\n`;\n\nexport const expandButton = (isMe: boolean, size: 'md' | 'sm') => css`\n width: 100%;\n height: ${size === 'md' ? '80px' : '70px'};\n padding: 30px 10px 10px 10px;\n margin-top: -30px;\n\n ${isMe\n ? css`\n border-bottom-left-radius: 12px;\n `\n : css`\n border-radius: 0 0 12px 12px;\n `}\n background: ${({ theme }) =>\n isMe ? theme.gradient.BLURPLE('50px') : theme.gradient.WHITE('50px')};\n\n color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};\n\n & svg {\n width: ${size === 'md' ? '32px' : '26px'};\n }\n`;\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.ul<{\r\n $mode: 'delete' | 'view';\r\n $size: 'md' | 'sm' | undefined;\r\n}>`\r\n display: flex;\r\n flex-direction: row;\r\n flex-shrink: 0;\r\n column-gap: 12px;\r\n\r\n width: 100%;\r\n\r\n ${({ $mode, $size }) => {\r\n if ($mode === 'view')\r\n if ($size === 'sm')\r\n return css`\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n\r\n padding-bottom: 20px;\r\n `;\r\n else\r\n return css`\r\n height: 116px;\r\n\r\n overflow-x: visible;\r\n `;\r\n }}\r\n`;\r\n","import { styled, css } from 'styled-components';\r\n\r\nexport const Container = styled.li<{ $size?: 'md' | 'sm' }>`\r\n flex-shrink: 0;\r\n\r\n width: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n height: ${({ $size = 'md' }) => ($size === 'md' ? '96px' : '56px')};\r\n\r\n border-radius: ${({ $size = 'md' }) => ($size === 'md' ? '12px' : '10px')};\r\n`;\r\n\r\nexport const Image = styled.img`\r\n width: 100%;\r\n height: 100%;\r\n\r\n border-radius: 12px;\r\n\r\n object-fit: cover;\r\n`;\r\n\r\nexport const viewButton = css`\r\n width: 100%;\r\n height: 100%;\r\n padding: 0;\r\n\r\n border-radius: 12px;\r\n`;\r\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/storybook/iframe.html b/storybook/iframe.html index a8390d5c3..31df42977 100644 --- a/storybook/iframe.html +++ b/storybook/iframe.html @@ -348,7 +348,7 @@ window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};