From ece77ba09e4a3e55801c1d69cf7a755b31541853 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Sun, 15 Dec 2024 19:26:48 +0900 Subject: [PATCH 01/22] =?UTF-8?q?=F0=9F=92=84=20=EB=A7=88=EC=9D=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20PairRoomButton=20=EB=B0=8F=20Retr?= =?UTF-8?q?ospectButton=20hover=20=EC=8B=9C=20=ED=88=AC=EB=AA=85=EB=8F=84?= =?UTF-8?q?=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MyPage/PairRoomButton/PairRoomButton.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts index a2a8a4cf..0bc01df2 100644 --- a/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts +++ b/frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts @@ -157,7 +157,7 @@ export const PairRoomButton = styled.button<{ $status: PairRoomStatus; $color: ' &:hover::before { background-position: 105.8% 0; - opacity: 1; + opacity: 0.9; } &:hover ${StatusText} { From 5ed84a0d687161a5cce4af57b823f8e0b7fcb9c8 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Sun, 15 Dec 2024 19:29:36 +0900 Subject: [PATCH 02/22] =?UTF-8?q?=F0=9F=92=84=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=EB=90=9C=20=ED=8E=98=EC=96=B4=EB=A3=B8=20Todo=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EC=97=B0=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts index fcd8b98d..bdae5f79 100644 --- a/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts +++ b/frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts @@ -10,7 +10,7 @@ export const Layout = styled.div<{ $isChecked: boolean; $isIconHovered: boolean padding: 1.6rem; border-radius: 1rem; - background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[300] : theme.color.secondary[200])}; + background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[200] : theme.color.secondary[100])}; font-size: ${({ theme }) => theme.fontSize.md}; transition: background 0.1s ease; From 03270a56e8f8903fc6eb0a050663dcec484c5ad5 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Sun, 15 Dec 2024 19:32:08 +0900 Subject: [PATCH 03/22] =?UTF-8?q?=F0=9F=92=84=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=EB=90=9C=20=ED=8E=98=EC=96=B4=EB=A3=B8=20=EB=A0=88=ED=8D=BC?= =?UTF-8?q?=EB=9F=B0=EC=8A=A4=20=EB=A7=81=ED=81=AC=20=EB=B9=88=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B9=B4=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ReferenceList/ReferenceList.styles.ts | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts b/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts index 157137f2..47e7b087 100644 --- a/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts +++ b/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts @@ -1,16 +1,27 @@ +import { MdClose } from 'react-icons/md'; import styled, { css } from 'styled-components'; export const Layout = styled.div<{ $columns: number }>` display: flex; flex-grow: 1; flex-direction: column; - align-items: ${({ $columns }) => ($columns > 2 ? 'center' : '')}; + align-items: ${({ $columns }) => $columns > 2 && 'center'}; gap: 1rem; overflow-y: auto; padding: 3rem; `; +export const EmptyLayout = styled.div` + flex-grow: 1; + + height: 0; + padding: 2rem; + + color: ${({ theme }) => theme.color.black[400]}; + font-size: ${({ theme }) => theme.fontSize.md}; +`; + export const List = styled.ul<{ $columns: number }>` gap: 3rem 0; @@ -35,16 +46,6 @@ export const List = styled.ul<{ $columns: number }>` } `; -export const EmptyLayout = styled.div` - flex-grow: 1; - - height: 0; - padding: 2rem; - - color: ${({ theme }) => theme.color.black[400]}; - font-size: ${({ theme }) => theme.fontSize.md}; -`; - export const Item = styled.div` display: flex; flex-direction: column; @@ -53,7 +54,7 @@ export const Item = styled.div` width: 17rem; height: 20rem; - border: 1px solid ${({ theme }) => theme.color.black[300]}; + border: 1px solid ${({ theme }) => theme.color.black[100]}; border-radius: 1.5rem; `; @@ -74,8 +75,8 @@ export const EmptyImage = styled.div` width: 100%; height: 10rem; - background-color: ${({ theme }) => theme.color.black[400]}; - color: ${({ theme }) => theme.color.black[700]}; + background-color: ${({ theme }) => theme.color.black[200]}; + color: ${({ theme }) => theme.color.black[300]}; font-size: ${({ theme }) => theme.fontSize.sm}; line-height: 1.3; @@ -123,3 +124,24 @@ export const Content = styled.p` -webkit-box-orient: vertical; -webkit-line-clamp: 3; `; + +export const DeleteButton = styled(MdClose)` + position: absolute; + top: 1rem; + right: 1rem; + + width: 2rem; + height: 2rem; + padding: 0.3rem; + border-radius: 100%; + + background-color: ${({ theme }) => theme.color.black[900]}; + opacity: 0.6; + color: ${({ theme }) => theme.color.black[50]}; + + cursor: pointer; + + &:hover { + opacity: 1; + } +`; From c743cf0b31d29118417c87a6b20e0ef777bb5569 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Sun, 15 Dec 2024 19:37:12 +0900 Subject: [PATCH 04/22] =?UTF-8?q?=F0=9F=92=84=20=EC=97=AD=ED=95=A0=20?= =?UTF-8?q?=EB=9D=BC=EB=B2=A8=20=EC=83=89=EC=83=81=EC=9D=B4=20=EC=9D=BC?= =?UTF-8?q?=EA=B4=80=EC=A0=81=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8D=98=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PairRoom/PairRoleCard/PairRoleCard.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts b/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts index c2511872..27194510 100644 --- a/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts +++ b/frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts @@ -72,11 +72,11 @@ const RoleLabel = styled.div` `; export const DriverLabel = styled(RoleLabel)` - background-color: ${({ theme }) => theme.color.secondary[600]}; + background-color: ${({ theme }) => theme.color.secondary[500]}; `; export const NavigatorLabel = styled(RoleLabel)` - background-color: ${({ theme }) => theme.color.primary[800]}; + background-color: ${({ theme }) => theme.color.primary[600]}; `; export const DriverText = styled.p` From 33012c859dd4bd259a76fee9f0d94643ff0961e9 Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Sun, 15 Dec 2024 19:39:42 +0900 Subject: [PATCH 05/22] =?UTF-8?q?=F0=9F=92=84=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=84=88?= =?UTF-8?q?=EB=AC=B4=20=EC=96=87=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SignUp/SignUp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index d54a0ddf..9886faff 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/frontend/src/pages/SignUp/SignUp.tsx @@ -62,9 +62,9 @@ const SignUp = () => { From 6df099446d5a541792b06d79c52243e78c9e0e73 Mon Sep 17 00:00:00 2001 From: anttiey Date: Wed, 18 Dec 2024 17:33:29 +0900 Subject: [PATCH 08/22] =?UTF-8?q?:recycle:=20=ED=8E=98=EC=96=B4=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=97=B0=EB=8F=99=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B2=84=ED=8A=BC=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx b/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx index fb1d3383..069e7b9f 100644 --- a/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx +++ b/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx @@ -59,7 +59,7 @@ const AddPairModal = ({ isOpen, closeModal, onPairData }: AddPairModalProps) => - diff --git a/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx b/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx index c109500f..04dbf0a1 100644 --- a/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx +++ b/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx @@ -8,6 +8,7 @@ import useToastStore from '@/stores/toastStore'; import { getPairRoomExists } from '@/apis/pairRoom'; +import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey'; import useInput from '@/hooks/_common/useInput'; interface PairRoomEntryModal { @@ -19,7 +20,9 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => { const navigate = useNavigate(); const { addToast } = useToastStore(); + const { value, resetValue, handleChange } = useInput(); + const { buttonRef } = useClickEnterKey(isOpen); const enterPairRoom = async () => { const { exists } = await getPairRoomExists(value); @@ -50,7 +53,7 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => { - diff --git a/frontend/src/components/PairRoom/GuideModal/GuideModal.tsx b/frontend/src/components/PairRoom/GuideModal/GuideModal.tsx index bd34c477..c8782944 100644 --- a/frontend/src/components/PairRoom/GuideModal/GuideModal.tsx +++ b/frontend/src/components/PairRoom/GuideModal/GuideModal.tsx @@ -9,6 +9,7 @@ import { Modal } from '@/components/_common/Modal'; import useToastStore from '@/stores/toastStore'; +import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey'; import useCopyClipBoard from '@/hooks/_common/useCopyClipboard'; import { theme } from '@/styles/theme'; @@ -27,6 +28,7 @@ const GuideModal = ({ isOpen, close, accessCode }: GuideModalProps) => { const { addToast } = useToastStore(); const [, onCopy] = useCopyClipBoard(); + const { buttonRef } = useClickEnterKey(isOpen); const checkPermission = () => { if (Notification.permission !== 'granted') { @@ -104,7 +106,7 @@ const GuideModal = ({ isOpen, close, accessCode }: GuideModalProps) => {

모두 확인하셨나요?

- diff --git a/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx b/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx index 069e7b9f..e78609db 100644 --- a/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx +++ b/frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx @@ -8,6 +8,7 @@ import useToastStore from '@/stores/toastStore'; import { getMemberName } from '@/apis/member'; +import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey'; import useInput from '@/hooks/_common/useInput'; import { validatePairInfo } from '@/validations/validatePairName'; @@ -21,9 +22,11 @@ interface AddPairModalProps { } const AddPairModal = ({ isOpen, closeModal, onPairData }: AddPairModalProps) => { - const { value, status, message, handleChange, resetValue } = useInput(); const { addToast } = useToastStore(); + const { value, status, message, handleChange, resetValue } = useInput(); + const { buttonRef } = useClickEnterKey(isOpen); + const handleCloseModal = () => { resetValue(); closeModal(); @@ -62,7 +65,12 @@ const AddPairModal = ({ isOpen, closeModal, onPairData }: AddPairModalProps) => - diff --git a/frontend/src/components/_common/Button/Button.tsx b/frontend/src/components/_common/Button/Button.tsx index fd6ce9a7..7926d61c 100644 --- a/frontend/src/components/_common/Button/Button.tsx +++ b/frontend/src/components/_common/Button/Button.tsx @@ -1,4 +1,4 @@ -import { ButtonHTMLAttributes } from 'react'; +import { ButtonHTMLAttributes, forwardRef } from 'react'; import { css } from 'styled-components'; @@ -22,44 +22,52 @@ interface ButtonProp extends ButtonHTMLAttributes { children: React.ReactNode; } -const Button = ({ - $css, - size = 'md', - width, - height, - borderRadius, - fontSize, - fontWeight, - textAlign, - filled = true, - rounded = false, - animation = false, - color = 'primary', - disabled = false, - children, - ...props -}: React.PropsWithChildren) => { - return ( - - {children} - - ); -}; +const Button = forwardRef( + ( + { + $css, + size = 'md', + width, + height, + borderRadius, + fontSize, + fontWeight, + textAlign, + filled = true, + rounded = false, + animation = false, + color = 'primary', + disabled = false, + children, + ...props + }, + ref, + ) => { + return ( + + {children} + + ); + }, +); + +Button.displayName = 'Button'; export default Button; diff --git a/frontend/src/components/_common/ConfirmModal/ConfirmModal.tsx b/frontend/src/components/_common/ConfirmModal/ConfirmModal.tsx index c89ca9a6..adadd783 100644 --- a/frontend/src/components/_common/ConfirmModal/ConfirmModal.tsx +++ b/frontend/src/components/_common/ConfirmModal/ConfirmModal.tsx @@ -1,6 +1,8 @@ import Button from '@/components/_common/Button/Button'; import { Modal } from '@/components/_common/Modal'; +import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey'; + import * as S from './ConfirmModal.styles'; interface ConfirmModalProps { @@ -22,6 +24,8 @@ const ConfirmModal = ({ confirmText = '확인', onConfirm, }: ConfirmModalProps) => { + const { buttonRef } = useClickEnterKey(isOpen); + return ( @@ -33,7 +37,7 @@ const ConfirmModal = ({ - From 242452c9ab36cb642de27ceb00072dc91892580f Mon Sep 17 00:00:00 2001 From: greetings1012 Date: Fri, 20 Dec 2024 19:58:43 +0900 Subject: [PATCH 13/22] =?UTF-8?q?=F0=9F=90=9B=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/PrivateRoutes.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/pages/PrivateRoutes.tsx b/frontend/src/pages/PrivateRoutes.tsx index fa6ded29..7c399eb0 100644 --- a/frontend/src/pages/PrivateRoutes.tsx +++ b/frontend/src/pages/PrivateRoutes.tsx @@ -16,6 +16,16 @@ const PrivateRoutes = () => { const { addToast } = useToastStore(); const validateAccess = async () => { + if (location.state?.from === '/my-page') { + setIsValid(true); + return; + } + + if (location.state?.from === `/${accessCode}/retrospectForm`) { + setIsValid(true); + return; + } + if (!accessCode || !location.state?.valid) { setIsValid(false); addToast({ status: 'ERROR', message: '유효하지 않은 접근입니다. 올바른 경로로 접근해 주세요.' }); From f9b2bf8acd1401d6cc339468d5c678d3d6a1dfac Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 21:44:39 +0900 Subject: [PATCH 14/22] =?UTF-8?q?=F0=9F=92=84=20FloatingSidebar=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B0=8F=20=EC=84=A0=20=EA=B8=B8=EC=9D=B4?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CoduoDocs/ContentBox/ContentBox.styles.ts | 2 +- .../CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts b/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts index 3d6875e2..bd148018 100644 --- a/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts +++ b/frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts @@ -41,7 +41,7 @@ export const ContentItem = styled(Link)<{ $isActive: boolean }>` left: -2rem; width: 3px; - height: 140%; + height: 160%; background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[200])}; diff --git a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts index eb2aa440..5596f3c2 100644 --- a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts +++ b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts @@ -6,7 +6,7 @@ export const Layout = styled.div` gap: 2.3rem; position: fixed; - top: 15rem; + top: 12rem; left: 4%; background-color: ${({ theme }) => theme.color.black[0]}; From b4fe12998bdebd33a8a77dfb8b4b9459c410724f Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 21:45:39 +0900 Subject: [PATCH 15/22] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20DocsImage=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=A1=9C=20=EB=B0=9B=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoduoDocs/DocsImage/DocsImage.styles.ts | 7 ++-- .../CoduoDocs/DocsImage/DocsImage.tsx | 35 +++++++++++++------ .../src/components/CoduoDocs/Quote/Quote.tsx | 2 +- .../CoduoDocs/SourceCode/SourceCode.styles.ts | 4 +-- 4 files changed, 32 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts index 2fdc103a..0db0f8bb 100644 --- a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts +++ b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts @@ -4,6 +4,8 @@ export const Container = styled.div` display: flex; flex-direction: column; gap: 2rem; + + margin-top: 3rem; `; export const Contents = styled.p` color: ${({ theme }) => theme.color.black[900]}; @@ -11,13 +13,12 @@ export const Contents = styled.p` `; export const Image = styled.img` - width: 90rem; - height: 50rem; + width: 80rem; + object-fit: cover; object-position: center; @media (width <= 1000px) { width: 60rem; - height: 30rem; } `; diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx index bddc1bb6..684687c1 100644 --- a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx +++ b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx @@ -1,19 +1,34 @@ +import Quote from '@/components/CoduoDocs/Quote/Quote'; +import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode'; + import * as S from './DocsImage.styles'; -interface DocsImageProps { - information?: string; - src: string; - alt: string; +interface Data { + title?: string; + src?: string; id?: string; + info?: string; + sourceCode?: string[]; +} + +interface DocsImageProps { + images?: Data[]; } -const DocsImage = ({ information, src, alt, id, children }: React.PropsWithChildren) => { +const DocsImage = ({ images }: DocsImageProps) => { return ( - - {information && {information}} - {children} - {alt} - + <> + {images?.map((data, index) => { + return ( + + {data.title && {data.title}} + {data.info && } + {data.src && } + {data.sourceCode?.map((sourceCode, index) => )} + + ); + })} + ); }; diff --git a/frontend/src/components/CoduoDocs/Quote/Quote.tsx b/frontend/src/components/CoduoDocs/Quote/Quote.tsx index e6ab9ee6..e2464c26 100644 --- a/frontend/src/components/CoduoDocs/Quote/Quote.tsx +++ b/frontend/src/components/CoduoDocs/Quote/Quote.tsx @@ -7,7 +7,7 @@ interface QuoteProps { isNewBrowserOpen?: boolean; } -const Quote = ({ text, href, linkText, isNewBrowserOpen = false }: QuoteProps) => { +const Quote = ({ text, href, linkText, isNewBrowserOpen = true }: QuoteProps) => { return ( | diff --git a/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts b/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts index 5028505f..f0cb4d8b 100644 --- a/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts +++ b/frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts @@ -11,11 +11,11 @@ export const Container = styled.div` padding: 3rem 4rem; border-radius: 0.5rem; - background-color: ${({ theme }) => theme.color.black[200]}; + background-color: ${({ theme }) => theme.color.black[800]}; `; export const Content = styled.p` - color: ${({ theme }) => theme.color.black[900]}; + color: ${({ theme }) => theme.color.black[100]}; font-size: ${({ theme }) => theme.fontSize.base}; line-height: 1.8; white-space: pre-wrap; From c3671c753f7e2c30fa155b39bbc51a13190c118a Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 21:46:21 +0900 Subject: [PATCH 16/22] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20CoduoDocs=20?= =?UTF-8?q?=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=20=EB=90=9C=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20constant=20=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/coduoDocs.ts | 37 --- frontend/src/constants/coduoDocs/concept.ts | 0 .../src/constants/coduoDocs/howToStart.ts | 108 +++++++++ frontend/src/constants/coduoDocs/sidebar.ts | 60 +++++ frontend/src/pages/CoduoDocs/CoduoDocs.tsx | 228 ++---------------- 5 files changed, 188 insertions(+), 245 deletions(-) delete mode 100644 frontend/src/constants/coduoDocs.ts create mode 100644 frontend/src/constants/coduoDocs/concept.ts create mode 100644 frontend/src/constants/coduoDocs/howToStart.ts create mode 100644 frontend/src/constants/coduoDocs/sidebar.ts diff --git a/frontend/src/constants/coduoDocs.ts b/frontend/src/constants/coduoDocs.ts deleted file mode 100644 index 98792aac..00000000 --- a/frontend/src/constants/coduoDocs.ts +++ /dev/null @@ -1,37 +0,0 @@ -export const START_CONTENT = [ - { - id: 'start-coduo', - subtitle: '코딩해듀오 시작하기', - }, - { - id: 'start-with-mission', - subtitle: '미션과 함께 시작하기', - }, - { - id: 'start-free', - subtitle: '자유롭게 시작하기', - }, - { - id: 'input-name', - subtitle: '이름 입력하기', - }, - { - id: 'set-role', - subtitle: '역할 설정하기', - }, - { - id: 'set-timer', - subtitle: '타이머 설정하기', - }, -]; - -export const ABOUT_PAIR_PROGRAMMING = [ - { - id: 'what-is-pair-programming', - subtitle: '페어 프로그래밍이란?', - }, - { - id: 'what-is-pair-room', - subtitle: '페어룸이란?', - }, -]; diff --git a/frontend/src/constants/coduoDocs/concept.ts b/frontend/src/constants/coduoDocs/concept.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts new file mode 100644 index 00000000..48924dfa --- /dev/null +++ b/frontend/src/constants/coduoDocs/howToStart.ts @@ -0,0 +1,108 @@ +const HOW_TO_START = [ + { + id: 'coduo-guide', + title: '코딩해듀오 사용가이드', + content: `코딩해듀오 문서에 오신 것을 환영합니다! + 코딩해듀오는 페어 프로그래밍을 처음 접하는 사용자가 페어프로그래밍을 시작하기 위해 필요한 모든 것을 제공하는 서비스입니다. + 여기에서는 코딩해듀오를 어떻게 시작할 수 있는지 소개합니다.`, + images: [ + { + title: '1. 방 생성하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855075/coduo-start.webp', + alt: 'create-room', + info: '가장 먼저 방을 생성해주세요. 방 만들기 버튼을 누르면 페어 프로그래밍을 진행할 방이 생성됩니다', + }, + ], + }, + { + id: 'start-mission', + subtitle: '미션과 함께 시작하기', + content: `코딩해듀오는 원활한 페어 프로그래밍 진행을 위해 연습 미션을 제공하고 있습니다.`, + quote: { + href: 'https://github.com/coduo-missions', + linkText: '미션 레포지토리로 이동', + text: '미션 레포지토리에서 미션을 미리 확인해 보세요.', + }, + images: [ + { + title: '1. 미션과 함께 시작하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/start-with-mission.webp', + id: 'start-with-mission', + }, + { + title: '2. 미션 확인하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/select-mission.webp', + id: 'select-mission', + info: `레포지토리로 이동 버튼을 클릭하면 해당하는 미션의 레포지토리로 이동합니다. 확인 후 원하는 미션 버튼을 클릭해주세요.`, + }, + { + title: '3. 브랜치 생성하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/create-branch.webp', + id: 'create-branch', + info: `미션 버튼 클릭 시 브랜치 이름을 입력 할 수 있습니다. 자신의 깃허브 ID로 브랜치 이름을 입력하고 브랜치 생성하기 버튼을 클릭해주세요.`, + }, + { + title: '4. 생성한 브랜치 확인하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/check-branch.webp', + id: 'check-branch-created', + info: `미션 레포지토리에서 자신의 브랜치가 생성되었는지 확인해주세요.`, + }, + { + title: '5. fork 하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734858436/create-fork.png', + id: 'fork-repository', + info: `상단의 fork 버튼을 눌러 해당 미션을 자신의 레포지토리로 fork 해주세요.`, + }, + { + title: '6. 레포지토리 주소 복사하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/copy-code.webp', + id: 'copy-repository-address', + info: `fork 해 온 레포지토리 주소를 복사해주세요.`, + }, + { + title: '7. 로컬에 clone 하기', + id: 'clone-in-local', + info: ` + cd 명령어를 통해 원하는 폴더로 이동 후 레포지토리를 클론하고, 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 시작합니다.`, + sourceCode: [` cd {이동할 폴더 이름}`, `git clone {복사한 레포지토리 주소}`, ` code {실행할 파일 이름}`], + }, + ], + }, + { + id: 'start-free', + subtitle: '자유롭게 시작하기', + images: [ + { + title: '1. 미션 없이 시작하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/start-free.webp', + id: 'start-without-mission', + info: "'그냥 시작할래요' 버튼을 누르면 미션 없이 자유롭게 시작할 수 있습니다.", + }, + { + title: '2. 이름 입력하기 ', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/link-pair.webp', + id: 'link-pair', + info: '사용할 이름을 입력해 줍니다. 페어 정보 연동하기 버튼을 누르면 코딩해듀오에 가입 되어 있는 페어의 아이디를 연동할 수 있습니다.', + }, + { + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/input-pair-name.webp', + id: 'input-pair-name', + info: '연동 없이 시작할 경우, 사용할 페어 이름을 입력해 줍니다.', + }, + { + title: '3. 역할 정하기', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/select-role.webp', + id: 'select-role', + info: '페어와 논의하여 드라이버와 네비게이터를 정해줍니다. 관련 내용은 설명을 참고해 주세요.', + }, + { + title: '4. 타이머 설정하기', + id: 'set-timer', + src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734869420/set-timer.webp', + info: '페어프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 "직접 설정"을 통해 임의로 정할 수 있습니다.', + }, + ], + }, +]; + +export { HOW_TO_START }; diff --git a/frontend/src/constants/coduoDocs/sidebar.ts b/frontend/src/constants/coduoDocs/sidebar.ts new file mode 100644 index 00000000..87df1de1 --- /dev/null +++ b/frontend/src/constants/coduoDocs/sidebar.ts @@ -0,0 +1,60 @@ +export const START_WITH_MISSION = [ + { + id: 'start-with-mission', + subtitle: '미션과 함께 시작하기', + }, + { + id: 'select-mission', + subtitle: '미션 확인하기', + }, + { + id: 'create-branch', + subtitle: '브랜치 생성하기', + }, + { + id: 'check-branch-created', + subtitle: '생성한 브랜치 확인하기', + }, + { + id: 'fork-repository', + subtitle: 'fork 하기', + }, + { + id: 'copy-repository-address', + subtitle: '레포지토리 주소 복사하기', + }, + { + id: 'clone-in-local', + subtitle: '로컬에 clone 하기', + }, +]; + +export const START_FREE = [ + { + id: 'start-without-mission', + subtitle: '미션 없이 시작하기', + }, + { + id: 'link-pair', + subtitle: '이름 입력하기', + }, + { + id: 'select-role', + subtitle: '역할 정하기', + }, + { + id: 'set-timer', + subtitle: '타이머 설정하기', + }, +]; + +export const ABOUT_PAIR_PROGRAMMING = [ + { + id: 'what-is-pair-programming', + subtitle: '페어 프로그래밍이란?', + }, + { + id: 'what-is-pair-room', + subtitle: '페어룸이란?', + }, +]; diff --git a/frontend/src/pages/CoduoDocs/CoduoDocs.tsx b/frontend/src/pages/CoduoDocs/CoduoDocs.tsx index aaee06bd..809f309f 100644 --- a/frontend/src/pages/CoduoDocs/CoduoDocs.tsx +++ b/frontend/src/pages/CoduoDocs/CoduoDocs.tsx @@ -1,14 +1,12 @@ -import { DOCS_IMAGES } from '@/assets'; - import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox'; import DocsImage from '@/components/CoduoDocs/DocsImage/DocsImage'; import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar'; import Quote from '@/components/CoduoDocs/Quote/Quote'; -import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode'; import useHashScroll from '@/hooks/CoduoDocs/useHashScroll'; -import { ABOUT_PAIR_PROGRAMMING, START_CONTENT } from '@/constants/coduoDocs'; +import { HOW_TO_START } from '@/constants/coduoDocs/howToStart'; +import { START_WITH_MISSION, START_FREE, ABOUT_PAIR_PROGRAMMING } from '@/constants/coduoDocs/sidebar'; import * as S from './CoduoDocs.styles'; @@ -18,215 +16,29 @@ const CoduoDocs = () => { return ( <> - + + + - - 코딩해듀오 시작하기 - - 코딩해듀오 문서에 오신 것을 환영합니다! 코딩해듀오는 페어 프로그래밍을 처음 접하는 사용자가 페어 - 프로그래밍을 시작하기 위해 필요한 모든 것을 제공하는 서비스입니다. 여기에서는 코딩해듀오를 어떻게 시작할 수 - 있는지 소개합니다. - - - - - + {HOW_TO_START.map((data, index) => { + return ( + + {data.title && {data.title}} + {data.subtitle && {data.subtitle}} + {data.content && {data.content}} + {data.quote && } + {data.images && } + + ); + })} + + {/* 코딩해듀오는 원활한 페어 프로그래밍 진행을 위해 연습 미션을 제공하고 있습니다. - - - - - 미션과 함께 시작하기 - - - - - - - - - - - - - - - - - - - - - - - 이제 가저온 프로젝트를 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 진행합니다. - - - - 자유롭게 시작하기 - - - - - - - - - - - - - - - - - - - - - - - - 페어 프로그래밍에 대해 - 페어 프로그래밍이란? - - - - 페어 프로그래밍(Pair Programming)은 두 명의 프로그래머가 한 컴퓨터에서 함께 작업하며 소프트웨어 코드를 - 작성하는 협업 방식입니다. 페어 프로그래밍에서는 두 사람이 각각 드라이버(Driver) 와 내비게이터(Navigator) - 역할을 번갈아 가며 수행합니다. - - - - - - -
- - -
- - 지속적인 의사소통 유지하기 -

- 페어 프로그래밍의 핵심은 지속적인 의사소통입니다. 만약 두 개발자 사이에 대화가 없다면, 그들은 아마도 - 사고 과정을 공유하고 있지 않을 것입니다. 드라이버는 코드를 작성하면서 자신의 생각을 말로 표현해야 - 하며, 내비게이터는 적극적으로 의견을 제시하고 질문해야 합니다. 이를 통해 아이디어를 효과적으로 - 교환하고 문제를 함께 해결할 수 있습니다. -

-
- 역할 정기적으로 교대하기와 코드 자주 커밋하기 -

- 드라이버와 내비게이터 역할을 일정 간격으로 바꾸는 것이 중요합니다. 이는 개발자 간의 기술 공유를 - 촉진하고 집중력을 유지하는 데 도움이 됩니다. 역할을 전환할 때마다 코드를 커밋하는 것이 좋습니다. 작은 - 단위로 자주 커밋하면 작업 진행 상황을 명확히 할 수 있고, 나중에 코드를 리뷰하거나 문제를 해결할 때 - 유용합니다. -

-
- 적절한 페어 구성과 익숙한 개발 환경 사용하기 -

- 페어를 이룰 때는 두 개발자가 원활하게 협력할 수 있는지 신중히 고려해야 합니다. 성격이나 작업 스타일이 - 맞지 않으면 생산성이 떨어질 수 있습니다. 또한, 두 개발자 모두 사용하는 개발 환경에 익숙해야 합니다. - 그렇지 않으면 페어 프로그래밍의 균형이 깨질 수 있습니다. 필요한 경우, 시작 전에 개발 환경을 함께 - 설정하고 익히는 시간을 가지는 것이 좋습니다. -

-
- 필요할 때 명확히 설명 요청하기와 적절한 휴식 취하기 -

- 특히 경험이 적은 개발자가 전문가와 작업할 때는 배울 수 있는 모든 기회를 활용해야 합니다. 이해가 되지 - 않는 부분이 있다면 주저하지 말고 설명을 요청해야 합니다. 동시에, 두 개발자 모두에게 적합한 페이스로 - 작업해야 합니다. 필요할 때는 휴식을 취하여 집중력을 유지하고 생산성을 높일 수 있습니다. 정기적인 - 휴식은 장기적으로 더 효율적인 작업을 가능하게 합니다. -

-
- - - - 페어룸이란? - - - - -
- 투두 리스트 -

- 투두 리스트를 제공하여, 페어가 함께 목표와 할 일을 설정하고 관리할 수 있습니다. 이를 통해 작업의 - 방향성을 명확히 하고 진행 상황을 실시간으로 파악할 수 있습니다. 또한, 우선순위를 설정하여 중요한 - 작업에 집중할 수 있으며, 완료된 작업을 체크하면서 성취감을 느낄 수 있습니다. -

-
- 레퍼런스 -

- 페어 프로그래밍 도중 참고한 레퍼런스를 저장할 수 있습니다. 저장된 레퍼런스는 카테고리별로 정리되어 - 나중에 쉽게 찾아볼 수 있어 프로젝트 완료 후에도 학습 자료로 활용할 수 있습니다. -

-
- 알람 기능 -

- 설정한 시간이 지나면 역할을 변경할 수 있도록 알람이 울려 적절한 시점에 역할을 교체할 수 있도록 - 돕습니다. -

-
- 회고 -

- 페어 프로그래밍 세션이 종료되면 회고를 진행합니다. 이 과정에서 잘된 점, 개선할 점, 배운 점 등을 함께 - 논의하고 기록합니다. 회고 기능은 구조화된 템플릿을 제공하여 효과적인 회고를 가능하게 하며, 이전 회고 - 내용을 쉽게 참조할 수 있어 지속적인 개선이 가능합니다. -

-
- - - - + */} + {/* */} ); From 4860f57ab109e0b7664d187a80a25745bc0b482f Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 23:31:37 +0900 Subject: [PATCH 17/22] =?UTF-8?q?=F0=9F=9A=9A=20DocsImages->Steps=20?= =?UTF-8?q?=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=A6=84=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 --- .../CoduoDocs/DocsImage/DocsImage.stories.tsx | 19 ------------------- .../Steps.styles.ts} | 0 .../DocsImage.tsx => Steps/Steps.tsx} | 10 +++++----- 3 files changed, 5 insertions(+), 24 deletions(-) delete mode 100644 frontend/src/components/CoduoDocs/DocsImage/DocsImage.stories.tsx rename frontend/src/components/CoduoDocs/{DocsImage/DocsImage.styles.ts => Steps/Steps.styles.ts} (100%) rename frontend/src/components/CoduoDocs/{DocsImage/DocsImage.tsx => Steps/Steps.tsx} (80%) diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.stories.tsx b/frontend/src/components/CoduoDocs/DocsImage/DocsImage.stories.tsx deleted file mode 100644 index 0cbce9e3..00000000 --- a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import DocsImage from '@/components/CoduoDocs/DocsImage/DocsImage'; - -const meta = { - title: 'component/CoduoDocs/DocsImage', - component: DocsImage, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - information: '1. 방 만들기 버튼을 누르면 페어 프로그래밍을 진행할 방이 생성됩니다.', - src: 'https://i.pravatar.cc', - }, -}; diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts b/frontend/src/components/CoduoDocs/Steps/Steps.styles.ts similarity index 100% rename from frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts rename to frontend/src/components/CoduoDocs/Steps/Steps.styles.ts diff --git a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx b/frontend/src/components/CoduoDocs/Steps/Steps.tsx similarity index 80% rename from frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx rename to frontend/src/components/CoduoDocs/Steps/Steps.tsx index 684687c1..70905cbf 100644 --- a/frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx +++ b/frontend/src/components/CoduoDocs/Steps/Steps.tsx @@ -1,7 +1,7 @@ import Quote from '@/components/CoduoDocs/Quote/Quote'; import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode'; -import * as S from './DocsImage.styles'; +import * as S from './Steps.styles'; interface Data { title?: string; @@ -12,13 +12,13 @@ interface Data { } interface DocsImageProps { - images?: Data[]; + steps?: Data[]; } -const DocsImage = ({ images }: DocsImageProps) => { +const Steps = ({ steps }: DocsImageProps) => { return ( <> - {images?.map((data, index) => { + {steps?.map((data, index) => { return ( {data.title && {data.title}} @@ -32,4 +32,4 @@ const DocsImage = ({ images }: DocsImageProps) => { ); }; -export default DocsImage; +export default Steps; From cae715740c4194c8560639d46a910d98abf3a54e Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 23:32:43 +0900 Subject: [PATCH 18/22] =?UTF-8?q?=F0=9F=92=AC=20Docs=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=8E=98=EC=96=B4=ED=94=84=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EB=9E=98=EB=B0=8D=20=EA=B0=9C=EB=85=90=20constant=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/coduoDocs/concept.ts | 0 frontend/src/constants/coduoDocs/index.ts | 14 +++++ .../coduoDocs/pairProgrammingConcept.ts | 62 +++++++++++++++++++ frontend/src/pages/CoduoDocs/CoduoDocs.tsx | 59 ++++++++++++++---- 4 files changed, 124 insertions(+), 11 deletions(-) delete mode 100644 frontend/src/constants/coduoDocs/concept.ts create mode 100644 frontend/src/constants/coduoDocs/index.ts create mode 100644 frontend/src/constants/coduoDocs/pairProgrammingConcept.ts diff --git a/frontend/src/constants/coduoDocs/concept.ts b/frontend/src/constants/coduoDocs/concept.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/constants/coduoDocs/index.ts b/frontend/src/constants/coduoDocs/index.ts new file mode 100644 index 00000000..2162a799 --- /dev/null +++ b/frontend/src/constants/coduoDocs/index.ts @@ -0,0 +1,14 @@ +import { HOW_TO_START } from '@/constants/coduoDocs/howToStart'; +import { START_WITH_MISSION, START_FREE, ABOUT_PAIR_PROGRAMMING } from '@/constants/coduoDocs/sidebar'; + +import { PAIR_PROGRAMMING_CONCEPT, NOTIONS, ABOUT_PAIR_ROOM } from './pairProgrammingConcept'; + +export { + PAIR_PROGRAMMING_CONCEPT, + NOTIONS, + ABOUT_PAIR_ROOM, + HOW_TO_START, + START_WITH_MISSION, + START_FREE, + ABOUT_PAIR_PROGRAMMING, +}; diff --git a/frontend/src/constants/coduoDocs/pairProgrammingConcept.ts b/frontend/src/constants/coduoDocs/pairProgrammingConcept.ts new file mode 100644 index 00000000..e7a77d6d --- /dev/null +++ b/frontend/src/constants/coduoDocs/pairProgrammingConcept.ts @@ -0,0 +1,62 @@ +export const PAIR_PROGRAMMING_CONCEPT = [ + { + id: 'what-is-pair-programming', + title: '페어 프로그래밍에 대해', + subtitle: '페어 프로그래밍이란?', + quote: { + text: '페어 프로그래밍에 대한 정보는 다음 레퍼런스를 기반으로 작성했습니다.', + linkText: '자세한 정보 보기', + href: 'https://www.techtarget.com/searchsoftwarequality/definition/Pair-programming', + }, + content: + '페어 프로그래밍(Pair Programming)은 두 명의 프로그래머가 한 컴퓨터에서 함께 작업하며 소프트웨어 코드를 작성하는 협업 방식입니다. 페어 프로그래밍에서는 두 사람이 각각 드라이버(Driver) 와 내비게이터(Navigator) 역할을 번갈아 가며 수행합니다.', + code: `드라이버(Driver) +실제로 코드를 작성하는 사람으로, 키보드와 마우스를 사용해 코드를 타이핑합니다. + +내비게이터(Navigator) +작성된 코드를 실시간으로 검토하고 개선할 부분을 제안하며, 코드의 전반적인 구조와 논리를 생각합니다.`, + }, +]; + +export const NOTIONS = [ + { + quote: '페어 프로그래밍을 효과적으로 수행하려면 다음과 같은 부분들을 유의해야 합니다.', + }, + { + strong: '지속적인 의사소통 유지하기', + info: '페어 프로그래밍의 핵심은 지속적인 의사소통입니다. 만약 두 개발자 사이에 대화가 없다면, 그들은 아마도 사고 과정을 공유하고 있지 않을 것입니다. 드라이버는 코드를 작성하면서 자신의 생각을 말로 표현해야 하며, 내비게이터는 적극적으로 의견을 제시하고 질문해야 합니다. 이를 통해 아이디어를 효과적으로 교환하고 문제를 함께 해결할 수 있습니다.', + }, + { + strong: '역할 정기적으로 교대하기와 코드 자주 커밋하기', + info: '드라이버와 내비게이터 역할을 일정 간격으로 바꾸는 것이 중요합니다. 이는 개발자 간의 기술 공유를 촉진하고 집중력을 유지하는 데 도움이 됩니다. 역할을 전환할 때마다 코드를 커밋하는 것이 좋습니다. 작은 단위로 자주 커밋하면 작업 진행 상황을 명확히 할 수 있고, 나중에 코드를 리뷰하거나 문제를 해결할 때 유용합니다.', + }, + { + strong: '적절한 페어 구성과 익숙한 개발 환경 사용하기', + info: '페어를 이룰 때는 두 개발자가 원활하게 협력할 수 있는지 신중히 고려해야 합니다. 성격이나 작업 스타일이 맞지 않으면 생산성이 떨어질 수 있습니다. 또한, 두 개발자 모두 사용하는 개발 환경에 익숙해야 합니다. 그렇지 않으면 페어 프로그래밍의 균형이 깨질 수 있습니다. 필요한 경우, 시작 전에 개발 환경을 함께 설정하고 익히는 시간을 가지는 것이 좋습니다.', + }, + { + strong: '필요할 때 명확히 설명 요청하기와 적절한 휴식 취하기', + info: '특히 경험이 적은 개발자가 전문가와 작업할 때는 배울 수 있는 모든 기회를 활용해야 합니다. 이해가 되지 않는 부분이 있다면 주저하지 말고 설명을 요청해야 합니다. 동시에, 두 개발자 모두에게 적합한 페이스로 작업해야 합니다. 필요할 때는 휴식을 취하여 집중력을 유지하고 생산성을 높일 수 있습니다. 정기적인 휴식은 장기적으로 더 효율적인 작업을 가능하게 합니다.', + }, +]; + +export const ABOUT_PAIR_ROOM = [ + { subtitle: '페어룸이란?', id: 'what-is-pair-room' }, + { quote: '코딩해듀오에서는 페어룸을 제공하여 페어 프로그래밍을 더욱 유용하고 쉽게 하도록 도와줍니다.' }, + { + strong: '투두 리스트', + info: '투두 리스트를 제공하여, 페어가 함께 목표와 할 일을 설정하고 관리할 수 있습니다. 이를 통해 작업의 방향성을 명확히 하고 진행 상황을 실시간으로 파악할 수 있습니다. 또한, 우선순위를 설정하여 중요한 작업에 집중할 수 있으며, 완료된 작업을 체크하면서 성취감을 느낄 수 있습니다.', + }, + { + strong: '레퍼런스', + info: '페어 프로그래밍 도중 참고한 레퍼런스를 저장할 수 있습니다. 저장된 레퍼런스는 카테고리별로 정리되어 나중에 쉽게 찾아볼 수 있어 프로젝트 완료 후에도 학습 자료로 활용할 수 있습니다.', + }, + { + strong: '알람 기능', + info: '설정한 시간이 지나면 역할을 변경할 수 있도록 알람이 울려 적절한 시점에 역할을 교체할 수 있도록 돕습니다.', + }, + { + strong: '회고', + info: '페어 프로그래밍 세션이 종료되면 회고를 진행합니다. 이 과정에서 잘된 점, 개선할 점, 배운 점 등을 함께 논의하고 기록합니다. 회고 기능은 구조화된 템플릿을 제공하여 효과적인 회고를 가능하게 하며, 이전 회고 내용을 쉽게 참조할 수 있어 지속적인 개선이 가능합니다.', + }, +]; diff --git a/frontend/src/pages/CoduoDocs/CoduoDocs.tsx b/frontend/src/pages/CoduoDocs/CoduoDocs.tsx index 809f309f..36d34bea 100644 --- a/frontend/src/pages/CoduoDocs/CoduoDocs.tsx +++ b/frontend/src/pages/CoduoDocs/CoduoDocs.tsx @@ -1,12 +1,20 @@ import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox'; -import DocsImage from '@/components/CoduoDocs/DocsImage/DocsImage'; import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar'; import Quote from '@/components/CoduoDocs/Quote/Quote'; +import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode'; +import Steps from '@/components/CoduoDocs/Steps/Steps'; import useHashScroll from '@/hooks/CoduoDocs/useHashScroll'; -import { HOW_TO_START } from '@/constants/coduoDocs/howToStart'; -import { START_WITH_MISSION, START_FREE, ABOUT_PAIR_PROGRAMMING } from '@/constants/coduoDocs/sidebar'; +import { + PAIR_PROGRAMMING_CONCEPT, + HOW_TO_START, + START_WITH_MISSION, + START_FREE, + ABOUT_PAIR_PROGRAMMING, + NOTIONS, + ABOUT_PAIR_ROOM, +} from '@/constants/coduoDocs'; import * as S from './CoduoDocs.styles'; @@ -24,21 +32,50 @@ const CoduoDocs = () => { {HOW_TO_START.map((data, index) => { return ( - + {data.title && {data.title}} {data.subtitle && {data.subtitle}} {data.content && {data.content}} {data.quote && } - {data.images && } - + {data.steps && } + ); })} - {/* - 코딩해듀오는 원활한 페어 프로그래밍 진행을 위해 연습 미션을 제공하고 있습니다. - - */} - {/* */} + {PAIR_PROGRAMMING_CONCEPT.map((data, index) => { + return ( + + {data.title && {data.title}} + {data.subtitle && {data.subtitle}} + {data.quote && } + {data.content && {data.content}} + {data.code && } + + ); + })} + + {NOTIONS.map((data, index) => { + return ( + + {data.quote && } + {data.strong && {data.strong}} + {data.info &&

{data.info}

} + + ); + })} + + + {ABOUT_PAIR_ROOM.map((data, index) => { + return ( + + {data.subtitle && {data.subtitle}} + {data.quote && } + {data.strong && {data.strong}} + {data.info &&

{data.info}

} + + ); + })} + ); From a010d122c1daffa47b29398b0209b1fd4299c9f0 Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 23:33:59 +0900 Subject: [PATCH 19/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=ED=8E=98=EC=96=B4?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EA=B7=B8=EB=9E=98=EB=B0=8D=20=EA=B0=9C?= =?UTF-8?q?=EB=85=90=20=EB=B0=8F=20=EC=84=A4=EB=AA=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20constant=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/coduoDocs/howToStart.ts | 10 ++++------ frontend/src/constants/coduoDocs/sidebar.ts | 2 +- frontend/src/pages/CoduoDocs/CoduoDocs.styles.ts | 16 +++++++--------- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts index 48924dfa..4bcfded9 100644 --- a/frontend/src/constants/coduoDocs/howToStart.ts +++ b/frontend/src/constants/coduoDocs/howToStart.ts @@ -1,11 +1,11 @@ -const HOW_TO_START = [ +export const HOW_TO_START = [ { id: 'coduo-guide', title: '코딩해듀오 사용가이드', content: `코딩해듀오 문서에 오신 것을 환영합니다! 코딩해듀오는 페어 프로그래밍을 처음 접하는 사용자가 페어프로그래밍을 시작하기 위해 필요한 모든 것을 제공하는 서비스입니다. 여기에서는 코딩해듀오를 어떻게 시작할 수 있는지 소개합니다.`, - images: [ + steps: [ { title: '1. 방 생성하기', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855075/coduo-start.webp', @@ -23,7 +23,7 @@ const HOW_TO_START = [ linkText: '미션 레포지토리로 이동', text: '미션 레포지토리에서 미션을 미리 확인해 보세요.', }, - images: [ + steps: [ { title: '1. 미션과 함께 시작하기', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/start-with-mission.webp', @@ -71,7 +71,7 @@ const HOW_TO_START = [ { id: 'start-free', subtitle: '자유롭게 시작하기', - images: [ + steps: [ { title: '1. 미션 없이 시작하기', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/start-free.webp', @@ -104,5 +104,3 @@ const HOW_TO_START = [ ], }, ]; - -export { HOW_TO_START }; diff --git a/frontend/src/constants/coduoDocs/sidebar.ts b/frontend/src/constants/coduoDocs/sidebar.ts index 87df1de1..b3f55fbc 100644 --- a/frontend/src/constants/coduoDocs/sidebar.ts +++ b/frontend/src/constants/coduoDocs/sidebar.ts @@ -31,7 +31,7 @@ export const START_WITH_MISSION = [ export const START_FREE = [ { - id: 'start-without-mission', + id: 'start-free', subtitle: '미션 없이 시작하기', }, { diff --git a/frontend/src/pages/CoduoDocs/CoduoDocs.styles.ts b/frontend/src/pages/CoduoDocs/CoduoDocs.styles.ts index f4ebff3f..79fe7026 100644 --- a/frontend/src/pages/CoduoDocs/CoduoDocs.styles.ts +++ b/frontend/src/pages/CoduoDocs/CoduoDocs.styles.ts @@ -1,12 +1,16 @@ import styled from 'styled-components'; export const Title = styled.p` + margin-top: 5rem; + color: ${({ theme }) => theme.color.black[900]}; font-size: ${({ theme }) => theme.fontSize.h2}; font-weight: ${({ theme }) => theme.fontWeight.semibold}; `; export const Subtitle = styled.p` + margin-top: 3rem; + color: ${({ theme }) => theme.color.black[900]}; font-size: ${({ theme }) => theme.fontSize.h4}; font-weight: ${({ theme }) => theme.fontWeight.semibold}; @@ -31,24 +35,18 @@ export const Sentence = styled.div` gap: 0.8rem; `; -export const ParagraphContainer = styled.section` +export const Container = styled.section` display: flex; flex-direction: column; gap: 1.7rem; `; -export const ImageContainer = styled.section` - display: flex; - flex-direction: column; - gap: 5rem; -`; - export const Layout = styled.div` display: flex; flex-direction: column; - gap: 8.5rem; + gap: 4rem; - margin: 8% 10% 8% 25%; + margin: 5% 10% 8% 25%; @media (width <= 1000px) { margin: 8% 17%; From 84811104ac15024e78e693c833c58b3672f609a5 Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Sun, 22 Dec 2024 23:39:11 +0900 Subject: [PATCH 20/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Header=20=EC=9D=98?= =?UTF-8?q?=20'=EC=BD=94=EB=94=A9=ED=95=B4=EB=93=80=EC=98=A4=20=EC=8B=9C?= =?UTF-8?q?=EC=9E=91=ED=95=98=EA=B8=B0'=20=EB=AC=B8=EA=B5=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx | 4 ++-- frontend/src/components/_common/Header/Header.tsx | 6 +++--- frontend/src/constants/coduoDocs/howToStart.ts | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx index 8b36239c..5b8fcc48 100644 --- a/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx +++ b/frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox'; import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar'; -import { START_CONTENT } from '@/constants/coduoDocs'; +import { PAIR_PROGRAMMING_CONCEPT } from '@/constants/coduoDocs'; const meta = { title: 'component/CoduoDocs/FloatingSidebar', @@ -17,7 +17,7 @@ type Story = StoryObj; export const Default: Story = { render: () => ( - + ), }; diff --git a/frontend/src/components/_common/Header/Header.tsx b/frontend/src/components/_common/Header/Header.tsx index 032d877d..6768b144 100644 --- a/frontend/src/components/_common/Header/Header.tsx +++ b/frontend/src/components/_common/Header/Header.tsx @@ -28,11 +28,11 @@ const Header = () => { - - + + - + diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts index 4bcfded9..0133c19c 100644 --- a/frontend/src/constants/coduoDocs/howToStart.ts +++ b/frontend/src/constants/coduoDocs/howToStart.ts @@ -1,8 +1,8 @@ export const HOW_TO_START = [ { id: 'coduo-guide', - title: '코딩해듀오 사용가이드', - content: `코딩해듀오 문서에 오신 것을 환영합니다! + title: '코딩해듀오 가이드북', + content: `코딩해듀오 가이드북에 오신 것을 환영합니다! 코딩해듀오는 페어 프로그래밍을 처음 접하는 사용자가 페어프로그래밍을 시작하기 위해 필요한 모든 것을 제공하는 서비스입니다. 여기에서는 코딩해듀오를 어떻게 시작할 수 있는지 소개합니다.`, steps: [ From 695db6c882fba61c2a5411c6a7a697b1bec7e052 Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Mon, 23 Dec 2024 12:56:11 +0900 Subject: [PATCH 21/22] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=ED=8E=98=EC=96=B4?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=9E=85=EB=A0=A5=ED=95=98=EA=B8=B0?= =?UTF-8?q?=EC=97=90=20=EB=8F=99=EC=9D=BC=20id=20=EB=B6=80=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/coduoDocs/howToStart.ts | 2 +- frontend/src/constants/coduoDocs/sidebar.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts index 0133c19c..d0b1f269 100644 --- a/frontend/src/constants/coduoDocs/howToStart.ts +++ b/frontend/src/constants/coduoDocs/howToStart.ts @@ -81,7 +81,7 @@ export const HOW_TO_START = [ { title: '2. 이름 입력하기 ', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/link-pair.webp', - id: 'link-pair', + id: 'input-pair-name', info: '사용할 이름을 입력해 줍니다. 페어 정보 연동하기 버튼을 누르면 코딩해듀오에 가입 되어 있는 페어의 아이디를 연동할 수 있습니다.', }, { diff --git a/frontend/src/constants/coduoDocs/sidebar.ts b/frontend/src/constants/coduoDocs/sidebar.ts index b3f55fbc..da63b7c3 100644 --- a/frontend/src/constants/coduoDocs/sidebar.ts +++ b/frontend/src/constants/coduoDocs/sidebar.ts @@ -35,7 +35,7 @@ export const START_FREE = [ subtitle: '미션 없이 시작하기', }, { - id: 'link-pair', + id: 'input-pair-name', subtitle: '이름 입력하기', }, { From 9d32483ead5973a99d2fd30cb06cd868d9544656 Mon Sep 17 00:00:00 2001 From: GimGayeon Date: Mon, 23 Dec 2024 13:02:48 +0900 Subject: [PATCH 22/22] =?UTF-8?q?=F0=9F=92=AC=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95(=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=ED=84=B0->=20=EB=82=B4=EB=B9=84=EA=B2=8C=EC=9D=B4,=20=ED=81=B4?= =?UTF-8?q?=EB=A1=A0->=20clone)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/coduoDocs/howToStart.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts index d0b1f269..fc22cdf4 100644 --- a/frontend/src/constants/coduoDocs/howToStart.ts +++ b/frontend/src/constants/coduoDocs/howToStart.ts @@ -63,7 +63,7 @@ export const HOW_TO_START = [ title: '7. 로컬에 clone 하기', id: 'clone-in-local', info: ` - cd 명령어를 통해 원하는 폴더로 이동 후 레포지토리를 클론하고, 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 시작합니다.`, + cd 명령어를 통해 원하는 폴더로 이동 후 레포지토리를 clone하고, 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 시작합니다.`, sourceCode: [` cd {이동할 폴더 이름}`, `git clone {복사한 레포지토리 주소}`, ` code {실행할 파일 이름}`], }, ], @@ -93,13 +93,13 @@ export const HOW_TO_START = [ title: '3. 역할 정하기', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/select-role.webp', id: 'select-role', - info: '페어와 논의하여 드라이버와 네비게이터를 정해줍니다. 관련 내용은 설명을 참고해 주세요.', + info: '페어와 논의하여 드라이버와 내비게이터를 정해줍니다. 관련 내용은 설명을 참고해 주세요.', }, { title: '4. 타이머 설정하기', id: 'set-timer', src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734869420/set-timer.webp', - info: '페어프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 "직접 설정"을 통해 임의로 정할 수 있습니다.', + info: '페어프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 "직접 설정"을 통해 자유롭게 정할 수 있습니다.', }, ], },