From 610b9fbb14a1b31ced7fe11daae8e62c5c0b2139 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Wed, 24 Jul 2024 17:16:22 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=9A=A7=20=ED=8E=98=EC=96=B4=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B9=B4=EB=93=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PairListCard/PairListCard.styles.ts | 62 ++++++++++++++++++- .../PairRoom/PairListCard/PairListCard.tsx | 29 ++++++++- 2 files changed, 89 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts index 3a6a9207..5a933337 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts @@ -2,5 +2,65 @@ import styled from 'styled-components'; export const Layout = styled.div` display: flex; - width: 18vw; + flex-direction: column; +`; + +export const Sidebar = styled.div<{ isOpen: boolean }>` + width: ${(props) => (props.isOpen ? '250px' : '0')}; + transition: width 0.3s; + overflow: hidden; + background-color: #f8f9fa; + border-right: 1px solid #dee2e6; +`; + +export const SidebarHeader = styled.div` + display: flex; + align-items: center; + padding: 16px; + background-color: #fff; + border-bottom: 1px solid #dee2e6; +`; + +export const RoomCode = styled.span` + margin-left: auto; + font-weight: bold; +`; + +export const CopyButton = styled.button` + margin-left: 8px; + background-color: #e9ecef; + border: none; + padding: 4px 8px; + cursor: pointer; +`; + +export const PairList = styled.div` + padding: 16px; +`; + +export const PairItem = styled.div` + display: flex; + align-items: center; + margin-bottom: 8px; +`; + +export const PairRole = styled.span` + background-color: #d1e7dd; + padding: 4px 8px; + border-radius: 12px; + margin-right: 8px; +`; + +export const PairName = styled.span` + font-weight: bold; +`; + +export const DeleteButton = styled.button` + width: 100%; + padding: 12px; + background-color: #f8d7da; + border: none; + color: #721c24; + cursor: pointer; + margin-top: auto; `; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx b/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx index 52ad54eb..0eec19cb 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx @@ -1,3 +1,6 @@ +import { useState } from 'react'; + +import { IoIosArrowBack } from 'react-icons/io'; import { IoPeople } from 'react-icons/io5'; import { PairRoomCard } from '@/components/PairRoom/PairRoomCard'; @@ -6,12 +9,36 @@ import { theme } from '@/styles/theme'; import * as S from './PairListCard.styles'; -// TODO: 페어 목록 기능 추가 const PairListCard = () => { + const [isOpen, setIsOpen] = useState(false); + + const toggleSidebar = () => { + setIsOpen(!isOpen); + }; + return ( } title="페어" /> + + + + 방 코드 + IUUIASDFJK + 복사 + + + + 드라이버 + 퍼링 + + + 네비게이터 + 포롱 + + + 방 삭제하기 + ); From ee028ffe6b2541bc9bda4e84391d33b2c727d7bc Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Wed, 24 Jul 2024 21:39:59 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20=ED=8E=98=EC=96=B4=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DeleteButton/DeleteButton.styles.ts | 18 +++++ .../DeleteButton/DeleteButton.tsx | 17 +++++ .../PairListCard/Header/Header.styles.ts | 10 +++ .../PairRoom/PairListCard/Header/Header.tsx | 15 +++++ .../PairListCard/PairListCard.styles.ts | 67 +++---------------- .../PairRoom/PairListCard/PairListCard.tsx | 49 ++++++-------- .../PairListSection/PairListSection.styles.ts | 28 ++++++++ .../PairListSection/PairListSection.tsx | 22 ++++++ .../RoomCodeSection/RoomCodeSection.styles.ts | 30 +++++++++ .../RoomCodeSection/RoomCodeSection.tsx | 23 +++++++ frontend/src/pages/PairRoom/PairRoom.tsx | 2 +- 11 files changed, 194 insertions(+), 87 deletions(-) create mode 100644 frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.styles.ts create mode 100644 frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts create mode 100644 frontend/src/components/PairRoom/PairListCard/Header/Header.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts create mode 100644 frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts create mode 100644 frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.tsx diff --git a/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.styles.ts b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.styles.ts new file mode 100644 index 00000000..7a7beac9 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.styles.ts @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +export const Layout = styled.button` + position: absolute; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 4.8rem; + gap: 0.8rem; + background-color: ${({ theme }) => theme.color.danger[200]}; + border-radius: 0 0 2rem 2rem; + color: ${({ theme }) => theme.color.danger[600]}; + font-size: ${({ theme }) => theme.fontSize.md}; + cursor: pointer; + margin-top: auto; +`; diff --git a/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.tsx b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.tsx new file mode 100644 index 00000000..162847db --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.tsx @@ -0,0 +1,17 @@ +import { FaTrashAlt } from 'react-icons/fa'; + +import * as S from './DeleteButton.styles'; + +interface DeleteButtonProps { + isOpen: boolean; + onRoomDelete: () => void; +} + +const DeleteButton = ({ isOpen, onRoomDelete }: DeleteButtonProps) => ( + + + {isOpen && 방 삭제하기} + +); + +export default DeleteButton; diff --git a/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts b/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts new file mode 100644 index 00000000..ff4f8277 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +import { PairRoomCard } from '@/components/PairRoom/PairRoomCard'; + +export const Layout = styled(PairRoomCard.Header)` + p { + height: 4.8rem; + white-space: nowrap; + } +`; diff --git a/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx b/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx new file mode 100644 index 00000000..d083c61e --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx @@ -0,0 +1,15 @@ +import { IoPeople } from 'react-icons/io5'; + +import { theme } from '@/styles/theme'; + +import * as S from './Header.styles'; + +interface HeaderProps { + isOpen: boolean; +} + +const Header = ({ isOpen }: HeaderProps) => ( + } title={isOpen ? '페어' : ''} /> +); + +export default Header; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts index 5a933337..2953f453 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts @@ -1,66 +1,17 @@ import styled from 'styled-components'; -export const Layout = styled.div` +export const Layout = styled.div<{ $isOpen: boolean }>` + position: relative; display: flex; flex-direction: column; -`; - -export const Sidebar = styled.div<{ isOpen: boolean }>` - width: ${(props) => (props.isOpen ? '250px' : '0')}; - transition: width 0.3s; - overflow: hidden; - background-color: #f8f9fa; - border-right: 1px solid #dee2e6; -`; - -export const SidebarHeader = styled.div` - display: flex; + width: ${(props) => (props.$isOpen ? '16vw' : '6rem')}; + min-width: ${(props) => (props.$isOpen ? '20rem' : '6rem')}; align-items: center; - padding: 16px; - background-color: #fff; - border-bottom: 1px solid #dee2e6; + justify-content: center; + transition: all 0.3s; + white-space: nowrap; `; -export const RoomCode = styled.span` - margin-left: auto; - font-weight: bold; -`; - -export const CopyButton = styled.button` - margin-left: 8px; - background-color: #e9ecef; - border: none; - padding: 4px 8px; - cursor: pointer; -`; - -export const PairList = styled.div` - padding: 16px; -`; - -export const PairItem = styled.div` - display: flex; - align-items: center; - margin-bottom: 8px; -`; - -export const PairRole = styled.span` - background-color: #d1e7dd; - padding: 4px 8px; - border-radius: 12px; - margin-right: 8px; -`; - -export const PairName = styled.span` - font-weight: bold; -`; - -export const DeleteButton = styled.button` - width: 100%; - padding: 12px; - background-color: #f8d7da; - border: none; - color: #721c24; - cursor: pointer; - margin-top: auto; +export const Sidebar = styled.div` + overflow: hidden; `; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx b/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx index 0eec19cb..3b2de2a1 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.tsx @@ -1,43 +1,36 @@ import { useState } from 'react'; -import { IoIosArrowBack } from 'react-icons/io'; -import { IoPeople } from 'react-icons/io5'; - +import DeleteButton from '@/components/PairRoom/PairListCard/DeleteButton/DeleteButton'; +import Header from '@/components/PairRoom/PairListCard/Header/Header'; +import PairListSection from '@/components/PairRoom/PairListCard/PairListSection/PairListSection'; +import RoomCodeSection from '@/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection'; import { PairRoomCard } from '@/components/PairRoom/PairRoomCard'; -import { theme } from '@/styles/theme'; - import * as S from './PairListCard.styles'; -const PairListCard = () => { +interface PairListCardProps { + driver: string; + navigator: string; + roomCode: string; + onRoomDelete: () => void; +} + +const PairListCard = ({ driver, navigator, roomCode, onRoomDelete }: PairListCardProps) => { const [isOpen, setIsOpen] = useState(false); - const toggleSidebar = () => { - setIsOpen(!isOpen); + const onCopy = () => { + window.navigator.clipboard.writeText(roomCode); + alert('방 코드가 복사되었습니다.'); }; return ( - + setIsOpen(true)} onMouseLeave={() => setIsOpen(false)}> - } title="페어" /> - - - - 방 코드 - IUUIASDFJK - 복사 - - - - 드라이버 - 퍼링 - - - 네비게이터 - 포롱 - - - 방 삭제하기 +
+ + + + diff --git a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts new file mode 100644 index 00000000..396e5f99 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts @@ -0,0 +1,28 @@ +import styled from 'styled-components'; + +type Role = 'driver' | 'navigator'; + +export const Layout = styled.div` + padding: 1.6rem; +`; + +export const PairItem = styled.div` + display: flex; + align-items: center; + justify-content: start; + height: 4.8rem; + gap: 1.2rem; +`; + +export const PairRole = styled.span<{ $role: Role }>` + padding: 0.4rem 0.8rem; + border-radius: 1.2rem; + width: 6rem; + text-align: center; + background-color: ${({ theme, $role }) => + $role === 'driver' ? theme.color.primary[500] : theme.color.secondary[500]}; +`; + +export const PairName = styled.span` + font-size: ${({ theme }) => theme.fontSize.base}; +`; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.tsx b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.tsx new file mode 100644 index 00000000..95f59198 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.tsx @@ -0,0 +1,22 @@ +import * as S from './PairListSection.styles'; + +interface PairListSectionProps { + isOpen: boolean; + driver: string; + navigator: string; +} + +const PairListSection = ({ isOpen, driver, navigator }: PairListSectionProps) => ( + + + {isOpen && 드라이버} + {driver} + + + {isOpen && 네비게이터} + {navigator} + + +); + +export default PairListSection; diff --git a/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts new file mode 100644 index 00000000..7f7ec669 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +export const Layout = styled.div<{ $isOpen: boolean }>` + display: flex; + align-items: center; + justify-content: ${({ $isOpen }) => ($isOpen ? 'space-between' : 'center')}; + width: 100%; + height: 7rem; + background-color: ${({ theme }) => theme.color.black[30]}; + padding: 2rem; + cursor: pointer; +`; + +export const RoomCodeWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.2rem; +`; + +export const RoomCodeTitle = styled.span` + font-size: ${({ theme }) => theme.fontSize.base}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; + color: ${({ theme }) => theme.color.black[70]}; + height: 2rem; +`; + +export const RoomCode = styled.span` + font-size: ${({ theme }) => theme.fontSize.md}; +`; diff --git a/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.tsx b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.tsx new file mode 100644 index 00000000..adc0294e --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.tsx @@ -0,0 +1,23 @@ +import { FaRegPaste } from 'react-icons/fa6'; + +import * as S from './RoomCodeSection.styles'; + +interface RoomCodeSectionProps { + isOpen: boolean; + roomCode: string; + onCopy: () => void; +} + +const RoomCodeSection = ({ isOpen, roomCode, onCopy }: RoomCodeSectionProps) => ( + + {isOpen && ( + + 방 코드 + {roomCode} + + )} + + +); + +export default RoomCodeSection; diff --git a/frontend/src/pages/PairRoom/PairRoom.tsx b/frontend/src/pages/PairRoom/PairRoom.tsx index 721973fb..59bceae4 100644 --- a/frontend/src/pages/PairRoom/PairRoom.tsx +++ b/frontend/src/pages/PairRoom/PairRoom.tsx @@ -9,7 +9,7 @@ import * as S from './PairRoom.styles'; const PairRoom = () => { return ( - + {}} /> From c69838bd78bb68563aec071133549f1ca5ba553f Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Wed, 24 Jul 2024 21:47:16 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=92=84=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DeleteButton/DeleteButton.stories.tsx | 26 +++++++++++++++++ .../PairListCard/Header/Header.stories.tsx | 24 ++++++++++++++++ .../PairListCard/PairListCard.stories.tsx | 7 ++++- .../PairListCard/PairListCard.styles.ts | 1 + .../PairListSection.stories.tsx | 28 +++++++++++++++++++ .../RoomCodeSection.stories.tsx | 28 +++++++++++++++++++ 6 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.stories.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/Header/Header.stories.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.stories.tsx create mode 100644 frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.stories.tsx diff --git a/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.stories.tsx b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.stories.tsx new file mode 100644 index 00000000..efd17047 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/DeleteButton/DeleteButton.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import DeleteButton from './DeleteButton'; + +const meta = { + title: 'component/PairRoom/PairListCard/DeleteButton', + component: DeleteButton, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + onRoomDelete: () => alert('Room deleted'), + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + onRoomDelete: () => alert('Room deleted'), + }, +}; diff --git a/frontend/src/components/PairRoom/PairListCard/Header/Header.stories.tsx b/frontend/src/components/PairRoom/PairListCard/Header/Header.stories.tsx new file mode 100644 index 00000000..4be5932d --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/Header/Header.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Header from './Header'; + +const meta = { + title: 'component/PairRoom/PairListCard/Header', + component: Header, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + }, +}; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.stories.tsx b/frontend/src/components/PairRoom/PairListCard/PairListCard.stories.tsx index 070a175d..e45dc2c4 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.stories.tsx +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.stories.tsx @@ -12,5 +12,10 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: {}, + args: { + roomCode: 'IUUIASDFJK', + driver: '퍼렁', + navigator: '포롱', + onRoomDelete: () => alert('방이 삭제되었습니다.'), + }, }; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts index 2953f453..047582ea 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts @@ -6,6 +6,7 @@ export const Layout = styled.div<{ $isOpen: boolean }>` flex-direction: column; width: ${(props) => (props.$isOpen ? '16vw' : '6rem')}; min-width: ${(props) => (props.$isOpen ? '20rem' : '6rem')}; + min-height: 40rem; align-items: center; justify-content: center; transition: all 0.3s; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.stories.tsx b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.stories.tsx new file mode 100644 index 00000000..6564bff2 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import PairListSection from './PairListSection'; + +const meta = { + title: 'component/PairRoom/PairListCard/PairListSection', + component: PairListSection, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + driver: '퍼렁', + navigator: '포롱', + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + driver: '퍼렁', + navigator: '포롱', + }, +}; diff --git a/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.stories.tsx b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.stories.tsx new file mode 100644 index 00000000..edbc0cf3 --- /dev/null +++ b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import RoomCodeSection from './RoomCodeSection'; + +const meta = { + title: 'component/PairRoom/PairListCard/RoomCodeSection', + component: RoomCodeSection, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + roomCode: 'IUUIASDFJK', + onCopy: () => alert('Room code copied'), + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + roomCode: 'IUUIASDFJK', + onCopy: () => alert('Room code copied'), + }, +}; From bc8a116eb9b75ecdf74b4fa717da18b0b73f09af Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Thu, 25 Jul 2024 13:47:03 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=92=84=20=EC=97=AD=ED=95=A0=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EA=B8=80=EC=9E=90=EC=83=89=20=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=A7=88=EC=97=90=20=EB=A7=9E=EA=B2=8C=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 --- .../PairListCard/PairListSection/PairListSection.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts index 396e5f99..64bec579 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts @@ -21,6 +21,7 @@ export const PairRole = styled.span<{ $role: Role }>` text-align: center; background-color: ${({ theme, $role }) => $role === 'driver' ? theme.color.primary[500] : theme.color.secondary[500]}; + color: white; `; export const PairName = styled.span` From e370cdd6cc8b3e712cc71d210affa0b648c5ebe9 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Thu, 25 Jul 2024 17:37:59 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=92=84=20=ED=94=BC=EB=93=9C=EB=B0=B1?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PairRoom/PairListCard/Header/Header.styles.ts | 6 ++++++ .../components/PairRoom/PairListCard/Header/Header.tsx | 4 +++- .../PairListSection/PairListSection.styles.ts | 10 +++++++--- .../RoomCodeSection/RoomCodeSection.styles.ts | 3 ++- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts b/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts index ff4f8277..23f4a9da 100644 --- a/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/Header/Header.styles.ts @@ -1,3 +1,4 @@ +import { IoIosArrowBack } from 'react-icons/io'; import styled from 'styled-components'; import { PairRoomCard } from '@/components/PairRoom/PairRoomCard'; @@ -8,3 +9,8 @@ export const Layout = styled(PairRoomCard.Header)` white-space: nowrap; } `; + +export const ArrowIcon = styled(IoIosArrowBack)<{ $isOpen: boolean }>` + transform: rotate(${({ $isOpen }) => ($isOpen ? 0 : 180)}deg); + transition: transform 0.2s ease-in-out; +`; diff --git a/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx b/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx index d083c61e..47008e27 100644 --- a/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx +++ b/frontend/src/components/PairRoom/PairListCard/Header/Header.tsx @@ -9,7 +9,9 @@ interface HeaderProps { } const Header = ({ isOpen }: HeaderProps) => ( - } title={isOpen ? '페어' : ''} /> + : <>} title={isOpen ? '페어' : ''}> + + ); export default Header; diff --git a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts index 64bec579..0df978f1 100644 --- a/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/PairListSection/PairListSection.styles.ts @@ -3,15 +3,19 @@ import styled from 'styled-components'; type Role = 'driver' | 'navigator'; export const Layout = styled.div` - padding: 1.6rem; + padding: 0 1.6rem; + column-gap: 1.6rem; + justify-content: center; + align-items: center; `; export const PairItem = styled.div` display: flex; align-items: center; justify-content: start; - height: 4.8rem; - gap: 1.2rem; + height: 7rem; + gap: 1.6rem; + border-bottom: 1px solid ${({ theme }) => theme.color.black[40]}; `; export const PairRole = styled.span<{ $role: Role }>` diff --git a/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts index 7f7ec669..c75531c6 100644 --- a/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts +++ b/frontend/src/components/PairRoom/PairListCard/RoomCodeSection/RoomCodeSection.styles.ts @@ -6,9 +6,10 @@ export const Layout = styled.div<{ $isOpen: boolean }>` justify-content: ${({ $isOpen }) => ($isOpen ? 'space-between' : 'center')}; width: 100%; height: 7rem; - background-color: ${({ theme }) => theme.color.black[30]}; + background-color: ${({ $isOpen, theme }) => ($isOpen ? theme.color.black[30] : 'white')}; padding: 2rem; cursor: pointer; + transition: background-color 0.3s ease-out; `; export const RoomCodeWrapper = styled.div`