From 8a33ab8518ec7d45aa57104dbcad7709799fde88 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 11:06:35 +0900 Subject: [PATCH 01/30] =?UTF-8?q?refactor:=20home=20=EB=B0=8F=20layout=20?= =?UTF-8?q?=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=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 --- frontend/src/components/Layout/index.tsx | 5 +++-- frontend/src/pages/Home.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index 7f68df24..040d4109 100644 --- a/frontend/src/components/Layout/index.tsx +++ b/frontend/src/components/Layout/index.tsx @@ -67,6 +67,7 @@ function Layout({ children }: LayoutProps) { ` width: 372px; @@ -107,7 +108,7 @@ const LogoWrapper = styled.section<{ } `; -const MediaWrapper = styled.section<{ +const MediaWrapper = styled.div<{ $isAddPage: boolean; $layoutWidth: '372px' | '100vw'; }>` diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 4aa859ea..baedc733 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -90,7 +90,7 @@ function Home() { ); } -const Wrapper = styled.article` +const Wrapper = styled.div` width: 1140px; margin: 0 auto; position: relative; From 887fa6edcef7181c950d820eb8305ee4022a5b75 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 11:52:00 +0900 Subject: [PATCH 02/30] =?UTF-8?q?refactor:=20topicCard=20=EB=B0=8F=20Conta?= =?UTF-8?q?iner=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/GlobalStyle.ts | 1 + frontend/src/components/TopicCard/index.tsx | 2 +- frontend/src/components/TopicCardContainer/index.tsx | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/GlobalStyle.ts b/frontend/src/GlobalStyle.ts index e8176c04..f4a26728 100644 --- a/frontend/src/GlobalStyle.ts +++ b/frontend/src/GlobalStyle.ts @@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` html, body, + h2, textarea{ padding:0; margin:0; diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index 41fc3503..f4caa579 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -174,7 +174,7 @@ function TopicCard({ ); } -const Wrapper = styled.li` +const Wrapper = styled.article` cursor: pointer; border-radius: ${({ theme }) => theme.radius.small}; `; diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx index b7d7272d..882a1847 100644 --- a/frontend/src/components/TopicCardContainer/index.tsx +++ b/frontend/src/components/TopicCardContainer/index.tsx @@ -48,6 +48,7 @@ function TopicCardContainer({ index < 10 && ( - + Date: Wed, 22 Nov 2023 14:28:12 +0900 Subject: [PATCH 03/30] =?UTF-8?q?chore:=20switch=20default=20=20off=20esli?= =?UTF-8?q?nt=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 28b667cd..ffe743f0 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -40,6 +40,7 @@ module.exports = { 'react/jsx-props-no-spreading': 'off', 'react/no-unused-prop-types': 'off', 'no-underscore-dangle': 'off', + 'default-case': 'off', }, settings: { 'import/resolver': { From 99536c85c079feedd7c3e5779e1bc7329af35623 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 14:28:33 +0900 Subject: [PATCH 04/30] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20profile=20img=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/MyInfo/index.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx index 6f280f80..a9284259 100644 --- a/frontend/src/components/MyInfo/index.tsx +++ b/frontend/src/components/MyInfo/index.tsx @@ -104,13 +104,6 @@ const MyInfoContainer = styled(Flex)` border: 1px solid ${({ theme }) => theme.color.lightGray}; `; -const MyInfoImg = styled.img` - width: 80px; - height: 80px; - - border-radius: 50%; -`; - const SettingContainer = styled.div` position: absolute; top: 10px; From 62e696b3fc996b77700da0024589b8e52799305a Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 14:28:59 +0900 Subject: [PATCH 05/30] =?UTF-8?q?refactor:=20banner=20section=20=EC=8B=9C?= =?UTF-8?q?=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Banner/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx index f85549f1..4e00bd0e 100644 --- a/frontend/src/components/Banner/index.tsx +++ b/frontend/src/components/Banner/index.tsx @@ -23,6 +23,7 @@ export default function Banner() { return ( Date: Wed, 22 Nov 2023 14:29:14 +0900 Subject: [PATCH 06/30] =?UTF-8?q?refactor:=20=EC=A6=90=EA=B2=A8=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0,=20=EB=82=B4=ED=86=A0=ED=94=BD=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCardList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index fb0931b1..54859693 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -104,7 +104,7 @@ const EmptyWrapper = styled.section` align-items: center; `; -const Wrapper = styled.ul` +const Wrapper = styled.section` display: flex; flex-wrap: wrap; gap: 20px; From dd2d2d73cb49d716e20550fc73bf91d87c64b4ca Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 14:31:31 +0900 Subject: [PATCH 07/30] =?UTF-8?q?refactor:=20topicInfo=20=EC=8B=9C?= =?UTF-8?q?=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=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/TopicInfo/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx index 58be537a..4a19c6b2 100644 --- a/frontend/src/components/TopicInfo/index.tsx +++ b/frontend/src/components/TopicInfo/index.tsx @@ -90,6 +90,7 @@ function TopicInfo({ return ( Date: Wed, 22 Nov 2023 15:21:13 +0900 Subject: [PATCH 08/30] =?UTF-8?q?refactor:=20Map=20=EC=8B=9C=EB=A7=A8?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=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/Map/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx index aa347ac3..aaae84b5 100644 --- a/frontend/src/components/Map/index.tsx +++ b/frontend/src/components/Map/index.tsx @@ -81,7 +81,7 @@ function Map() { ); } -const MapContainer = styled.div` +const MapContainer = styled.section` width: 100%; height: 100%; position: relative; From 22781fb212812f681549a8e4a1e3351bcaa73971 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 15:21:55 +0900 Subject: [PATCH 09/30] =?UTF-8?q?refactor:=20topicCard,=20Container=20li?= =?UTF-8?q?=20=EB=B0=8F=20article=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=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/TopicCard/index.tsx | 3 ++- frontend/src/components/TopicCardContainer/index.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index f4caa579..3294b2de 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -79,6 +79,7 @@ function TopicCard({ onKeyDown={onElementKeyDown} > theme.radius.small}; `; diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx index 882a1847..c2bb5f17 100644 --- a/frontend/src/components/TopicCardContainer/index.tsx +++ b/frontend/src/components/TopicCardContainer/index.tsx @@ -98,7 +98,7 @@ function TopicCardContainer({ (topic, index) => index < 10 && ( - + Date: Wed, 22 Nov 2023 15:22:30 +0900 Subject: [PATCH 10/30] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8B=9C=EB=A7=A8?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=9D=BC=EA=B4=84=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 --- frontend/src/GlobalStyle.ts | 1 + frontend/src/components/InputContainer/index.tsx | 4 ++-- frontend/src/pages/AskLogin.tsx | 1 + frontend/src/pages/Bookmark.tsx | 3 ++- frontend/src/pages/NewPin.tsx | 2 +- frontend/src/pages/NewTopic.tsx | 2 +- frontend/src/pages/NotFound.tsx | 7 ++++--- frontend/src/pages/Search.tsx | 3 ++- frontend/src/pages/SeeAllLatestTopics.tsx | 9 +++++++-- frontend/src/pages/SeeAllNearTopics.tsx | 9 +++++++-- frontend/src/pages/SeeAllPopularTopics.tsx | 9 +++++++-- 11 files changed, 35 insertions(+), 15 deletions(-) diff --git a/frontend/src/GlobalStyle.ts b/frontend/src/GlobalStyle.ts index f4a26728..6e15108b 100644 --- a/frontend/src/GlobalStyle.ts +++ b/frontend/src/GlobalStyle.ts @@ -4,6 +4,7 @@ const GlobalStyle = createGlobalStyle` html, body, h2, + h3, textarea{ padding:0; margin:0; diff --git a/frontend/src/components/InputContainer/index.tsx b/frontend/src/components/InputContainer/index.tsx index d5645be7..6bc8284f 100644 --- a/frontend/src/components/InputContainer/index.tsx +++ b/frontend/src/components/InputContainer/index.tsx @@ -52,7 +52,7 @@ function InputContainer({ }; return ( - <> +
{containerTitle} @@ -106,7 +106,7 @@ function InputContainer({ )} {errorMessage} - +
); } const ErrorText = styled.span` diff --git a/frontend/src/pages/AskLogin.tsx b/frontend/src/pages/AskLogin.tsx index 559a18b5..02dd7c8e 100644 --- a/frontend/src/pages/AskLogin.tsx +++ b/frontend/src/pages/AskLogin.tsx @@ -19,6 +19,7 @@ function AskLogin() { return ( - + 핀 생성 diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx index 7d1a75b2..34ccb4b7 100644 --- a/frontend/src/pages/NewTopic.tsx +++ b/frontend/src/pages/NewTopic.tsx @@ -167,7 +167,7 @@ function NewTopic() { width={`calc(${width} - ${LAYOUT_PADDING})`} $flexDirection="column" > - + 지도 생성 diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx index 72096ed6..ab5c46fa 100644 --- a/frontend/src/pages/NotFound.tsx +++ b/frontend/src/pages/NotFound.tsx @@ -14,7 +14,8 @@ function NotFound() { useSetLayoutWidth(FULLSCREEN); return ( - - + ); } -const NotFoundContainer = styled(Flex)` +const Wrapper = styled(Flex)` flex-direction: row; @media screen and (max-width: 700px) { flex-direction: column; diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx index ff5a00fb..983ab65b 100644 --- a/frontend/src/pages/Search.tsx +++ b/frontend/src/pages/Search.tsx @@ -58,6 +58,7 @@ function Search() { + - + 새로울 지도? diff --git a/frontend/src/pages/SeeAllNearTopics.tsx b/frontend/src/pages/SeeAllNearTopics.tsx index 022d2a41..ad778575 100644 --- a/frontend/src/pages/SeeAllNearTopics.tsx +++ b/frontend/src/pages/SeeAllNearTopics.tsx @@ -23,9 +23,14 @@ function SeeAllNearTopics() { }; return ( - + - + 내 주변일 지도? diff --git a/frontend/src/pages/SeeAllPopularTopics.tsx b/frontend/src/pages/SeeAllPopularTopics.tsx index 275a402b..7af3d65f 100644 --- a/frontend/src/pages/SeeAllPopularTopics.tsx +++ b/frontend/src/pages/SeeAllPopularTopics.tsx @@ -23,9 +23,14 @@ function SeeAllTopics() { }; return ( - + - + 인기 급상승할 지도? From c230aec8aa7045f5a88e0893b8a543f6f26b0aac Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 15:25:51 +0900 Subject: [PATCH 11/30] =?UTF-8?q?refactor:=20Search=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20layout=20width=20=EC=A7=80=EC=A0=95=20=EB=B0=8F=20n?= =?UTF-8?q?av=20highlight=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Search.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx index 983ab65b..7a82a8fd 100644 --- a/frontend/src/pages/Search.tsx +++ b/frontend/src/pages/Search.tsx @@ -10,10 +10,15 @@ import Space from '../components/common/Space'; import MediaText from '../components/common/Text/MediaText'; import SearchBar from '../components/SearchBar/SearchBar'; import TopicCard from '../components/TopicCard'; +import { FULLSCREEN } from '../constants'; +import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; +import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; import { TopicCardProps } from '../types/Topic'; function Search() { const { fetchGet } = useGet(); + useSetLayoutWidth(FULLSCREEN); + useSetNavbarHighlight('none'); const [originalTopics, setOriginalTopics] = useState( null, From 7ac99a7feb8f1c5174e72fe48b0222dd991e2719 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 22 Nov 2023 15:29:13 +0900 Subject: [PATCH 12/30] =?UTF-8?q?refactor:=20PinDetail=20h2,=20h3=20?= =?UTF-8?q?=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/PinDetail.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index 3ee8866a..79d91977 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -183,7 +183,7 @@ function PinDetail({ return ( - + {pin.name} @@ -218,7 +218,7 @@ function PinDetail({ - + 어디에 있나요? @@ -227,7 +227,7 @@ function PinDetail({ - + 어떤 곳인가요? @@ -252,8 +252,8 @@ function PinDetail({ {/* Comment Section */} - - 어떻게 생각하나요?{' '} + + 어떻게 생각하나요? {userToken && ( From eb2d6c3373cd30dce5d1e88557263038cc08d678 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 23 Nov 2023 16:31:16 +0900 Subject: [PATCH 13/30] =?UTF-8?q?refactor:=20Logo=20aria-label=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 --- frontend/src/components/Layout/Logo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Layout/Logo.tsx b/frontend/src/components/Layout/Logo.tsx index 2cadb2e8..8057a1c1 100644 --- a/frontend/src/components/Layout/Logo.tsx +++ b/frontend/src/components/Layout/Logo.tsx @@ -17,8 +17,8 @@ function Logo() { onKeyDown={onElementKeyDown} ref={elementRef} onClick={goToHome} - aria-label="괜찮을지도 로고 및 홈으로 이동 버튼" tabIndex={0} + aria-label="괜찮을지도 로고 및 홈으로 이동하기" > From 2a8bdbd0f9eaf478cea09ffdd0e0882a691eb3f3 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 23 Nov 2023 16:32:09 +0900 Subject: [PATCH 14/30] =?UTF-8?q?refactor:=20Banner=20aria-label=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Banner/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx index 4e00bd0e..091e0c75 100644 --- a/frontend/src/components/Banner/index.tsx +++ b/frontend/src/components/Banner/index.tsx @@ -39,13 +39,18 @@ export default function Banner() { width="100%" src={BannerItemBoongWEBP} alt="붕어빵 배너" + aria-label="대동붕어빵여지도로 이동" /> - + From e20f8b096420c19c869ad3f387baeec01a3343a2 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 23 Nov 2023 16:32:55 +0900 Subject: [PATCH 15/30] =?UTF-8?q?refactor:=20TopicCard=20=EB=B0=8F=20Image?= =?UTF-8?q?=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=93=B1=20aria-label=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TopicCard 컨테이너 및 리스트도 수정한다. Image 공통 컴포넌트에 aria-hidden 속성을 추가하여 필요한 상황에만 사용할 수 있도록 한다. --- frontend/src/components/TopicCard/index.tsx | 18 +++++++++++++----- .../components/TopicCardContainer/index.tsx | 3 ++- .../src/components/TopicCardList/index.tsx | 4 ++-- frontend/src/components/common/Image/index.tsx | 3 +++ 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx index 3294b2de..72aca615 100644 --- a/frontend/src/components/TopicCard/index.tsx +++ b/frontend/src/components/TopicCard/index.tsx @@ -94,6 +94,7 @@ function TopicCard({ $errorDefaultSrc={DEFAULT_TOPIC_IMAGE} radius="small" ratio="1.6 / 1" + isAriaHidden /> @@ -102,7 +103,7 @@ function TopicCard({ color="black" $fontSize="default" $fontWeight="bold" - aria-label={`지도 이름 ${name}`} + aria-label={`지도 이름은 ${name} 입니다.`} > {name} @@ -112,14 +113,21 @@ function TopicCard({ color="black" $fontSize="small" $fontWeight="normal" - aria-label={`작성자 ${creator}`} + aria-label={`작성자는 ${creator} 이며`} > {creator} - + {updatedAt.split('T')[0].replaceAll('-', '.')} 업데이트 @@ -133,7 +141,7 @@ function TopicCard({ color="black" $fontSize="extraSmall" $fontWeight="normal" - aria-label={`핀 갯수 ${pinCount}개`} + aria-label={`핀 갯수는 ${pinCount}개 이며`} > {pinCount > 999 ? '+999' : pinCount}개 @@ -145,7 +153,7 @@ function TopicCard({ color="black" $fontSize="extraSmall" $fontWeight="normal" - aria-label={`즐겨찾기 ${bookmarkCount}명`} + aria-label={`즐겨찾기는 ${bookmarkCount}명 입니다.`} > {bookmarkCount > 999 ? '+999' : bookmarkCount}명 diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx index c2bb5f17..3937fe70 100644 --- a/frontend/src/components/TopicCardContainer/index.tsx +++ b/frontend/src/components/TopicCardContainer/index.tsx @@ -73,7 +73,8 @@ function TopicCardContainer({ $fontWeight="normal" tabIndex={0} onClick={routeWhenSeeAll} - aria-label={`${containerTitle} 전체보기 버튼`} + role="button" + aria-label={`${containerTitle} 전체보기`} ref={elementRef} onKeyDown={onElementKeyDown} > diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index 54859693..66674998 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -76,7 +76,7 @@ function TopicCardList({ ]} > {topics.map((topic) => ( - +
    - +
))} diff --git a/frontend/src/components/common/Image/index.tsx b/frontend/src/components/common/Image/index.tsx index 54d1b394..bdf3f586 100644 --- a/frontend/src/components/common/Image/index.tsx +++ b/frontend/src/components/common/Image/index.tsx @@ -8,6 +8,7 @@ interface ImageProps extends ImgHTMLAttributes { $objectFit?: string; radius?: 'small' | 'medium' | '50%'; ratio?: string; + isAriaHidden?: boolean; } export default function Image({ @@ -19,6 +20,7 @@ export default function Image({ $errorDefaultSrc, radius, ratio, + isAriaHidden, }: ImageProps) { return ( ) => { if ($errorDefaultSrc) e.currentTarget.src = $errorDefaultSrc; }} + aria-hidden={isAriaHidden} /> ); } From 95a4cbeb07a8a289f5ddd677406fb8ed7bb61997 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 23 Nov 2023 20:14:58 +0900 Subject: [PATCH 16/30] =?UTF-8?q?refactor:=20topicInfo=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/AddFavorite/index.tsx | 8 +++- .../src/components/AddSeeTogether/index.tsx | 8 +++- frontend/src/components/TopicInfo/index.tsx | 45 ++++++++++++++++--- frontend/src/constants/index.ts | 2 + 4 files changed, 55 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/AddFavorite/index.tsx b/frontend/src/components/AddFavorite/index.tsx index 7acc3c34..42f50734 100644 --- a/frontend/src/components/AddFavorite/index.tsx +++ b/frontend/src/components/AddFavorite/index.tsx @@ -2,6 +2,7 @@ import { styled } from 'styled-components'; import { deleteApi } from '../../apis/deleteApi'; import { postApi } from '../../apis/postApi'; +import { ARIA_FOCUS } from '../../constants'; import useToast from '../../hooks/useToast'; interface AddFavoriteProps { @@ -48,7 +49,12 @@ function AddFavorite({ }; return ( - + {children} ); diff --git a/frontend/src/components/AddSeeTogether/index.tsx b/frontend/src/components/AddSeeTogether/index.tsx index 9d2604b9..6d108e5b 100644 --- a/frontend/src/components/AddSeeTogether/index.tsx +++ b/frontend/src/components/AddSeeTogether/index.tsx @@ -4,6 +4,7 @@ import { styled } from 'styled-components'; import { deleteApi } from '../../apis/deleteApi'; import { getApi } from '../../apis/getApi'; import { postApi } from '../../apis/postApi'; +import { ARIA_FOCUS } from '../../constants'; import { SeeTogetherContext } from '../../context/SeeTogetherContext'; import useNavigator from '../../hooks/useNavigator'; import useToast from '../../hooks/useToast'; @@ -108,7 +109,12 @@ function AddSeeTogether({ } return ( - + {children} ); diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx index 4a19c6b2..e1220715 100644 --- a/frontend/src/components/TopicInfo/index.tsx +++ b/frontend/src/components/TopicInfo/index.tsx @@ -106,6 +106,7 @@ function TopicInfo({ $objectFit="cover" radius="medium" $errorDefaultSrc={DEFAULT_TOPIC_IMAGE} + isAriaHidden /> @@ -115,14 +116,24 @@ function TopicInfo({ - + {topicPinCount > 999 ? '+999' : topicPinCount}개 - + {topicBookmarkCount > 999 ? '+999' : topicBookmarkCount}명 @@ -136,19 +147,41 @@ function TopicInfo({ - + {topicTitle} - + {topicCreator} - + {topicDescription} - + {topicUpdatedAt.split('T')[0].replaceAll('-', '.')} 업데이트 diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index e99ff3a6..fa312413 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -13,3 +13,5 @@ export const DEFAULT_PROD_URL = process.env.APP_URL || 'https://mapbefine.kro.kr/api'; export const PIN_SIZE = 60; + +export const ARIA_FOCUS = 0; From 1873fe8a2d698f504fe1611519e58de6e9ab5125 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 23 Nov 2023 20:17:20 +0900 Subject: [PATCH 17/30] =?UTF-8?q?test:=20cypress=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20data-cy=20=ED=83=9C=EA=B7=B8=20=EC=9D=98=EC=A1=B4?= =?UTF-8?q?=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/cypress/e2e/mapbefine.cy.ts | 4 +--- frontend/src/components/Layout/Logo.tsx | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/cypress/e2e/mapbefine.cy.ts b/frontend/cypress/e2e/mapbefine.cy.ts index cbb675fe..9481be85 100644 --- a/frontend/cypress/e2e/mapbefine.cy.ts +++ b/frontend/cypress/e2e/mapbefine.cy.ts @@ -4,9 +4,7 @@ describe('메인 페이지', () => { }); it('로고와 다양한 지도 소개 글이 보인다.', () => { - cy.get('div[aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"]').should( - 'be.visible', - ); + cy.get('[data-cy="logo"]').should('be.visible'); cy.contains('인기 급상승할 지도').should('be.visible'); }); diff --git a/frontend/src/components/Layout/Logo.tsx b/frontend/src/components/Layout/Logo.tsx index 8057a1c1..c27a5e61 100644 --- a/frontend/src/components/Layout/Logo.tsx +++ b/frontend/src/components/Layout/Logo.tsx @@ -19,6 +19,7 @@ function Logo() { onClick={goToHome} tabIndex={0} aria-label="괜찮을지도 로고 및 홈으로 이동하기" + data-cy="logo" > From a00a9049a7d656cd30c8b8682974ae1baa9d5354 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 29 Nov 2023 20:39:06 +0900 Subject: [PATCH 18/30] =?UTF-8?q?refactor:=20PinPreview=20=EB=B0=8F=20?= =?UTF-8?q?=EB=BD=91=EC=95=84=EC=98=A4=EA=B8=B0=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit aria-live 를 사용하는 로직을 useAriaLive 훅으로 분리하고 aria-label을 추가하여 사용성을 높인다. --- frontend/src/components/PinPreview/index.tsx | 67 ++++++++++++-------- frontend/src/hooks/useAriaLive.ts | 28 ++++++++ 2 files changed, 70 insertions(+), 25 deletions(-) create mode 100644 frontend/src/hooks/useAriaLive.ts diff --git a/frontend/src/components/PinPreview/index.tsx b/frontend/src/components/PinPreview/index.tsx index 8b02e467..83c0a5b8 100644 --- a/frontend/src/components/PinPreview/index.tsx +++ b/frontend/src/components/PinPreview/index.tsx @@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom'; import { styled } from 'styled-components'; import { TagContext } from '../../context/TagContext'; +import useAriaLive from '../../hooks/useAriaLive'; import useNavigator from '../../hooks/useNavigator'; import theme from '../../themes'; import Box from '../common/Box'; @@ -36,8 +37,32 @@ function PinPreview({ const { pathname } = useLocation(); const { routePage } = useNavigator(); const { tags, setTags } = useContext(TagContext); - const [announceText, setAnnounceText] = useState('지도 핀 선택'); const inputRef = useRef(null); + const { setAriaLiveTagInnerText } = useAriaLive({ + liveTagId: 'live-region', + defaultAnnounceText: '지도 핀 선택', + }); + + const addTagsAnnounceText = () => { + if (tags.length === 0) { + setAriaLiveTagInnerText( + `핀 ${pinTitle}이 뽑아오기 목록에 추가됨. 뽑아오기 기능을 활성화 합니다.`, + ); + return; + } + + setAriaLiveTagInnerText(`핀 ${pinTitle}이 뽑아오기 목록에 추가됨`); + }; + + const deleteTagsAnnounceText = () => { + if (tags.length === 1) { + setAriaLiveTagInnerText( + `핀 ${pinTitle}이 뽑아오기 목록에서 삭제됨. 뽑아오기 기능을 비활성화 합니다.`, + ); + return; + } + setAriaLiveTagInnerText(`핀 ${pinTitle}이 뽑아오기 목록에서 삭제됨`); + }; const onAddTagOfTopic = (e: React.ChangeEvent) => { e.stopPropagation(); @@ -45,21 +70,11 @@ function PinPreview({ if (e.target.checked) { setTags((prevTags) => [...prevTags, { id: pinId, title: pinTitle }]); - if (tags.length === 0) { - setAnnounceText(`핀 ${pinTitle}이 태그에 추가됨. 뽑아오기 기능 활성화`); - return; - } - setAnnounceText(`핀 ${pinTitle}이 태그에 추가됨`); + addTagsAnnounceText(); } else { setTags(tags.filter((tag) => tag.id !== pinId)); - if (tags.length === 1) { - setAnnounceText( - `핀 ${pinTitle}이 태그에서 삭제됨. 뽑아오기 기능 비활성화`, - ); - return; - } - setAnnounceText(`핀 ${pinTitle}이 태그에서 삭제됨`); + deleteTagsAnnounceText(); } }; @@ -82,15 +97,6 @@ function PinPreview({ } }; - useEffect(() => { - if (announceText) { - const liveRegion = document.getElementById('live-region'); - if (liveRegion) { - liveRegion.innerText = announceText; - } - } - }, [announceText]); - return ( - + {pinTitle} - + {pinLocation} @@ -122,6 +138,7 @@ function PinPreview({ color="black" $fontSize="small" $fontWeight="normal" + aria-label={`이 장소에 대한 미리보기 설명은 다음과 같습니다. ${pinInformation}`} > {pinInformation} @@ -133,7 +150,7 @@ function PinPreview({ onChange={onAddTagOfTopic} onKeyDown={onInputKeyDown} checked={Boolean(tags.map((tag) => tag.id).includes(pinId))} - aria-label={`${pinTitle} 핀 선택`} + aria-label={`${pinTitle} 장소 뽑아오기 선택`} ref={inputRef} /> diff --git a/frontend/src/hooks/useAriaLive.ts b/frontend/src/hooks/useAriaLive.ts new file mode 100644 index 00000000..bd7d1753 --- /dev/null +++ b/frontend/src/hooks/useAriaLive.ts @@ -0,0 +1,28 @@ +import { useEffect, useState } from 'react'; + +interface Props { + liveTagId: string; + defaultAnnounceText: string; +} + +const useAriaLive = ({ liveTagId = '', defaultAnnounceText = '' }: Props) => { + const [announceText, setAnnounceText] = useState(defaultAnnounceText); + + const setAriaLiveTagInnerText = (text: string) => { + setAnnounceText(text); + }; + + useEffect(() => { + if (announceText) { + const ariaLiveTag = document.getElementById(liveTagId); + + if (ariaLiveTag) { + ariaLiveTag.innerText = announceText; + } + } + }, [announceText]); + + return { setAriaLiveTagInnerText }; +}; + +export default useAriaLive; From 853781cb158092d6d8768779ee3c1fb3ef5b9e69 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 29 Nov 2023 20:39:20 +0900 Subject: [PATCH 19/30] =?UTF-8?q?refactor:=20=EA=B0=9C=EB=B0=9C=EC=84=9C?= =?UTF-8?q?=EB=B2=84=20=EB=B6=80=EC=9E=AC=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?api=20=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/constants/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index fa312413..f2fefaca 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -10,7 +10,7 @@ export const DEFAULT_PROFILE_IMAGE = 'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg'; export const DEFAULT_PROD_URL = - process.env.APP_URL || 'https://mapbefine.kro.kr/api'; + process.env.APP_URL || 'https://mapbefine.com/api'; export const PIN_SIZE = 60; From 7f725a8fcdd7bc7a5da6bf246525db1d68c7a097 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 29 Nov 2023 20:45:22 +0900 Subject: [PATCH 20/30] =?UTF-8?q?refactor:=20URL=20=EC=A3=BC=EC=86=8C=20?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0=ED=95=98=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A1=9C=EC=A7=81=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 --- frontend/src/components/TopicInfo/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx index e1220715..d1f1d4ce 100644 --- a/frontend/src/components/TopicInfo/index.tsx +++ b/frontend/src/components/TopicInfo/index.tsx @@ -9,7 +9,7 @@ import SeeTogetherSVG from '../../assets/topicInfo_seeTogetherBtn_filled.svg'; import SeeTogetherNotFilledSVG from '../../assets/topicInfo_seeTogetherBtn_notFilled.svg'; import TopicShareUrlSVG from '../../assets/topicInfo_shareUrl.svg'; import UpdateBtnSVG from '../../assets/updateBtn.svg'; -import { DEFAULT_TOPIC_IMAGE } from '../../constants'; +import { ARIA_FOCUS, DEFAULT_TOPIC_IMAGE } from '../../constants'; import useToast from '../../hooks/useToast'; import AddFavorite from '../AddFavorite'; import AddSeeTogether from '../AddSeeTogether'; @@ -210,7 +210,13 @@ function TopicInfo({ {isBookmarked ? : } - + From feffb7cd02305eabcad4957d64aa86840aeeb5dc Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Wed, 29 Nov 2023 21:11:45 +0900 Subject: [PATCH 21/30] =?UTF-8?q?refactor:=20pinDetail=20=EB=B0=8F=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A1=9C=EC=A7=81=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/pages/PinDetail.tsx | 53 ++++++++++++++++++++++++---- frontend/src/pages/SelectedTopic.tsx | 3 +- 2 files changed, 49 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index 79d91977..be6ef933 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -16,6 +16,7 @@ import Text from '../components/common/Text'; import Modal from '../components/Modal'; import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList'; import PinImageContainer from '../components/PinImageContainer'; +import { ARIA_FOCUS } from '../constants'; import { ModalContext } from '../context/ModalContext'; import useCompressImage from '../hooks/useCompressImage'; import useFormValues from '../hooks/useFormValues'; @@ -183,13 +184,26 @@ function PinDetail({ return ( - + {pin.name} - + {pin.creator} @@ -200,7 +214,16 @@ function PinDetail({ ) : ( )} - + {pin.updatedAt.split('T')[0].split('-').join('.')} @@ -222,7 +245,13 @@ function PinDetail({ 어디에 있나요? - + {pin.address} @@ -232,7 +261,13 @@ function PinDetail({ 어떤 곳인가요? - + {pin.description} @@ -243,7 +278,11 @@ function PinDetail({ 내 지도에 저장하기 - + 공유하기 @@ -265,11 +304,13 @@ function PinDetail({ onChange={(e: React.ChangeEvent) => setNewComment(e.target.value) } + aria-label="댓글을 추가하려면 텍스트를 입력하세요." placeholder="댓글 추가" /> 등록 diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx index 4f19a6ef..593cea0a 100644 --- a/frontend/src/pages/SelectedTopic.tsx +++ b/frontend/src/pages/SelectedTopic.tsx @@ -27,7 +27,7 @@ function SelectedTopic() { const [selectedPinId, setSelectedPinId] = useState(null); const [isOpen, setIsOpen] = useState(true); const [isEditPinDetail, setIsEditPinDetail] = useState(false); - const { coordinates, setCoordinates } = useContext(CoordinatesContext); + const { setCoordinates } = useContext(CoordinatesContext); const { width } = useSetLayoutWidth(SIDEBAR); const zoomTimerIdRef = useRef(null); const dragTimerIdRef = useRef(null); @@ -170,6 +170,7 @@ function SelectedTopic() { onClick={() => { setIsOpen(!isOpen); }} + aria-label={`장소 상세 설명 버튼 ${isOpen ? '닫기' : '열기'}`} > ◀ From 100f4f9ed625c3b27ea1475fbe25ca3a697838ec Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 19:47:13 +0900 Subject: [PATCH 22/30] =?UTF-8?q?refactor:=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EB=B0=8F=20=EB=8B=B5=EA=B8=80=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Input/SingleComment.tsx | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx index c8fb143f..3c992591 100644 --- a/frontend/src/components/common/Input/SingleComment.tsx +++ b/frontend/src/components/common/Input/SingleComment.tsx @@ -6,6 +6,7 @@ import styled from 'styled-components'; import { deleteApi } from '../../../apis/deleteApi'; import { postApi } from '../../../apis/postApi'; import { putApi } from '../../../apis/putApi'; +import { ARIA_FOCUS } from '../../../constants'; import useToast from '../../../hooks/useToast'; import { ConfirmCommentButton, CustomInput } from '../../../pages/PinDetail'; import Flex from '../Flex'; @@ -119,7 +120,13 @@ function SingleComment({
- + @{comment.creator} @@ -131,6 +138,9 @@ function SingleComment({ color="gray" $fontWeight="bold" onClick={onClickModifyBtn} + tabIndex={ARIA_FOCUS} + role="button" + aria-label="댓글 수정" > 수정 @@ -139,6 +149,9 @@ function SingleComment({ color="primary" $fontWeight="bold" onClick={onClickDeleteBtn} + tabIndex={ARIA_FOCUS} + role="button" + aria-label="댓글 삭제" > 삭제 @@ -176,7 +189,13 @@ function SingleComment({ onClick={toggleReplyOpen} style={{ cursor: 'pointer', marginBottom: '8px' }} > - + 답글 작성
@@ -214,7 +233,10 @@ function SingleComment({ width="28px" height="28px" /> - + {seeMore ? '\u25B2' : '\u25BC'} 답글 {replyCount}개 From bc9be168e1c5e959a0519407e7f17e88402c72ab Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 19:47:29 +0900 Subject: [PATCH 23/30] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20console.log=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Input/SingleComment.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx index 3c992591..e7f68c0b 100644 --- a/frontend/src/components/common/Input/SingleComment.tsx +++ b/frontend/src/components/common/Input/SingleComment.tsx @@ -77,7 +77,6 @@ function SingleComment({ await refetch(Number(pinDetail)); showToast('info', '댓글이 삭제되었습니다.'); } catch (e) { - console.error(e); showToast('error', '댓글을 다시 작성해주세요'); } }; @@ -99,7 +98,6 @@ function SingleComment({ setIsEditing(false); showToast('info', '댓글이 수정되었습니다.'); } catch (e) { - console.error(e); showToast('error', '댓글을 다시 작성해주세요'); } }; From eec2293e6dec04591ad2c145c0b239dbb3fecbc0 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 22:48:40 +0900 Subject: [PATCH 24/30] =?UTF-8?q?refactor:=20=EC=A7=80=EB=8F=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0=20=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AuthorityRadioContainer/index.tsx | 13 ++++---- .../src/components/common/CheckBox/index.tsx | 3 +- frontend/src/pages/NewTopic.tsx | 30 ++++++++++++++----- 3 files changed, 32 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/AuthorityRadioContainer/index.tsx b/frontend/src/components/AuthorityRadioContainer/index.tsx index 1c5dd0b4..7a0c1b94 100644 --- a/frontend/src/components/AuthorityRadioContainer/index.tsx +++ b/frontend/src/components/AuthorityRadioContainer/index.tsx @@ -3,6 +3,7 @@ import { useContext, useState } from 'react'; import styled from 'styled-components'; import useGet from '../../apiHooks/useGet'; +import { ARIA_FOCUS } from '../../constants'; import { ModalContext } from '../../context/ModalContext'; import { TopicAuthorMember, @@ -80,7 +81,7 @@ function AuthorityRadioContainer({ id="publicity-public" checked={!isPrivate} onChange={() => setIsPrivate(false)} - tabIndex={4} + tabIndex={ARIA_FOCUS} /> @@ -93,7 +94,7 @@ function AuthorityRadioContainer({ id="publicity-private" checked={isPrivate} onChange={() => setIsPrivate(true)} - tabIndex={4} + tabIndex={ARIA_FOCUS} /> @@ -115,7 +116,7 @@ function AuthorityRadioContainer({ id="permission-all" checked={isAllPermissioned} onChange={onChangeInitAuthMembersWithSetIsAllPermissioned} - tabIndex={5} + tabIndex={ARIA_FOCUS} /> {isPrivate ? ( @@ -135,7 +136,7 @@ function AuthorityRadioContainer({ onClick={() => { isAllPermissioned === false && openModal('newTopic'); }} - tabIndex={5} + tabIndex={ARIA_FOCUS} /> @@ -237,7 +238,7 @@ function AuthorityRadioContainer({ From d4147d2111f000b921a60f1a78837c60ce81443d Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 23:35:06 +0900 Subject: [PATCH 26/30] =?UTF-8?q?refactor:=20=EA=B0=81=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=EC=A0=84=EC=B2=B4=EB=B3=B4=EA=B8=B0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SeeAllLatestTopics.tsx | 4 +++- frontend/src/pages/SeeAllNearTopics.tsx | 6 ++++-- frontend/src/pages/SeeAllPopularTopics.tsx | 4 +++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/SeeAllLatestTopics.tsx b/frontend/src/pages/SeeAllLatestTopics.tsx index b01b12d0..34bcf6e1 100644 --- a/frontend/src/pages/SeeAllLatestTopics.tsx +++ b/frontend/src/pages/SeeAllLatestTopics.tsx @@ -6,7 +6,7 @@ import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { FULLSCREEN } from '../constants'; +import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -30,6 +30,8 @@ function SeeAllLatestTopics() { color="black" $fontSize="extraLarge" $fontWeight="bold" + tabIndex={ARIA_FOCUS} + aria-label="새로울 지도 전체보기 페이지 입니다." > 새로울 지도? diff --git a/frontend/src/pages/SeeAllNearTopics.tsx b/frontend/src/pages/SeeAllNearTopics.tsx index ad778575..0a518bb7 100644 --- a/frontend/src/pages/SeeAllNearTopics.tsx +++ b/frontend/src/pages/SeeAllNearTopics.tsx @@ -6,7 +6,7 @@ import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { FULLSCREEN } from '../constants'; +import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -30,8 +30,10 @@ function SeeAllNearTopics() { color="black" $fontSize="extraLarge" $fontWeight="bold" + tabIndex={ARIA_FOCUS} + aria-label="모두일 지도 전체보기 페이지 입니다." > - 내 주변일 지도? + 모두일 지도? diff --git a/frontend/src/pages/SeeAllPopularTopics.tsx b/frontend/src/pages/SeeAllPopularTopics.tsx index 7af3d65f..cdd3a8d9 100644 --- a/frontend/src/pages/SeeAllPopularTopics.tsx +++ b/frontend/src/pages/SeeAllPopularTopics.tsx @@ -6,7 +6,7 @@ import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { FULLSCREEN } from '../constants'; +import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -30,6 +30,8 @@ function SeeAllTopics() { color="black" $fontSize="extraLarge" $fontWeight="bold" + tabIndex={ARIA_FOCUS} + aria-label="인기 급상승할 지도 전체보기 페이지 입니다." > 인기 급상승할 지도? From 61221a59d846b57fdfc5f48323116176773f36f8 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 23:36:04 +0900 Subject: [PATCH 27/30] =?UTF-8?q?refactor:=20=EC=A6=90=EA=B2=A8=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20=EB=B0=8F=20=EB=82=98=EC=9D=98=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A1=9C=EC=A7=81=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 --- frontend/src/pages/Bookmark.tsx | 12 ++++-------- frontend/src/pages/Profile.tsx | 13 +++++-------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/frontend/src/pages/Bookmark.tsx b/frontend/src/pages/Bookmark.tsx index 6dbb3f15..4e74c2d2 100644 --- a/frontend/src/pages/Bookmark.tsx +++ b/frontend/src/pages/Bookmark.tsx @@ -8,7 +8,7 @@ import Space from '../components/common/Space'; import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { FULLSCREEN } from '../constants'; +import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -34,17 +34,13 @@ function Bookmark() { color="black" $fontSize="extraLarge" $fontWeight="bold" - tabIndex={0} + tabIndex={ARIA_FOCUS} + aria-label="즐겨찾기 페이지 입니다. 즐겨찾기한 지도들을 확인할 수 있습니다." > 즐겨찾기 - + 즐겨찾기한 지도들을 한 눈에 보세요. diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index 33345e3d..cf42b7f8 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -8,7 +8,7 @@ import MediaSpace from '../components/common/Space/MediaSpace'; import MediaText from '../components/common/Text/MediaText'; import MyInfo from '../components/MyInfo'; import TopicCardContainerSkeleton from '../components/Skeletons/TopicListSkeleton'; -import { FULLSCREEN } from '../constants'; +import { ARIA_FOCUS, FULLSCREEN } from '../constants'; import useNavigator from '../hooks/useNavigator'; import useSetLayoutWidth from '../hooks/useSetLayoutWidth'; import useSetNavbarHighlight from '../hooks/useSetNavbarHighlight'; @@ -35,20 +35,17 @@ function Profile() { 나의 지도 - + 내가 만든 지도를 확인해보세요. From 42a9b768c2a4da870c57d894978152b8ecfcf4d5 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 23:39:24 +0900 Subject: [PATCH 28/30] =?UTF-8?q?refactor:=20=EB=82=B4=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EB=A1=9C=EC=A7=81=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/MyInfo/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx index a9284259..f37cb0d4 100644 --- a/frontend/src/components/MyInfo/index.tsx +++ b/frontend/src/components/MyInfo/index.tsx @@ -2,7 +2,11 @@ import { SyntheticEvent, useState } from 'react'; import { styled } from 'styled-components'; import Setting from '../../assets/updateBtn.svg'; -import { DEFAULT_PROD_URL, DEFAULT_PROFILE_IMAGE } from '../../constants'; +import { + ARIA_FOCUS, + DEFAULT_PROD_URL, + DEFAULT_PROFILE_IMAGE, +} from '../../constants'; import useToast from '../../hooks/useToast'; import { ProfileProps } from '../../types/Profile'; import Box from '../common/Box'; @@ -69,6 +73,8 @@ function MyInfo() { $borderRadius="medium" $justifyContent="center" $alignItems="center" + tabIndex={ARIA_FOCUS} + aria-label={`내 정보 영역입니다. 나의 이름은 ${user.nickName}이고 이메일은 ${user.email} 입니다.`} > From a2bf4be9862deb627be955d62834b05dcbba6db2 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 23:44:32 +0900 Subject: [PATCH 29/30] =?UTF-8?q?refactor:=20=EC=A7=80=EB=8F=84,=20?= =?UTF-8?q?=ED=95=80,=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/MyInfo/index.tsx | 9 +++++++-- frontend/src/components/TopicInfo/index.tsx | 8 +++++++- frontend/src/pages/PinDetail.tsx | 7 ++++++- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/MyInfo/index.tsx b/frontend/src/components/MyInfo/index.tsx index f37cb0d4..2ccfb4b5 100644 --- a/frontend/src/components/MyInfo/index.tsx +++ b/frontend/src/components/MyInfo/index.tsx @@ -74,9 +74,14 @@ function MyInfo() { $justifyContent="center" $alignItems="center" tabIndex={ARIA_FOCUS} - aria-label={`내 정보 영역입니다. 나의 이름은 ${user.nickName}이고 이메일은 ${user.email} 입니다.`} + aria-label={`내 정보 영역입니다. 나의 닉네임은 ${user.nickName}이고 이메일은 ${user.email} 입니다.`} > - + {canUpdate && ( - + )} diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index be6ef933..cc8bccbb 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -208,7 +208,12 @@ function PinDetail({ {pin.canUpdate ? ( - + ) : ( From f464444ca17fb188fec557be3065c4e50a74902a Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Sun, 3 Dec 2023 23:58:31 +0900 Subject: [PATCH 30/30] =?UTF-8?q?design:=20=ED=81=AC=EB=A1=9C=EC=8A=A4=20?= =?UTF-8?q?=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A7=95=20UI=20=EC=9D=BC=EA=B4=80?= =?UTF-8?q?=EC=84=B1=EC=9D=84=20=EC=9C=84=ED=95=B4=20=EC=B2=B4=ED=81=AC=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/PinPreview/index.tsx | 17 +++++++++++++++++ .../src/components/common/CheckBox/index.tsx | 4 ++-- frontend/src/themes/color.ts | 2 +- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/PinPreview/index.tsx b/frontend/src/components/PinPreview/index.tsx index 83c0a5b8..60afa0fb 100644 --- a/frontend/src/components/PinPreview/index.tsx +++ b/frontend/src/components/PinPreview/index.tsx @@ -167,6 +167,23 @@ const MultiSelectButton = styled.input` width: 24px; height: 24px; cursor: pointer; + + -webkit-appearance: none; + appearance: none; + border-radius: 0.15em; + margin-right: 0.5em; + border: 0.1em solid ${({ theme }) => theme.color.black}; + background-color: ${({ theme }) => theme.color.white}; + outline: none; + + &:checked { + border-color: transparent; + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); + background-size: 100% 100%; + background-position: 50%; + background-repeat: no-repeat; + background-color: ${({ theme }) => theme.color.checked}; + } `; const EllipsisTitle = styled(Text)` diff --git a/frontend/src/components/common/CheckBox/index.tsx b/frontend/src/components/common/CheckBox/index.tsx index c6157698..f5dbfdd5 100644 --- a/frontend/src/components/common/CheckBox/index.tsx +++ b/frontend/src/components/common/CheckBox/index.tsx @@ -66,7 +66,7 @@ const CheckboxInput = styled.input` height: 1.6em; border-radius: 0.15em; margin-right: 0.5em; - border: 0.15em solid ${({ theme }) => theme.color.primary}; + border: 0.1em solid ${({ theme }) => theme.color.black}; background-color: ${({ theme }) => theme.color.white}; outline: none; cursor: pointer; @@ -77,7 +77,7 @@ const CheckboxInput = styled.input` background-size: 100% 100%; background-position: 50%; background-repeat: no-repeat; - background-color: ${({ theme }) => theme.color.primary}; + background-color: ${({ theme }) => theme.color.checked}; } `; diff --git a/frontend/src/themes/color.ts b/frontend/src/themes/color.ts index fc7397a8..979bf9f4 100644 --- a/frontend/src/themes/color.ts +++ b/frontend/src/themes/color.ts @@ -2,11 +2,11 @@ const color = { primary: '#E1325C', black: '#454545', white: '#FFFFFF', - darkGray: '#767676', gray: '#969696', lightGray: '#E7E7E7', whiteGray: '#F9F9F9', + checked: '#287EFF', } as const; export type colorThemeKey = keyof typeof color;