From da9f79eb2268a3b3417bed39bdefabfd27c0d48b Mon Sep 17 00:00:00 2001 From: Seheon Yu Date: Thu, 21 Mar 2024 20:58:36 +0900 Subject: [PATCH] Update stylelint configuration and fix styling issues --- .pnp.cjs | 73 +++++++++++++++++++ .stylelintrc | 6 +- package.json | 4 +- src/components/atoms/Backdrop.tsx | 12 +-- src/components/atoms/Button.tsx | 25 ++++--- src/components/atoms/CheckBox.tsx | 33 +++++---- src/components/atoms/ConfirmationDialog.tsx | 60 +++++++-------- src/components/atoms/Divider.tsx | 2 +- src/components/atoms/Input.tsx | 32 ++++---- .../atoms/MyPage/PortfolioFileBlock.tsx | 11 ++- .../atoms/MyPage/PortfolioTicket.tsx | 10 ++- src/components/atoms/Select.tsx | 66 ++++++++--------- src/components/atoms/SocialLoginButton.tsx | 20 ++--- src/components/atoms/Toggle.tsx | 10 ++- src/components/molecules/HeaderLoginBlock.tsx | 3 +- src/components/molecules/HeaderNav.tsx | 20 +++-- .../molecules/HeaderNonLoginBlock.tsx | 2 +- .../molecules/MainDescriptionBlock.tsx | 10 +-- .../molecules/MainDescriptionCard.tsx | 21 ++++-- .../molecules/MyPage/MyInfoBlock.tsx | 2 +- .../molecules/MyPage/MyPageGridBlock.tsx | 2 +- .../molecules/MyPage/PositionBadge.tsx | 7 +- .../MyPage/RegisterPortfolioBlock.tsx | 12 ++- .../molecules/MyPage/TechSelectBlock.tsx | 8 +- src/components/molecules/Policies.tsx | 14 ++-- .../molecules/SignupProgressBar.tsx | 17 +++-- src/components/molecules/SocialLogin.tsx | 2 +- src/components/organisms/FooterContent.tsx | 6 +- src/components/organisms/HeaderContent.tsx | 3 +- .../organisms/MyPage/ActivityEdit.tsx | 1 + .../organisms/MyPage/MemberInfoEdit.tsx | 15 ++-- .../organisms/MyPage/MemberInformation.tsx | 2 +- .../organisms/MyPage/PortfolioInformation.tsx | 19 +++-- src/components/organisms/ProfileBlock.tsx | 10 ++- .../organisms/login/ActivityInfoPopup.tsx | 18 ++--- .../organisms/login/CompletePopup.tsx | 37 +++++----- src/components/organisms/login/LoginPopup.tsx | 39 +++++----- .../organisms/login/PersonalInfoPopup.tsx | 11 ++- .../organisms/login/PoliciesPopup.tsx | 39 +++++----- .../organisms/login/PositionInfoPopup.tsx | 39 +++++----- .../organisms/login/SkillInfoPopup.tsx | 30 ++++---- .../organisms/login/UserInfoPopup.tsx | 24 +++--- .../organisms/main/InfoMatchingBlock.tsx | 2 +- .../organisms/main/MyProjectBlock.tsx | 2 +- .../organisms/main/RecommendBlock.tsx | 2 +- src/components/templates/Footer.tsx | 2 + src/components/templates/Header.tsx | 8 +- src/components/templates/LoginCallback.tsx | 9 ++- .../templates/MyPage/InfoEditSection.tsx | 1 + .../templates/MyPage/MyInfoSection.tsx | 1 + .../templates/MyPage/ProfileSection.tsx | 21 ++++-- .../templates/main/FirstSection.tsx | 7 +- .../templates/main/FourthSection.tsx | 10 ++- .../templates/main/SecondSection.tsx | 1 + .../templates/main/ThirdSection.tsx | 29 +++++--- yarn.lock | 36 ++++++++- 56 files changed, 561 insertions(+), 347 deletions(-) diff --git a/.pnp.cjs b/.pnp.cjs index 3fba5da7..5dd8ef29 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -64,7 +64,9 @@ const RAW_RUNTIME_STATE = ["return-fetch", "npm:0.4.5"],\ ["storybook", "npm:8.0.0"],\ ["stylelint", "npm:16.2.1"],\ + ["stylelint-config-clean-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.4.1"],\ ["stylelint-config-standard", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:36.0.0"],\ + ["stylelint-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:6.0.4"],\ ["swiper", "npm:11.0.7"],\ ["typescript", "patch:typescript@npm%3A5.3.2#optional!builtin::version=5.3.2&hash=e012d7"],\ ["webpack", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.90.3"]\ @@ -10927,7 +10929,9 @@ const RAW_RUNTIME_STATE = ["return-fetch", "npm:0.4.5"],\ ["storybook", "npm:8.0.0"],\ ["stylelint", "npm:16.2.1"],\ + ["stylelint-config-clean-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.4.1"],\ ["stylelint-config-standard", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:36.0.0"],\ + ["stylelint-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:6.0.4"],\ ["swiper", "npm:11.0.7"],\ ["typescript", "patch:typescript@npm%3A5.3.2#optional!builtin::version=5.3.2&hash=e012d7"],\ ["webpack", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.90.3"]\ @@ -14737,6 +14741,28 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["postcss-sorting", [\ + ["npm:8.0.2", {\ + "packageLocation": "./.yarn/cache/postcss-sorting-npm-8.0.2-d9f7d43c59-955c72d8d7.zip/node_modules/postcss-sorting/",\ + "packageDependencies": [\ + ["postcss-sorting", "npm:8.0.2"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:df64623e2629f8e878a9d07eac9604618aad8efb316fd6c471319bf2ed3c8b008ee1e855c68ee6c40d03f21f52d094436e18485c12dacd67f129e3374acb86bf#npm:8.0.2", {\ + "packageLocation": "./.yarn/__virtual__/postcss-sorting-virtual-64535cd2e5/0/cache/postcss-sorting-npm-8.0.2-d9f7d43c59-955c72d8d7.zip/node_modules/postcss-sorting/",\ + "packageDependencies": [\ + ["postcss-sorting", "virtual:df64623e2629f8e878a9d07eac9604618aad8efb316fd6c471319bf2ed3c8b008ee1e855c68ee6c40d03f21f52d094436e18485c12dacd67f129e3374acb86bf#npm:8.0.2"],\ + ["@types/postcss", null],\ + ["postcss", "npm:8.4.38"]\ + ],\ + "packagePeers": [\ + "@types/postcss",\ + "postcss"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["postcss-styled-syntax", [\ ["npm:0.6.4", {\ "packageLocation": "./.yarn/cache/postcss-styled-syntax-npm-0.6.4-71a316891a-0f51e592d3.zip/node_modules/postcss-styled-syntax/",\ @@ -16815,6 +16841,29 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["stylelint-config-clean-order", [\ + ["npm:5.4.1", {\ + "packageLocation": "./.yarn/cache/stylelint-config-clean-order-npm-5.4.1-fd493d3869-0646faddc8.zip/node_modules/stylelint-config-clean-order/",\ + "packageDependencies": [\ + ["stylelint-config-clean-order", "npm:5.4.1"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.4.1", {\ + "packageLocation": "./.yarn/__virtual__/stylelint-config-clean-order-virtual-a21292a58e/0/cache/stylelint-config-clean-order-npm-5.4.1-fd493d3869-0646faddc8.zip/node_modules/stylelint-config-clean-order/",\ + "packageDependencies": [\ + ["stylelint-config-clean-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:5.4.1"],\ + ["@types/stylelint", null],\ + ["stylelint", "npm:16.2.1"],\ + ["stylelint-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:6.0.4"]\ + ],\ + "packagePeers": [\ + "@types/stylelint",\ + "stylelint"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["stylelint-config-recommended", [\ ["npm:14.0.0", {\ "packageLocation": "./.yarn/cache/stylelint-config-recommended-npm-14.0.0-59659a1741-4ad15c36e8.zip/node_modules/stylelint-config-recommended/",\ @@ -16860,6 +16909,30 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["stylelint-order", [\ + ["npm:6.0.4", {\ + "packageLocation": "./.yarn/cache/stylelint-order-npm-6.0.4-fa909cac07-9a1f6ba7ab.zip/node_modules/stylelint-order/",\ + "packageDependencies": [\ + ["stylelint-order", "npm:6.0.4"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:6.0.4", {\ + "packageLocation": "./.yarn/__virtual__/stylelint-order-virtual-df64623e26/0/cache/stylelint-order-npm-6.0.4-fa909cac07-9a1f6ba7ab.zip/node_modules/stylelint-order/",\ + "packageDependencies": [\ + ["stylelint-order", "virtual:67a01b8379dbfa206d4ad50c4ea9820edff287ac6e8e45e1c251d66e9a321bdbb9d5b5cf53117f97ad8d35663c2e78c57d82e9a46aa615d46102bbc530488947#npm:6.0.4"],\ + ["@types/stylelint", null],\ + ["postcss", "npm:8.4.38"],\ + ["postcss-sorting", "virtual:df64623e2629f8e878a9d07eac9604618aad8efb316fd6c471319bf2ed3c8b008ee1e855c68ee6c40d03f21f52d094436e18485c12dacd67f129e3374acb86bf#npm:8.0.2"],\ + ["stylelint", "npm:16.2.1"]\ + ],\ + "packagePeers": [\ + "@types/stylelint",\ + "stylelint"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["stylis", [\ ["npm:4.2.0", {\ "packageLocation": "./.yarn/cache/stylis-npm-4.2.0-6b07f11c99-a7128ad5a8.zip/node_modules/stylis/",\ diff --git a/.stylelintrc b/.stylelintrc index 91249261..d442b118 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,10 @@ { + "plugins": [ + "stylelint-order" + ], "extends": [ - "stylelint-config-standard" + "stylelint-config-standard", + "stylelint-config-clean-order" ], "customSyntax": "postcss-styled-syntax" } \ No newline at end of file diff --git a/package.json b/package.json index a681a6a2..b0906349 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,9 @@ "prettier": "^3.1.1", "storybook": "^8.0.0-alpha.8", "stylelint": "^16.2.1", + "stylelint-config-clean-order": "^5.4.1", "stylelint-config-standard": "^36.0.0", + "stylelint-order": "^6.0.4", "typescript": "5.3.2", "webpack": "^5.89.0" }, @@ -66,4 +68,4 @@ "prettier --write" ] } -} \ No newline at end of file +} diff --git a/src/components/atoms/Backdrop.tsx b/src/components/atoms/Backdrop.tsx index ce917267..d3ce0ac1 100644 --- a/src/components/atoms/Backdrop.tsx +++ b/src/components/atoms/Backdrop.tsx @@ -1,17 +1,17 @@ import styled from '@emotion/styled'; export const Backdrop = styled.div` - display: flex; - align-items: center; - justify-content: center; - position: fixed; + z-index: 100; top: 0; left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100vw; height: 100vh; - background: rgba(66, 66, 66, 0.4); - z-index: 100; + background: rgb(66 66 66 / 40%); `; diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx index ae13d484..c916953a 100644 --- a/src/components/atoms/Button.tsx +++ b/src/components/atoms/Button.tsx @@ -20,36 +20,36 @@ const ButtonSizeCSS = ({ height }: ButtonProps) => { switch (height) { case '20': return css` - padding: 0 8px; height: 20px; + padding: 0 8px; font-size: 12px; font-weight: 400; `; case '30': return css` - padding: 0 24px; height: 30px; + padding: 0 24px; font-size: 12px; font-weight: 400; `; case '50': return css` - padding: 0 48px; height: 50px; + padding: 0 48px; font-size: 20px; font-weight: 500; `; case '60': return css` - padding: 0 27px; height: 60px; + padding: 0 27px; font-size: 20px; font-weight: 700; `; case '70': return css` - padding: 0 37px; height: 70px; + padding: 0 37px; font-size: 20px; font-weight: 700; `; @@ -60,18 +60,20 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => { switch (color) { case 'primary': return css` - background-color: #ffffff; color: #ff706c; + background-color: #fff; border: 1px solid #ff706c; + &:hover { background-color: #ffeae9; } `; case 'secondary': return css` - background-color: #ffffff; color: #bdbdbd; + background-color: #fff; border: 1px solid #bdbdbd; + &:hover { background-color: #fafafa; } @@ -83,6 +85,7 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => { return css` color: ${disabled ? '#FFC7C6' : '#ffffff'}; background-color: ${disabled ? '#FFA7A5' : '#ff706c'}; + &:hover { color: ${disabled ? '#FFC7C6' : '#E0E0E0'}; background-color: ${disabled ? '#FFA7A5' : '#ee5550'}; @@ -92,6 +95,7 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => { return css` color: ${disabled ? '#9E9E9E' : '#000000'}; background-color: ${disabled ? '#EEEEEE' : '#bdbdbd'}; + &:hover { background-color: ${disabled ? '#EEEEEE' : '#9e9e9e'}; } @@ -100,12 +104,13 @@ const ButtonColorCSS = ({ variant, color, disabled }: ButtonProps) => { } }; const StyledButton = styled.button` - border: none; - color: #ffffff; + color: #fff; letter-spacing: -0.6px; - transition-property: background-color color; + border: none; + transition-duration: 0.2s; + transition-property: background-color color; ${ButtonVariantsCSS} ${ButtonSizeCSS} ${ButtonColorCSS}; diff --git a/src/components/atoms/CheckBox.tsx b/src/components/atoms/CheckBox.tsx index 51dce94a..dcda398b 100644 --- a/src/components/atoms/CheckBox.tsx +++ b/src/components/atoms/CheckBox.tsx @@ -6,29 +6,31 @@ import styled from '@emotion/styled'; import { Icons } from '#/components/atoms/Icons'; const StyledIcon = styled(Icons)` - display: none; + pointer-events: none; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - pointer-events: none; + + display: none; width: 14px; height: 14px; `; const inputColorCSS = css` + background-color: #fff; border-color: #9e9e9e; - background-color: #ffffff; &:disabled { - border-color: #eeeeee; - background-color: #ffffff; + background-color: #fff; + border-color: #eee; } &:checked { + background-color: #fff; border-color: #ff706c; - background-color: #ffffff; + ${StyledIcon} { display: block; @@ -37,8 +39,8 @@ const inputColorCSS = css` } &:checked:disabled { + background-color: #fff; border-color: #ffc7c6; - background-color: #ffffff; + ${StyledIcon} { display: block; @@ -48,28 +50,29 @@ const inputColorCSS = css` `; const StyledContainer = styled.div` - display: inline-block; position: relative; - padding: 0; - padding-inline: 0; - padding-block: 0; + + display: inline-block; width: 24px; height: 24px; + padding: 0; + padding-block: 0; + padding-inline: 0; `; const StyledInput = styled.input` - appearance: none; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; - margin: 2px; + flex-shrink: 0; width: 20px; height: 20px; - flex-shrink: 0; + margin: 2px; - border-width: 1px; + appearance: none; border-style: solid; + border-width: 1px; border-radius: 2px; ${inputColorCSS} diff --git a/src/components/atoms/ConfirmationDialog.tsx b/src/components/atoms/ConfirmationDialog.tsx index ed1b871f..92f4e51e 100644 --- a/src/components/atoms/ConfirmationDialog.tsx +++ b/src/components/atoms/ConfirmationDialog.tsx @@ -3,19 +3,22 @@ import { useEffect, useRef } from 'react'; import styled from '@emotion/styled'; const Backdrop = styled.div` - display: flex; - justify-content: center; - align-items: center; - position: fixed; top: 0; left: 0; + + display: flex; + align-items: center; + justify-content: center; + width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 30%); + + background-color: rgb(0 0 0 / 30%); `; const DialogContainer = styled.div` + overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; @@ -23,47 +26,44 @@ const DialogContainer = styled.div` width: 460px; height: 260px; - background-color: #ffffff; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); - - color: #000000; - text-align: center; - font-size: 20px; - font-style: normal; font-weight: 700; + font-style: normal; line-height: normal; + color: #000; + text-align: center; letter-spacing: -0.6px; + + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgb(0 0 0 / 25%); `; const TextContainer = styled.div` display: flex; flex-direction: column; gap: 8px; - justify-content: center; align-items: center; - height: 100%; + justify-content: center; - color: #000000; - text-align: center; + height: 100%; font-size: 20px; - font-style: normal; font-weight: 700; + font-style: normal; line-height: normal; + color: #000; + text-align: center; letter-spacing: -0.6px; `; const HelperText = styled.span` - color: #757575; - text-align: center; - font-size: 16px; - font-style: normal; font-weight: 500; + font-style: normal; line-height: normal; + color: #757575; + text-align: center; letter-spacing: -0.6px; `; @@ -73,20 +73,20 @@ const ButtonContainer = styled.div` `; const Button = styled.button<{ primary?: boolean }>` - width: 100%; - height: 80px; cursor: pointer; - border: none; - background-color: ${({ primary }) => (primary ? '#FF706C' : '#eeeeee')}; - - color: ${({ primary }) => (primary ? '#ffffff' : '#424242')}; + width: 100%; + height: 80px; font-size: 20px; - font-style: normal; font-weight: 700; + font-style: normal; line-height: normal; + color: ${({ primary }) => (primary ? '#ffffff' : '#424242')}; letter-spacing: -0.6px; + + background-color: ${({ primary }) => (primary ? '#FF706C' : '#eeeeee')}; + border: none; `; interface ConfirmationDialogProps { diff --git a/src/components/atoms/Divider.tsx b/src/components/atoms/Divider.tsx index e641efa7..3183b125 100644 --- a/src/components/atoms/Divider.tsx +++ b/src/components/atoms/Divider.tsx @@ -3,5 +3,5 @@ import styled from '@emotion/styled'; export const Divider = styled.hr` width: 100%; margin: 0; - border-top: 1px solid #eeeeee; + border-top: 1px solid #eee; `; diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx index 6be6679d..b8fdf731 100644 --- a/src/components/atoms/Input.tsx +++ b/src/components/atoms/Input.tsx @@ -8,7 +8,6 @@ const InputContainer = styled.div<{ width?: string }>` display: flex; flex-direction: column; gap: 5px; - width: ${({ width }) => width}; `; @@ -19,10 +18,9 @@ interface CommonInputProps { } const CommonInput = styled.input` - appearance: none; - width: 100%; padding: 10px; + appearance: none; ${({ typo }) => TxtSizeCSS({ size: typo })} ${({ weight }) => TxtWeightCSS({ weight })} @@ -30,32 +28,36 @@ const CommonInput = styled.input` const FilledInput = styled(CommonInput)` padding: 10px; - border: 1px solid #eeeeee; - border-radius: 5px; - background: ${({ error }) => (error ? 'rgba(255, 8, 0, 0.2)' : '#eeeeee')}; - &:focus { - outline: 2px solid #ffc7c6; - border: 1px solid #ff706c; - background: ${({ error }) => (error ? 'rgba(255, 8, 0, 0.1)' : '#fff')}; - } color: #212121; + + background: ${({ error }) => (error ? 'rgba(255, 8, 0, 0.2)' : '#eeeeee')}; + border: 1px solid #eee; + border-radius: 5px; + &::placeholder { color: #9e9e9e; } + + &:focus { + background: ${({ error }) => (error ? 'rgba(255, 8, 0, 0.1)' : '#fff')}; + border: 1px solid #ff706c; + outline: 2px solid #ffc7c6; + } `; const StandardInput = styled(CommonInput)` padding: 10px 0; + color: #212121; border-bottom: 3px solid #ff908d; - &:focus { - border-bottom: 3px solid #ff706c; - } - color: #212121; &::placeholder { color: #bdbdbd; } + + &:focus { + border-bottom: 3px solid #ff706c; + } `; interface HelperTextProps { diff --git a/src/components/atoms/MyPage/PortfolioFileBlock.tsx b/src/components/atoms/MyPage/PortfolioFileBlock.tsx index d9d487ed..9cfb7e68 100644 --- a/src/components/atoms/MyPage/PortfolioFileBlock.tsx +++ b/src/components/atoms/MyPage/PortfolioFileBlock.tsx @@ -18,17 +18,22 @@ const BlockEmptyCss = ({ isEmpty }: PortfolioFileBlockProps) => { }; const Block = styled.div` position: relative; + display: flex; flex-direction: column; - align-items: center; gap: 12px; + align-items: center; + width: 92px; height: 98px; padding: 20px 10px 0; - border-radius: 5px; + + text-align: center; word-break: keep-all; white-space: pre-wrap; - text-align: center; + + border-radius: 5px; + ${BlockEmptyCss} `; const CancelButton = styled.div` diff --git a/src/components/atoms/MyPage/PortfolioTicket.tsx b/src/components/atoms/MyPage/PortfolioTicket.tsx index 7348114a..b6798b16 100644 --- a/src/components/atoms/MyPage/PortfolioTicket.tsx +++ b/src/components/atoms/MyPage/PortfolioTicket.tsx @@ -5,20 +5,24 @@ import { Txt } from '#atoms/Text'; const Portfolio = styled.div` position: relative; + display: flex; - align-items: center; gap: 5px; + align-items: center; + width: 100%; height: 25px; padding: 0 9px; - border-radius: 5px; + border: 1px solid #ff908d; + border-radius: 5px; `; const DeleteButton = styled.div` position: absolute; top: 50%; - transform: translateY(-50%); right: 10px; + transform: translateY(-50%); + display: flex; `; diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx index 4bd3b746..b18f22ef 100644 --- a/src/components/atoms/Select.tsx +++ b/src/components/atoms/Select.tsx @@ -25,7 +25,7 @@ function getColorCSS({ error, value }: SelectProps) { } else if (value !== undefined) { return css` color: #212121; - background-color: #ffffff; + background-color: #fff; border-color: #9e9e9e; &:hover, @@ -36,7 +36,7 @@ function getColorCSS({ error, value }: SelectProps) { } else { return css` color: #bdbdbd; - background-color: #ffffff; + background-color: #fff; border-color: #9e9e9e; &:hover, @@ -62,6 +62,8 @@ const ArrowIcon = styled(Icons)<{ error: boolean; opened: boolean }>` width: 12px; height: 12px; + transition: 0.25s; + ${({ error, opened }) => error ? css` @@ -70,109 +72,104 @@ const ArrowIcon = styled(Icons)<{ error: boolean; opened: boolean }>` : css` color: ${opened ? '#ff706c' : '#bdbdbd'}; `} - ${({ opened }) => opened && css` transform: translateY(-50%) rotate(-180deg); `} - - transition: 0.25s; `; const SelectButton = styled.button` - appearance: none; - border: 1px solid #9e9e9e; - border-radius: 4px; - padding: 10px; + position: relative; width: 100%; height: 30px; + padding: 10px; - text-align: left; font-size: 12px; - font-style: normal; font-weight: 400; + font-style: normal; line-height: normal; + text-align: left; letter-spacing: -0.6px; - position: relative; + appearance: none; + border: 1px solid #9e9e9e; + border-radius: 4px; ${(props) => getColorCSS(props)}; `; const OptionList = styled.ul` - z-index: 999; - position: absolute; + z-index: 10; top: calc(100%); left: 0; - width: 100%; + width: 100%; margin: 0; padding: 0; - border-radius: 5px; - border: 1px solid #eeeeee; background-color: #f5f5f5; - box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.15); - z-index: 10; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: 2px 4px 8px 0 rgb(0 0 0 / 15%); `; const HelperText = styled.div<{ error?: boolean }>` width: 100%; - color: ${({ error }) => (error ? '#ff0800' : '#9e9e9e')}; - text-align: right; font-size: 8px; - font-style: normal; font-weight: 400; + font-style: normal; line-height: normal; + color: ${({ error }) => (error ? '#ff0800' : '#9e9e9e')}; + text-align: right; letter-spacing: -0.4px; `; const OptionGroupContainer = styled.div` margin-top: 8px; - - background-color: #ffffff; + background-color: #fff; `; const OptionGroupLabel = styled.div` padding: 4px 12px; - color: #bdbdbd; font-size: 9px; - font-style: normal; font-weight: 500; + font-style: normal; line-height: normal; + color: #bdbdbd; letter-spacing: -0.45px; `; const OptionGroupHr = styled.hr` width: 100%; margin: 0; - border: 1px solid #eeeeee; + border: 1px solid #eee; `; const OptionItem = styled.li<{ selected: boolean }>` cursor: pointer; - list-style-type: none; + + position: relative; padding: 10px; - background-color: #ffffff; - color: ${({ selected }) => (selected ? '#ff706c' : '#616161')}; font-size: 12px; - font-style: normal; font-weight: 400; + font-style: normal; line-height: normal; + color: ${({ selected }) => (selected ? '#ff706c' : '#616161')}; letter-spacing: -0.6px; + list-style-type: none; + + background-color: #fff; &:hover { - background-color: #eeeeee; + background-color: #eee; } - - position: relative; `; const OptionItemCheckIcon = styled(Icons)` @@ -183,6 +180,7 @@ const OptionItemCheckIcon = styled(Icons)` width: 8px; height: 8px; + color: #ff706c; `; diff --git a/src/components/atoms/SocialLoginButton.tsx b/src/components/atoms/SocialLoginButton.tsx index 284d6ecc..9191596f 100644 --- a/src/components/atoms/SocialLoginButton.tsx +++ b/src/components/atoms/SocialLoginButton.tsx @@ -12,17 +12,19 @@ import { SocialPlatform } from '#/entities/socialPlatform'; import { useLoginPageQuery } from '#/redux/features/auth/api'; const StyledButton = styled(Button)` - width: 300px; - border-radius: 10px; - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); - display: flex; - justify-content: center; align-items: center; + justify-content: center; + + width: 300px; + + border-radius: 10px; + box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%); transition: all 0.2s ease-in-out; + &:hover { - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 20px 0 rgb(0 0 0 / 20%); } ${({ loginServer }) => { @@ -38,13 +40,13 @@ const StyledButton = styled(Button)` } &:disabled { - background-color: rgba(251, 232, 12, 0.5); + background-color: rgb(251 232 12 / 50%); } `; case 'google': return css` color: #616161; - background-color: #ffffff; + background-color: #fff; &:hover { color: #212121; @@ -52,7 +54,7 @@ const StyledButton = styled(Button)` } &:disabled { - background-color: rgba(255, 255, 255, 0.5); + background-color: rgb(255 255 255 / 50%); } `; } diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx index 5ddc3c65..6fef319f 100644 --- a/src/components/atoms/Toggle.tsx +++ b/src/components/atoms/Toggle.tsx @@ -1,23 +1,29 @@ import styled from '@emotion/styled'; const ToggleOutBlock = styled.label>` + cursor: pointer; + position: relative; + display: flex; align-items: center; + width: 38px; height: 20px; + background-color: ${({ checked }) => (checked ? '#FF706C' : '#bdbdbd')}; border-radius: 10px; transition: background-color 0.2s ease-in-out; - cursor: pointer; `; const ToggleInBlock = styled.div>` position: absolute; left: ${({ checked }) => (checked ? '20.2px' : '1.8px')}; + width: 16px; height: 16px; - background-color: #ffffff; + + background-color: #fff; border-radius: 50%; transition: left 0.2s ease-in-out; diff --git a/src/components/molecules/HeaderLoginBlock.tsx b/src/components/molecules/HeaderLoginBlock.tsx index ab320cee..85a570c9 100644 --- a/src/components/molecules/HeaderLoginBlock.tsx +++ b/src/components/molecules/HeaderLoginBlock.tsx @@ -11,11 +11,12 @@ const LoginButton = styled(Button)` display: flex; gap: 12px; align-items: center; + padding: 0 23px; + font-family: SpoqaHanSansNeo, sans-serif; font-size: 18px; font-weight: 400; - font-family: 'SpoqaHanSansNeo'; `; export const HeaderLoginBlock = () => { const dispatch = useAppDispatch(); diff --git a/src/components/molecules/HeaderNav.tsx b/src/components/molecules/HeaderNav.tsx index 1ac4f5a2..1d994889 100644 --- a/src/components/molecules/HeaderNav.tsx +++ b/src/components/molecules/HeaderNav.tsx @@ -12,27 +12,35 @@ const NavBlock = styled.div` `; const NavLink = styled.div<{ isCurrent: boolean }>` position: relative; + display: flex; align-items: center; justify-content: center; + height: 100%; padding: 18px 50px 0; - span { - display: flex; - align-items: center; - height: 80px; - } + &::after { content: ''; + position: absolute; - bottom: 0px; + bottom: 0; + display: block; + width: ${({ isCurrent }) => (isCurrent ? '150px' : '0px')}; height: 3px; + background: #ff706c; border-radius: 3px; } + span { + display: flex; + align-items: center; + height: 80px; + } + &:hover { &::after { width: 150px; diff --git a/src/components/molecules/HeaderNonLoginBlock.tsx b/src/components/molecules/HeaderNonLoginBlock.tsx index 3155c7f2..9e83779a 100644 --- a/src/components/molecules/HeaderNonLoginBlock.tsx +++ b/src/components/molecules/HeaderNonLoginBlock.tsx @@ -4,8 +4,8 @@ import { Icons } from '#atoms/Icons'; const FlexBlock = styled.div` display: flex; - align-items: center; gap: 36px; + align-items: center; `; export const HeaderNonLoginBlock = () => { diff --git a/src/components/molecules/MainDescriptionBlock.tsx b/src/components/molecules/MainDescriptionBlock.tsx index 6a7cba28..a88401dd 100644 --- a/src/components/molecules/MainDescriptionBlock.tsx +++ b/src/components/molecules/MainDescriptionBlock.tsx @@ -9,21 +9,21 @@ import { Txt } from '#atoms/Text'; const Block = styled.div` display: flex; - justify-content: space-between; align-items: end; - margin-bottom: 70px; + justify-content: space-between; + margin-bottom: 100px; `; const TextBlock = styled.div` display: flex; flex-direction: column; - text-align: left; gap: 20px; + text-align: left; `; const LinkButton = styled(Button)` display: flex; - justify-content: center; - align-items: center; gap: 13px; + align-items: center; + justify-content: center; `; interface MainDescriptionBlockProps { diff --git a/src/components/molecules/MainDescriptionCard.tsx b/src/components/molecules/MainDescriptionCard.tsx index 8127aebc..c0325157 100644 --- a/src/components/molecules/MainDescriptionCard.tsx +++ b/src/components/molecules/MainDescriptionCard.tsx @@ -5,27 +5,32 @@ import styled from '@emotion/styled'; import { Txt } from '#atoms/Text'; const Card = styled.div<{ width: number; height: number }>` + z-index: 1; + display: flex; gap: 30px; + width: ${({ width }) => width}px; height: ${({ height }) => height}px; - padding: 46px; - border-radius: 40px; + padding: 40px; + background: #fff; - box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1); - z-index: 1; + border-radius: 40px; + box-shadow: 0 0 40px 0 rgb(0 0 0 / 10%); `; -const Index = styled(Txt)``; const ContentBlock = styled.div` display: flex; flex-direction: column; - width: 100%; gap: 20px; + + width: 100%; + text-align: left; white-space: pre-wrap; `; const ImageBlock = styled.div` position: relative; + display: flex; align-items: center; width: 100%; @@ -61,9 +66,9 @@ export const MainDescriptionCard = ({ return ( {index && ( - + {index.toString().padStart(2, '0')} - + )} diff --git a/src/components/molecules/MyPage/MyInfoBlock.tsx b/src/components/molecules/MyPage/MyInfoBlock.tsx index 4be58ddb..9842698c 100644 --- a/src/components/molecules/MyPage/MyInfoBlock.tsx +++ b/src/components/molecules/MyPage/MyInfoBlock.tsx @@ -13,8 +13,8 @@ const InfoTitle = styled(Txt)` const InfoBlock = styled.div` width: calc(100% - 144px); padding: 28px 33px 28px 46px; - border-radius: 11px; border: 1px solid #e0e0e0; + border-radius: 11px; `; interface MyInfoBlockProps { diff --git a/src/components/molecules/MyPage/MyPageGridBlock.tsx b/src/components/molecules/MyPage/MyPageGridBlock.tsx index 5b3d9918..bfedef52 100644 --- a/src/components/molecules/MyPage/MyPageGridBlock.tsx +++ b/src/components/molecules/MyPage/MyPageGridBlock.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; export const MyPageGridBlock = styled.div` display: grid; - gap: 33px 0; grid-template-columns: 1fr 1fr; + gap: 33px 0; margin-bottom: 23px; `; diff --git a/src/components/molecules/MyPage/PositionBadge.tsx b/src/components/molecules/MyPage/PositionBadge.tsx index 230c2a62..0869905a 100644 --- a/src/components/molecules/MyPage/PositionBadge.tsx +++ b/src/components/molecules/MyPage/PositionBadge.tsx @@ -5,14 +5,17 @@ import styled from '@emotion/styled'; import { Txt } from '#atoms/Text'; const BadgeBlock = styled.div<{ selected: boolean }>` + cursor: pointer; + display: flex; align-items: center; justify-content: center; + height: 25px; padding: 0 24px; - border-radius: 5px; + border: 1px solid ${({ selected }) => (selected ? '#FF908D' : '#9E9E9E')}; - cursor: pointer; + border-radius: 5px; `; interface PositionBadgeProps { diff --git a/src/components/molecules/MyPage/RegisterPortfolioBlock.tsx b/src/components/molecules/MyPage/RegisterPortfolioBlock.tsx index b536d4b8..81b26f97 100644 --- a/src/components/molecules/MyPage/RegisterPortfolioBlock.tsx +++ b/src/components/molecules/MyPage/RegisterPortfolioBlock.tsx @@ -25,13 +25,15 @@ const PortfolioUrlInput = styled.input` width: 100%; height: 32px; padding: 11px 35px 10px 10px; - border-radius: 5px; - border: 1px solid #bdbdbd; - font-family: 'SpoqaHanSansNeo'; + font-family: SpoqaHanSansNeo, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: -0.6px; + + border: 1px solid #bdbdbd; + border-radius: 5px; + ::placeholder { color: #9e9e9e; } @@ -39,14 +41,16 @@ const PortfolioUrlInput = styled.input` const UploadButton = styled.div` position: absolute; top: 50%; - transform: translateY(-50%); right: 9px; + transform: translateY(-50%); + display: flex; `; const PortfolioList = styled.div` display: flex; flex-direction: column; gap: 8px; + width: 100%; margin-top: 20px; `; diff --git a/src/components/molecules/MyPage/TechSelectBlock.tsx b/src/components/molecules/MyPage/TechSelectBlock.tsx index 3296d068..f46c093b 100644 --- a/src/components/molecules/MyPage/TechSelectBlock.tsx +++ b/src/components/molecules/MyPage/TechSelectBlock.tsx @@ -8,18 +8,20 @@ import { PositionBadge } from './PositionBadge'; const TechContainer = styled.div` width: 449px; min-height: 178px; - padding: 7px 20px; margin: 28px 0 0 8px; - border-radius: 11px; + padding: 7px 20px; + border: 1px solid #e0e0e0; + border-radius: 11px; `; const TechType = styled.div` display: flex; justify-content: space-between; border-bottom: 1px solid #eee; + span { - padding: 11px 5px; cursor: pointer; + padding: 11px 5px; } `; const TechListBlock = styled.div` diff --git a/src/components/molecules/Policies.tsx b/src/components/molecules/Policies.tsx index 82bcc215..300583e6 100644 --- a/src/components/molecules/Policies.tsx +++ b/src/components/molecules/Policies.tsx @@ -11,23 +11,23 @@ import { Icons } from '#atoms/Icons'; import { Txt } from '#atoms/Text'; const Container = styled.div` - width: 700px; - padding: 40px 0; - display: flex; flex-direction: column; gap: 30px; - border-radius: 10px; - border: 1px solid #e0e0e0; + width: 700px; + padding: 40px 0; + background: #fff; + border: 1px solid #e0e0e0; + border-radius: 10px; `; const PolicyContainer = styled.div` - padding: 0 40px; display: flex; flex-direction: column; gap: 20px; + padding: 0 40px; `; const PolicyHeader = styled.div` @@ -38,8 +38,8 @@ const PolicyHeader = styled.div` const CheckBoxContainer = styled.div` display: flex; - align-items: center; gap: 20px; + align-items: center; `; const ExpandButtonContainer = styled.div` diff --git a/src/components/molecules/SignupProgressBar.tsx b/src/components/molecules/SignupProgressBar.tsx index 4f097c85..1581f674 100644 --- a/src/components/molecules/SignupProgressBar.tsx +++ b/src/components/molecules/SignupProgressBar.tsx @@ -7,27 +7,26 @@ import { Txt } from '#/components/atoms/Text'; import { ProgressBar, ProgressBarProps } from '#molecules/ProgressBar'; const StyledProgressBar = styled(ProgressBar)` - border-radius: 15px 15px 0 0; overflow: hidden; + border-radius: 15px 15px 0 0; `; const Container = styled.div` + overflow: hidden; display: flex; flex-direction: column; gap: 40px; width: 100%; - - overflow: hidden; `; const ButtonsContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; - padding: 0 45px; width: 100%; + padding: 0 45px; `; const IconButton = styled(Icons)<{ disabled: boolean }>` @@ -37,14 +36,16 @@ const IconButton = styled(Icons)<{ disabled: boolean }>` const TextContainer = styled.div` display: flex; flex-direction: row; - align-items: center; gap: 6px; + align-items: center; padding: 8px 16px; - border-radius: 50px; - border: 1px solid #ff706c; - background: #fff; + color: #ff706c; + + background: #fff; + border: 1px solid #ff706c; + border-radius: 50px; `; interface SignupProgressBarProps extends Omit { diff --git a/src/components/molecules/SocialLogin.tsx b/src/components/molecules/SocialLogin.tsx index 3de1f995..603548ca 100644 --- a/src/components/molecules/SocialLogin.tsx +++ b/src/components/molecules/SocialLogin.tsx @@ -5,8 +5,8 @@ import { SocialLoginButton } from '#atoms/SocialLoginButton'; const Column = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 20px; + align-items: center; `; interface SocialLoginProps { diff --git a/src/components/organisms/FooterContent.tsx b/src/components/organisms/FooterContent.tsx index e4591719..fb276677 100644 --- a/src/components/organisms/FooterContent.tsx +++ b/src/components/organisms/FooterContent.tsx @@ -18,8 +18,8 @@ const FlexBlock = styled.div` `; const PolicyLinkBlock = styled.div` display: flex; - align-items: flex-end; gap: 13px; + align-items: flex-end; `; const PolicyDivider = styled.div` width: 1px; @@ -28,14 +28,14 @@ const PolicyDivider = styled.div` background-color: #bdbdbd; `; const FooterDivider = styled(Divider)` - border-top: 1px solid #bdbdbd; margin: 23px 0 39px; + border-top: 1px solid #bdbdbd; `; const TxtBlock = styled.div` display: flex; flex-direction: column; - white-space: pre-wrap; gap: 11px; + white-space: pre-wrap; `; const LinkBlock = styled.div` display: flex; diff --git a/src/components/organisms/HeaderContent.tsx b/src/components/organisms/HeaderContent.tsx index 3d8cde7b..3032ccd8 100644 --- a/src/components/organisms/HeaderContent.tsx +++ b/src/components/organisms/HeaderContent.tsx @@ -8,14 +8,15 @@ const ContentBlock = styled.div` display: flex; align-items: center; justify-content: space-between; + width: 1200px; height: 100%; margin: 0 auto; `; const HeaderLeftBlock = styled.div` display: flex; - align-items: center; gap: 128px; + align-items: center; height: 100%; `; const HeaderRightBlock = styled.div` diff --git a/src/components/organisms/MyPage/ActivityEdit.tsx b/src/components/organisms/MyPage/ActivityEdit.tsx index d4148129..933dac00 100644 --- a/src/components/organisms/MyPage/ActivityEdit.tsx +++ b/src/components/organisms/MyPage/ActivityEdit.tsx @@ -12,6 +12,7 @@ const PositionBlock = styled.div` display: flex; flex-wrap: wrap; gap: 10px 16px; + width: 90%; margin: 24px 0 0 8px; `; diff --git a/src/components/organisms/MyPage/MemberInfoEdit.tsx b/src/components/organisms/MyPage/MemberInfoEdit.tsx index 127ca196..bd7962a5 100644 --- a/src/components/organisms/MyPage/MemberInfoEdit.tsx +++ b/src/components/organisms/MyPage/MemberInfoEdit.tsx @@ -11,18 +11,21 @@ import { MyInfoBlock } from '#molecules/MyPage/MyInfoBlock'; import { MyPageGridBlock } from '#molecules/MyPage/MyPageGridBlock'; const StyledTextarea = styled.textarea` + resize: vertical; + width: 100%; min-height: 73px; - padding: 12px; margin-bottom: 39px; - border-radius: 5px; - border: 1px solid #bdbdbd; - resize: vertical; + padding: 12px; - font-family: 'SpoqaHanSansNeo'; + font-family: SpoqaHanSansNeo, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: -0.8px; + + border: 1px solid #bdbdbd; + border-radius: 5px; + &::placeholder { color: #bdbdbd; } @@ -48,10 +51,10 @@ const FlexBlock = styled.div` gap: 16px; `; const Label = styled.label` + cursor: pointer; display: flex; gap: 9px; align-items: center; - cursor: pointer; `; export const MemberInfoEdit = () => { const [isPublicPhone, setIsPublicPhone] = useState(false); diff --git a/src/components/organisms/MyPage/MemberInformation.tsx b/src/components/organisms/MyPage/MemberInformation.tsx index 4ff10a28..6ec99daf 100644 --- a/src/components/organisms/MyPage/MemberInformation.tsx +++ b/src/components/organisms/MyPage/MemberInformation.tsx @@ -20,10 +20,10 @@ const FlexBlock = styled.div` gap: 16px; `; const Label = styled.label` + cursor: pointer; display: flex; gap: 9px; align-items: center; - cursor: pointer; `; export const MemberInformation = () => { diff --git a/src/components/organisms/MyPage/PortfolioInformation.tsx b/src/components/organisms/MyPage/PortfolioInformation.tsx index 5be6734c..3a508ce5 100644 --- a/src/components/organisms/MyPage/PortfolioInformation.tsx +++ b/src/components/organisms/MyPage/PortfolioInformation.tsx @@ -15,10 +15,12 @@ const TechBadge = styled(Txt)` display: flex; align-items: center; justify-content: center; + height: 19px; padding: 0 17px; - border-radius: 33px; + background: #ffeae9; + border-radius: 33px; `; const TechListWrapper = styled.div` display: flex; @@ -32,16 +34,19 @@ const PortfolioContent = styled.div` const ClipBlock = styled.div` display: flex; flex-direction: column; + gap: 12px; align-items: center; justify-content: center; - gap: 12px; + width: 92px; height: 98px; padding: 0 10px; - border-radius: 5px; - border: 1px solid #e0e0e0; - word-break: keep-all; + text-align: center; + word-break: keep-all; + + border: 1px solid #e0e0e0; + border-radius: 5px; `; const PortfolioList = styled.div` display: flex; @@ -52,11 +57,13 @@ const PortfolioList = styled.div` const Portfolio = styled.div` display: flex; align-items: center; + width: 100%; height: 25px; padding: 0 9px; - border-radius: 5px; + border: 1px solid #ff908d; + border-radius: 5px; `; export const PortfolioInformation = () => { diff --git a/src/components/organisms/ProfileBlock.tsx b/src/components/organisms/ProfileBlock.tsx index 48d77809..ff56449f 100644 --- a/src/components/organisms/ProfileBlock.tsx +++ b/src/components/organisms/ProfileBlock.tsx @@ -13,18 +13,22 @@ const ProfileImage = styled(Image)` border-radius: 50%; `; const EditButton = styled.label` + cursor: pointer; + position: absolute; right: 0; bottom: 10px; + display: flex; - justify-content: center; align-items: center; + justify-content: center; + width: 50px; height: 50px; + background-color: #fff; + border: 1px solid #eee; border-radius: 50%; - border: 1px solid #eeeeee; - cursor: pointer; `; const ProfileInput = styled.input` display: none; diff --git a/src/components/organisms/login/ActivityInfoPopup.tsx b/src/components/organisms/login/ActivityInfoPopup.tsx index 4e0bc858..11e2c40d 100644 --- a/src/components/organisms/login/ActivityInfoPopup.tsx +++ b/src/components/organisms/login/ActivityInfoPopup.tsx @@ -1,8 +1,7 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect } from 'react'; import styled from '@emotion/styled'; -import { User } from '#/entities/user'; import { AuthStep, updateAuth } from '#/redux/features/auth/slice'; import { useUpdateMeMutation } from '#/redux/features/user/api'; import { useAppDispatch, useAppSelector } from '#/redux/hooks'; @@ -13,6 +12,8 @@ import { RegionSelect } from '#molecules/RegionSelect'; import { SignupProgressBar } from '#molecules/SignupProgressBar'; const Container = styled.div` + position: relative; + display: flex; flex-direction: column; align-items: center; @@ -21,17 +22,15 @@ const Container = styled.div` width: 830px; height: 680px; + background: #fff; border-radius: 15px; - background: #ffffff; - - position: relative; `; const TitleContainer = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 20px; + align-items: center; `; const FormContainer = styled.div` @@ -40,6 +39,7 @@ const FormContainer = styled.div` gap: 45px; width: 550px; + color: #9e9e9e; `; @@ -54,8 +54,6 @@ const StyledSelect = styled(Select)` height: 36px; `; -const Spacer = styled.div``; - export const ActivityInfoPopup = () => { const dispatch = useAppDispatch(); const me = useAppSelector((state) => state.user.me); @@ -132,8 +130,8 @@ export const ActivityInfoPopup = () => { - - +
+
); }; diff --git a/src/components/organisms/login/CompletePopup.tsx b/src/components/organisms/login/CompletePopup.tsx index 91fc6ba5..f5528071 100644 --- a/src/components/organisms/login/CompletePopup.tsx +++ b/src/components/organisms/login/CompletePopup.tsx @@ -16,6 +16,8 @@ import { Toggle } from '#atoms/Toggle'; import { Button } from '../../atoms/Button'; const Container = styled.div` + position: relative; + display: flex; flex-direction: column; align-items: center; @@ -24,45 +26,46 @@ const Container = styled.div` width: 830px; height: 680px; + background: #fff; border-radius: 15px; - background: #ffffff; - - position: relative; `; const ProfileVisibilityToggleContainer = styled.div` position: absolute; top: 40px; left: 50px; + display: flex; align-items: center; `; const CrossButton = styled(Icons)` + cursor: pointer; + position: absolute; top: 40px; right: 50px; - @media (max-width: 768px) { - top: 15px; - right: 10px; - } + display: flex; + align-items: center; + justify-content: center; width: 40px; height: 40px; padding: 8px; - border-radius: 50%; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; + border-radius: 50%; transition: all 0.2s ease-in-out; &:hover { background-color: #e0e0e0; } + + @media (width <= 768px) { + top: 15px; + right: 10px; + } `; const ContentContainer = styled.div` @@ -78,14 +81,14 @@ const Tooltip = styled.div<{ show: boolean }>` padding: 8px; - border-radius: 5px; - background-color: #212121b2; - color: #ffffff; + color: #fff; + white-space: nowrap; + opacity: ${({ show }) => (show ? 1 : 0)}; + background-color: #212121b2; + border-radius: 5px; transition: opacity 0.2s ease-in-out; - - white-space: nowrap; `; const HeaderText = styled(Txt)` diff --git a/src/components/organisms/login/LoginPopup.tsx b/src/components/organisms/login/LoginPopup.tsx index b6bd03e9..06339bcf 100644 --- a/src/components/organisms/login/LoginPopup.tsx +++ b/src/components/organisms/login/LoginPopup.tsx @@ -14,47 +14,50 @@ import { Txt } from '#atoms/Text'; const Container = styled.div` position: relative; - @media (min-width: 768px) { - width: 480px; - height: 500px; - } - @media (max-width: 768px) { - padding: 30px 20px; - } - display: flex; flex-direction: column; align-items: center; justify-content: center; - border-radius: 15px; background: linear-gradient(180deg, #f0f3ff 0%, #fff 100%); + border-radius: 15px; + + @media (width >= 768px) { + width: 480px; + height: 500px; + } + + @media (width <= 768px) { + padding: 30px 20px; + } `; const CrossButton = styled.div` + cursor: pointer; + position: absolute; top: 28px; right: 28px; - @media (max-width: 768px) { - top: 15px; - right: 10px; - } + display: flex; + align-items: center; + justify-content: center; width: 50px; height: 50px; - border-radius: 50%; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; + border-radius: 50%; transition: all 0.2s ease-in-out; &:hover { background-color: #e0e0e0; } + + @media (width <= 768px) { + top: 15px; + right: 10px; + } `; export const LoginPopup = () => { diff --git a/src/components/organisms/login/PersonalInfoPopup.tsx b/src/components/organisms/login/PersonalInfoPopup.tsx index 57e84726..85001765 100644 --- a/src/components/organisms/login/PersonalInfoPopup.tsx +++ b/src/components/organisms/login/PersonalInfoPopup.tsx @@ -14,6 +14,8 @@ import { CareerSelect } from '#molecules/CareerSelect'; import { SignupProgressBar } from '#molecules/SignupProgressBar'; const Container = styled.div` + position: relative; + display: flex; flex-direction: column; align-items: center; @@ -22,32 +24,29 @@ const Container = styled.div` width: 830px; height: 680px; + background: #fff; border-radius: 15px; - background: #ffffff; - - position: relative; `; const TitleContainer = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 20px; + align-items: center; `; const FormContainer = styled.div` display: flex; flex-direction: column; gap: 45px; - width: 550px; `; const InputContainer = styled.div` display: flex; flex-direction: column; - justify-content: space-between; gap: 16px; + justify-content: space-between; `; const InputLabel = styled(Txt)` diff --git a/src/components/organisms/login/PoliciesPopup.tsx b/src/components/organisms/login/PoliciesPopup.tsx index 1c4f2c70..691b4d73 100644 --- a/src/components/organisms/login/PoliciesPopup.tsx +++ b/src/components/organisms/login/PoliciesPopup.tsx @@ -18,51 +18,54 @@ import { PoliciesBox } from '#molecules/Policies'; const Container = styled.div` position: relative; - @media (min-width: 768px) { - width: 768px; - } - @media (max-width: 768px) { - padding: 30px 20px; - } - display: flex; flex-direction: column; align-items: center; - border-radius: 15px; background: linear-gradient(180deg, #f0f3ff 0%, #fff 100%); + border-radius: 15px; + + @media (width >= 768px) { + width: 768px; + } + + @media (width <= 768px) { + padding: 30px 20px; + } `; const Header = styled.div` - width: 100%; display: flex; justify-content: center; - padding: 34px 0 30px 0; + width: 100%; + padding: 34px 0 30px; - border-radius: 15px 15px 0 0; background-color: #fafafa; + border-radius: 15px 15px 0 0; `; const Body = styled.div` - width: 100%; - height: 100%; display: flex; flex-direction: column; - align-items: center; gap: 16px; + align-items: center; - padding: 50px 0 60px 0; + width: 100%; + height: 100%; + padding: 50px 0 60px; - border-radius: 0 0 15px 15px; background-color: #fff; + border-radius: 0 0 15px 15px; `; const HelperTextContainer = styled.div` - width: 700px; - padding: 0 8px; display: flex; justify-content: end; + + width: 700px; + padding: 0 8px; + color: #9e9e9e; `; diff --git a/src/components/organisms/login/PositionInfoPopup.tsx b/src/components/organisms/login/PositionInfoPopup.tsx index 05e44aa7..f84b337f 100644 --- a/src/components/organisms/login/PositionInfoPopup.tsx +++ b/src/components/organisms/login/PositionInfoPopup.tsx @@ -21,6 +21,8 @@ import { useUpdateMeMutation } from '#/redux/features/user/api'; import { useAppDispatch, useAppSelector } from '#/redux/hooks'; const Container = styled.div` + position: relative; + display: flex; flex-direction: column; align-items: center; @@ -29,60 +31,61 @@ const Container = styled.div` width: 830px; height: 680px; + background: linear-gradient(180deg, #fff 0%, #fff2f1 91.5%, #ffeae9 100%); border-radius: 15px; - background: linear-gradient(180deg, #ffffff 0%, #fff2f1 91.5%, #ffeae9 100%); - - position: relative; `; const PositionContainer = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 23px; + align-items: center; `; const PositionCards = styled.div` display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: center; + flex-flow: row wrap; gap: 40px; + justify-content: center; `; const PositionCard = styled.div<{ selected: boolean }>` + cursor: pointer; + + z-index: 1; + display: flex; flex-direction: column; + gap: 16px; align-items: center; justify-content: center; - gap: 16px; - z-index: 1; width: 180px; height: 200px; - border-radius: 20px; - border: 1px solid ${({ selected }) => (selected ? '#ff706c' : '#fff')}; - background: #fff; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); - - cursor: pointer; color: ${({ selected }) => (selected ? '#FF706C' : '#9e9e9e')}; + background: #fff; + border: 1px solid ${({ selected }) => (selected ? '#ff706c' : '#fff')}; + border-radius: 20px; + box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%); + transition: 0.3s; + &:hover { - box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 40px rgb(0 0 0 / 20%); } `; const PositionImageContainer = styled.div` + overflow: hidden; display: flex; align-items: center; justify-content: center; - overflow: hidden; width: 112px; height: 112px; + background-color: #ffeae9; border-radius: 50%; `; @@ -91,10 +94,10 @@ const BackgroundImage1 = styled(Image)` position: absolute; top: 470px; left: 30px; + transform: rotate(-15deg); width: 221px; height: 221px; - transform: rotate(-15deg); filter: blur(1.5px); `; diff --git a/src/components/organisms/login/SkillInfoPopup.tsx b/src/components/organisms/login/SkillInfoPopup.tsx index a1d56cbd..7509cb83 100644 --- a/src/components/organisms/login/SkillInfoPopup.tsx +++ b/src/components/organisms/login/SkillInfoPopup.tsx @@ -19,6 +19,8 @@ import { Txt } from '#atoms/Text'; import { SignupProgressBar } from '#molecules/SignupProgressBar'; const Container = styled.div` + position: relative; + display: flex; flex-direction: column; align-items: center; @@ -27,24 +29,22 @@ const Container = styled.div` width: 830px; height: 680px; + background: #fff; border-radius: 15px; - background: #ffffff; - - position: relative; `; const HeaderContainer = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 20px; + align-items: center; `; const ContentsContainer = styled.div` display: flex; flex-direction: column; - align-items: end; gap: 10px; + align-items: end; `; const PositionTabContainer = styled.div` @@ -55,36 +55,32 @@ const PositionTabContainer = styled.div` const PositionTabs = styled.div` display: flex; gap: 10px; - padding: 10px; `; const PositionTab = styled(Button)<{ selected?: boolean; loading?: boolean }>` flex-grow: 1; - + color: ${({ selected }) => (selected ? '#ff706c' : '#9e9e9e')}; + background-color: ${({ loading }) => (loading ? '#f5f5f5' : 'transparent')}; animation: ${({ loading }) => loading ? 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite' : 'none'}; - background-color: ${({ loading }) => (loading ? '#f5f5f5' : 'transparent')}; - color: ${({ selected }) => (selected ? '#ff706c' : '#9e9e9e')}; &:hover { - background-color: #f5f5f5; color: ${({ selected }) => (selected ? '#ff706c' : '#000000')}; + background-color: #f5f5f5; } `; const SkillsContainer = styled.div` + overflow-y: scroll; display: flex; flex-wrap: wrap; - align-content: flex-start; gap: 30px; + align-content: flex-start; width: 720px; - - padding: 36px; height: 220px; - - overflow-y: scroll; + padding: 36px; `; const SkillButton = styled(Button)<{ loading?: boolean }>` @@ -93,10 +89,10 @@ const SkillButton = styled(Button)<{ loading?: boolean }>` ${({ loading }) => loading && css` - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + width: 150px; background-color: #f5f5f5; border: none; - width: 150px; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; `} `; diff --git a/src/components/organisms/login/UserInfoPopup.tsx b/src/components/organisms/login/UserInfoPopup.tsx index f638f042..efaf09ec 100644 --- a/src/components/organisms/login/UserInfoPopup.tsx +++ b/src/components/organisms/login/UserInfoPopup.tsx @@ -19,49 +19,51 @@ const Container = styled.div` align-items: center; justify-content: space-evenly; - background-color: #fff; width: 830px; height: 680px; + padding: 20px; + background-color: #fff; border-radius: 15px; - padding: 20px; `; const ProfileImage = styled.div` + cursor: pointer; + + overflow: hidden; display: flex; flex-direction: column; + gap: 8px; align-items: center; justify-content: center; - gap: 8px; width: 164px; height: 164px; - border-radius: 50%; - border: 1px solid #e0e0e0; color: #bdbdbd; - cursor: pointer; + + border: 1px solid #e0e0e0; + border-radius: 50%; transition: box-shadow 0.3s; + &:hover { - box-shadow: 0px 0px 164px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 164px rgb(0 0 0 / 10%); } - - overflow: hidden; `; const NicknameContainer = styled.div` display: flex; flex-direction: column; - align-items: end; gap: 8px; + align-items: end; `; const StyledInput = styled.input` width: 400px; + padding: 10px; border: none; border-bottom: 3px solid #ff908d; - padding: 10px; &::placeholder { color: #bdbdbd; diff --git a/src/components/organisms/main/InfoMatchingBlock.tsx b/src/components/organisms/main/InfoMatchingBlock.tsx index 897050b5..de6b1525 100644 --- a/src/components/organisms/main/InfoMatchingBlock.tsx +++ b/src/components/organisms/main/InfoMatchingBlock.tsx @@ -22,10 +22,10 @@ const CardSwiper = styled(Swiper)` } `; const BackgroundImage = styled(Image)` + pointer-events: none; position: absolute; top: 30px; left: -360px; - pointer-events: none; `; const BlurBlock = styled.div` position: absolute; diff --git a/src/components/organisms/main/MyProjectBlock.tsx b/src/components/organisms/main/MyProjectBlock.tsx index 46f7dca9..a2978399 100644 --- a/src/components/organisms/main/MyProjectBlock.tsx +++ b/src/components/organisms/main/MyProjectBlock.tsx @@ -15,10 +15,10 @@ const CardWrapper = styled.div` gap: 19px; `; const BackgroundImage = styled(Image)` + pointer-events: none; position: absolute; top: 870px; left: -300px; - pointer-events: none; `; const CardInfo = [ diff --git a/src/components/organisms/main/RecommendBlock.tsx b/src/components/organisms/main/RecommendBlock.tsx index 523ba15e..aa4bd0c4 100644 --- a/src/components/organisms/main/RecommendBlock.tsx +++ b/src/components/organisms/main/RecommendBlock.tsx @@ -15,10 +15,10 @@ const CardWrapper = styled.div` gap: 19px; `; const BackgroundImage = styled(Image)` + pointer-events: none; position: absolute; top: 815px; left: -105px; - pointer-events: none; `; const CardInfo = [ diff --git a/src/components/templates/Footer.tsx b/src/components/templates/Footer.tsx index 01fa167e..2467c108 100644 --- a/src/components/templates/Footer.tsx +++ b/src/components/templates/Footer.tsx @@ -7,8 +7,10 @@ import { FooterContent } from '#organisms/FooterContent'; const StyledFooter = styled.footer` display: flex; justify-content: center; + width: 100%; height: 393px; + background-color: #f5f5f5; border-top: 1px solid #bdbdbd; `; diff --git a/src/components/templates/Header.tsx b/src/components/templates/Header.tsx index e881278e..9507aef1 100644 --- a/src/components/templates/Header.tsx +++ b/src/components/templates/Header.tsx @@ -11,11 +11,11 @@ const SpaceCSS = css` `; const StyledHeader = styled.header` position: fixed; - ${SpaceCSS} - - border-bottom: 1px solid #eee; - background: #fff; z-index: 3; + background: #fff; + border-bottom: 1px solid #eee; + + ${SpaceCSS} `; const HeaderSpace = styled.div` ${SpaceCSS} diff --git a/src/components/templates/LoginCallback.tsx b/src/components/templates/LoginCallback.tsx index 87f315d6..707c9f81 100644 --- a/src/components/templates/LoginCallback.tsx +++ b/src/components/templates/LoginCallback.tsx @@ -13,16 +13,17 @@ import { useAppDispatch } from '#/redux/hooks'; import { Txt } from '#atoms/Text'; const Container = styled.div` - width: 100%; - height: 100vh; - display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; - background-color: #eeeeee; + width: 100%; + height: 100vh; + + background-color: #eee; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; `; diff --git a/src/components/templates/MyPage/InfoEditSection.tsx b/src/components/templates/MyPage/InfoEditSection.tsx index ec89765a..a6010875 100644 --- a/src/components/templates/MyPage/InfoEditSection.tsx +++ b/src/components/templates/MyPage/InfoEditSection.tsx @@ -9,6 +9,7 @@ const StyledSection = styled.section` display: flex; flex-direction: column; gap: 19px; + width: 100%; max-width: 1200px; margin: 0 auto; diff --git a/src/components/templates/MyPage/MyInfoSection.tsx b/src/components/templates/MyPage/MyInfoSection.tsx index 4e76b3ac..9556a3eb 100644 --- a/src/components/templates/MyPage/MyInfoSection.tsx +++ b/src/components/templates/MyPage/MyInfoSection.tsx @@ -10,6 +10,7 @@ const StyledSection = styled.section` display: flex; flex-direction: column; gap: 19px; + width: 100%; max-width: 1200px; margin: 0 auto; diff --git a/src/components/templates/MyPage/ProfileSection.tsx b/src/components/templates/MyPage/ProfileSection.tsx index b8182005..0a91c1d4 100644 --- a/src/components/templates/MyPage/ProfileSection.tsx +++ b/src/components/templates/MyPage/ProfileSection.tsx @@ -12,8 +12,9 @@ import { ProfileBlock } from '#organisms/ProfileBlock'; const StyledSection = styled.section` display: flex; flex-direction: column; - align-items: center; gap: 21px; + align-items: center; + width: 100%; max-width: 1200px; margin: 130px auto 20px; @@ -26,26 +27,32 @@ const HighLight = styled.span` `; const ExposeProfile = styled.div` position: relative; + display: flex; + gap: 9px; align-items: center; + margin-left: auto; - gap: 9px; `; const Tooltip = styled(Image)` - margin: 0 -5px 3px; cursor: pointer; + margin: 0 -5px 3px; `; const ExplainModal = styled.div` position: absolute; + bottom: -32px; + left: -7px; + display: flex; align-items: center; - left: -7px; - bottom: -32px; + height: 28px; padding: 0 7px; - border-radius: 5px; - background: #212121b2; + white-space: nowrap; + + background: #212121b2; + border-radius: 5px; `; interface ProfileSectionProps { diff --git a/src/components/templates/main/FirstSection.tsx b/src/components/templates/main/FirstSection.tsx index 2901ef58..24af7a82 100644 --- a/src/components/templates/main/FirstSection.tsx +++ b/src/components/templates/main/FirstSection.tsx @@ -8,20 +8,23 @@ import { Txt } from '#atoms/Text'; const StyledSection = styled.section` position: relative; + + overflow: hidden; display: flex; justify-content: center; + width: 100%; max-width: 1920px; height: 1117px; margin: 0 auto; - overflow: hidden; `; const ContentBlock = styled.div` display: flex; flex-direction: column; + gap: 12px; + width: 1200px; margin: 130px 0; - gap: 12px; `; const MainTxt = styled(Txt)` font-size: 80px; diff --git a/src/components/templates/main/FourthSection.tsx b/src/components/templates/main/FourthSection.tsx index 899e8efb..8ffaac08 100644 --- a/src/components/templates/main/FourthSection.tsx +++ b/src/components/templates/main/FourthSection.tsx @@ -7,16 +7,20 @@ import { MyProjectBlock } from '#organisms/main/MyProjectBlock'; import { RecommendBlock } from '#organisms/main/RecommendBlock'; const StyledSection = styled.section` + position: relative; + display: flex; flex-direction: column; align-items: center; - position: relative; + width: 100%; max-width: 1920px; margin: 0 auto; - white-space: pre-wrap; + text-align: center; - background: linear-gradient(90deg, #f0f3ff 0%, rgba(240, 243, 255, 0) 100%); + white-space: pre-wrap; + + background: linear-gradient(90deg, #f0f3ff 0%, rgb(240 243 255 / 0%) 100%); `; export const FourthSection = () => { diff --git a/src/components/templates/main/SecondSection.tsx b/src/components/templates/main/SecondSection.tsx index e0e63bfc..bd95b3b0 100644 --- a/src/components/templates/main/SecondSection.tsx +++ b/src/components/templates/main/SecondSection.tsx @@ -9,6 +9,7 @@ import { Txt } from '#atoms/Text'; const StyledSection = styled.section` display: flex; justify-content: center; + width: 100%; max-width: 1920px; margin: 0 auto; diff --git a/src/components/templates/main/ThirdSection.tsx b/src/components/templates/main/ThirdSection.tsx index 19d3809f..4c1d3a6f 100644 --- a/src/components/templates/main/ThirdSection.tsx +++ b/src/components/templates/main/ThirdSection.tsx @@ -7,51 +7,60 @@ import styled from '@emotion/styled'; import { Txt } from '#atoms/Text'; const StyledSection = styled.section` + position: relative; + display: flex; flex-direction: column; align-items: center; justify-content: flex-start; - position: relative; + width: 100%; max-width: 1920px; - padding: 552px 0 100px; margin: 0 auto; - white-space: pre-wrap; + padding: 552px 0 100px; + text-align: center; + white-space: pre-wrap; `; const Title = styled(Txt)` display: block; margin-bottom: 400px; `; const BackgroundImage = styled(Image)` + pointer-events: none; + position: absolute; + z-index: -1; top: -70px; + width: 100%; height: 2000px; - pointer-events: none; - z-index: -1; `; const Block = styled.div` display: flex; - justify-content: center; align-items: center; + justify-content: center; + width: 373px; height: 136px; margin-bottom: 46px; - border-radius: 23px; + border: 1px solid #bdbdbd; + border-radius: 23px; `; const FilledBlock = styled.div` display: flex; flex-direction: column; - justify-content: center; align-items: center; + justify-content: center; + width: 471px; height: 216px; margin: 39px 0 325px; - border-radius: 23px; - border: 1px solid #bdbdbd; + background: #ff706c; + border: 1px solid #bdbdbd; + border-radius: 23px; `; export const ThirdSection = () => { diff --git a/yarn.lock b/yarn.lock index 84e37fd9..a9565111 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8012,7 +8012,9 @@ __metadata: return-fetch: "npm:^0.4.5" storybook: "npm:^8.0.0-alpha.8" stylelint: "npm:^16.2.1" + stylelint-config-clean-order: "npm:^5.4.1" stylelint-config-standard: "npm:^36.0.0" + stylelint-order: "npm:^6.0.4" swiper: "npm:^11.0.5" typescript: "npm:5.3.2" webpack: "npm:^5.89.0" @@ -11271,6 +11273,15 @@ __metadata: languageName: node linkType: hard +"postcss-sorting@npm:^8.0.2": + version: 8.0.2 + resolution: "postcss-sorting@npm:8.0.2" + peerDependencies: + postcss: ^8.4.20 + checksum: 10c0/955c72d8d71b6b54dcdcbcef765a593803512d215cef12a49b71d1abf8ab8d2dacb5645dbb5a0a6535609aab6bffb834599d6073f28fe61e589a4437af85e243 + languageName: node + linkType: hard + "postcss-styled-syntax@npm:^0.6.4": version: 0.6.4 resolution: "postcss-styled-syntax@npm:0.6.4" @@ -11311,7 +11322,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.38": +"postcss@npm:^8.4.32, postcss@npm:^8.4.38": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -13023,6 +13034,17 @@ __metadata: languageName: node linkType: hard +"stylelint-config-clean-order@npm:^5.4.1": + version: 5.4.1 + resolution: "stylelint-config-clean-order@npm:5.4.1" + dependencies: + stylelint-order: "npm:^6.0.4" + peerDependencies: + stylelint: ">=14" + checksum: 10c0/0646faddc8a6fe6c4db0b74634d8308af857d28cf7b386a70f11ae79e8d417a4a626958ca1586becf10babb0b0af9d7a02f6645e7660c3c9daf49506acea1003 + languageName: node + linkType: hard + "stylelint-config-recommended@npm:^14.0.0": version: 14.0.0 resolution: "stylelint-config-recommended@npm:14.0.0" @@ -13043,6 +13065,18 @@ __metadata: languageName: node linkType: hard +"stylelint-order@npm:^6.0.4": + version: 6.0.4 + resolution: "stylelint-order@npm:6.0.4" + dependencies: + postcss: "npm:^8.4.32" + postcss-sorting: "npm:^8.0.2" + peerDependencies: + stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1 + checksum: 10c0/9a1f6ba7ab04855462bfae28fe36ad2a297fec56f42da2f588b57295b89b72e6f517d5e35ecbcefb11fcc373f3db40f0e6a8eefb41a4d267550ac6324f12a3ca + languageName: node + linkType: hard + "stylelint@npm:^16.2.1": version: 16.2.1 resolution: "stylelint@npm:16.2.1"