From bdefd99f45bca091bc7d3ba2ba63c056fafa7dfb Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:09:33 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20Accordion=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Accordion/Accordion.stories.tsx | 51 +++++++++++++++ .../src/components/common/Accordion/index.tsx | 39 +++++++++++ .../src/components/common/Accordion/style.ts | 64 +++++++++++++++++++ 3 files changed, 154 insertions(+) create mode 100644 frontend/src/components/common/Accordion/Accordion.stories.tsx create mode 100644 frontend/src/components/common/Accordion/index.tsx create mode 100644 frontend/src/components/common/Accordion/style.ts diff --git a/frontend/src/components/common/Accordion/Accordion.stories.tsx b/frontend/src/components/common/Accordion/Accordion.stories.tsx new file mode 100644 index 000000000..49284d634 --- /dev/null +++ b/frontend/src/components/common/Accordion/Accordion.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Accordion from './index'; +import S from './style'; + +const meta: Meta = { + title: 'Components/Accordion', + component: Accordion, + parameters: { + layout: 'centered', + docs: { + description: { + component: 'Accordion 컴포넌트는 제목을 클릭하여 내용을 확장하거나 축소할 수 있는 컴포넌트입니다.', + }, + }, + }, + tags: ['autodocs'], + argTypes: { + title: { + description: 'Accordion의 제목입니다.', + control: { type: 'text' }, + table: { + type: { summary: 'string' }, + }, + }, + children: { + description: 'Accordion의 내부 요소입니다.', + control: { type: 'text' }, + table: { + type: { summary: 'React.ReactNode' }, + }, + }, + }, + args: { + title: '공고', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ( +
+ + 프론트엔드 7기 모집 + 백엔드 7기 모집 + 안드로이드 7기 모집 + +
+ ), +}; diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx new file mode 100644 index 000000000..7b1cd7155 --- /dev/null +++ b/frontend/src/components/common/Accordion/index.tsx @@ -0,0 +1,39 @@ +import React, { useState } from 'react'; +import { HiOutlineClipboardList } from 'react-icons/hi'; + +import S from './style'; +import ChevronButton from '../ChevronButton'; + +interface AccordionProps { + title: string; + children: React.ReactNode; +} + +function Accordion({ title, children }: AccordionProps) { + const [isOpen, setIsOpen] = useState(false); + + const toggleAccordion = () => { + setIsOpen(!isOpen); + }; + + return ( + + + + + {title} + + + + {isOpen && {children}} + + ); +} + +Accordion.List = S.List; +Accordion.ListItem = S.ListItem; + +export default Accordion; diff --git a/frontend/src/components/common/Accordion/style.ts b/frontend/src/components/common/Accordion/style.ts new file mode 100644 index 000000000..bd390f25d --- /dev/null +++ b/frontend/src/components/common/Accordion/style.ts @@ -0,0 +1,64 @@ +import styled from '@emotion/styled'; + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.8rem 0.4rem; + + width: 100%; + cursor: pointer; + border-bottom: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]}; +`; + +const Title = styled.div` + display: flex; + align-items: center; + gap: 0.4rem; + ${({ theme }) => theme.typography.heading[500]} + width: 80%; +`; + +const TitleText = styled.span` + overflow: hidden; + text-overflow: ellipsis; + width: 80%; + white-space: nowrap; +`; + +const List = styled.ul` + display: flex; + flex-direction: column; + gap: 0.4rem; + padding: 0 0 0 0.8rem; +`; + +const ListItem = styled.li` + ${({ theme }) => theme.typography.common.block} + margin-bottom: 0; + padding: 0.4rem 0rem; + + &::before { + content: '•'; + width: 1rem; + aspect-ratio: 1/1; + margin-right: 0.8rem; + } +`; + +const S = { + Container, + Header, + Title, + TitleText, + List, + ListItem, +}; + +export default S; From 87259698a23a329f31a1254a810f6e31cbb9d726 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:13:51 +0900 Subject: [PATCH 02/10] =?UTF-8?q?chore:=20Accordion=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Accordion/Accordion.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/Accordion/Accordion.stories.tsx b/frontend/src/components/common/Accordion/Accordion.stories.tsx index 49284d634..f7856fb36 100644 --- a/frontend/src/components/common/Accordion/Accordion.stories.tsx +++ b/frontend/src/components/common/Accordion/Accordion.stories.tsx @@ -3,7 +3,7 @@ import Accordion from './index'; import S from './style'; const meta: Meta = { - title: 'Components/Accordion', + title: 'Common/Accordion', component: Accordion, parameters: { layout: 'centered', From 4296d911b70e97d1a581a384cce0eb26883e15ca Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:14:10 +0900 Subject: [PATCH 03/10] =?UTF-8?q?chore:=20Accordion=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=86=8D=EC=84=B1=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Accordion/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx index 7b1cd7155..256f88f93 100644 --- a/frontend/src/components/common/Accordion/index.tsx +++ b/frontend/src/components/common/Accordion/index.tsx @@ -33,7 +33,6 @@ function Accordion({ title, children }: AccordionProps) { ); } -Accordion.List = S.List; Accordion.ListItem = S.ListItem; export default Accordion; From 5a95187badbf88e7c818cdfdc7a5e918dce98af4 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:55:18 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20block=20font-weight=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index 82a7bfca0..7b074af98 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -160,7 +160,7 @@ const typography = { letter-spacing: 0; `, block: css` - font-weight: 700; + font-weight: 500; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0; From c2d546ab7bd6691bcf29dbb7443cdb1f48339b39 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:56:02 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20DashboardSidebar=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DashboardSidebar.stories.tsx | 37 +++++++++++++++++++ .../dashboard/DashboardSidebar/index.tsx | 28 ++++++++++++++ .../dashboard/DashboardSidebar/style.ts | 37 +++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx create mode 100644 frontend/src/components/dashboard/DashboardSidebar/index.tsx create mode 100644 frontend/src/components/dashboard/DashboardSidebar/style.ts diff --git a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx new file mode 100644 index 000000000..ff85804e1 --- /dev/null +++ b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import DashboardSidebar from './index'; + +const meta: Meta = { + title: 'Components/Dashboard/Sidebar', + component: DashboardSidebar, + parameters: { + layout: 'centered', + docs: { + description: { + component: 'DashboardSidebar 컴포넌트는 로고와 여러 개의 Accordion으로 구성된 사이드바입니다.', + }, + }, + }, + tags: ['autodocs'], + decorators: [ + (Child) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx new file mode 100644 index 000000000..80657f55a --- /dev/null +++ b/frontend/src/components/dashboard/DashboardSidebar/index.tsx @@ -0,0 +1,28 @@ +import Accordion from '@components/common/Accordion'; +import S from './style'; + +export default function DashboardSidebar() { + // TODO: URL Param과 같은 방법으로 현재 공고가 Selected 인지 확인할 수 있도록 합니다. + + const options = [ + { text: '프론트엔드 7기 모집', isSelected: true }, + { text: '백엔드 7기 모집', isSelected: false }, + { text: '안드로이드 7기 모집', isSelected: false }, + ]; + + return ( + + ㅋㄹㄹ + + + {options.map(({ text, isSelected }, index) => ( + // eslint-disable-next-line react/no-array-index-key + + {text} + + ))} + + + + ); +} diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts new file mode 100644 index 000000000..5a17000cb --- /dev/null +++ b/frontend/src/components/dashboard/DashboardSidebar/style.ts @@ -0,0 +1,37 @@ +import styled from '@emotion/styled'; + +const Container = styled.div` + width: 300px; + border-right: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]}; + padding: 3.6rem 1.6rem; + height: 100%; + + background-color: ${({ theme }) => theme.baseColors.grayscale[50]}; + border-radius: 1.6rem 0 0 1.6rem; +`; + +const Logo = styled.div` + ${({ theme }) => theme.typography.heading[700]} + margin-bottom: 3.2rem; +`; + +const Contents = styled.div` + display: flex; + flex-direction: column; + gap: 1.4rem; +`; + +const ContentButton = styled.button<{ isSelected: boolean }>` + ${({ theme }) => theme.typography.common.block} + color: ${({ theme, isSelected }) => (isSelected ? theme.baseColors.purplescale[700] : theme.colors.text.default)}; + margin-bottom: 0; +`; + +const S = { + Container, + Logo, + Contents, + ContentButton, +}; + +export default S; From d081cbc2638b0f29d872aedba5c801b1940071e8 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:32:26 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20RecruitmentSidebar=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RecruitmentSidebar.stories.tsx | 37 ++++++++++ .../recruitment/RecruitmentSidebar/index.tsx | 44 +++++++++++ .../recruitment/RecruitmentSidebar/style.ts | 74 +++++++++++++++++++ 3 files changed, 155 insertions(+) create mode 100644 frontend/src/components/recruitment/RecruitmentSidebar/RecruitmentSidebar.stories.tsx create mode 100644 frontend/src/components/recruitment/RecruitmentSidebar/index.tsx create mode 100644 frontend/src/components/recruitment/RecruitmentSidebar/style.ts diff --git a/frontend/src/components/recruitment/RecruitmentSidebar/RecruitmentSidebar.stories.tsx b/frontend/src/components/recruitment/RecruitmentSidebar/RecruitmentSidebar.stories.tsx new file mode 100644 index 000000000..7413221ac --- /dev/null +++ b/frontend/src/components/recruitment/RecruitmentSidebar/RecruitmentSidebar.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import RecruitmentSidebar from './index'; + +const meta: Meta = { + title: 'Components/Recruitment/RecruitmentSidebar', + component: RecruitmentSidebar, + parameters: { + layout: 'centered', + docs: { + description: { + component: 'RecruitmentSidebar 컴포넌트는 모집 공고를 작성하고 게시하는 과정을 안내하는 사이드바입니다.', + }, + }, + }, + tags: ['autodocs'], + decorators: [ + (Child) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/frontend/src/components/recruitment/RecruitmentSidebar/index.tsx b/frontend/src/components/recruitment/RecruitmentSidebar/index.tsx new file mode 100644 index 000000000..288c649ef --- /dev/null +++ b/frontend/src/components/recruitment/RecruitmentSidebar/index.tsx @@ -0,0 +1,44 @@ +import S from './style'; + +interface StepProps { + stepNumber: number; + label: string; + isSelected: boolean; +} +function Step({ stepNumber, label, isSelected }: StepProps) { + return ( + + {stepNumber} + {label} + + ); +} + +export default function RecruitmentSidebar() { + // TODO: isSelected에 해당하는 값을 넣어야 합니다. + const options = [ + { text: '공고 작성', isSelected: true }, + { text: '지원서 작성', isSelected: false }, + { text: '공고 게시', isSelected: false }, + ]; + + return ( + + + 공고 생성 + 모집 공고를 작성하고 인터넷에 게시하세요. + + + {options.map(({ text, isSelected }, index) => ( + + ))} + + + ); +} diff --git a/frontend/src/components/recruitment/RecruitmentSidebar/style.ts b/frontend/src/components/recruitment/RecruitmentSidebar/style.ts new file mode 100644 index 000000000..2fae8defb --- /dev/null +++ b/frontend/src/components/recruitment/RecruitmentSidebar/style.ts @@ -0,0 +1,74 @@ +import styled from '@emotion/styled'; + +const Container = styled.div` + width: 28.4rem; + padding: 2.4rem; + + display: flex; + flex-direction: column; + gap: 3.6rem; + background-color: ${({ theme }) => theme.baseColors.grayscale[50]}; +`; + +const SidebarHeader = styled.div` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +const Title = styled.h2` + ${({ theme }) => theme.typography.heading[700]} +`; + +const Description = styled.p` + ${({ theme }) => theme.typography.common.default} +`; + +const SidebarContents = styled.div` + display: flex; + flex-direction: column; + gap: 2.4rem; + + padding: 0 1.6rem; +`; + +const StepContainer = styled.div<{ isSelected: boolean }>` + display: flex; + align-items: center; + margin-bottom: 1rem; + opacity: ${({ isSelected }) => (isSelected ? 1 : 0.5)}; +`; + +const StepNumber = styled.div<{ isSelected: boolean }>` + width: 2.4rem; + aspect-ratio: 1/1; + + display: flex; + align-items: center; + justify-content: center; + + border-radius: 50%; + background-color: ${({ isSelected, theme }) => + isSelected ? theme.colors.brand.primary : theme.baseColors.grayscale[400]}; + color: ${({ theme }) => theme.baseColors.grayscale[50]}; + + margin-right: 0.6rem; +`; + +const StepLabel = styled.div<{ isSelected: boolean }>` + ${({ theme }) => theme.typography.common.smallAccent} + color: ${({ isSelected, theme }) => (isSelected ? theme.colors.brand.primary : theme.baseColors.grayscale[400])}; +`; + +const S = { + Container, + SidebarHeader, + Title, + Description, + SidebarContents, + StepContainer, + StepNumber, + StepLabel, +}; + +export default S; From b0a69f7185abf4b5e2f42b04ac8b510353a55964 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:34:01 +0900 Subject: [PATCH 07/10] =?UTF-8?q?refactor:=20primary=20=EC=BB=AC=EB=9F=AC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/ToggleSwitch/style.ts | 4 ++-- frontend/src/components/dashboard/DashboardSidebar/style.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/ToggleSwitch/style.ts b/frontend/src/components/common/ToggleSwitch/style.ts index 92983df71..8a9265291 100644 --- a/frontend/src/components/common/ToggleSwitch/style.ts +++ b/frontend/src/components/common/ToggleSwitch/style.ts @@ -14,9 +14,9 @@ const Switch = styled.div` aspect-ratio: 5/3; background-color: ${({ isChecked, theme }) => - isChecked ? theme.baseColors.purplescale[600] : theme.baseColors.grayscale[100]}; + isChecked ? theme.colors.brand.primary : theme.baseColors.grayscale[100]}; outline: 0.2rem solid - ${({ isChecked, theme }) => (isChecked ? theme.baseColors.purplescale[600] : theme.baseColors.grayscale[700])}; + ${({ isChecked, theme }) => (isChecked ? theme.colors.brand.primary : theme.baseColors.grayscale[700])}; border-radius: 99rem; display: flex; diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts index 5a17000cb..882297f36 100644 --- a/frontend/src/components/dashboard/DashboardSidebar/style.ts +++ b/frontend/src/components/dashboard/DashboardSidebar/style.ts @@ -23,7 +23,7 @@ const Contents = styled.div` const ContentButton = styled.button<{ isSelected: boolean }>` ${({ theme }) => theme.typography.common.block} - color: ${({ theme, isSelected }) => (isSelected ? theme.baseColors.purplescale[700] : theme.colors.text.default)}; + color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand.primary : theme.colors.text.default)}; margin-bottom: 0; `; From ff5f42979b938c2d5bb7063a508c5cf696b5fdd0 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:03:36 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=EC=95=84=EC=BD=94=EB=94=94?= =?UTF-8?q?=EC=96=B8=20state=20=EC=B4=88=EA=B9=83=EA=B0=92=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 --- frontend/src/components/common/Accordion/index.tsx | 5 +++-- frontend/src/components/common/Accordion/style.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Accordion/index.tsx b/frontend/src/components/common/Accordion/index.tsx index 256f88f93..d900c2f0b 100644 --- a/frontend/src/components/common/Accordion/index.tsx +++ b/frontend/src/components/common/Accordion/index.tsx @@ -10,10 +10,11 @@ interface AccordionProps { } function Accordion({ title, children }: AccordionProps) { - const [isOpen, setIsOpen] = useState(false); + // TODO: 현재 아코디언의 오픈값을 True로 설정합니다. 추후에 아코디언이 추가될 경우 변경이 필요합니다. + const [isOpen] = useState(true); const toggleAccordion = () => { - setIsOpen(!isOpen); + // setIsOpen(!isOpen); }; return ( diff --git a/frontend/src/components/common/Accordion/style.ts b/frontend/src/components/common/Accordion/style.ts index bd390f25d..12230f9af 100644 --- a/frontend/src/components/common/Accordion/style.ts +++ b/frontend/src/components/common/Accordion/style.ts @@ -13,7 +13,7 @@ const Header = styled.div` padding: 0.8rem 0.4rem; width: 100%; - cursor: pointer; + /* cursor: pointer; */ // TODO: 추후에 아코디언이 추가될 경우 변경이 필요합니다. border-bottom: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]}; `; From 17b705bfa15c55b9bf0da4965457d5766c9bf060 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:09:00 +0900 Subject: [PATCH 09/10] =?UTF-8?q?chore:=20Button=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=9E=AC=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/dashboard/DashboardSidebar/index.tsx | 2 +- frontend/src/components/dashboard/DashboardSidebar/style.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx index 80657f55a..49d2a2a04 100644 --- a/frontend/src/components/dashboard/DashboardSidebar/index.tsx +++ b/frontend/src/components/dashboard/DashboardSidebar/index.tsx @@ -18,7 +18,7 @@ export default function DashboardSidebar() { {options.map(({ text, isSelected }, index) => ( // eslint-disable-next-line react/no-array-index-key - {text} + {text} ))} diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts index 882297f36..4bb583307 100644 --- a/frontend/src/components/dashboard/DashboardSidebar/style.ts +++ b/frontend/src/components/dashboard/DashboardSidebar/style.ts @@ -21,7 +21,7 @@ const Contents = styled.div` gap: 1.4rem; `; -const ContentButton = styled.button<{ isSelected: boolean }>` +const NavButton = styled.button<{ isSelected: boolean }>` ${({ theme }) => theme.typography.common.block} color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand.primary : theme.colors.text.default)}; margin-bottom: 0; @@ -31,7 +31,7 @@ const S = { Container, Logo, Contents, - ContentButton, + NavButton, }; export default S; From 33ac81af505a7212edff4d788e943c38090fe602 Mon Sep 17 00:00:00 2001 From: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:25:14 +0900 Subject: [PATCH 10/10] =?UTF-8?q?refactor:=20dot=20=EC=9A=94=EC=86=8C=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Accordion/style.ts | 8 -------- .../src/components/dashboard/DashboardSidebar/style.ts | 7 +++++++ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/common/Accordion/style.ts b/frontend/src/components/common/Accordion/style.ts index 12230f9af..6c6c8acb1 100644 --- a/frontend/src/components/common/Accordion/style.ts +++ b/frontend/src/components/common/Accordion/style.ts @@ -42,14 +42,6 @@ const List = styled.ul` const ListItem = styled.li` ${({ theme }) => theme.typography.common.block} margin-bottom: 0; - padding: 0.4rem 0rem; - - &::before { - content: '•'; - width: 1rem; - aspect-ratio: 1/1; - margin-right: 0.8rem; - } `; const S = { diff --git a/frontend/src/components/dashboard/DashboardSidebar/style.ts b/frontend/src/components/dashboard/DashboardSidebar/style.ts index 4bb583307..629104b7c 100644 --- a/frontend/src/components/dashboard/DashboardSidebar/style.ts +++ b/frontend/src/components/dashboard/DashboardSidebar/style.ts @@ -25,6 +25,13 @@ const NavButton = styled.button<{ isSelected: boolean }>` ${({ theme }) => theme.typography.common.block} color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand.primary : theme.colors.text.default)}; margin-bottom: 0; + + &::before { + content: '•'; + width: 1rem; + aspect-ratio: 1/1; + margin: 0 0.8rem; + } `; const S = {