diff --git a/public/svgs/Img_Banner.svg b/public/svgs/Img_Banner.svg new file mode 100644 index 00000000..da93c9cc --- /dev/null +++ b/public/svgs/Img_Banner.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/ic_bookmark.svg b/public/svgs/ic_bookmark.svg new file mode 100644 index 00000000..aba55af2 --- /dev/null +++ b/public/svgs/ic_bookmark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/svgs/ic_chevron.svg b/public/svgs/ic_chevron.svg new file mode 100644 index 00000000..2a7dc6ec --- /dev/null +++ b/public/svgs/ic_chevron.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/svgs/ic_comment_gray_24.svg b/public/svgs/ic_comment_gray_24.svg index 114171e2..a2314e29 100644 --- a/public/svgs/ic_comment_gray_24.svg +++ b/public/svgs/ic_comment_gray_24.svg @@ -1,3 +1,3 @@ - + diff --git a/public/svgs/img_textlogo.svg b/public/svgs/img_textlogo.svg new file mode 100644 index 00000000..5afdef9f --- /dev/null +++ b/public/svgs/img_textlogo.svg @@ -0,0 +1,10 @@ + + + diff --git a/src/assets/images/img_banner_attached.png b/src/assets/images/img_banner_attached.png new file mode 100644 index 00000000..7a77d225 Binary files /dev/null and b/src/assets/images/img_banner_attached.png differ diff --git a/src/assets/svgs/BtnWritingChipxIcon.tsx b/src/assets/svgs/BtnWritingChipxIcon.tsx index e1262c44..ae80abd4 100644 --- a/src/assets/svgs/BtnWritingChipxIcon.tsx +++ b/src/assets/svgs/BtnWritingChipxIcon.tsx @@ -1,9 +1,15 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgBtnWritingChipxIcon = (props: SVGProps) => ( - - + + ); export default SvgBtnWritingChipxIcon; diff --git a/src/assets/svgs/IcAlarmBlack24.tsx b/src/assets/svgs/IcAlarmBlack24.tsx index 5c94c9c6..a392a185 100644 --- a/src/assets/svgs/IcAlarmBlack24.tsx +++ b/src/assets/svgs/IcAlarmBlack24.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgIcAlarmBlack24 = (props: SVGProps) => ( diff --git a/src/assets/svgs/IcArrowDownBlack24.tsx b/src/assets/svgs/IcArrowDownBlack24.tsx index d38dca16..7a224153 100644 --- a/src/assets/svgs/IcArrowDownBlack24.tsx +++ b/src/assets/svgs/IcArrowDownBlack24.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgIcArrowDownBlack24 = (props: SVGProps) => ( diff --git a/src/assets/svgs/IcBookmark.tsx b/src/assets/svgs/IcBookmark.tsx new file mode 100644 index 00000000..1a6bf763 --- /dev/null +++ b/src/assets/svgs/IcBookmark.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const SvgIcBookmark = (props: SVGProps) => ( + + + +); +export default SvgIcBookmark; diff --git a/src/assets/svgs/IcChevron.tsx b/src/assets/svgs/IcChevron.tsx new file mode 100644 index 00000000..00e43ac5 --- /dev/null +++ b/src/assets/svgs/IcChevron.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const SvgIcChevron = (props: SVGProps) => ( + + + +); +export default SvgIcChevron; diff --git a/src/assets/svgs/IcCommentGray24.tsx b/src/assets/svgs/IcCommentGray24.tsx index 94b58ea6..27dd6f3a 100644 --- a/src/assets/svgs/IcCommentGray24.tsx +++ b/src/assets/svgs/IcCommentGray24.tsx @@ -4,10 +4,9 @@ import type { SVGProps } from 'react'; const SvgIcCommentGray24 = (props: SVGProps) => ( ); diff --git a/src/assets/svgs/IcInstaGray20.tsx b/src/assets/svgs/IcInstaGray20.tsx index 4189fb90..a38d67e1 100644 --- a/src/assets/svgs/IcInstaGray20.tsx +++ b/src/assets/svgs/IcInstaGray20.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgIcInstaGray20 = (props: SVGProps) => ( diff --git a/src/assets/svgs/ImgBanner.tsx b/src/assets/svgs/ImgBanner.tsx new file mode 100644 index 00000000..6941049d --- /dev/null +++ b/src/assets/svgs/ImgBanner.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const SvgImgBanner = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgImgBanner; diff --git a/src/assets/svgs/ImgDarudalogo40.tsx b/src/assets/svgs/ImgDarudalogo40.tsx index 6f2d2a92..b81a3c72 100644 --- a/src/assets/svgs/ImgDarudalogo40.tsx +++ b/src/assets/svgs/ImgDarudalogo40.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import type { SVGProps } from 'react'; const SvgImgDarudalogo40 = (props: SVGProps) => ( diff --git a/src/assets/svgs/ImgTextlogo.tsx b/src/assets/svgs/ImgTextlogo.tsx new file mode 100644 index 00000000..771d63cf --- /dev/null +++ b/src/assets/svgs/ImgTextlogo.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const SvgImgTextlogo = (props: SVGProps) => ( + + + + + +); +export default SvgImgTextlogo; diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts index fb789262..ee8dcd4d 100644 --- a/src/assets/svgs/index.ts +++ b/src/assets/svgs/index.ts @@ -1,18 +1,21 @@ +export { default as ImgBanner } from './ImgBanner'; +export { default as BtnWritingChipxIcon } from './BtnWritingChipxIcon'; export { default as IcAlarmBlack24 } from './IcAlarmBlack24'; export { default as IcArrowDownBlack24 } from './IcArrowDownBlack24'; -export { default as IcInstaGray20 } from './IcInstaGray20'; -export { default as ImgDarudalogo40 } from './ImgDarudalogo40'; -export { default as ImgModalcheck } from './ImgModalcheck'; -export { default as ImgModalexit } from './ImgModalexit'; -export { default as ImgModalexit2 } from './ImgModalexit2'; -export { default as BtnWritingChipxIcon } from './BtnWritingChipxIcon'; -export { default as IcOverflowGray24 } from './IcOverflowGray24'; -export { default as IcOverflowGray44 } from './IcOverflowGray44'; +export { default as IcBookmark } from './IcBookmark'; export { default as IcBookmark32 } from './IcBookmark32'; - export { default as IcBookmarkGray24Dact } from './IcBookmarkGray24Dact'; +export { default as IcChevron } from './IcChevron'; export { default as IcCmtimgGray24 } from './IcCmtimgGray24'; export { default as IcCommentGray24 } from './IcCommentGray24'; +export { default as IcInstaGray20 } from './IcInstaGray20'; +export { default as IcOverflowGray24 } from './IcOverflowGray24'; +export { default as IcOverflowGray44 } from './IcOverflowGray44'; export { default as IcPlusWhite20 } from './IcPlusWhite20'; export { default as IcShareGray24 } from './IcShareGray24'; +export { default as ImgDarudalogo40 } from './ImgDarudalogo40'; +export { default as ImgModalcheck } from './ImgModalcheck'; +export { default as ImgModalexit } from './ImgModalexit'; +export { default as ImgModalexit2 } from './ImgModalexit2'; +export { default as ImgTextlogo } from './ImgTextlogo'; export { default as ImgUploadWhite48 } from './ImgUploadWhite48'; diff --git a/src/components/common/button/circleButton/CircleButton.styled.ts b/src/components/common/button/circleButton/CircleButton.styled.ts index c96d05e0..f117b769 100644 --- a/src/components/common/button/circleButton/CircleButton.styled.ts +++ b/src/components/common/button/circleButton/CircleButton.styled.ts @@ -27,7 +27,7 @@ export const ButtonWrapper = styled.button<{ `, small: css` gap: 1.2rem; - padding: 1.6rem 3.6rem; + padding: 1.6rem 3rem; ${theme.fonts.body_20_b}; border-radius: 3.2rem; diff --git a/src/components/common/button/squareButton/SquareButton.styled.ts b/src/components/common/button/squareButton/SquareButton.styled.ts index fb40bc52..5904aeb3 100644 --- a/src/components/common/button/squareButton/SquareButton.styled.ts +++ b/src/components/common/button/squareButton/SquareButton.styled.ts @@ -43,12 +43,20 @@ export const ButtonWrapper = styled.button<{ } }} + &:hover span svg path { + stroke: ${({ theme }) => theme.colors.white1}; + } + &:hover { color: ${({ theme }) => theme.colors.white1}; background-color: ${({ theme }) => theme.colors.iris1}; } + &:active span svg path { + stroke: ${({ theme }) => theme.colors.white1}; + } + &:active { color: ${({ theme }) => theme.colors.white1}; diff --git a/src/components/common/dropdown/DropDown.stories.tsx b/src/components/common/dropdown/DropDown.stories.tsx index 50ed33c9..2d5389a7 100644 --- a/src/components/common/dropdown/DropDown.stories.tsx +++ b/src/components/common/dropdown/DropDown.stories.tsx @@ -107,7 +107,7 @@ export const TopList = DropDownTemplate.bind({}); TopList.args = { children: ( <> - + { alert('첫번째 클릭!'); diff --git a/src/components/common/dropdown/DropDown.styled.ts b/src/components/common/dropdown/DropDown.styled.ts index fe7c133b..e9cb32af 100644 --- a/src/components/common/dropdown/DropDown.styled.ts +++ b/src/components/common/dropdown/DropDown.styled.ts @@ -8,16 +8,33 @@ export const DropDownContainer = styled.section<{ $position: 'start' | 'end' }>` align-items: ${({ $position }) => $position}; `; -export const DropDownToggleBtn = styled.div` +export const DropDownToggleBtn = styled.button<{ $isOpen: boolean }>` cursor: pointer; svg { vertical-align: middle; } + + ${({ $isOpen, theme }) => + $isOpen && + ` + border-radius: 0.8rem; + background: ${theme.colors.gray4}; +`} + + &:hover { + background: ${({ theme }) => theme.colors.gray4}; + border-radius: 0.8rem; + } + + &:hover svg path { + fill: ${({ theme, $isOpen }) => ($isOpen ? theme.colors.gray1 : theme.colors.white1)}; + } `; -export const DropDownWrapper = styled.ul` - position: abolsute; +export const DropDownWrapper = styled.ul<{ $display: 'top' | 'bottom' }>` + position: absolute; + ${({ $display }) => $display}: 4.5rem; z-index: 1; width: min-content; diff --git a/src/components/common/dropdown/DropDown.tsx b/src/components/common/dropdown/DropDown.tsx index d9e85d4c..7e903ab8 100644 --- a/src/components/common/dropdown/DropDown.tsx +++ b/src/components/common/dropdown/DropDown.tsx @@ -38,15 +38,20 @@ const ToggleBtn = ({ children }: { children: ReactNode }) => { setIsOpen(!isOpen); }; - return {children}; + return ( + + {children} + + ); }; -const Content = ({ children }: { children: ReactNode }) => { +// $diplay: 'bottom'의 경우, 드롭다운이 위로 펼쳐지는 경우 입니다. +const Content = ({ children, $display = 'top' }: { children: ReactNode; $display?: 'top' | 'bottom' }) => { const { isOpen } = useComponentContext(DropDownContext, 'DropDown'); - if (!isOpen) return; + if (!isOpen) return null; - return {children}; + return {children}; }; const Item = ({ status, onClick, children }: DropDownItemPropType) => { diff --git a/src/components/common/modal/AlertModal.tsx b/src/components/common/modal/AlertModal.tsx index 030173cc..f75490c6 100644 --- a/src/components/common/modal/AlertModal.tsx +++ b/src/components/common/modal/AlertModal.tsx @@ -10,10 +10,10 @@ interface AlertModalProps { ImgPopupModal: FunctionComponent>; isSingleModal: boolean; - singleBtnContent: string; + singleBtnContent?: string; - modalContent: string; - DobblebtnProps: { + modalContent?: string; + DobblebtnProps?: { isPrimaryRight: boolean; primaryBtnContent: string; secondaryBtnContent: string; diff --git a/src/components/common/modal/component/ModalWrapper.tsx b/src/components/common/modal/component/ModalWrapper.tsx index 741cc7db..a2e8e24c 100644 --- a/src/components/common/modal/component/ModalWrapper.tsx +++ b/src/components/common/modal/component/ModalWrapper.tsx @@ -24,13 +24,15 @@ export default ModalWrapper; const S = { ModalWrapper: styled.dialog` + position: fixed; top: 0; + left: 0; z-index: 999; display: flex; align-items: center; justify-content: center; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; padding-top: 3.1rem; overflow: auto; @@ -44,7 +46,7 @@ const S = { align-items: center; justify-content: flex-end; width: 40rem; - height: auto; + margin: auto; padding: ${({ $isSingleModal }) => ($isSingleModal ? '4.4rem 4.8rem 2.8rem 4.8rem' : '3.1rem 0 0 0')}; background: ${({ theme }) => theme.colors.white1}; diff --git a/src/pages/community/Community.stories.tsx b/src/pages/community/Community.stories.tsx new file mode 100644 index 00000000..5a353e48 --- /dev/null +++ b/src/pages/community/Community.stories.tsx @@ -0,0 +1,31 @@ +import Footer from '@components/footer/Footer'; +import Header from '@components/header/Header'; +import { HEADER_STATE, HeaderState } from '@constants/headerState'; +import type { Meta, StoryObj } from '@storybook/react'; + +import Community from './Community'; + +const headerState: HeaderState = HEADER_STATE.LOGGED_IN; + +const meta: Meta = { + title: 'Pages/Community', + component: Community, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + (Story) => ( + <> +
+ +