From efcaf0861cb05476479d8dbf80acb2dae799abc8 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 01:10:06 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20version2.2.0=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 47cb8740..17616bd7 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@hookform/resolvers": "^2.9.10", "@nanostores/react": "^0.7.1", "@sentry/nextjs": "^7.51.0", - "@sopt-makers/colors": "^1.0.0", + "@sopt-makers/colors": "^2.2.0", "@sopt-makers/playground-common": "^1.2.2", "@stitches/react": "^1.2.8", "@tanstack/react-query": "^4.10.3", diff --git a/yarn.lock b/yarn.lock index 53e701ce..01e9411e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3569,10 +3569,10 @@ resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz" integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ== -"@sopt-makers/colors@^1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@sopt-makers/colors/-/colors-1.0.0.tgz#c829efe5ba379bbd4d4d17f4a539bd7b8fa8541d" - integrity sha512-FJQhzfYk4DJjyBlORn+40p4UaqzHEiVoyqDjr5ajWqr2ZpDCwe5tmTJ8g+DT10THJEZT66RAhwtdhfDF6iHV6g== +"@sopt-makers/colors@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@sopt-makers/colors/-/colors-2.2.0.tgz#32be1c92c806d72f2e6893c094d446217ba3d7c8" + integrity sha512-L91wbWPxuLc5qTR+UJ1N69WzYqv35Z+jR5Yo3DhZHhzKFUwUrp9xOMVQd1ezS0RJKBXS60MsouMf3s2jA4ukug== "@sopt-makers/playground-common@^1.2.2": version "1.2.2" From 0052354a9d7038c96393858160e0cdafebd1689c Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 01:10:30 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20mds=EC=97=90=20=EC=97=86=EB=8A=94?= =?UTF-8?q?=20gray40,=20black40,=20black60,=20black80,=20black100=EC=9D=80?= =?UTF-8?q?=20=EC=95=84=EC=A7=81=20=EC=A0=9C=EA=B1=B0=ED=95=98=EC=A7=80=20?= =?UTF-8?q?=EB=A7=90=EA=B3=A0=20=EC=9E=84=EC=8B=9C=EB=A1=9C=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- stitches.config.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/stitches.config.ts b/stitches.config.ts index 4715374c..8806f765 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -7,11 +7,13 @@ const stitches = createStitches({ theme: { colors: { transparent: 'transparent', - gray50: '#d4d4d4', - black: '#000', + gray40: '#c0c5c9', + black40: '#3c3d40', + black60: '#2c2d2e', black60_trans: 'rgba(24,24,24,0.6)', + black80: '#1c1d1e', black80_trans: 'rgba(24,24,24,0.8)', - black90: '#1c1d1e', + black100: '#0f1010', red: '#d70067', ...colors, }, From eadf4caad3c97da266f2504e8db34faeec740197 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 01:11:00 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=BB=AC=EB=9F=AC=20=EC=83=88?= =?UTF-8?q?=EB=A1=AD=EA=B2=8C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/detail/index.tsx | 6 +++--- pages/edit/index.tsx | 2 +- pages/index.tsx | 2 +- pages/make/index.tsx | 2 +- pages/mine/index.tsx | 2 +- pages/mine/management/index.tsx | 4 ++-- src/components/button/Switch.tsx | 4 ++-- src/components/disclosure/Disclosure.tsx | 2 +- .../FeedActionButton/FeedActionButton.tsx | 2 +- .../FeedCommentEditor/FeedCommentEditor.tsx | 4 ++-- .../FeedCommentInput/FeedCommentInput.tsx | 2 +- .../FeedCommentViewer/FeedCommentViewer.tsx | 4 ++-- .../feed/FeedPostViewer/FeedPostViewer.tsx | 4 ++-- .../feed/Modal/FeedFormPresentation.tsx | 4 ++-- .../feed/Modal/ImagePreview/index.tsx | 2 +- .../filter/MultiSelect/BottomSheet.tsx | 2 +- .../filter/MultiSelect/SelectComboBoxItem.tsx | 2 +- .../filter/MultiSelect/SelectRadioItem.tsx | 2 +- src/components/filter/MultiSelect/index.tsx | 6 +++--- src/components/form/CheckBox/NeedMentor.tsx | 4 ++-- src/components/form/FormSwitch/FormSwitch.tsx | 2 +- src/components/form/Label/index.tsx | 2 +- .../form/Presentation/ImagePreview/index.tsx | 4 ++-- src/components/form/Presentation/index.tsx | 4 ++-- .../BottomSheetSelect/BottomSheetButton.tsx | 4 ++-- src/components/form/Select/Button/index.tsx | 4 ++-- .../Select/OptionItem/CheckboxOptionItem.tsx | 2 +- src/components/form/TableOfContents/index.tsx | 4 ++-- src/components/form/TextInput/index.tsx | 2 +- src/components/form/Textarea/index.tsx | 2 +- src/components/loader/Loader.tsx | 2 +- src/components/modal/ConfirmModal.tsx | 6 +++--- src/components/modal/DefaultModal.tsx | 2 +- .../page/meetingDetail/Carousel/NextArrow.tsx | 2 +- .../page/meetingDetail/Carousel/index.tsx | 2 +- .../page/meetingDetail/Feed/FeedItem.tsx | 10 +++++----- .../page/meetingDetail/Feed/FeedPanel.tsx | 4 ++-- .../Information/InformationPanel.tsx | 2 +- .../Modal/Content/ApplicationModalContent.tsx | 4 ++-- .../RecruitmentStatusList.tsx | 4 ++-- .../RecruitmentStatusModalContent/index.tsx | 2 +- .../meetingDetail/MeetingController/index.tsx | 20 +++++++++---------- .../page/meetingList/Card/DesktopSizeCard.tsx | 4 ++-- .../meetingList/Card/MobileSize/CardType.tsx | 2 +- .../meetingList/Card/MobileSize/ListType.tsx | 4 ++-- .../page/meetingList/Card/Status.tsx | 2 +- .../Filter/Modal/Chip/ChipItem.tsx | 4 ++-- .../meetingList/Filter/Modal/Chip/index.tsx | 2 +- .../meetingList/Filter/Modal/OpenButton.tsx | 4 ++-- .../meetingList/Filter/Modal/Toggle/index.tsx | 4 ++-- .../Filter/Result/InitializationButton.tsx | 2 +- .../meetingList/Filter/Result/ResultItem.tsx | 2 +- .../page/meetingList/Filter/Search/Mobile.tsx | 4 ++-- .../page/meetingList/Filter/Search/index.tsx | 2 +- .../page/meetingList/Filter/index.tsx | 6 +++--- .../page/meetingList/Pagination.tsx | 2 +- .../Slider/NoticeSlider/NoticeSlider.tsx | 2 +- .../meetingManagement/ManagementListItem.tsx | 16 +++++++-------- .../meetingManagement/MeetingInformation.tsx | 4 ++-- .../Skeleton/MeetingInformationSkeleton.tsx | 1 - src/components/tabList/TabList.tsx | 4 ++-- src/hooks/useToast/Toast.tsx | 2 +- 62 files changed, 112 insertions(+), 113 deletions(-) diff --git a/pages/detail/index.tsx b/pages/detail/index.tsx index fd97905b..a3a9f002 100644 --- a/pages/detail/index.tsx +++ b/pages/detail/index.tsx @@ -101,7 +101,7 @@ const STabButton = styled('button', { color: '$gray100', '&:hover': { - color: '$white100', + color: '$gray10', }, '@tablet': { @@ -115,8 +115,8 @@ const STabButton = styled('button', { variants: { isSelected: { true: { - color: '$white100', - borderBottom: `4px solid $white100`, + color: '$gray10', + borderBottom: `4px solid $gray10`, '@tablet': { borderWidth: '2px', }, diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx index bd0a081e..e9e1f586 100644 --- a/pages/edit/index.tsx +++ b/pages/edit/index.tsx @@ -162,7 +162,7 @@ const SFormContainer = styled('div', { }); const SFormName = styled('h1', { fontAg: '24_bold_100', - color: '$white100', + color: '$gray10', marginBottom: '90px', '@tablet': { diff --git a/pages/index.tsx b/pages/index.tsx index 46d67f82..5acbcea8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -103,7 +103,7 @@ export default Home; const SMakeMeetingButton = styled('button', { flexType: 'verticalCenter', padding: '$16 $24 $16 $20', - background: '$white100', + background: '$gray10', borderRadius: '16px', '& > span': { ml: '$12', diff --git a/pages/make/index.tsx b/pages/make/index.tsx index cd4fb8e9..aa866e88 100644 --- a/pages/make/index.tsx +++ b/pages/make/index.tsx @@ -101,7 +101,7 @@ const SFormContainer = styled('div', { }); const SFormName = styled('h1', { fontAg: '24_bold_100', - color: '$white100', + color: '$gray10', marginBottom: '90px', '@tablet': { diff --git a/pages/mine/index.tsx b/pages/mine/index.tsx index 402e1569..d8039528 100644 --- a/pages/mine/index.tsx +++ b/pages/mine/index.tsx @@ -112,7 +112,7 @@ const STab = styled('button', { variants: { isSelected: { true: { - color: '$white100', + color: '$gray10', backgroundColor: '$black40', }, false: { color: '$gray100' }, diff --git a/pages/mine/management/index.tsx b/pages/mine/management/index.tsx index 3a4fda9c..4c571766 100644 --- a/pages/mine/management/index.tsx +++ b/pages/mine/management/index.tsx @@ -199,9 +199,9 @@ const SListTitle = styled('div', { }); const SDownloadButton = styled('button', { - color: '$white100', + color: '$gray10', fontAg: '18_bold_100', - border: '1px solid $white100', + border: '1px solid $gray10', borderRadius: '14px', padding: '$18 $24 $18 $20', flexType: 'verticalCenter', diff --git a/src/components/button/Switch.tsx b/src/components/button/Switch.tsx index 3deffad0..d9a36109 100644 --- a/src/components/button/Switch.tsx +++ b/src/components/button/Switch.tsx @@ -33,7 +33,7 @@ const SSwitch = styled('button', { variants: { checked: { true: { - backgroundColor: '$blue50', + backgroundColor: '$success', '& > div': { transform: 'translate3d(12px,0,0)', }, @@ -49,6 +49,6 @@ const SThumb = styled('div', { width: '12px', height: '12px', borderRadius: '50%', - backgroundColor: '$white100', + backgroundColor: '$gray10', transition: 'transform 0.3s', }); diff --git a/src/components/disclosure/Disclosure.tsx b/src/components/disclosure/Disclosure.tsx index d0359a60..c7812cb9 100644 --- a/src/components/disclosure/Disclosure.tsx +++ b/src/components/disclosure/Disclosure.tsx @@ -99,7 +99,7 @@ const SDivider = styled('div', { const SContents = styled('div', { padding: '0 4px', fontStyle: 'B2', - color: '$gray30', + color: '$gray100', whiteSpace: 'pre-line', '@mobile': { fontStyle: 'B4', diff --git a/src/components/feed/FeedActionButton/FeedActionButton.tsx b/src/components/feed/FeedActionButton/FeedActionButton.tsx index 289dd4a9..98cefdbf 100644 --- a/src/components/feed/FeedActionButton/FeedActionButton.tsx +++ b/src/components/feed/FeedActionButton/FeedActionButton.tsx @@ -19,7 +19,7 @@ const MenuItem = styled('button', { flexType: 'center', width: '147px', padding: '8px 16px', - color: '$white100', + color: '$gray10', background: '$black80', fontStyle: 'B3', border: '1px solid $black40', diff --git a/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx b/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx index 9ea9b450..6961467c 100644 --- a/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx +++ b/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx @@ -52,13 +52,13 @@ const CancelButton = styled('button', { flexType: 'center', borderRadius: '8px', background: '$black60', - color: '$white100', + color: '$gray10', fontStyle: 'T5', }); const SubmitButton = styled('button', { padding: '4px 12px', flexType: 'center', - background: '$white100', + background: '$gray10', borderRadius: '8px', color: '$black100', fontStyle: 'T5', diff --git a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx index 5051e803..f8098ad2 100644 --- a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx +++ b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx @@ -48,7 +48,7 @@ const CommentInput = styled('textarea', { padding: '14px 24px', borderRadius: '25px', background: '$black60', - color: '$white100', + color: '$gray10', fontStyle: 'B2', border: 'none', outline: 'none', diff --git a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx index 5b29cf71..b0a505d2 100644 --- a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx +++ b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx @@ -83,7 +83,7 @@ const AuthorWrapper = styled('a', { const Name = styled('span', { display: 'inline-block', marginLeft: '8px', - color: '$gray30', + color: '$gray100', fontStyle: 'T5', }); const Date = styled('span', { @@ -105,7 +105,7 @@ const CommentBody = styled('div', { gap: '8px', }); const CommentContents = styled('div', { - color: '$gray30', + color: '$gray100', fontStyle: 'B2', whiteSpace: 'pre-wrap', wordBreak: 'break-all', diff --git a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx index 032e9d6a..ab27be6d 100644 --- a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx @@ -142,7 +142,7 @@ const AuthorInfo = styled('div', { gap: '2px', }); const AuthorName = styled('span', { - color: '$white100', + color: '$gray10', fontStyle: 'H5', }); const UpdatedDate = styled('span', { @@ -162,7 +162,7 @@ const Title = styled('h2', { }); const Contents = styled('p', { mt: '$12', - color: '$gray30', + color: '$gray100', fontStyle: 'B2', whiteSpace: 'pre-wrap', wordBreak: 'break-word', diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx index 4b087046..dec67a5c 100644 --- a/src/components/feed/Modal/FeedFormPresentation.tsx +++ b/src/components/feed/Modal/FeedFormPresentation.tsx @@ -234,7 +234,7 @@ const SFormContainer = styled('div', { }); const SFormName = styled('h1', { fontStyle: 'H1', - color: '$white100', + color: '$gray10', '@tablet': { margin: 0, @@ -257,7 +257,7 @@ const SCancelIcon = styled(CancelIcon, { const SSubmitButton = styled('button', { fontStyle: 'T1', - color: '$white100', + color: '$gray10', variants: { disabled: { true: { diff --git a/src/components/feed/Modal/ImagePreview/index.tsx b/src/components/feed/Modal/ImagePreview/index.tsx index ca676e0f..b373d042 100644 --- a/src/components/feed/Modal/ImagePreview/index.tsx +++ b/src/components/feed/Modal/ImagePreview/index.tsx @@ -54,7 +54,7 @@ const SImage = styled('img', { const SDeleteButton = styled('button', { display: 'inline', - color: '$white100', + color: '$gray10', position: 'absolute', right: '8px', top: '8px', diff --git a/src/components/filter/MultiSelect/BottomSheet.tsx b/src/components/filter/MultiSelect/BottomSheet.tsx index 504b0063..a823537d 100644 --- a/src/components/filter/MultiSelect/BottomSheet.tsx +++ b/src/components/filter/MultiSelect/BottomSheet.tsx @@ -82,7 +82,7 @@ const SListItemWrapper = styled('ul', { const SCloseButton = styled('button', { width: '100%', height: '50px', - backgroundColor: '$white100', + backgroundColor: '$gray10', color: '$black100', fontAg: '16_bold_100', textAlign: 'center', diff --git a/src/components/filter/MultiSelect/SelectComboBoxItem.tsx b/src/components/filter/MultiSelect/SelectComboBoxItem.tsx index 0ad40161..d3e9995c 100644 --- a/src/components/filter/MultiSelect/SelectComboBoxItem.tsx +++ b/src/components/filter/MultiSelect/SelectComboBoxItem.tsx @@ -34,7 +34,7 @@ export default SelectComboBoxItem; const SCheckbox = styled('input', { width: '16px', height: '16px', - border: '1px solid $white100', + border: '1px solid $gray10', borderRadius: '4px', mr: '$10', '& + label': { diff --git a/src/components/filter/MultiSelect/SelectRadioItem.tsx b/src/components/filter/MultiSelect/SelectRadioItem.tsx index 58b66ace..e6487563 100644 --- a/src/components/filter/MultiSelect/SelectRadioItem.tsx +++ b/src/components/filter/MultiSelect/SelectRadioItem.tsx @@ -20,7 +20,7 @@ export default SelectRadioItem; const SCheckbox = styled('input', { width: '16px', height: '16px', - border: '1px solid $white100', + border: '1px solid $gray10', borderRadius: '50%', mr: '$8', '& + label': { diff --git a/src/components/filter/MultiSelect/index.tsx b/src/components/filter/MultiSelect/index.tsx index 722275f6..cd441082 100644 --- a/src/components/filter/MultiSelect/index.tsx +++ b/src/components/filter/MultiSelect/index.tsx @@ -87,7 +87,7 @@ const SSelectDisplay = styled(Flex, { variants: { isSelected: { true: { - border: '1px solid $white100', + border: '1px solid $gray10', }, }, }, @@ -112,11 +112,11 @@ const SArrowIcon = styled(ArrowIcon, { const SCategory = styled('span', { fontAg: '18_medium_100', - color: '$white100', + color: '$gray10', variants: { isSelected: { true: { - color: '1px solid $white100', + color: '1px solid $gray10', }, }, }, diff --git a/src/components/form/CheckBox/NeedMentor.tsx b/src/components/form/CheckBox/NeedMentor.tsx index 90b5b60b..a75a7988 100644 --- a/src/components/form/CheckBox/NeedMentor.tsx +++ b/src/components/form/CheckBox/NeedMentor.tsx @@ -34,7 +34,7 @@ const SCheckIcon = styled(CheckIcon, { variants: { active: { // 임의처리 - true: { color: '$white100' }, + true: { color: '$gray10' }, }, }, }); @@ -45,7 +45,7 @@ const SNeedMentorLabel = styled('span', { variants: { active: { // 임의처리 - true: { color: '$white100' }, + true: { color: '$gray10' }, }, }, cursor: 'pointer', diff --git a/src/components/form/FormSwitch/FormSwitch.tsx b/src/components/form/FormSwitch/FormSwitch.tsx index d624f4ad..0a810d61 100644 --- a/src/components/form/FormSwitch/FormSwitch.tsx +++ b/src/components/form/FormSwitch/FormSwitch.tsx @@ -29,7 +29,7 @@ const SSwitchWrapper = styled('div', { variants: { checked: { true: { - color: '$white100', + color: '$gray10', }, }, }, diff --git a/src/components/form/Label/index.tsx b/src/components/form/Label/index.tsx index ebdf62a1..2311b760 100644 --- a/src/components/form/Label/index.tsx +++ b/src/components/form/Label/index.tsx @@ -22,7 +22,7 @@ const SLabel = styled('label', { display: 'inline-block', width: '100%', fontAg: '18_semibold_100', - color: '$white100', + color: '$gray10', variants: { required: { true: { diff --git a/src/components/form/Presentation/ImagePreview/index.tsx b/src/components/form/Presentation/ImagePreview/index.tsx index 1a151b6e..a93b4d78 100644 --- a/src/components/form/Presentation/ImagePreview/index.tsx +++ b/src/components/form/Presentation/ImagePreview/index.tsx @@ -60,7 +60,7 @@ const SEditButton = styled('label', { display: 'flex', justifyContent: 'center', alignItems: 'center', - background: '$white100', + background: '$gray10', borderRadius: '6px', fontAg: '16_bold_100', color: '$black100', @@ -84,5 +84,5 @@ const SDeleteButton = styled('button', { background: '$black40', borderRadius: '6px', fontAg: '16_bold_100', - color: '$white100', + color: '$gray10', }); diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx index f1bc2019..d40d6adf 100644 --- a/src/components/form/Presentation/index.tsx +++ b/src/components/form/Presentation/index.tsx @@ -450,7 +450,7 @@ const Button = styled('button', { background: '$black40', borderRadius: '10px', fontAg: '18_bold_100', - color: '$white100', + color: '$gray10', '@tablet': { gap: '10px', @@ -460,7 +460,7 @@ const Button = styled('button', { }); const CancelButton = styled(Button, {}); const SubmitButton = styled(Button, { - background: '$white100', + background: '$gray10', color: '$black100', '&:disabled': { cursor: 'not-allowed', diff --git a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx index db957820..f942f7ce 100644 --- a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx +++ b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx @@ -34,7 +34,7 @@ const SButton = styled('button', { justifyContent: 'space-between', gap: 8, fontAg: '16_medium_100', - color: '$white100', + color: '$gray10', background: '$black60', borderRadius: 10, variants: { @@ -60,7 +60,7 @@ const SArrowDownIcon = styled(ArrowSmallDownIcon, { }, false: { '& path': { - stroke: '$white100', + stroke: '$gray10', }, }, }, diff --git a/src/components/form/Select/Button/index.tsx b/src/components/form/Select/Button/index.tsx index a4ab3c0c..6f303dd9 100644 --- a/src/components/form/Select/Button/index.tsx +++ b/src/components/form/Select/Button/index.tsx @@ -37,7 +37,7 @@ const SButton = styled('button', { justifyContent: 'space-between', gap: 8, fontAg: '16_medium_100', - color: '$white100', + color: '$gray10', background: '$black60', borderRadius: 10, variants: { @@ -63,7 +63,7 @@ const SArrowDownIcon = styled(ArrowSmallDownIcon, { }, false: { '& path': { - stroke: '$white100', + stroke: '$gray10', }, }, }, diff --git a/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx b/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx index dc6487b0..7ad97367 100644 --- a/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx +++ b/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx @@ -37,6 +37,6 @@ const SCheckboxOptionItem = styled('div', { gap: '10px', padding: '16px', background: '$black40', - color: '$white100', + color: '$gray10', fontAg: '16_medium_100', }); diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx index 28b497b3..f0a4e61d 100644 --- a/src/components/form/TableOfContents/index.tsx +++ b/src/components/form/TableOfContents/index.tsx @@ -108,7 +108,7 @@ const SLabel = styled('h2', { fontWeight: '700', fontSize: '24px', lineHeight: '100%', - color: '$white100', + color: '$gray10', }); const SCount = styled('div', { width: '$60', @@ -134,5 +134,5 @@ const SItem = styled('li', { const SItemLabel = styled('span', { display: 'inline-block', fontAg: '16_medium_100', - color: '$white100', + color: '$gray10', }); diff --git a/src/components/form/TextInput/index.tsx b/src/components/form/TextInput/index.tsx index 166a2bd1..13d84443 100644 --- a/src/components/form/TextInput/index.tsx +++ b/src/components/form/TextInput/index.tsx @@ -47,7 +47,7 @@ const SInput = styled('input', { display: 'flex', alignItems: 'center', fontAg: '16_medium_100', - color: '$white100', + color: '$gray10', background: '$black60', borderRadius: 10, '&::placeholder': { diff --git a/src/components/form/Textarea/index.tsx b/src/components/form/Textarea/index.tsx index df915f5b..511649a0 100644 --- a/src/components/form/Textarea/index.tsx +++ b/src/components/form/Textarea/index.tsx @@ -45,7 +45,7 @@ const STextarea = styled('textarea', { minHeight: '157px', padding: '16px 20px 20px 16px', fontAg: '16_medium_150', - color: '$white100', + color: '$gray10', background: '$black60', border: 'none', resize: 'none', diff --git a/src/components/loader/Loader.tsx b/src/components/loader/Loader.tsx index e16d4faf..e0c5916c 100644 --- a/src/components/loader/Loader.tsx +++ b/src/components/loader/Loader.tsx @@ -30,7 +30,7 @@ const SLoaderWrapper = styled('div', { width: '$15', height: '$15', // 임시지정ㄴ - backgroundColor: '$white100', + backgroundColor: '$gray10', borderRadius: '100%', }, diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx index 12e52bc0..d3bbfa8e 100644 --- a/src/components/modal/ConfirmModal.tsx +++ b/src/components/modal/ConfirmModal.tsx @@ -58,7 +58,7 @@ const SDialogWrapper = styled('div', { '.title': { fontAg: '24_bold_150', textAlign: 'center', - color: '$white100', + color: '$gray10', whiteSpace: 'pre-wrap', flex: '1', flexType: 'center', @@ -74,7 +74,7 @@ const SDialogWrapper = styled('div', { borderRadius: '10px', fontAg: '20_bold_100', textAlign: 'center', - color: '$white100', + color: '$gray10', '@tablet': { width: 'calc(50% - 10px)', @@ -89,7 +89,7 @@ const SDialogWrapper = styled('div', { }, 'button:last-child': { - backgroundColor: '$white100', + backgroundColor: '$gray10', color: '$black100', }, }); diff --git a/src/components/modal/DefaultModal.tsx b/src/components/modal/DefaultModal.tsx index 977f8e52..62d6e6ac 100644 --- a/src/components/modal/DefaultModal.tsx +++ b/src/components/modal/DefaultModal.tsx @@ -60,7 +60,7 @@ const SHeader = styled('div', { width: '100%', fontAg: '24_bold_100', textAlign: 'center', - color: '$white100', + color: '$gray10', }, '.close-button': { diff --git a/src/components/page/meetingDetail/Carousel/NextArrow.tsx b/src/components/page/meetingDetail/Carousel/NextArrow.tsx index dbad9659..5fb978bf 100644 --- a/src/components/page/meetingDetail/Carousel/NextArrow.tsx +++ b/src/components/page/meetingDetail/Carousel/NextArrow.tsx @@ -49,7 +49,7 @@ const SButton = styled('button', { backgroundColor: '$black80', borderRadius: '20px', path: { - stroke: '$white100', + stroke: '$gray10', }, }, }); diff --git a/src/components/page/meetingDetail/Carousel/index.tsx b/src/components/page/meetingDetail/Carousel/index.tsx index ec6616b3..3d3eb894 100644 --- a/src/components/page/meetingDetail/Carousel/index.tsx +++ b/src/components/page/meetingDetail/Carousel/index.tsx @@ -122,7 +122,7 @@ const SCarousel = styled('div', { }, '.slick-dots .slick-active button:before': { - backgroundColor: '$white100', + backgroundColor: '$gray10', }, }); diff --git a/src/components/page/meetingDetail/Feed/FeedItem.tsx b/src/components/page/meetingDetail/Feed/FeedItem.tsx index 41d7a2a2..cbd63a63 100644 --- a/src/components/page/meetingDetail/Feed/FeedItem.tsx +++ b/src/components/page/meetingDetail/Feed/FeedItem.tsx @@ -137,7 +137,7 @@ const SFeedItem = styled('div', { padding: '$24 $20 $28 $20', background: '#171818', borderRadius: '12px', - color: '$white100', + color: '$gray10', width: '100%', '@tablet': { padding: '$24 0 $28 0', @@ -155,7 +155,7 @@ const STop = styled('div', { const SProfileButton = styled('button', { flexType: 'verticalCenter', - color: '$white100', + color: '$gray10', }); const SProfileImageWrapper = styled('div', { @@ -231,7 +231,7 @@ const SThumbnailCount = styled('div', { zIndex: 1, backgroundColor: '$black100', opacity: 0.6, - color: '$gray30', + color: '$gray100', borderRadius: '50%', fontStyle: 'T5', width: '40px', @@ -280,7 +280,7 @@ const SLikeButton = styled('button', { color: '$red', }, false: { - color: '$white100', + color: '$gray10', }, }, }, @@ -297,5 +297,5 @@ const SOverlay = styled('div', { width: '100%', height: '100%', flexType: 'center', - color: '$white100', + color: '$gray10', }); diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx index 7a477076..cdbe0a3b 100644 --- a/src/components/page/meetingDetail/Feed/FeedPanel.tsx +++ b/src/components/page/meetingDetail/Feed/FeedPanel.tsx @@ -150,11 +150,11 @@ const SHeader = styled('div', { }); const SCount = styled('span', { - color: '$white100', + color: '$gray10', }); const SButton = styled('button', { - backgroundColor: '$orange100', + backgroundColor: '$secondary', fontStyle: 'H2', ml: '$48', color: '$white', diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/meetingDetail/Information/InformationPanel.tsx index 959f1412..057f0e05 100644 --- a/src/components/page/meetingDetail/Information/InformationPanel.tsx +++ b/src/components/page/meetingDetail/Information/InformationPanel.tsx @@ -108,7 +108,7 @@ const SInformationPanel = styled('div', { const SDetail = styled('section', { scrollMarginTop: '$80', - color: '$white100', + color: '$gray10', mt: '$120', '@tablet': { diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx index 4f78e535..d7669bf9 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx @@ -59,7 +59,7 @@ const SApplicationModalContent = styled('div', { width: '100%', height: '$200', fontAg: '16_medium_150', - color: '$white100', + color: '$gray10', backgroundColor: '$black60', outline: 'none', borderRadius: '10px', @@ -85,7 +85,7 @@ const SApplicationModalContent = styled('div', { textAlign: 'center', fontAg: '18_bold_100', color: '$black100', - backgroundColor: '$white100', + backgroundColor: '$gray10', '&:disabled': { opacity: 0.35, diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx index 20720687..66640069 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx @@ -58,7 +58,7 @@ const SRecruitmentStatusItem = styled('div', { padding: '$16 $20', borderRadius: '12px', backgroundColor: '$black60', - color: '$white100', + color: '$gray10', fontAg: '16_semibold_100', '&:not(:nth-last-child(-n + 2))': { @@ -132,7 +132,7 @@ const SStatusText = styled('div', { variants: { isApproved: { true: { - color: '$blue50', + color: '$success', }, false: { color: '$gray100', diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx index 41f5ffe0..9bbe2ccd 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx @@ -91,7 +91,7 @@ const STotal = styled('p', { const SManagementAnchor = styled('a', { fontAg: '16_semibold_100', - color: '$white100', + color: '$gray10', flexType: 'verticalCenter', position: 'absolute', right: '$42', diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx index 6d7b8ac9..a053437c 100644 --- a/src/components/page/meetingDetail/MeetingController/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/index.tsx @@ -279,7 +279,7 @@ const SAbout = styled('div', { }, fontAg: '34_bold_140', - color: '$white100', + color: '$gray10', mb: '$20', '@tablet': { @@ -308,7 +308,7 @@ const SRecruitStatus = styled('div', { backgroundColor: '$black40', }, 1: { - backgroundColor: '$orange100', + backgroundColor: '$secondary', color: '$black100', }, 2: { @@ -329,7 +329,7 @@ const SPeriod = styled('div', { const SProfileAnchor = styled('a', { flexType: 'verticalCenter', - color: '$white100', + color: '$gray10', width: 'fit-content', img: { @@ -380,7 +380,7 @@ const Button = styled('button', { width: '$300', height: '$60', borderRadius: '8px', - color: '$white100', + color: '$gray10', }); const SStatusButton = styled(Button, { @@ -427,7 +427,7 @@ const SGuestButton = styled(Button, { '&:disabled': { opacity: '0.35', backgroundColor: '$black40', - color: '$gray30', + color: '$gray100', cursor: 'not-allowed', }, @@ -435,15 +435,15 @@ const SGuestButton = styled(Button, { isApplied: { true: { border: `2px solid $black40`, - color: '$white100', + color: '$gray10', }, false: { - backgroundColor: '$white100', + backgroundColor: '$gray10', }, }, isApproved: { true: { - color: '$white100', + color: '$gray10', border: `2px solid $black40`, }, }, @@ -453,7 +453,7 @@ const SGuestButton = styled(Button, { const SHostButtonContainer = styled('div', { '& > *': { width: '$144', - color: '$white100', + color: '$gray10', padding: '$20 0', textAlign: 'center', borderRadius: '$50', @@ -477,7 +477,7 @@ const SHostButtonContainer = styled('div', { a: { display: 'inline-block', - backgroundColor: '$white100', + backgroundColor: '$gray10', color: '$black100', }, }); diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 710edc53..2af4bb67 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -96,7 +96,7 @@ const SStatus = styled('div', { backgroundColor: '$gray100', }, 1: { - backgroundColor: '$orange100', + backgroundColor: '$secondary', color: '$black100', }, 2: { @@ -125,7 +125,7 @@ const SCategory = styled('p', { }); const SProfileWrapper = styled('div', { flexType: 'verticalCenter', - color: '$white100', + color: '$gray10', width: 'fit-content', mr: '$8', }); diff --git a/src/components/page/meetingList/Card/MobileSize/CardType.tsx b/src/components/page/meetingList/Card/MobileSize/CardType.tsx index a6d978ac..abcb4f6e 100644 --- a/src/components/page/meetingList/Card/MobileSize/CardType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/CardType.tsx @@ -48,7 +48,7 @@ const SStatus = styled('div', { backgroundColor: '$gray100', }, 1: { - backgroundColor: '$orange100', + backgroundColor: '$secondary', color: '$black100', }, 2: { diff --git a/src/components/page/meetingList/Card/MobileSize/ListType.tsx b/src/components/page/meetingList/Card/MobileSize/ListType.tsx index 3db197e9..b7c86b1e 100644 --- a/src/components/page/meetingList/Card/MobileSize/ListType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/ListType.tsx @@ -86,7 +86,7 @@ const SStatus = styled('div', { backgroundColor: '$gray100', }, 1: { - backgroundColor: '$orange100', + backgroundColor: '$secondary', color: '$black100', }, 2: { @@ -104,7 +104,7 @@ const STitleSection = styled('div', { const SProfileWrapper = styled('div', { flexType: 'verticalCenter', - color: '$white100', + color: '$gray10', width: 'fit-content', mr: '$8', }); diff --git a/src/components/page/meetingList/Card/Status.tsx b/src/components/page/meetingList/Card/Status.tsx index 7bbef787..78c736d9 100644 --- a/src/components/page/meetingList/Card/Status.tsx +++ b/src/components/page/meetingList/Card/Status.tsx @@ -44,7 +44,7 @@ const SValue = styled('span', { color: '$gray80', }, 1: { - color: '$blue50', + color: '$success', }, 2: { color: '$gray100', diff --git a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx index aaf78c06..30c2c574 100644 --- a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx +++ b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx @@ -47,14 +47,14 @@ const SOption = styled('button', { variants: { isSelected: { true: { - backgroundColor: '$white100', + backgroundColor: '$gray10', color: '$black100', }, false: { backgroundColor: '$black100', color: '$gray100', '&:hover': { - color: '$white100', + color: '$gray10', }, '@tablet': { backgroundColor: '$black40', diff --git a/src/components/page/meetingList/Filter/Modal/Chip/index.tsx b/src/components/page/meetingList/Filter/Modal/Chip/index.tsx index 9ebc5f54..0dd474ac 100644 --- a/src/components/page/meetingList/Filter/Modal/Chip/index.tsx +++ b/src/components/page/meetingList/Filter/Modal/Chip/index.tsx @@ -32,7 +32,7 @@ export default Chip; const SChipWrapper = styled('div', {}); const SLabel = styled('p', { - color: '$white100', + color: '$gray10', fontAg: '18_bold_100', mb: '$20', '@tablet': { diff --git a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx index 0ffe5cac..5c9fb79f 100644 --- a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx +++ b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx @@ -67,7 +67,7 @@ const SSelectModalOpenButton = styled('div', { variants: { isFilterActive: { true: { - border: '1px solid $white100', + border: '1px solid $gray10', }, false: { border: '1px solid $black40', @@ -84,7 +84,7 @@ const SSelectModalOpenButton = styled('div', { const SLabel = styled('span', { fontAg: '18_medium_100', - color: '$white100', + color: '$gray10', '@tablet': { fontAg: '14_medium_100', }, diff --git a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx index 7ea619e4..9771f12c 100644 --- a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx +++ b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx @@ -36,7 +36,7 @@ function Toggle({ css, label }: ToggleProps) { export default Toggle; const ToggleWrapper = styled('div', {}); const SLabel = styled('p', { - color: '$white100', + color: '$gray10', fontAg: '18_bold_100', mb: '$20', '@tablet': { @@ -67,7 +67,7 @@ const SToggleDetailWord = styled('div', { variants: { isOnlyActiveGeneration: { true: { - color: '$white100', + color: '$gray10', }, }, }, diff --git a/src/components/page/meetingList/Filter/Result/InitializationButton.tsx b/src/components/page/meetingList/Filter/Result/InitializationButton.tsx index f2b5103d..5c72e0d7 100644 --- a/src/components/page/meetingList/Filter/Result/InitializationButton.tsx +++ b/src/components/page/meetingList/Filter/Result/InitializationButton.tsx @@ -46,7 +46,7 @@ export default InitializationButton; const InitializationText = styled('span', { fontAg: '18_medium_100', - color: '$white100', + color: '$gray10', ml: '$6', whiteSpace: 'nowrap', '@tablet': { diff --git a/src/components/page/meetingList/Filter/Result/ResultItem.tsx b/src/components/page/meetingList/Filter/Result/ResultItem.tsx index 44396068..3d46a29b 100644 --- a/src/components/page/meetingList/Filter/Result/ResultItem.tsx +++ b/src/components/page/meetingList/Filter/Result/ResultItem.tsx @@ -22,7 +22,7 @@ const SResultItemWrapper = styled(Flex, { whiteSpace: 'nowrap', margin: '4px', '@tablet': { - border: '1px solid $white100', + border: '1px solid $gray10', svg: { width: '12px', }, diff --git a/src/components/page/meetingList/Filter/Search/Mobile.tsx b/src/components/page/meetingList/Filter/Search/Mobile.tsx index a75b8837..3768e52b 100644 --- a/src/components/page/meetingList/Filter/Search/Mobile.tsx +++ b/src/components/page/meetingList/Filter/Search/Mobile.tsx @@ -82,7 +82,7 @@ const SSearchWrapper = styled(Flex, { const SSearchInput = styled('input', { width: '100%', - color: '$white100', + color: '$gray10', fontAg: '16_medium_100', ml: '$10', '&::placeholder': { @@ -92,7 +92,7 @@ const SSearchInput = styled('input', { const SCancelButton = styled('button', { flexType: 'center', - color: '$white100', + color: '$gray10', margin: '0 $24 0 $16', whiteSpace: 'nowrap', }); diff --git a/src/components/page/meetingList/Filter/Search/index.tsx b/src/components/page/meetingList/Filter/Search/index.tsx index 90694cf0..0bf4fc90 100644 --- a/src/components/page/meetingList/Filter/Search/index.tsx +++ b/src/components/page/meetingList/Filter/Search/index.tsx @@ -41,7 +41,7 @@ const SSearchWrapper = styled(Flex, { const SSearchInput = styled('input', { width: '160px', - color: '$white100', + color: '$gray10', fontAg: '18_medium_100', '&::placeholder': { diff --git a/src/components/page/meetingList/Filter/index.tsx b/src/components/page/meetingList/Filter/index.tsx index e79186f1..a63a63ae 100644 --- a/src/components/page/meetingList/Filter/index.tsx +++ b/src/components/page/meetingList/Filter/index.tsx @@ -39,9 +39,9 @@ export default Filter; const SGuideButton = styled('a', { flexType: 'verticalCenter', gap: '$8', - color: '$white100', + color: '$gray10', padding: '$18 $20', - border: '1px solid $white100', + border: '1px solid $gray10', borderRadius: '14px', fontAg: '18_medium_100', boxSizing: 'border-box', @@ -52,7 +52,7 @@ const SGuideButton = styled('a', { }, path: { - stroke: '$white100', + stroke: '$gray10', }, }); diff --git a/src/components/page/meetingList/Pagination.tsx b/src/components/page/meetingList/Pagination.tsx index 281d238b..e8bf8d29 100644 --- a/src/components/page/meetingList/Pagination.tsx +++ b/src/components/page/meetingList/Pagination.tsx @@ -81,7 +81,7 @@ const SPageLink = styled('li', { isCurrent: { true: { color: '$black100', - backgroundColor: '$white100', + backgroundColor: '$gray10', borderRadius: '20px', }, }, diff --git a/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx b/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx index b908f6b8..3dd1d4f1 100644 --- a/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx +++ b/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx @@ -67,7 +67,7 @@ const SDot = styled('div', { active: { true: { // 임시지정ㄴ - background: '$white100', + background: '$gray10', }, }, }, diff --git a/src/components/page/meetingManagement/ManagementListItem.tsx b/src/components/page/meetingManagement/ManagementListItem.tsx index 80dfa1a9..fb0a6885 100644 --- a/src/components/page/meetingManagement/ManagementListItem.tsx +++ b/src/components/page/meetingManagement/ManagementListItem.tsx @@ -333,7 +333,7 @@ const SVerticalLine = styled('div', { const SName = styled('button', { ml: '$8', - color: '$white100', + color: '$gray10', fontAg: '18_semibold_100', textDecoration: 'underline', textUnderlinePosition: 'under', @@ -347,7 +347,7 @@ const SName = styled('button', { }); const SCardName = styled('button', { - color: '$white100', + color: '$gray10', fontAg: '14_bold_100', textDecoration: 'underline', textUnderlinePosition: 'under', @@ -403,7 +403,7 @@ const SUserStatus = styled('span', { backgroundColor: '$gray100', }, 1: { - backgroundColor: '$blue50', + backgroundColor: '$success', }, 2: { backgroundColor: '$black40', @@ -436,7 +436,7 @@ const SPhone = styled('div', { }); const SDetailButton = styled('button', { - color: '$white100', + color: '$gray10', textDecoration: 'underline', textUnderlinePosition: 'under', fontAg: '18_semibold_100', @@ -468,7 +468,7 @@ const SCardButtonContainer = styled('div', { }); const SRoundButton = styled('button', { - color: '$white100', + color: '$gray10', borderRadius: '32px', fontAg: '16_bold_100', padding: '$12 $20', @@ -486,7 +486,7 @@ const SGrayButton = styled(SRoundButton, { const SWhiteButton = styled(SRoundButton, { mr: '$8', - backgroundColor: '$white100', + backgroundColor: '$gray10', color: '$black100', }); @@ -518,7 +518,7 @@ const SRejectButton = styled('button', { const SApproveButton = styled('button', { ...buttonStyles, color: '$black100', - backgroundColor: '$white100', + backgroundColor: '$gray10', borderBottomLeftRadius: '0', }); @@ -534,7 +534,7 @@ const SDetailText = styled('p', { borderRadius: '19.711px', height: '$200', fontAg: '16_medium_150', - color: '$white100', + color: '$gray10', boxSizing: 'border-box', wordBreak: 'break-word', }); diff --git a/src/components/page/meetingManagement/MeetingInformation.tsx b/src/components/page/meetingManagement/MeetingInformation.tsx index 5494891c..1f14f7be 100644 --- a/src/components/page/meetingManagement/MeetingInformation.tsx +++ b/src/components/page/meetingManagement/MeetingInformation.tsx @@ -85,7 +85,7 @@ const SCategory = styled('div', { const STitle = styled('p', { fontAg: '28_bold_140', - color: '$white100', + color: '$gray10', '@tablet': { fontAg: '14_bold_140', @@ -96,7 +96,7 @@ const SRecruitingStatus = styled('span', { variants: { isRecruiting: { true: { - color: '$orange100', + color: '$orange400', }, false: { color: '$gray80', diff --git a/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx b/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx index 3994dcf2..3e797254 100644 --- a/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx +++ b/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx @@ -22,7 +22,6 @@ const SMeetingInformationSkeleton = styled('div', { flexType: 'verticalCenter', '@tablet': { - background: '$black90', padding: '$0', borderRadius: '8px', mt: '$48', diff --git a/src/components/tabList/TabList.tsx b/src/components/tabList/TabList.tsx index 8169d178..45cbd894 100644 --- a/src/components/tabList/TabList.tsx +++ b/src/components/tabList/TabList.tsx @@ -51,13 +51,13 @@ const STab = styled('li', { cursor: 'pointer', borderBottom: '2px solid transparent', '&:hover': { - color: '$white100', + color: '$gray10', }, variants: { isSelected: { true: { - color: '$white100', + color: '$gray10', borderColor: `$gray40`, }, false: { diff --git a/src/hooks/useToast/Toast.tsx b/src/hooks/useToast/Toast.tsx index 54a776cf..6e9a947c 100644 --- a/src/hooks/useToast/Toast.tsx +++ b/src/hooks/useToast/Toast.tsx @@ -53,7 +53,7 @@ const ToastContainer = styled('div', { const ToastMessage = styled('p', { fontStyle: 'T5', - color: '$white100', + color: '$gray10', ml: '$6', whiteSpace: 'nowrap', }); From ecc775106c24a20010fa96df6e474ef0ae061ddc Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 01:29:08 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EC=BB=AC=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 2 +- pages/edit/index.tsx | 6 ++-- pages/index.tsx | 2 +- pages/make/index.tsx | 6 ++-- pages/mine/index.tsx | 2 +- pages/mine/management/index.tsx | 12 ++++---- src/components/button/Arrow.tsx | 2 +- src/components/disclosure/Disclosure.tsx | 4 +-- .../FeedActionButton/FeedActionButton.tsx | 4 +-- .../FeedCommentEditor/FeedCommentEditor.tsx | 8 ++--- .../FeedCommentInput/FeedCommentInput.tsx | 2 +- .../FeedCommentLikeSection.tsx | 4 +-- .../feed/FeedPostViewer/FeedPostViewer.tsx | 8 ++--- src/components/feed/Modal/FeedCreateModal.tsx | 2 +- src/components/feed/Modal/FeedEditModal.tsx | 2 +- .../feed/Modal/FeedFormPresentation.tsx | 12 ++++---- .../filter/MultiSelect/BottomSheet.tsx | 8 ++--- src/components/filter/MultiSelect/index.tsx | 6 ++-- src/components/form/FileInput/index.tsx | 2 +- src/components/form/FormSwitch/FormSwitch.tsx | 2 +- .../form/Presentation/ImagePreview/index.tsx | 4 +-- src/components/form/Presentation/index.tsx | 4 +-- .../form/Select/BaseSelect/BaseSelect.tsx | 4 +-- .../BottomSheetSelect/BottomSheetButton.tsx | 2 +- src/components/form/Select/Button/index.tsx | 2 +- .../Select/OptionItem/CheckboxOptionItem.tsx | 2 +- .../form/Select/OptionItem/index.tsx | 2 +- src/components/form/TableOfContents/index.tsx | 8 ++--- src/components/form/TextInput/index.tsx | 2 +- src/components/form/Textarea/index.tsx | 2 +- src/components/header/Header.tsx | 2 +- src/components/modal/ConfirmModal.tsx | 6 ++-- src/components/modal/DefaultModal.tsx | 4 +-- src/components/modal/ImageCarouselModal.tsx | 6 ++-- .../page/meetingDetail/Carousel/NextArrow.tsx | 4 +-- .../page/meetingDetail/Feed/EmptyView.tsx | 4 +-- .../page/meetingDetail/Feed/FeedItem.tsx | 12 ++++---- .../page/meetingDetail/Feed/FeedPanel.tsx | 6 ++-- .../Feed/Skeleton/FeedItemSkeleton.tsx | 4 +-- .../Feed/Skeleton/MobileFeedListSkeleton.tsx | 2 +- .../Information/InformationPanel.tsx | 2 +- .../MeetingController/MentorTooltip.tsx | 4 +-- .../Modal/Content/ApplicationModalContent.tsx | 4 +-- .../RecruitmentStatusList.tsx | 6 ++-- .../RecruitmentStatusModalContent/index.tsx | 4 +-- .../meetingDetail/MeetingController/index.tsx | 30 +++++++++---------- .../page/meetingList/Card/DesktopSizeCard.tsx | 12 ++++---- .../meetingList/Card/ManagementButton.tsx | 2 +- .../meetingList/Card/MobileSize/CardType.tsx | 6 ++-- .../meetingList/Card/MobileSize/ListType.tsx | 10 +++---- .../page/meetingList/Card/Skeleton/index.tsx | 4 +-- .../page/meetingList/Card/Status.tsx | 4 +-- src/components/page/meetingList/EmptyView.tsx | 4 +-- .../Filter/Modal/Chip/ChipItem.tsx | 6 ++-- .../meetingList/Filter/Modal/OpenButton.tsx | 2 +- .../meetingList/Filter/Modal/Toggle/index.tsx | 2 +- .../meetingList/Filter/Result/ResultItem.tsx | 4 +-- .../page/meetingList/Filter/Result/index.tsx | 2 +- .../page/meetingList/Filter/Search/Mobile.tsx | 4 +-- .../page/meetingList/Filter/Search/index.tsx | 2 +- .../page/meetingList/Pagination.tsx | 4 +-- .../Slider/NoticeSlider/NoticeSlider.tsx | 2 +- .../meetingManagement/ItemDescriptionBox.tsx | 4 +-- .../meetingManagement/ManagementListItem.tsx | 28 ++++++++--------- .../meetingManagement/MeetingInformation.tsx | 8 ++--- .../Skeleton/ManagementListSkeleton.tsx | 2 +- .../Skeleton/MeetingInformationSkeleton.tsx | 6 ++-- src/components/tabList/TabList.tsx | 2 +- src/components/util/Divider.tsx | 2 +- src/hooks/useToast/Toast.tsx | 2 +- stitches.config.ts | 5 ---- styles/globals.css | 4 +-- 72 files changed, 179 insertions(+), 182 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index e550dbb3..5fd69426 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -11,7 +11,7 @@ const preview: Preview = { values: [ { name: 'dark', - value: '#0f1010', // $black100 + value: '#0f1012', // $gray950 }, ], }, diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx index e9e1f586..e2c4e7e0 100644 --- a/pages/edit/index.tsx +++ b/pages/edit/index.tsx @@ -152,12 +152,12 @@ const SContainer = styled('div', { const SFormContainer = styled('div', { width: '100%', padding: '44px 40px 56px', - background: '$black80', + background: '$gray800', borderRadius: '15px', '@tablet': { padding: '40px 0 0 0', - background: '$black100', + background: '$gray950', }, }); const SFormName = styled('h1', { @@ -168,7 +168,7 @@ const SFormName = styled('h1', { '@tablet': { margin: 0, paddingBottom: '40px', - borderBottom: '1px solid $black60', + borderBottom: '1px solid $gray700', }, }); const SFormWrapper = styled('div', { diff --git a/pages/index.tsx b/pages/index.tsx index 5acbcea8..e448e644 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -108,7 +108,7 @@ const SMakeMeetingButton = styled('button', { '& > span': { ml: '$12', fontAg: '18_bold_100', - color: '$black100', + color: '$gray950', }, '@tablet': { display: 'none', diff --git a/pages/make/index.tsx b/pages/make/index.tsx index aa866e88..2317cbe6 100644 --- a/pages/make/index.tsx +++ b/pages/make/index.tsx @@ -91,12 +91,12 @@ const SContainer = styled('div', { const SFormContainer = styled('div', { width: '100%', padding: '44px 40px 56px', - background: '$black80', + background: '$gray800', borderRadius: '15px', '@tablet': { padding: '40px 0 0 0', - background: '$black100', + background: '$gray950', }, }); const SFormName = styled('h1', { @@ -107,7 +107,7 @@ const SFormName = styled('h1', { '@tablet': { margin: 0, paddingBottom: '40px', - borderBottom: '1px solid $black60', + borderBottom: '1px solid $gray700', }, }); const SFormWrapper = styled('div', { diff --git a/pages/mine/index.tsx b/pages/mine/index.tsx index d8039528..97adb47b 100644 --- a/pages/mine/index.tsx +++ b/pages/mine/index.tsx @@ -113,7 +113,7 @@ const STab = styled('button', { isSelected: { true: { color: '$gray10', - backgroundColor: '$black40', + backgroundColor: '$gray600', }, false: { color: '$gray100' }, }, diff --git a/pages/mine/management/index.tsx b/pages/mine/management/index.tsx index 4c571766..3733fe48 100644 --- a/pages/mine/management/index.tsx +++ b/pages/mine/management/index.tsx @@ -242,8 +242,8 @@ const SSelectContainer = styled('div', { const SSelectWrapper = styled('div', { '& button': { borderRadius: '14px', - border: '1px solid $black40', - backgroundColor: '$black100', + border: '1px solid $gray600', + backgroundColor: '$gray950', '@tablet': { borderRadius: '8px', @@ -255,14 +255,14 @@ const SSelectWrapper = styled('div', { }, '& ul': { - background: '$black100', + background: '$gray950', position: 'absolute', top: '$50', minWidth: '$147', }, '& div': { - background: '$black100', + background: '$gray950', }, '& + &': { @@ -280,9 +280,9 @@ const SEmptyView = styled('div', { flexType: 'center', height: '$820', borderRadius: '10px', - border: `1px solid $black40`, + border: `1px solid $gray600`, fontAg: '24_medium_100', - color: '$gray80', + color: '$gray400', '@tablet': { fontAg: '16_medium_100', diff --git a/src/components/button/Arrow.tsx b/src/components/button/Arrow.tsx index ae302029..16463e50 100644 --- a/src/components/button/Arrow.tsx +++ b/src/components/button/Arrow.tsx @@ -24,7 +24,7 @@ export const ArrowButton = ({ disabled = false, size = 16, color = '#fff', - disabledColor = '$black40', + disabledColor = '$gray600', strokeWidth = 2, ...props }: ArrowButtonProps) => { diff --git a/src/components/disclosure/Disclosure.tsx b/src/components/disclosure/Disclosure.tsx index c7812cb9..e5d02187 100644 --- a/src/components/disclosure/Disclosure.tsx +++ b/src/components/disclosure/Disclosure.tsx @@ -42,7 +42,7 @@ export default function Disclosure({ title, subTitle, contents, createdDate }: D const Container = styled('div', { padding: '48px', - background: '$black80', + background: '$gray800', borderRadius: '20px', '@mobile': { padding: '24px 16px', @@ -91,7 +91,7 @@ const SArrowIcon = styled(ArrowIcon, { const SDivider = styled('div', { height: '1px', margin: '36px 0 32px 0', - background: '$black40', + background: '$gray600', '@mobile': { margin: '20px 0', }, diff --git a/src/components/feed/FeedActionButton/FeedActionButton.tsx b/src/components/feed/FeedActionButton/FeedActionButton.tsx index 98cefdbf..2cfdcaa7 100644 --- a/src/components/feed/FeedActionButton/FeedActionButton.tsx +++ b/src/components/feed/FeedActionButton/FeedActionButton.tsx @@ -20,9 +20,9 @@ const MenuItem = styled('button', { width: '147px', padding: '8px 16px', color: '$gray10', - background: '$black80', + background: '$gray800', fontStyle: 'B3', - border: '1px solid $black40', + border: '1px solid $gray600', '&:first-child': { borderRadius: '14px 14px 0 0', borderBottom: 'none', diff --git a/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx b/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx index 6961467c..839018ab 100644 --- a/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx +++ b/src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx @@ -31,10 +31,10 @@ const EditorContainer = styled('div', { flexDirection: 'column', borderRadius: '8px', border: `1px solid $white`, - background: '$black100', + background: '$gray950', }); const Editor = styled('textarea', { - color: '$gray40', + color: '$gray200', fontStyle: 'B2', background: 'transparent', border: 'none', @@ -51,7 +51,7 @@ const CancelButton = styled('button', { padding: '4px 12px', flexType: 'center', borderRadius: '8px', - background: '$black60', + background: '$gray700', color: '$gray10', fontStyle: 'T5', }); @@ -60,6 +60,6 @@ const SubmitButton = styled('button', { flexType: 'center', background: '$gray10', borderRadius: '8px', - color: '$black100', + color: '$gray950', fontStyle: 'T5', }); diff --git a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx index f8098ad2..71328a58 100644 --- a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx +++ b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx @@ -47,7 +47,7 @@ const CommentInput = styled('textarea', { maxHeight: '120px', padding: '14px 24px', borderRadius: '25px', - background: '$black60', + background: '$gray700', color: '$gray10', fontStyle: 'B2', border: 'none', diff --git a/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx b/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx index 29ea9c01..2aacdc38 100644 --- a/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx +++ b/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx @@ -32,7 +32,7 @@ export default function FeedCommentLikeSection({ } const Divider = styled('div', { - background: '$black60', + background: '$gray700', width: '1px', height: '24px', }); @@ -40,7 +40,7 @@ const CommentWrapper = styled('div', { width: '400px', display: 'flex', flexType: 'center', - color: '$gray80', + color: '$gray400', fontStyle: 'T5', '@tablet': { width: '50%', diff --git a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx index ab27be6d..5057d6f8 100644 --- a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx @@ -107,8 +107,8 @@ const Container = styled('div', { width: '800px', flexShrink: 0, borderRadius: '20px', - border: '1px solid $black60', - background: '$black100', + border: '1px solid $gray700', + background: '$gray950', mb: '$80', '@tablet': { width: '100%', @@ -229,8 +229,8 @@ const CommentLikeWrapper = styled('div', { fontStyle: 'T5', height: '48px', flexType: 'center', - borderTop: '1px solid $black60', - borderBottom: '1px solid $black60', + borderTop: '1px solid $gray700', + borderBottom: '1px solid $gray700', '@tablet': { width: '100vw', marginLeft: 'calc(50% - 50vw)', diff --git a/src/components/feed/Modal/FeedCreateModal.tsx b/src/components/feed/Modal/FeedCreateModal.tsx index a43e6787..3c91c881 100644 --- a/src/components/feed/Modal/FeedCreateModal.tsx +++ b/src/components/feed/Modal/FeedCreateModal.tsx @@ -131,7 +131,7 @@ const SDialogWrapper = styled('div', { transform: 'translate(-50%, -50%)', zIndex: '$2', borderRadius: '20px', - backgroundColor: '$black60', + backgroundColor: '$gray700', width: '100%', maxWidth: '$768', boxShadow: '0px 4px 4px rgba(0,0,0,0.25)', diff --git a/src/components/feed/Modal/FeedEditModal.tsx b/src/components/feed/Modal/FeedEditModal.tsx index 665cf2db..7c53ba93 100644 --- a/src/components/feed/Modal/FeedEditModal.tsx +++ b/src/components/feed/Modal/FeedEditModal.tsx @@ -125,7 +125,7 @@ const SDialogWrapper = styled('div', { transform: 'translate(-50%, -50%)', zIndex: '$2', borderRadius: '20px', - backgroundColor: '$black60', + backgroundColor: '$gray700', width: '100%', maxWidth: '$768', boxShadow: '0px 4px 4px rgba(0,0,0,0.25)', diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx index dec67a5c..79803bc7 100644 --- a/src/components/feed/Modal/FeedFormPresentation.tsx +++ b/src/components/feed/Modal/FeedFormPresentation.tsx @@ -223,11 +223,11 @@ export default FeedFormPresentation; const SFormContainer = styled('div', { width: '100%', padding: '40px 30px 30px', - background: '$black80', + background: '$gray800', borderRadius: '15px', '@tablet': { padding: '30px 0 0 0', - background: '$black100', + background: '$gray950', height: '100vh', borderRadius: '0', }, @@ -284,7 +284,7 @@ const SThumbnailImage = styled('div', { height: '56px', borderRadius: '$6', overflow: 'hidden', - backgroundColor: '$black80', + backgroundColor: '$gray800', backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', @@ -295,7 +295,7 @@ const SThumbnailImage = styled('div', { }); const SCategory = styled('p', { - color: '$gray80', + color: '$gray400', fontStyle: 'T3', ml: '$20', '@tablet': { @@ -316,7 +316,7 @@ const STitle = styled('p', { const SDivider = styled(Divider, { my: '$24', - backgroundColor: '$black40', + backgroundColor: '$gray600', '@tablet': { my: '$20', }, @@ -412,5 +412,5 @@ const SImageListWrapper = styled('div', { const SImageListDivider = styled(Divider, { mt: '$0', mb: '$24', - backgroundColor: '$black40', + backgroundColor: '$gray600', }); diff --git a/src/components/filter/MultiSelect/BottomSheet.tsx b/src/components/filter/MultiSelect/BottomSheet.tsx index a823537d..65f57878 100644 --- a/src/components/filter/MultiSelect/BottomSheet.tsx +++ b/src/components/filter/MultiSelect/BottomSheet.tsx @@ -40,8 +40,8 @@ const SLayout = styled(Flex, { left: 0, width: '100vw', height: '0px', - backgroundColor: '$black80', - boxShadow: '4px 4px 40px $black80', + backgroundColor: '$gray800', + boxShadow: '4px 4px 40px $gray800', borderRadius: '20px 20px 0px 0px', zIndex: '$2', variants: { @@ -72,7 +72,7 @@ const SListItemWrapper = styled('ul', { '& li': { height: '48px', px: '$16', - borderBottom: '1px solid $black40', + borderBottom: '1px solid $gray600', }, '& li:last-child': { borderBottom: 'none', @@ -83,7 +83,7 @@ const SCloseButton = styled('button', { width: '100%', height: '50px', backgroundColor: '$gray10', - color: '$black100', + color: '$gray950', fontAg: '16_bold_100', textAlign: 'center', }); diff --git a/src/components/filter/MultiSelect/index.tsx b/src/components/filter/MultiSelect/index.tsx index cd441082..12b5ff56 100644 --- a/src/components/filter/MultiSelect/index.tsx +++ b/src/components/filter/MultiSelect/index.tsx @@ -80,7 +80,7 @@ const SSelectWrapper = styled('div', { const SSelectDisplay = styled(Flex, { width: '153px', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: '14px', padding: '$18 $20', cursor: 'pointer', @@ -127,11 +127,11 @@ const SCategory = styled('span', { const SSelectBoxList = styled('div', { width: '100%', position: 'absolute', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: '$10', padding: '$8 $16', top: '63px', - backgroundColor: '$black100', + backgroundColor: '$gray950', zIndex: '$2', '& li': { height: '50px', diff --git a/src/components/form/FileInput/index.tsx b/src/components/form/FileInput/index.tsx index 2b4ea05b..33313e33 100644 --- a/src/components/form/FileInput/index.tsx +++ b/src/components/form/FileInput/index.tsx @@ -39,7 +39,7 @@ const SInputWrapper = styled('label', { height: '100%', maxHeight: '176px', aspectRatio: '40 / 27', - background: '$black40', + background: '$gray600', borderRadius: '10px', cursor: 'pointer', }); diff --git a/src/components/form/FormSwitch/FormSwitch.tsx b/src/components/form/FormSwitch/FormSwitch.tsx index 0a810d61..cad810fa 100644 --- a/src/components/form/FormSwitch/FormSwitch.tsx +++ b/src/components/form/FormSwitch/FormSwitch.tsx @@ -24,7 +24,7 @@ const SSwitchWrapper = styled('div', { gap: '8px', fontAg: '16_medium_100', color: '$gray100', - background: '$black60', + background: '$gray700', borderRadius: '10px', variants: { checked: { diff --git a/src/components/form/Presentation/ImagePreview/index.tsx b/src/components/form/Presentation/ImagePreview/index.tsx index a93b4d78..b549ea6b 100644 --- a/src/components/form/Presentation/ImagePreview/index.tsx +++ b/src/components/form/Presentation/ImagePreview/index.tsx @@ -63,7 +63,7 @@ const SEditButton = styled('label', { background: '$gray10', borderRadius: '6px', fontAg: '16_bold_100', - color: '$black100', + color: '$gray950', cursor: 'pointer', }); const SInput = styled('input', { @@ -81,7 +81,7 @@ const SDeleteButton = styled('button', { display: 'flex', justifyContent: 'center', alignItems: 'center', - background: '$black40', + background: '$gray600', borderRadius: '6px', fontAg: '16_bold_100', color: '$gray10', diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx index d40d6adf..a7a9219c 100644 --- a/src/components/form/Presentation/index.tsx +++ b/src/components/form/Presentation/index.tsx @@ -447,7 +447,7 @@ const Button = styled('button', { alignItems: 'center', justifyContent: 'center', gap: '12px', - background: '$black40', + background: '$gray600', borderRadius: '10px', fontAg: '18_bold_100', color: '$gray10', @@ -461,7 +461,7 @@ const Button = styled('button', { const CancelButton = styled(Button, {}); const SubmitButton = styled(Button, { background: '$gray10', - color: '$black100', + color: '$gray950', '&:disabled': { cursor: 'not-allowed', opacity: 0.35, diff --git a/src/components/form/Select/BaseSelect/BaseSelect.tsx b/src/components/form/Select/BaseSelect/BaseSelect.tsx index ff21eb13..d39fa9df 100644 --- a/src/components/form/Select/BaseSelect/BaseSelect.tsx +++ b/src/components/form/Select/BaseSelect/BaseSelect.tsx @@ -76,10 +76,10 @@ const SOptionList = styled(Listbox.Options, { padding: '8px 0px', display: 'flex', flexDirection: 'column', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: 10, mt: '$8', - background: '$black40', + background: '$gray600', overflow: 'auto', zIndex: 100, '@tablet': { diff --git a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx index f942f7ce..96f28168 100644 --- a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx +++ b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx @@ -35,7 +35,7 @@ const SButton = styled('button', { gap: 8, fontAg: '16_medium_100', color: '$gray10', - background: '$black60', + background: '$gray700', borderRadius: 10, variants: { isNotSelected: { diff --git a/src/components/form/Select/Button/index.tsx b/src/components/form/Select/Button/index.tsx index 6f303dd9..671f8da1 100644 --- a/src/components/form/Select/Button/index.tsx +++ b/src/components/form/Select/Button/index.tsx @@ -38,7 +38,7 @@ const SButton = styled('button', { gap: 8, fontAg: '16_medium_100', color: '$gray10', - background: '$black60', + background: '$gray700', borderRadius: 10, variants: { isNotSelected: { diff --git a/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx b/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx index 7ad97367..a16ae8e5 100644 --- a/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx +++ b/src/components/form/Select/OptionItem/CheckboxOptionItem.tsx @@ -36,7 +36,7 @@ const SCheckboxOptionItem = styled('div', { alignItems: 'center', gap: '10px', padding: '16px', - background: '$black40', + background: '$gray600', color: '$gray10', fontAg: '16_medium_100', }); diff --git a/src/components/form/Select/OptionItem/index.tsx b/src/components/form/Select/OptionItem/index.tsx index 80c08e4b..af8c5e39 100644 --- a/src/components/form/Select/OptionItem/index.tsx +++ b/src/components/form/Select/OptionItem/index.tsx @@ -38,7 +38,7 @@ const SOptionItem = styled('div', { display: 'flex', alignItems: 'center', padding: '12px 16px', - background: '$black40', + background: '$gray600', fontAg: '18_medium_100', variants: { selected: { diff --git a/src/components/form/TableOfContents/index.tsx b/src/components/form/TableOfContents/index.tsx index f0a4e61d..cca9f950 100644 --- a/src/components/form/TableOfContents/index.tsx +++ b/src/components/form/TableOfContents/index.tsx @@ -86,8 +86,8 @@ const SContainer = styled('div', { width: '341px', padding: '50px 40px 60px', height: 'fit-content', - background: '$black80', - border: '1px solid $black60', + background: '$gray800', + border: '1px solid $gray700', borderRadius: '15px', position: 'sticky', top: '$80', @@ -102,7 +102,7 @@ const SListHeader = styled('div', { alignItems: 'center', marginBottom: '$36', paddingBottom: '$36', - borderBottom: '1.5px solid $black60', + borderBottom: '1.5px solid $gray700', }); const SLabel = styled('h2', { fontWeight: '700', @@ -117,7 +117,7 @@ const SCount = styled('div', { fontSize: '12px', lineHeight: '100%', textAlign: 'center', - background: '$black60', + background: '$gray700', borderRadius: '6px', }); const SItemList = styled('ul', { diff --git a/src/components/form/TextInput/index.tsx b/src/components/form/TextInput/index.tsx index 13d84443..b7282043 100644 --- a/src/components/form/TextInput/index.tsx +++ b/src/components/form/TextInput/index.tsx @@ -48,7 +48,7 @@ const SInput = styled('input', { alignItems: 'center', fontAg: '16_medium_100', color: '$gray10', - background: '$black60', + background: '$gray700', borderRadius: 10, '&::placeholder': { color: '$gray100', diff --git a/src/components/form/Textarea/index.tsx b/src/components/form/Textarea/index.tsx index 511649a0..cd312ef4 100644 --- a/src/components/form/Textarea/index.tsx +++ b/src/components/form/Textarea/index.tsx @@ -46,7 +46,7 @@ const STextarea = styled('textarea', { padding: '16px 20px 20px 16px', fontAg: '16_medium_150', color: '$gray10', - background: '$black60', + background: '$gray700', border: 'none', resize: 'none', borderRadius: 10, diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 8659ff39..2e114efb 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -57,7 +57,7 @@ const HeaderWrapper = styled('div', { zIndex: '$1', '& > header': { - backgroundColor: '$black100', + backgroundColor: '$gray950', }, }); diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx index d3bbfa8e..893be228 100644 --- a/src/components/modal/ConfirmModal.tsx +++ b/src/components/modal/ConfirmModal.tsx @@ -44,7 +44,7 @@ const SDialogWrapper = styled('div', { height: '$298', padding: '$48 $69', borderRadius: '20px', - backgroundColor: '$black80', + backgroundColor: '$gray800', boxShadow: '4px 4px 40px #181818', display: 'flex', flexDirection: 'column', @@ -84,12 +84,12 @@ const SDialogWrapper = styled('div', { }, 'button:first-child': { - backgroundColor: '$black40', + backgroundColor: '$gray600', mr: '$20', }, 'button:last-child': { backgroundColor: '$gray10', - color: '$black100', + color: '$gray950', }, }); diff --git a/src/components/modal/DefaultModal.tsx b/src/components/modal/DefaultModal.tsx index 62d6e6ac..91a18ef0 100644 --- a/src/components/modal/DefaultModal.tsx +++ b/src/components/modal/DefaultModal.tsx @@ -40,7 +40,7 @@ const SDialogWrapper = styled('div', { transform: 'translate(-50%, -50%)', zIndex: '$2', borderRadius: '20px', - backgroundColor: '$black80', + backgroundColor: '$gray800', width: '$646', boxShadow: '4px 4px 40px #181818', @@ -54,7 +54,7 @@ const SHeader = styled('div', { justifyContent: 'space-between', height: '$100', padding: '$40 $40 $36 $40', - borderBottom: `1px solid $black40`, + borderBottom: `1px solid $gray600`, '.title': { width: '100%', diff --git a/src/components/modal/ImageCarouselModal.tsx b/src/components/modal/ImageCarouselModal.tsx index fedc49a4..e77bc52e 100644 --- a/src/components/modal/ImageCarouselModal.tsx +++ b/src/components/modal/ImageCarouselModal.tsx @@ -32,7 +32,9 @@ export default function ImageCarouselModal({ isOpen, close, images, startIndex = {/* top 고정 요소 */} {/* eslint-disable-next-line prettier/prettier */} - {currentIndex} / {images.length} + + {currentIndex} / {images.length} + @@ -133,7 +135,7 @@ const ArrowButton = styled('button', { height: '72px', flexShrink: 0, borderRadius: '20px', - background: '$black80', + background: '$gray800', '@tablet': { display: 'none', }, diff --git a/src/components/page/meetingDetail/Carousel/NextArrow.tsx b/src/components/page/meetingDetail/Carousel/NextArrow.tsx index 5fb978bf..8d6272f5 100644 --- a/src/components/page/meetingDetail/Carousel/NextArrow.tsx +++ b/src/components/page/meetingDetail/Carousel/NextArrow.tsx @@ -42,11 +42,11 @@ const SButton = styled('button', { }, '& path': { - stroke: '$black40', + stroke: '$gray600', }, '&:hover': { - backgroundColor: '$black80', + backgroundColor: '$gray800', borderRadius: '20px', path: { stroke: '$gray10', diff --git a/src/components/page/meetingDetail/Feed/EmptyView.tsx b/src/components/page/meetingDetail/Feed/EmptyView.tsx index e8cf6e0c..81939b47 100644 --- a/src/components/page/meetingDetail/Feed/EmptyView.tsx +++ b/src/components/page/meetingDetail/Feed/EmptyView.tsx @@ -41,7 +41,7 @@ export default EmptyView; const SContent = styled('div', { flexType: 'center', flexDirection: 'column', - color: '$gray40', + color: '$gray200', fontStyle: 'T1', '@tablet': { @@ -49,7 +49,7 @@ const SContent = styled('div', { }, button: { - background: '$black40', + background: '$gray600', color: '$white', mt: '$48', padding: '16px 35.5px', diff --git a/src/components/page/meetingDetail/Feed/FeedItem.tsx b/src/components/page/meetingDetail/Feed/FeedItem.tsx index cbd63a63..d8bad744 100644 --- a/src/components/page/meetingDetail/Feed/FeedItem.tsx +++ b/src/components/page/meetingDetail/Feed/FeedItem.tsx @@ -163,7 +163,7 @@ const SProfileImageWrapper = styled('div', { height: '$32', objectFit: 'cover', borderRadius: '$round', - background: '$black60', + background: '$gray700', overflow: 'hidden', }); @@ -195,7 +195,7 @@ const STitle = styled('div', { const SContent = styled('div', { mb: '$20', - color: '$gray40', + color: '$gray200', fontStyle: 'B2', whiteSpace: 'pre-wrap', wordBreak: 'break-all', @@ -212,7 +212,7 @@ const SThumbnail = styled('img', { display: 'block', mb: '$20', borderRadius: '8px', - background: '$black60', + background: '$gray700', width: '100%', maxWidth: '$340', height: 'fit-content', @@ -229,7 +229,7 @@ const SThumbnailCount = styled('div', { top: '12px', right: '12px', zIndex: 1, - backgroundColor: '$black100', + backgroundColor: '$gray950', opacity: 0.6, color: '$gray100', borderRadius: '50%', @@ -261,7 +261,7 @@ const SCommentWrapper = styled('div', { const SComment = styled('span', { fontStyle: 'T5', - color: '$gray40', + color: '$gray200', }); const SCommentCount = styled('span', { @@ -292,7 +292,7 @@ const SLikeButton = styled('button', { const SOverlay = styled('div', { position: 'absolute', - background: '$black100', + background: '$gray950', opacity: 0.7, width: '100%', height: '100%', diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx index cdbe0a3b..ab47e614 100644 --- a/src/components/page/meetingDetail/Feed/FeedPanel.tsx +++ b/src/components/page/meetingDetail/Feed/FeedPanel.tsx @@ -127,7 +127,7 @@ const SMobileContainer = styled('div', { width: '100vw', height: '8px', marginLeft: 'calc(50% - 50vw)', - background: '$black80', + background: '$gray800', }, }, }); @@ -136,12 +136,12 @@ const SHeader = styled('div', { flexType: 'center', padding: '$31 0', fontStyle: 'H1', - color: '$gray40', + color: '$gray200', '@tablet': { padding: '$16 $20', fontStyle: 'H5', - backgroundColor: '$black80', + backgroundColor: '$gray800', mt: '$28', borderRadius: '12px', flexType: 'verticalCenter', diff --git a/src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx b/src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx index d95b3ecb..8c23f53b 100644 --- a/src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx +++ b/src/components/page/meetingDetail/Feed/Skeleton/FeedItemSkeleton.tsx @@ -42,7 +42,7 @@ const SFeedItemSkeleton = styled('div', { }); const Item = styled('div', { - background: '$black60', + background: '$gray700', borderRadius: '8px', }); @@ -74,7 +74,7 @@ const SBottom = styled(Flex, { '@tablet': { '& > *': { - background: '$black80', + background: '$gray800', }, }, }); diff --git a/src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx b/src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx index 253d5c10..b0aa6611 100644 --- a/src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx +++ b/src/components/page/meetingDetail/Feed/Skeleton/MobileFeedListSkeleton.tsx @@ -26,7 +26,7 @@ const SMobileFeedListSkeleton = styled('div', { const SFeedItemWrapper = styled('div', { '&:not(:last-child)': { - borderBottom: '8px solid $black80', + borderBottom: '8px solid $gray800', }, width: 'calc(100% + 40px)', diff --git a/src/components/page/meetingDetail/Information/InformationPanel.tsx b/src/components/page/meetingDetail/Information/InformationPanel.tsx index 057f0e05..efd1b362 100644 --- a/src/components/page/meetingDetail/Information/InformationPanel.tsx +++ b/src/components/page/meetingDetail/Information/InformationPanel.tsx @@ -129,7 +129,7 @@ const STitle = styled('h2', { const SDescription = styled('p', { fontAg: '22_regular_170', whiteSpace: 'pre-line', - color: '$gray40', + color: '$gray200', a: { textDecoration: 'underline', diff --git a/src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx b/src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx index d458140c..3e16fa50 100644 --- a/src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx +++ b/src/components/page/meetingDetail/MeetingController/MentorTooltip.tsx @@ -21,7 +21,7 @@ const STooltip = styled('div', { position: 'absolute', top: '$13', left: '176px', - backgroundColor: '$black40', + backgroundColor: '$gray600', width: 'max-content', padding: '$12 $14', borderRadius: '10px', @@ -47,7 +47,7 @@ const STooltip = styled('div', { right: '100%', border: 'solid transparent', borderWidth: '3.5px 9px', - borderRightColor: '$black40', + borderRightColor: '$gray600', }, }); diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx index d7669bf9..e9088411 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/ApplicationModalContent.tsx @@ -60,7 +60,7 @@ const SApplicationModalContent = styled('div', { height: '$200', fontAg: '16_medium_150', color: '$gray10', - backgroundColor: '$black60', + backgroundColor: '$gray700', outline: 'none', borderRadius: '10px', @@ -84,7 +84,7 @@ const SApplicationModalContent = styled('div', { borderRadius: '12px', textAlign: 'center', fontAg: '18_bold_100', - color: '$black100', + color: '$gray950', backgroundColor: '$gray10', '&:disabled': { diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx index 66640069..237cc15b 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx @@ -45,7 +45,7 @@ const SRecruitmentStatusList = styled('div', { '&::-webkit-scrollbar-thumb': { height: '$125', - background: '$gray40', + background: '$gray200', borderRadius: '6px', }, }); @@ -57,7 +57,7 @@ const SRecruitmentStatusItem = styled('div', { height: '$64', padding: '$16 $20', borderRadius: '12px', - backgroundColor: '$black60', + backgroundColor: '$gray700', color: '$gray10', fontAg: '16_semibold_100', @@ -85,7 +85,7 @@ const SRecruitmentStatusItem = styled('div', { height: '$32', borderRadius: '$round', objectFit: 'cover', - background: '$black40', + background: '$gray600', '@tablet': { width: '$26', diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx index 9bbe2ccd..6964b20a 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx @@ -61,7 +61,7 @@ const SEmptyText = styled('p', { flexType: 'center', width: '100%', height: '$280', - color: '$gray80', + color: '$gray400', fontAg: '18_semibold_100', '@tablet': { @@ -81,7 +81,7 @@ const SRecruitmentStatusModalBottom = styled('div', { }); const STotal = styled('p', { - color: '$gray80', + color: '$gray400', fontAg: '16_medium_100', '@tablet': { diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx index a053437c..0b2a1704 100644 --- a/src/components/page/meetingDetail/MeetingController/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/index.tsx @@ -245,7 +245,7 @@ const SPanelWrapper = styled('div', { flexType: 'verticalCenter', justifyContent: 'space-between', pb: '$120', - borderBottom: `2px solid $black60`, + borderBottom: `2px solid $gray700`, mb: '$40', '@tablet': { @@ -270,7 +270,7 @@ const SAbout = styled('div', { '& > h1': { span: { - color: '$gray80', + color: '$gray400', mr: '$8', '@tablet': { @@ -305,14 +305,14 @@ const SRecruitStatus = styled('div', { variants: { status: { 0: { - backgroundColor: '$black40', + backgroundColor: '$gray600', }, 1: { backgroundColor: '$secondary', - color: '$black100', + color: '$gray950', }, 2: { - backgroundColor: '$black60', + backgroundColor: '$gray700', }, }, }, @@ -338,7 +338,7 @@ const SProfileAnchor = styled('a', { borderRadius: '50%', objectFit: 'cover', mr: '$16', - background: '$black60', + background: '$gray700', '@tablet': { width: '$32', height: '$32', @@ -368,7 +368,7 @@ const SProfileAnchor = styled('a', { }, '& > svg:last-child > path': { - stroke: `$gray40`, + stroke: `$gray200`, }, }); @@ -388,7 +388,7 @@ const SStatusButton = styled(Button, { justifyContent: 'space-between', padding: '$21 $20', mb: '$16', - backgroundColor: '$black80', + backgroundColor: '$gray800', fontAg: '18_semibold_100', '@tablet': { @@ -408,7 +408,7 @@ const SStatusButton = styled(Button, { 'span:first-child': { mr: '$6', - color: '$gray80', + color: '$gray400', }, }); @@ -416,7 +416,7 @@ const SGuestButton = styled(Button, { fontAg: '20_bold_100', padding: '$20 0', textAlign: 'center', - color: '$black100', + color: '$gray950', '@tablet': { width: '100%', height: '$46', @@ -426,7 +426,7 @@ const SGuestButton = styled(Button, { '&:disabled': { opacity: '0.35', - backgroundColor: '$black40', + backgroundColor: '$gray600', color: '$gray100', cursor: 'not-allowed', }, @@ -434,7 +434,7 @@ const SGuestButton = styled(Button, { variants: { isApplied: { true: { - border: `2px solid $black40`, + border: `2px solid $gray600`, color: '$gray10', }, false: { @@ -444,7 +444,7 @@ const SGuestButton = styled(Button, { isApproved: { true: { color: '$gray10', - border: `2px solid $black40`, + border: `2px solid $gray600`, }, }, }, @@ -467,7 +467,7 @@ const SHostButtonContainer = styled('div', { }, button: { - border: `2px solid $black40`, + border: `2px solid $gray600`, mr: '$12', '@tablet': { @@ -478,6 +478,6 @@ const SHostButtonContainer = styled('div', { a: { display: 'inline-block', backgroundColor: '$gray10', - color: '$black100', + color: '$gray950', }, }); diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 2af4bb67..7ac1447f 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -77,7 +77,7 @@ const SThumbnailImage = styled('div', { height: '260px', overflow: 'hidden', borderRadius: '$12', - backgroundColor: '$black80', + backgroundColor: '$gray800', backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', @@ -97,10 +97,10 @@ const SStatus = styled('div', { }, 1: { backgroundColor: '$secondary', - color: '$black100', + color: '$gray950', }, 2: { - backgroundColor: '$black60', + backgroundColor: '$gray700', }, }, }, @@ -116,8 +116,8 @@ const STitleSection = styled('div', { const SCategory = styled('p', { display: 'inline-block', fontStyle: 'T6', - color: '$gray40', - border: '1px solid $black60', + color: '$gray200', + border: '1px solid $gray700', borderRadius: '37px', px: '$10', py: '$3', @@ -134,7 +134,7 @@ const SProfile = styled('img', { height: '$24', borderRadius: '50%', objectFit: 'cover', - background: '$black60', + background: '$gray700', }); const SName = styled('p', { diff --git a/src/components/page/meetingList/Card/ManagementButton.tsx b/src/components/page/meetingList/Card/ManagementButton.tsx index 1b296caf..95f1f9b6 100644 --- a/src/components/page/meetingList/Card/ManagementButton.tsx +++ b/src/components/page/meetingList/Card/ManagementButton.tsx @@ -31,7 +31,7 @@ const SButton = styled(Flex, { borderRadius: '71px', fontAg: '16_bold_100', whiteSpace: 'nowrap', - background: '$black80', + background: '$gray800', '@tablet': { width: '91px', fontStyle: 'T6', diff --git a/src/components/page/meetingList/Card/MobileSize/CardType.tsx b/src/components/page/meetingList/Card/MobileSize/CardType.tsx index abcb4f6e..418d8c9f 100644 --- a/src/components/page/meetingList/Card/MobileSize/CardType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/CardType.tsx @@ -49,10 +49,10 @@ const SStatus = styled('div', { }, 1: { backgroundColor: '$secondary', - color: '$black100', + color: '$gray950', }, 2: { - backgroundColor: '$black60', + backgroundColor: '$gray700', }, }, }, @@ -86,7 +86,7 @@ const MobileWrapper = styled('div', { }); const SMobileValue = styled('p', { fontAg: '12_medium_100', - color: '$gray80', + color: '$gray400', '& + &': { ml: '$8', }, diff --git a/src/components/page/meetingList/Card/MobileSize/ListType.tsx b/src/components/page/meetingList/Card/MobileSize/ListType.tsx index b7c86b1e..82729060 100644 --- a/src/components/page/meetingList/Card/MobileSize/ListType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/ListType.tsx @@ -67,7 +67,7 @@ const SThumbnailImage = styled('div', { height: '82px', borderRadius: '$8', overflow: 'hidden', - backgroundColor: '$black80', + backgroundColor: '$gray800', backgroundSize: 'cover', backgroundPosition: 'center center', backgroundRepeat: 'no-repeat', @@ -87,10 +87,10 @@ const SStatus = styled('div', { }, 1: { backgroundColor: '$secondary', - color: '$black100', + color: '$gray950', }, 2: { - backgroundColor: '$black60', + backgroundColor: '$gray700', }, }, }, @@ -113,7 +113,7 @@ const SProfile = styled('img', { height: '$20', borderRadius: '50%', objectFit: 'cover', - background: '$black60', + background: '$gray700', }); const STitle = styled('p', { @@ -134,7 +134,7 @@ const SUserInfo = styled('p', { }); const SCategory = styled(SUserInfo, { - color: '$gray40', + color: '$gray200', }); const SInfoRow = styled(Flex, { mt: '$8', diff --git a/src/components/page/meetingList/Card/Skeleton/index.tsx b/src/components/page/meetingList/Card/Skeleton/index.tsx index 82758545..c50a1ef2 100644 --- a/src/components/page/meetingList/Card/Skeleton/index.tsx +++ b/src/components/page/meetingList/Card/Skeleton/index.tsx @@ -38,7 +38,7 @@ export const SLayout = styled('div', { }); export const SBasicSkeleton = styled('div', { - backgroundColor: '$black60', + backgroundColor: '$gray700', borderRadius: '6px', '@tablet': { borderRadius: '5px', @@ -46,6 +46,6 @@ export const SBasicSkeleton = styled('div', { }); export const SDetailInfoSkeleton = styled(SBasicSkeleton, { - backgroundColor: '$black80', + backgroundColor: '$gray800', mb: '$12', }); diff --git a/src/components/page/meetingList/Card/Status.tsx b/src/components/page/meetingList/Card/Status.tsx index 78c736d9..44183940 100644 --- a/src/components/page/meetingList/Card/Status.tsx +++ b/src/components/page/meetingList/Card/Status.tsx @@ -30,7 +30,7 @@ const SLabel = styled('div', { padding: '10px 12px', borderRadius: '71px', marginRight: '8px', - backgroundColor: '$black80', + backgroundColor: '$gray800', '@tablet': { padding: '8px 10px', marginRight: '6px', @@ -41,7 +41,7 @@ const SValue = styled('span', { variants: { status: { 0: { - color: '$gray80', + color: '$gray400', }, 1: { color: '$success', diff --git a/src/components/page/meetingList/EmptyView.tsx b/src/components/page/meetingList/EmptyView.tsx index 4d5215bc..27d729ce 100644 --- a/src/components/page/meetingList/EmptyView.tsx +++ b/src/components/page/meetingList/EmptyView.tsx @@ -13,7 +13,7 @@ export default EmptyView; const Wrapper = styled(Flex.Center, { height: '820px', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: '10px', my: '$24', '@tablet': { @@ -23,7 +23,7 @@ const Wrapper = styled(Flex.Center, { const Message = styled('p', { fontAg: '24_medium_100', - color: '$gray80', + color: '$gray400', '@tablet': { fontAg: '16_medium_100', }, diff --git a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx index 30c2c574..f45a532d 100644 --- a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx +++ b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx @@ -48,16 +48,16 @@ const SOption = styled('button', { isSelected: { true: { backgroundColor: '$gray10', - color: '$black100', + color: '$gray950', }, false: { - backgroundColor: '$black100', + backgroundColor: '$gray950', color: '$gray100', '&:hover': { color: '$gray10', }, '@tablet': { - backgroundColor: '$black40', + backgroundColor: '$gray600', color: '$gray60', }, }, diff --git a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx index 5c9fb79f..22273ba4 100644 --- a/src/components/page/meetingList/Filter/Modal/OpenButton.tsx +++ b/src/components/page/meetingList/Filter/Modal/OpenButton.tsx @@ -70,7 +70,7 @@ const SSelectModalOpenButton = styled('div', { border: '1px solid $gray10', }, false: { - border: '1px solid $black40', + border: '1px solid $gray600', }, }, }, diff --git a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx index 9771f12c..1a07e3af 100644 --- a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx +++ b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx @@ -45,7 +45,7 @@ const SLabel = styled('p', { }, }); const SSwitchWrapper = styled(Flex, { - background: '$black100', + background: '$gray950', borderRadius: '14px', width: '163px', height: '46px', diff --git a/src/components/page/meetingList/Filter/Result/ResultItem.tsx b/src/components/page/meetingList/Filter/Result/ResultItem.tsx index 3d46a29b..072d3827 100644 --- a/src/components/page/meetingList/Filter/Result/ResultItem.tsx +++ b/src/components/page/meetingList/Filter/Result/ResultItem.tsx @@ -15,8 +15,8 @@ function ResultItem({ selectedOption, deleteValue }: { selectedOption: string; d export default ResultItem; const SResultItemWrapper = styled(Flex, { - backgroundColor: '$black100', - border: '1px solid $black40', + backgroundColor: '$gray950', + border: '1px solid $gray600', borderRadius: '44px', padding: '$8 $10 $8 $12 ', whiteSpace: 'nowrap', diff --git a/src/components/page/meetingList/Filter/Result/index.tsx b/src/components/page/meetingList/Filter/Result/index.tsx index 44232c89..343524f7 100644 --- a/src/components/page/meetingList/Filter/Result/index.tsx +++ b/src/components/page/meetingList/Filter/Result/index.tsx @@ -55,7 +55,7 @@ export default Result; const SResultWrapper = styled(Flex, { marginTop: '24px', padding: '20px 24px', - backgroundColor: '$black80', + backgroundColor: '$gray800', borderRadius: '10px', '@tablet': { padding: '12px 20px', diff --git a/src/components/page/meetingList/Filter/Search/Mobile.tsx b/src/components/page/meetingList/Filter/Search/Mobile.tsx index 3768e52b..5302469e 100644 --- a/src/components/page/meetingList/Filter/Search/Mobile.tsx +++ b/src/components/page/meetingList/Filter/Search/Mobile.tsx @@ -50,7 +50,7 @@ const SLayout = styled('div', { top: '56px', right: 0, zIndex: 5, - backgroundColor: '$black100', + backgroundColor: '$gray950', transition: 'width 0.5s', variants: { isVisible: { @@ -71,7 +71,7 @@ const SSearchWrapper = styled(Flex, { width: '100%', py: '$13', px: '$24', - backgroundColor: '$black80', + backgroundColor: '$gray800', borderRadius: '59px', boxSizing: 'border-box', diff --git a/src/components/page/meetingList/Filter/Search/index.tsx b/src/components/page/meetingList/Filter/Search/index.tsx index 0bf4fc90..f507c373 100644 --- a/src/components/page/meetingList/Filter/Search/index.tsx +++ b/src/components/page/meetingList/Filter/Search/index.tsx @@ -31,7 +31,7 @@ export default Search; const SSearchWrapper = styled(Flex, { py: '$15', px: '$20', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: '14px', ml: '$12', '@tablet': { diff --git a/src/components/page/meetingList/Pagination.tsx b/src/components/page/meetingList/Pagination.tsx index e8bf8d29..88b8bfa4 100644 --- a/src/components/page/meetingList/Pagination.tsx +++ b/src/components/page/meetingList/Pagination.tsx @@ -76,11 +76,11 @@ const SPageLink = styled('li', { height: '40px', fontStyle: 'H3', cursor: 'pointer', - color: '$gray40', + color: '$gray200', variants: { isCurrent: { true: { - color: '$black100', + color: '$gray950', backgroundColor: '$gray10', borderRadius: '20px', }, diff --git a/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx b/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx index 3dd1d4f1..c41cf5e1 100644 --- a/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx +++ b/src/components/page/meetingList/Slider/NoticeSlider/NoticeSlider.tsx @@ -60,7 +60,7 @@ export default function NoticeSlider({ notices }: NoticeSliderProps) { const SDot = styled('div', { width: '16px', height: '4px', - background: '$black80', + background: '$gray800', borderRadius: '10px', cursor: 'pointer', variants: { diff --git a/src/components/page/meetingManagement/ItemDescriptionBox.tsx b/src/components/page/meetingManagement/ItemDescriptionBox.tsx index 0c46d1bc..e78a3f3d 100644 --- a/src/components/page/meetingManagement/ItemDescriptionBox.tsx +++ b/src/components/page/meetingManagement/ItemDescriptionBox.tsx @@ -19,13 +19,13 @@ export default ItemDescriptionBox; const SItemDescriptionBox = styled('div', { minWidth: 'fit-content', - border: '1px solid $black40', + border: '1px solid $gray600', borderRadius: '15px', padding: '$19 0', mb: '$28', flexType: 'verticalCenter', justifyContent: 'space-between', - color: '$gray80', + color: '$gray400', fontAg: '16_bold_100', '@tablet': { diff --git a/src/components/page/meetingManagement/ManagementListItem.tsx b/src/components/page/meetingManagement/ManagementListItem.tsx index fb0a6885..9515b12a 100644 --- a/src/components/page/meetingManagement/ManagementListItem.tsx +++ b/src/components/page/meetingManagement/ManagementListItem.tsx @@ -220,7 +220,7 @@ const SListItem = styled('div', { flexType: 'verticalCenter', justifyContent: 'space-between', borderRadius: '20px', - backgroundColor: '$black80', + backgroundColor: '$gray800', padding: '$24', minWidth: 'fit-content', height: '$80', @@ -254,7 +254,7 @@ const SCardContent = styled('div', { display: 'flex', height: '$80', padding: '$20', - backgroundColor: '$black80', + backgroundColor: '$gray800', borderTopLeftRadius: '8px', borderTopRightRadius: '8px', }); @@ -262,7 +262,7 @@ const SCardContent = styled('div', { const SProfileImage = styled('div', { width: '$32', height: '$32', - background: '$black40', + background: '$gray600', borderRadius: '$round', ml: '$4', overflow: 'hidden', @@ -365,7 +365,7 @@ const SDate = styled('div', { '@tablet': { fontAg: '12_medium_100', - color: '$gray80', + color: '$gray400', justifyContent: 'space-between', }, }); @@ -406,7 +406,7 @@ const SUserStatus = styled('span', { backgroundColor: '$success', }, 2: { - backgroundColor: '$black40', + backgroundColor: '$gray600', }, }, }, @@ -450,7 +450,7 @@ const SCardDetailButton = styled('button', { mt: '$3', height: 'fit-content', fontAg: '12_medium_100', - color: '$gray80', + color: '$gray400', '& > span': { mr: '$2', @@ -481,13 +481,13 @@ const SRoundButton = styled('button', { }); const SGrayButton = styled(SRoundButton, { - backgroundColor: '$black40', + backgroundColor: '$gray600', }); const SWhiteButton = styled(SRoundButton, { mr: '$8', backgroundColor: '$gray10', - color: '$black100', + color: '$gray950', }); const buttonStyles = { @@ -495,9 +495,9 @@ const buttonStyles = { padding: '$13 0', textAlign: 'center', fontAg: '14_semibold_100', - color: '$gray80', - backgroundColor: '$black80', - borderTop: '1px solid $black40', + color: '$gray400', + backgroundColor: '$gray800', + borderTop: '1px solid $gray600', borderBottomLeftRadius: '8px', borderBottomRightRadius: '8px', variants: { @@ -517,7 +517,7 @@ const SRejectButton = styled('button', { const SApproveButton = styled('button', { ...buttonStyles, - color: '$black100', + color: '$gray950', backgroundColor: '$gray10', borderBottomLeftRadius: '0', }); @@ -528,7 +528,7 @@ const SCancelButton = styled('button', { }); const SDetailText = styled('p', { - backgroundColor: '$black60', + backgroundColor: '$gray700', margin: '$24', padding: '$16', borderRadius: '19.711px', @@ -543,7 +543,7 @@ const SEmptyText = styled('p', { padding: '$104 0 $124 0', fontAg: '20_medium_100', textAlign: 'center', - color: '$gray80', + color: '$gray400', '@tablet': { padding: '$100 0', diff --git a/src/components/page/meetingManagement/MeetingInformation.tsx b/src/components/page/meetingManagement/MeetingInformation.tsx index 1f14f7be..17469254 100644 --- a/src/components/page/meetingManagement/MeetingInformation.tsx +++ b/src/components/page/meetingManagement/MeetingInformation.tsx @@ -37,9 +37,9 @@ export default MeetingInformation; const SMeetingInformation = styled('a', { flexType: 'verticalCenter', marginTop: '$64', - background: '$black80', + background: '$gray800', padding: '$32 $26 $32 $29', - border: `1px solid $black40`, + border: `1px solid $gray600`, borderRadius: '24px', '& > div': { @@ -75,7 +75,7 @@ const SImage = styled('img', { const SCategory = styled('div', { fontAg: '24_semibold_100', - color: '$gray80', + color: '$gray400', mb: '$10', '@tablet': { @@ -99,7 +99,7 @@ const SRecruitingStatus = styled('span', { color: '$orange400', }, false: { - color: '$gray80', + color: '$gray400', }, }, }, diff --git a/src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx b/src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx index e9fa3306..731be2e7 100644 --- a/src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx +++ b/src/components/page/meetingManagement/Skeleton/ManagementListSkeleton.tsx @@ -15,7 +15,7 @@ export default ManagementListSkeleton; const SItemSkeleton = styled('div', { height: '$80', borderRadius: '20px', - background: '$black80', + background: '$gray800', mb: '$16', '@tablet': { diff --git a/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx b/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx index 3e797254..09370c41 100644 --- a/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx +++ b/src/components/page/meetingManagement/Skeleton/MeetingInformationSkeleton.tsx @@ -15,7 +15,7 @@ const MeetingInformationSkeleton = () => { export default MeetingInformationSkeleton; const SMeetingInformationSkeleton = styled('div', { - background: '$black80', + background: '$gray800', padding: '$32', borderRadius: '20px', mt: '$64', @@ -30,7 +30,7 @@ const SMeetingInformationSkeleton = styled('div', { }); const SImage = styled('div', { - background: '$black40', + background: '$gray600', borderRadius: '14px', width: '$167', height: '$109', @@ -50,7 +50,7 @@ const STextArea = styled('div', { const SLine = styled('div', { height: '$27', - background: '$black40', + background: '$gray600', borderRadius: '6px', }); diff --git a/src/components/tabList/TabList.tsx b/src/components/tabList/TabList.tsx index 45cbd894..3e418289 100644 --- a/src/components/tabList/TabList.tsx +++ b/src/components/tabList/TabList.tsx @@ -58,7 +58,7 @@ const STab = styled('li', { isSelected: { true: { color: '$gray10', - borderColor: `$gray40`, + borderColor: `$gray200`, }, false: { color: '$gray100', diff --git a/src/components/util/Divider.tsx b/src/components/util/Divider.tsx index daf7e59b..dc7af4c3 100644 --- a/src/components/util/Divider.tsx +++ b/src/components/util/Divider.tsx @@ -4,5 +4,5 @@ export const Divider = styled('div', { width: '100%', borderRadius: '1px', height: '1px', - backgroundColor: '$black80', + backgroundColor: '$gray800', }); diff --git a/src/hooks/useToast/Toast.tsx b/src/hooks/useToast/Toast.tsx index 6e9a947c..d620abd9 100644 --- a/src/hooks/useToast/Toast.tsx +++ b/src/hooks/useToast/Toast.tsx @@ -35,7 +35,7 @@ const ToastContainer = styled('div', { position: 'fixed', bottom: '-50px', left: '50%', - backgroundColor: '$black60', + backgroundColor: '$gray700', padding: '12px 20px 12px 16px', borderRadius: '2000px', zIndex: 999, diff --git a/stitches.config.ts b/stitches.config.ts index 8806f765..681cb312 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -7,13 +7,8 @@ const stitches = createStitches({ theme: { colors: { transparent: 'transparent', - gray40: '#c0c5c9', - black40: '#3c3d40', - black60: '#2c2d2e', black60_trans: 'rgba(24,24,24,0.6)', - black80: '#1c1d1e', black80_trans: 'rgba(24,24,24,0.8)', - black100: '#0f1010', red: '#d70067', ...colors, }, diff --git a/styles/globals.css b/styles/globals.css index c93f9285..d19f2014 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -73,7 +73,7 @@ html, body { padding: 0; margin: 0; - background-color: var(--colors-black100); + background-color: var(--colors-gray950); } html, @@ -277,4 +277,4 @@ input[type='number'] { * { box-sizing: border-box; -} \ No newline at end of file +} From b44b7a875f0ef9c85976332d5c859216e1354696 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 02:06:53 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=B6=94=EA=B0=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/disclosure/Disclosure.tsx | 4 ++-- src/components/feed/FeedCommentInput/FeedCommentInput.tsx | 2 +- .../feed/FeedCommentViewer/FeedCommentViewer.tsx | 4 ++-- src/components/feed/FeedPostViewer/FeedPostViewer.tsx | 2 +- src/components/feed/Modal/FeedFormPresentation.tsx | 2 +- src/components/form/CheckBox/NeedMentor.tsx | 8 ++++---- src/components/form/ErrorMessage/index.tsx | 2 +- src/components/form/HelpMessage/index.tsx | 2 +- src/components/form/Select/Button/index.tsx | 4 ++-- src/components/form/TextInput/index.tsx | 2 +- src/components/form/Textarea/index.tsx | 6 +++--- .../page/meetingDetail/MeetingController/index.tsx | 2 +- src/components/page/meetingList/Card/DesktopSizeCard.tsx | 4 ++-- .../page/meetingList/Card/MobileSize/ListType.tsx | 4 ++-- .../page/meetingList/Filter/Modal/Chip/ChipItem.tsx | 2 +- .../page/meetingList/Filter/Modal/Toggle/index.tsx | 2 +- .../page/meetingManagement/ManagementListItem.tsx | 4 ++-- stitches.config.ts | 1 + 18 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/components/disclosure/Disclosure.tsx b/src/components/disclosure/Disclosure.tsx index e5d02187..dcb6c4c0 100644 --- a/src/components/disclosure/Disclosure.tsx +++ b/src/components/disclosure/Disclosure.tsx @@ -67,7 +67,7 @@ const STitle = styled('h1', { }); const SSubTitle = styled('h4', { fontStyle: 'T4', - color: 'gray60', + color: 'gray300', '@mobile': { fontStyle: 'B4', }, @@ -120,7 +120,7 @@ const SCreatedAt = styled('span', { }); const SDate = styled('span', { fontStyle: 'B4', - color: '$gray60', + color: '$gray300', '@mobile': { fontStyle: 'C1', }, diff --git a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx index 71328a58..d3ad84ec 100644 --- a/src/components/feed/FeedCommentInput/FeedCommentInput.tsx +++ b/src/components/feed/FeedCommentInput/FeedCommentInput.tsx @@ -54,7 +54,7 @@ const CommentInput = styled('textarea', { outline: 'none', resize: 'none', '&::placeholder': { - color: '$gray60', + color: '$gray300', }, '@tablet': { height: '48px', diff --git a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx index b0a505d2..d2f95c19 100644 --- a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx +++ b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx @@ -123,9 +123,9 @@ const LikeWrapper = styled('div', { const LikeIconWrapper = styled('div', { width: '20px', height: '20px', - color: '$gray60', + color: '$gray300', }); const LikeCount = styled('span', { - color: '$gray60', + color: '$gray300', fontStyle: 'B4', }); diff --git a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx index 5057d6f8..ab7675c5 100644 --- a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx @@ -146,7 +146,7 @@ const AuthorName = styled('span', { fontStyle: 'H5', }); const UpdatedDate = styled('span', { - color: '$gray60', + color: '$gray300', fontStyle: 'B4', }); const ContentBody = styled('div', { diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx index 79803bc7..56e1a3d1 100644 --- a/src/components/feed/Modal/FeedFormPresentation.tsx +++ b/src/components/feed/Modal/FeedFormPresentation.tsx @@ -382,7 +382,7 @@ const SFileInput = styled('input', { }); const SImageCount = styled('p', { - color: '$gray60', + color: '$gray300', fontStyle: 'B1', }); diff --git a/src/components/form/CheckBox/NeedMentor.tsx b/src/components/form/CheckBox/NeedMentor.tsx index a75a7988..be0203bb 100644 --- a/src/components/form/CheckBox/NeedMentor.tsx +++ b/src/components/form/CheckBox/NeedMentor.tsx @@ -30,22 +30,22 @@ const SNeedMentorField = styled('label', { const SCheckIcon = styled(CheckIcon, { width: '12px', height: '12px', - color: '$gray60', + color: '$gray300', variants: { active: { // 임의처리 - true: { color: '$gray10' }, + true: { color: '$gray30' }, }, }, }); const SNeedMentorLabel = styled('span', { fontAg: '12_medium_100', lineHeight: '180%', - color: '$gray60', + color: '$gray300', variants: { active: { // 임의처리 - true: { color: '$gray10' }, + true: { color: '$gray30' }, }, }, cursor: 'pointer', diff --git a/src/components/form/ErrorMessage/index.tsx b/src/components/form/ErrorMessage/index.tsx index 76e2299e..d2d1bc1b 100644 --- a/src/components/form/ErrorMessage/index.tsx +++ b/src/components/form/ErrorMessage/index.tsx @@ -3,7 +3,7 @@ import { styled } from 'stitches.config'; const ErrorMessage = styled('span', { display: 'inline-block', fontAg: '12_medium_100', - color: '$red100', + color: '$error', }); export default ErrorMessage; diff --git a/src/components/form/HelpMessage/index.tsx b/src/components/form/HelpMessage/index.tsx index dba5efe8..3722279b 100644 --- a/src/components/form/HelpMessage/index.tsx +++ b/src/components/form/HelpMessage/index.tsx @@ -15,5 +15,5 @@ const SHelpMessage = styled('span', { marginBottom: 18, display: 'inline-block', fontAg: '14_medium_100', - color: '$gray100', + color: '$gray500', }); diff --git a/src/components/form/Select/Button/index.tsx b/src/components/form/Select/Button/index.tsx index 671f8da1..da0986cf 100644 --- a/src/components/form/Select/Button/index.tsx +++ b/src/components/form/Select/Button/index.tsx @@ -43,7 +43,7 @@ const SButton = styled('button', { variants: { isNotSelected: { true: { - color: '$gray100', + color: '$gray500', }, }, }, @@ -58,7 +58,7 @@ const SArrowDownIcon = styled(ArrowSmallDownIcon, { isNotSelected: { true: { '& path': { - stroke: '$gray100', + stroke: '$gray500', }, }, false: { diff --git a/src/components/form/TextInput/index.tsx b/src/components/form/TextInput/index.tsx index b7282043..6389ed53 100644 --- a/src/components/form/TextInput/index.tsx +++ b/src/components/form/TextInput/index.tsx @@ -51,7 +51,7 @@ const SInput = styled('input', { background: '$gray700', borderRadius: 10, '&::placeholder': { - color: '$gray100', + color: '$gray500', }, '@tablet': { diff --git a/src/components/form/Textarea/index.tsx b/src/components/form/Textarea/index.tsx index cd312ef4..73e70aa1 100644 --- a/src/components/form/Textarea/index.tsx +++ b/src/components/form/Textarea/index.tsx @@ -51,7 +51,7 @@ const STextarea = styled('textarea', { resize: 'none', borderRadius: 10, '&::placeholder': { - color: '$gray100', + color: '$gray500', }, }); const SBottomContainer = styled('div', { @@ -64,11 +64,11 @@ const STextCount = styled('span', { width: '100%', textAlign: 'right', fontAg: '12_medium_100', - color: '$gray60', + color: '$gray300', variants: { overflow: { true: { - color: '$red100', + color: '$error', }, }, }, diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx index 0b2a1704..66d0c941 100644 --- a/src/components/page/meetingDetail/MeetingController/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/index.tsx @@ -320,7 +320,7 @@ const SRecruitStatus = styled('div', { const SPeriod = styled('div', { fontAg: '20_bold_100', - color: '$gray60', + color: '$gray300', '@tablet': { fontStyle: 'T6', diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 7ac1447f..11bebdba 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -93,7 +93,7 @@ const SStatus = styled('div', { variants: { recruitingStatus: { 0: { - backgroundColor: '$gray100', + backgroundColor: '$gray600', }, 1: { backgroundColor: '$secondary', @@ -160,5 +160,5 @@ const SKey = styled(SInfo, { whiteSpace: 'nowrap', }); const SValue = styled(SInfo, { - color: '$gray60', + color: '$gray300', }); diff --git a/src/components/page/meetingList/Card/MobileSize/ListType.tsx b/src/components/page/meetingList/Card/MobileSize/ListType.tsx index 82729060..aaa57579 100644 --- a/src/components/page/meetingList/Card/MobileSize/ListType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/ListType.tsx @@ -127,7 +127,7 @@ const STitle = styled('p', { const SUserInfo = styled('p', { fontStyle: 'B4', - color: '$gray60', + color: '$gray300', '& + &': { ml: '$4', }, @@ -149,6 +149,6 @@ const SKey = styled(SInfo, { whiteSpace: 'nowrap', }); const SValue = styled(SInfo, { - color: '$gray60', + color: '$gray300', wordBreak: 'keep-all', }); diff --git a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx index f45a532d..aa4f2ed8 100644 --- a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx +++ b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx @@ -58,7 +58,7 @@ const SOption = styled('button', { }, '@tablet': { backgroundColor: '$gray600', - color: '$gray60', + color: '$gray300', }, }, }, diff --git a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx index 1a07e3af..551f595a 100644 --- a/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx +++ b/src/components/page/meetingList/Filter/Modal/Toggle/index.tsx @@ -57,7 +57,7 @@ const SSwitchWrapper = styled(Flex, { }); const SToggleDetailWord = styled('div', { fontAg: '16_medium_100', - color: '$gray60', + color: '$gray300', mt: '$1', mr: '$15', '@tablet': { diff --git a/src/components/page/meetingManagement/ManagementListItem.tsx b/src/components/page/meetingManagement/ManagementListItem.tsx index 9515b12a..998df16a 100644 --- a/src/components/page/meetingManagement/ManagementListItem.tsx +++ b/src/components/page/meetingManagement/ManagementListItem.tsx @@ -373,7 +373,7 @@ const SDate = styled('div', { const STime = styled('div', { ml: '$8', fontAg: '18_semibold_100', - color: '$gray60', + color: '$gray300', '@tablet': { ml: '$4', @@ -426,7 +426,7 @@ const SGeneration = styled('div', { const SCardGenerationAndPhone = styled('div', { mt: '$8', fontAg: '12_medium_100', - color: '$gray60', + color: '$gray300', whiteSpace: 'pre', }); diff --git a/stitches.config.ts b/stitches.config.ts index 681cb312..2386bc2b 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -9,6 +9,7 @@ const stitches = createStitches({ transparent: 'transparent', black60_trans: 'rgba(24,24,24,0.6)', black80_trans: 'rgba(24,24,24,0.8)', + black100: '#0f1012', red: '#d70067', ...colors, }, From bd06484b8e15790225fcee36962e808987abbc07 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 02:19:22 +0900 Subject: [PATCH 06/10] feat: gray100 -> gray500 --- pages/detail/index.tsx | 4 ++-- pages/mine/index.tsx | 2 +- src/components/button/Switch.tsx | 2 +- src/components/disclosure/Disclosure.tsx | 2 +- .../feed/FeedCommentViewer/FeedCommentViewer.tsx | 2 +- src/components/feed/FeedPostViewer/FeedPostViewer.tsx | 2 +- src/components/feed/Modal/FeedFormPresentation.tsx | 2 +- src/components/form/FormSwitch/FormSwitch.tsx | 2 +- src/components/form/Presentation/index.tsx | 2 +- .../Select/BottomSheetSelect/BottomSheetButton.tsx | 4 ++-- src/components/page/meetingDetail/Feed/FeedItem.tsx | 2 +- .../RecruitmentStatusList.tsx | 4 ++-- .../page/meetingList/Card/DesktopSizeCard.tsx | 2 +- .../page/meetingList/Card/MobileSize/CardType.tsx | 2 +- .../page/meetingList/Card/MobileSize/ListType.tsx | 4 ++-- src/components/page/meetingList/Card/Status.tsx | 2 +- .../page/meetingList/Filter/Modal/Chip/ChipItem.tsx | 2 +- .../page/meetingManagement/ManagementListItem.tsx | 10 +++++----- src/components/tabList/TabList.tsx | 2 +- 19 files changed, 27 insertions(+), 27 deletions(-) diff --git a/pages/detail/index.tsx b/pages/detail/index.tsx index a3a9f002..917273df 100644 --- a/pages/detail/index.tsx +++ b/pages/detail/index.tsx @@ -98,7 +98,7 @@ const STabButton = styled('button', { pb: '$24', mr: '$32', fontStyle: 'H1', - color: '$gray100', + color: '$gray500', '&:hover': { color: '$gray10', @@ -122,7 +122,7 @@ const STabButton = styled('button', { }, }, false: { - color: '$gray100', + color: '$gray500', paddingBottom: '$28', '@tablet': { paddingBottom: '$18', diff --git a/pages/mine/index.tsx b/pages/mine/index.tsx index 97adb47b..60372673 100644 --- a/pages/mine/index.tsx +++ b/pages/mine/index.tsx @@ -115,7 +115,7 @@ const STab = styled('button', { color: '$gray10', backgroundColor: '$gray600', }, - false: { color: '$gray100' }, + false: { color: '$gray500' }, }, }, '@tablet': { diff --git a/src/components/button/Switch.tsx b/src/components/button/Switch.tsx index d9a36109..24ca4aaa 100644 --- a/src/components/button/Switch.tsx +++ b/src/components/button/Switch.tsx @@ -27,7 +27,7 @@ const SSwitch = styled('button', { width: '28px', height: '16px', border: 'none', - backgroundColor: '$gray100', + backgroundColor: '$gray500', borderRadius: '20px', cursor: 'pointer', variants: { diff --git a/src/components/disclosure/Disclosure.tsx b/src/components/disclosure/Disclosure.tsx index dcb6c4c0..bc35c946 100644 --- a/src/components/disclosure/Disclosure.tsx +++ b/src/components/disclosure/Disclosure.tsx @@ -113,7 +113,7 @@ const SInfo = styled(Flex, { }); const SCreatedAt = styled('span', { fontStyle: 'T6', - color: '$gray100', + color: '$gray500', '@mobile': { fontStyle: 'C1', }, diff --git a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx index d2f95c19..6b163264 100644 --- a/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx +++ b/src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx @@ -89,7 +89,7 @@ const Name = styled('span', { const Date = styled('span', { display: 'inline-block', marginLeft: '4px', - color: '$gray100', + color: '$gray500', fontStyle: 'T6', }); const MenuItems = styled(Menu.Items, { diff --git a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx index ab7675c5..f775fa0b 100644 --- a/src/components/feed/FeedPostViewer/FeedPostViewer.tsx +++ b/src/components/feed/FeedPostViewer/FeedPostViewer.tsx @@ -212,7 +212,7 @@ const ViewCount = styled('span', { mt: '$16', mr: '$16', // TODO: design 체크 필요 > 체크 완료 alignSelf: 'flex-end', - color: '$gray100', + color: '$gray500', fontStyle: 'B4', '@tablet': { mr: '$0', diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx index 56e1a3d1..38f83715 100644 --- a/src/components/feed/Modal/FeedFormPresentation.tsx +++ b/src/components/feed/Modal/FeedFormPresentation.tsx @@ -261,7 +261,7 @@ const SSubmitButton = styled('button', { variants: { disabled: { true: { - color: '$gray100', + color: '$gray500', cursor: 'not-allowed', }, }, diff --git a/src/components/form/FormSwitch/FormSwitch.tsx b/src/components/form/FormSwitch/FormSwitch.tsx index cad810fa..c88fa95c 100644 --- a/src/components/form/FormSwitch/FormSwitch.tsx +++ b/src/components/form/FormSwitch/FormSwitch.tsx @@ -23,7 +23,7 @@ const SSwitchWrapper = styled('div', { alignItems: 'center', gap: '8px', fontAg: '16_medium_100', - color: '$gray100', + color: '$gray500', background: '$gray700', borderRadius: '10px', variants: { diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx index a7a9219c..bbe25a85 100644 --- a/src/components/form/Presentation/index.tsx +++ b/src/components/form/Presentation/index.tsx @@ -404,7 +404,7 @@ const SFileInputWrapper = styled('div', { }); const SApplicationFieldWrapper = styled('div', { display: 'flex', - color: '$gray100', + color: '$gray500', gap: '12px', }); const SApplicationField = styled('div', { diff --git a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx index 96f28168..693c1663 100644 --- a/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx +++ b/src/components/form/Select/BottomSheetSelect/BottomSheetButton.tsx @@ -40,7 +40,7 @@ const SButton = styled('button', { variants: { isNotSelected: { true: { - color: '$gray100', + color: '$gray500', }, }, }, @@ -55,7 +55,7 @@ const SArrowDownIcon = styled(ArrowSmallDownIcon, { isNotSelected: { true: { '& path': { - stroke: '$gray100', + stroke: '$gray500', }, }, false: { diff --git a/src/components/page/meetingDetail/Feed/FeedItem.tsx b/src/components/page/meetingDetail/Feed/FeedItem.tsx index d8bad744..ddc7d15c 100644 --- a/src/components/page/meetingDetail/Feed/FeedItem.tsx +++ b/src/components/page/meetingDetail/Feed/FeedItem.tsx @@ -181,7 +181,7 @@ const SName = styled('span', { const STime = styled('span', { ml: '$8', fontStyle: 'T6', - color: '$gray100', + color: '$gray500', }); const STitle = styled('div', { diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx index 237cc15b..544ddaf8 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/RecruitmentStatusList.tsx @@ -126,7 +126,7 @@ const SRecruitmentStatusItem = styled('div', { const SStatusText = styled('div', { ml: '$14', - color: '$gray100', + color: '$gray500', fontAg: '14_medium_100', variants: { @@ -135,7 +135,7 @@ const SStatusText = styled('div', { color: '$success', }, false: { - color: '$gray100', + color: '$gray500', }, }, }, diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 11bebdba..f56aaed7 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -155,7 +155,7 @@ const SInfo = styled('p', { }); const SKey = styled(SInfo, { width: '74px', - color: '$gray100', + color: '$gray500', mr: '$12', whiteSpace: 'nowrap', }); diff --git a/src/components/page/meetingList/Card/MobileSize/CardType.tsx b/src/components/page/meetingList/Card/MobileSize/CardType.tsx index 418d8c9f..9051663e 100644 --- a/src/components/page/meetingList/Card/MobileSize/CardType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/CardType.tsx @@ -45,7 +45,7 @@ const SStatus = styled('div', { variants: { recruitingStatus: { 0: { - backgroundColor: '$gray100', + backgroundColor: '$gray500', }, 1: { backgroundColor: '$secondary', diff --git a/src/components/page/meetingList/Card/MobileSize/ListType.tsx b/src/components/page/meetingList/Card/MobileSize/ListType.tsx index aaa57579..66d01db9 100644 --- a/src/components/page/meetingList/Card/MobileSize/ListType.tsx +++ b/src/components/page/meetingList/Card/MobileSize/ListType.tsx @@ -83,7 +83,7 @@ const SStatus = styled('div', { variants: { recruitingStatus: { 0: { - backgroundColor: '$gray100', + backgroundColor: '$gray500', }, 1: { backgroundColor: '$secondary', @@ -144,7 +144,7 @@ const SInfo = styled('p', { fontStyle: 'T6', }); const SKey = styled(SInfo, { - color: '$gray100', + color: '$gray500', mr: '$4', whiteSpace: 'nowrap', }); diff --git a/src/components/page/meetingList/Card/Status.tsx b/src/components/page/meetingList/Card/Status.tsx index 44183940..a41a898d 100644 --- a/src/components/page/meetingList/Card/Status.tsx +++ b/src/components/page/meetingList/Card/Status.tsx @@ -47,7 +47,7 @@ const SValue = styled('span', { color: '$success', }, 2: { - color: '$gray100', + color: '$gray500', }, }, }, diff --git a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx index aa4f2ed8..4e69d6b6 100644 --- a/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx +++ b/src/components/page/meetingList/Filter/Modal/Chip/ChipItem.tsx @@ -52,7 +52,7 @@ const SOption = styled('button', { }, false: { backgroundColor: '$gray950', - color: '$gray100', + color: '$gray500', '&:hover': { color: '$gray10', }, diff --git a/src/components/page/meetingManagement/ManagementListItem.tsx b/src/components/page/meetingManagement/ManagementListItem.tsx index 998df16a..760d3c87 100644 --- a/src/components/page/meetingManagement/ManagementListItem.tsx +++ b/src/components/page/meetingManagement/ManagementListItem.tsx @@ -324,7 +324,7 @@ const SVerticalLine = styled('div', { height: '$12', ml: '$30', mr: '$30', - backgroundColor: '$gray100', + backgroundColor: '$gray500', '@tablet': { display: 'none', @@ -378,7 +378,7 @@ const STime = styled('div', { '@tablet': { ml: '$4', fontAg: '12_medium_100', - color: '$gray100', + color: '$gray500', }, }); @@ -387,7 +387,7 @@ const SCardDateAndTime = styled('div', { gap: '$4', mt: '$13', fontAg: '10_medium_100', - color: '$gray100', + color: '$gray500', }); const SUserStatus = styled('span', { @@ -395,12 +395,12 @@ const SUserStatus = styled('span', { ml: '$10', borderRadius: '4px', fontAg: '12_semibold_100', - backgroundColor: '$gray100', + backgroundColor: '$gray500', variants: { status: { 0: { - backgroundColor: '$gray100', + backgroundColor: '$gray500', }, 1: { backgroundColor: '$success', diff --git a/src/components/tabList/TabList.tsx b/src/components/tabList/TabList.tsx index 3e418289..203e6887 100644 --- a/src/components/tabList/TabList.tsx +++ b/src/components/tabList/TabList.tsx @@ -61,7 +61,7 @@ const STab = styled('li', { borderColor: `$gray200`, }, false: { - color: '$gray100', + color: '$gray500', }, }, From 3606a19ac667754f9b1c39dd76d04c75f1d319a4 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Tue, 24 Oct 2023 02:26:48 +0900 Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EB=90=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/CheckBox/NeedMentor.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/form/CheckBox/NeedMentor.tsx b/src/components/form/CheckBox/NeedMentor.tsx index be0203bb..5f7e3117 100644 --- a/src/components/form/CheckBox/NeedMentor.tsx +++ b/src/components/form/CheckBox/NeedMentor.tsx @@ -33,8 +33,7 @@ const SCheckIcon = styled(CheckIcon, { color: '$gray300', variants: { active: { - // 임의처리 - true: { color: '$gray30' }, + true: { color: '$gray10' }, }, }, }); @@ -44,8 +43,7 @@ const SNeedMentorLabel = styled('span', { color: '$gray300', variants: { active: { - // 임의처리 - true: { color: '$gray30' }, + true: { color: '$gray10' }, }, }, cursor: 'pointer', From 2170c047b1c64eedf6b45ec29d60b87d4a90af98 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Wed, 25 Oct 2023 03:48:37 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EA=B0=92=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- stitches.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/stitches.config.ts b/stitches.config.ts index 2386bc2b..681cb312 100644 --- a/stitches.config.ts +++ b/stitches.config.ts @@ -9,7 +9,6 @@ const stitches = createStitches({ transparent: 'transparent', black60_trans: 'rgba(24,24,24,0.6)', black80_trans: 'rgba(24,24,24,0.8)', - black100: '#0f1012', red: '#d70067', ...colors, }, From 92bb3d6128caf861863cd6b485822422f7113da3 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Wed, 25 Oct 2023 19:23:44 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20@sopt-makers/playground-common=20?= =?UTF-8?q?=EB=B2=84=EC=A0=84=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/header/Header.tsx | 4 ---- yarn.lock | 9 +++++---- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 17616bd7..3e89ab8d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@nanostores/react": "^0.7.1", "@sentry/nextjs": "^7.51.0", "@sopt-makers/colors": "^2.2.0", - "@sopt-makers/playground-common": "^1.2.2", + "@sopt-makers/playground-common": "^1.3.2", "@stitches/react": "^1.2.8", "@tanstack/react-query": "^4.10.3", "axios": "^1.1.3", diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 2e114efb..e4124f04 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -55,10 +55,6 @@ const HeaderWrapper = styled('div', { left: 0, width: '100%', zIndex: '$1', - - '& > header': { - backgroundColor: '$gray950', - }, }); const SDesktopHeaderWrapper = styled(HeaderWrapper, { diff --git a/yarn.lock b/yarn.lock index 01e9411e..15212cbb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3574,15 +3574,16 @@ resolved "https://registry.yarnpkg.com/@sopt-makers/colors/-/colors-2.2.0.tgz#32be1c92c806d72f2e6893c094d446217ba3d7c8" integrity sha512-L91wbWPxuLc5qTR+UJ1N69WzYqv35Z+jR5Yo3DhZHhzKFUwUrp9xOMVQd1ezS0RJKBXS60MsouMf3s2jA4ukug== -"@sopt-makers/playground-common@^1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@sopt-makers/playground-common/-/playground-common-1.2.2.tgz#65d54f362017dad4c1fc1399ef9415ec6af03d80" - integrity sha512-4+ZoqO0uHf7B0wwvy8dsxmfooHGrOyp/E5ahprzacnnU4A+ePDfYpWaa3YSR5qJRbgWpeWmgMuEdPf8UGCFsJg== +"@sopt-makers/playground-common@^1.3.2": + version "1.3.2" + resolved "https://registry.yarnpkg.com/@sopt-makers/playground-common/-/playground-common-1.3.2.tgz#cb474772f1b4e19ebe25506a6429c3cee065add2" + integrity sha512-r+MdnMfruQLdRSMUreEQHvqNj01cmcj0f+wjQWXQuAMULP7Enviycbu5HKAdXo+x8V2xyRk+R+VTFPaczbiDhQ== dependencies: "@emotion/react" "^11.9.0" "@emotion/styled" "^11.8.1" "@radix-ui/react-dialog" "1.0.2" "@radix-ui/react-dropdown-menu" "2.0.2" + "@sopt-makers/colors" "^2.2.0" react-remove-scroll "2.5.5" "@stitches/react@^1.2.8": From 5fda459e858749f526bd36890ae627cca10e73e4 Mon Sep 17 00:00:00 2001 From: 100Gyeon Date: Mon, 13 Nov 2023 22:42:17 +0900 Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=EB=B0=B0=ED=8F=AC=20=ED=8A=B8?= =?UTF-8?q?=EB=A6=AC=EA=B1=B0=EC=9A=A9=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/page/meetingDetail/Feed/FeedPanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/page/meetingDetail/Feed/FeedPanel.tsx b/src/components/page/meetingDetail/Feed/FeedPanel.tsx index ab47e614..f505c687 100644 --- a/src/components/page/meetingDetail/Feed/FeedPanel.tsx +++ b/src/components/page/meetingDetail/Feed/FeedPanel.tsx @@ -122,6 +122,7 @@ const SMobileContainer = styled('div', { '& a:not(:first-child)::before': { content: '', display: 'none', + '@tablet': { display: 'block', width: '100vw',