From ce7b6ca80b5da801c18430c463f59d009b268911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sat, 27 Jan 2024 20:14:50 +0900 Subject: [PATCH 01/22] fix: prevent zoom and scroll while focus on input --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 684712a..fec1616 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + AB - 세상의 모든 질문, AB로 답하다 From 8d3e8c9da692f550aa87d92ceffc9bcf708fb1c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sat, 27 Jan 2024 20:15:18 +0900 Subject: [PATCH 02/22] feat: init custom vh for safari bottom bar --- src/App.tsx | 6 ++++-- src/assets/styles/global.tsx | 10 +++++++++- src/utils/initHeight.ts | 11 +++++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 src/utils/initHeight.ts diff --git a/src/App.tsx b/src/App.tsx index c8ffd73..759a8c3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,14 +6,16 @@ import { StyleSheetManager, ThemeProvider } from 'styled-components'; import GlobalStyle from '@styles/global'; import { theme } from '@styles/theme'; -import { enableScrollLock } from '@utils/scrollLock'; +import { initHeight } from '@utils/initHeight'; import Router from './routes'; const App = () => { const queryClient = new QueryClient(); - useEffect(() => {}, []); + useEffect(() => { + initHeight(); + }, []); return ( true}> diff --git a/src/assets/styles/global.tsx b/src/assets/styles/global.tsx index 9d6e50b..6aabf7a 100644 --- a/src/assets/styles/global.tsx +++ b/src/assets/styles/global.tsx @@ -17,11 +17,19 @@ const GlobalStyle = styled.createGlobalStyle` } body { - min-height: 100vh; font-size: 1.6rem; background-color: #f6f6f6; } + html, + body { + width: 100vw; + height: calc(var(--vh, 1vh) * 100); + height: 100% !important; + overflow: auto !important; + -webkit-overflow-scrolling: touch !important; + } + button { padding: 0; overflow: visible; diff --git a/src/utils/initHeight.ts b/src/utils/initHeight.ts new file mode 100644 index 0000000..e28dba5 --- /dev/null +++ b/src/utils/initHeight.ts @@ -0,0 +1,11 @@ +function initVh() { + document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); +} + +export function initHeight() { + initVh(); + + window.addEventListener('resize', () => { + initVh(); + }); +} From 05b29248404a99d773d8a6acf6f80ff0b35f9c83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sat, 27 Jan 2024 20:15:37 +0900 Subject: [PATCH 03/22] feat: add AlphaTopic page --- src/routes/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9edb20d..d90c27e 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -9,6 +9,7 @@ import { } from 'react-router-dom'; import { useAuthStore } from 'src/store/auth'; +import AlphaTopics from './A/AlphaTopics'; import GoogleLogin from './Auth/google/GoogleLogin'; import KakaoLogin from './Auth/kakao/KakaoLogin'; import Login from './Auth/login/Login'; @@ -35,6 +36,7 @@ const Router = () => { }> } /> + } /> } /> } /> From efcdec780f0d544e53c452927ca79cb6196582ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sat, 27 Jan 2024 20:20:27 +0900 Subject: [PATCH 04/22] fix: set default size to 16 --- src/components/commons/Text/Text.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/commons/Text/Text.tsx b/src/components/commons/Text/Text.tsx index 4c38139..5b6ef00 100644 --- a/src/components/commons/Text/Text.tsx +++ b/src/components/commons/Text/Text.tsx @@ -2,8 +2,8 @@ import React from 'react'; import styled, { css } from 'styled-components'; export interface TextProps extends React.HTMLAttributes { - size: number; children: React.ReactNode; + size?: number; tagName?: keyof JSX.IntrinsicElements; weight?: React.CSSProperties['fontWeight']; color?: React.CSSProperties['color']; @@ -15,10 +15,10 @@ export interface TextProps extends React.HTMLAttributes { const getFontSize = (sizeInPx: number) => `${sizeInPx / 10}rem`; const Text = React.memo((props: TextProps) => { - const { tagName = 'div', children, ...others } = props; + const { tagName = 'div', children, size = 16, ...others } = props; return ( - + {children} ); From 004d6f0c021fdb774c5d68e189b5348844ee7378 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sat, 27 Jan 2024 20:21:27 +0900 Subject: [PATCH 05/22] fix: changes for custom vh --- src/components/commons/BottomSheet/BottomSheet.tsx | 2 +- src/components/commons/Layout/Layout.styles.tsx | 2 +- src/routes/Auth/kakao/KakaoLogin.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/commons/BottomSheet/BottomSheet.tsx b/src/components/commons/BottomSheet/BottomSheet.tsx index ac784ed..e7cb217 100644 --- a/src/components/commons/BottomSheet/BottomSheet.tsx +++ b/src/components/commons/BottomSheet/BottomSheet.tsx @@ -179,7 +179,7 @@ const Wrapper = styled(motion.div)` left: 0; z-index: ${(props) => props.theme.zIndex.sheet}; max-width: 512px; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); margin: 0 auto; `; diff --git a/src/components/commons/Layout/Layout.styles.tsx b/src/components/commons/Layout/Layout.styles.tsx index c75d7b0..53ee7f9 100644 --- a/src/components/commons/Layout/Layout.styles.tsx +++ b/src/components/commons/Layout/Layout.styles.tsx @@ -5,7 +5,7 @@ export const Main = styled.main` display: flex; flex-direction: column; max-width: 512px; - height: 100vh; + height: calc(var(--vh, 1vh) * 100); margin: 0 auto; overflow-y: scroll; diff --git a/src/routes/Auth/kakao/KakaoLogin.tsx b/src/routes/Auth/kakao/KakaoLogin.tsx index 4dcb0f2..2778bd2 100644 --- a/src/routes/Auth/kakao/KakaoLogin.tsx +++ b/src/routes/Auth/kakao/KakaoLogin.tsx @@ -60,7 +60,7 @@ const KakaoLogin = () => { style={{ position: 'fixed', overflow: 'hidden', - height: '100vh', + height: 'calc(var(--vh, 1vh) * 100)', width: '100vw', zIndex: zIndex.modal, backgroundColor: colors.navy_60, From e89257917804a993097f83381de35ca876887d72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Sun, 28 Jan 2024 19:37:56 +0900 Subject: [PATCH 06/22] fix: height 100vh --- src/assets/styles/global.tsx | 9 ++++-- src/components/Notifications/TabHeader.tsx | 2 +- .../BottomNavigation/BottomNavigation.tsx | 2 +- .../commons/Layout/Layout.styles.tsx | 11 ++++--- src/routes/A/AlphaTopics.tsx | 30 +++++++++++++++++++ src/routes/Notification/Notification.tsx | 2 +- 6 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 src/routes/A/AlphaTopics.tsx diff --git a/src/assets/styles/global.tsx b/src/assets/styles/global.tsx index 6aabf7a..96aa7eb 100644 --- a/src/assets/styles/global.tsx +++ b/src/assets/styles/global.tsx @@ -22,11 +22,14 @@ const GlobalStyle = styled.createGlobalStyle` } html, - body { + body, + #root { width: 100vw; height: calc(var(--vh, 1vh) * 100); - height: 100% !important; - overflow: auto !important; + + /* height: 100% !important; */ + + /* overflow: auto !important; */ -webkit-overflow-scrolling: touch !important; } diff --git a/src/components/Notifications/TabHeader.tsx b/src/components/Notifications/TabHeader.tsx index 6aa7022..ccf12db 100644 --- a/src/components/Notifications/TabHeader.tsx +++ b/src/components/Notifications/TabHeader.tsx @@ -17,7 +17,7 @@ const TabHeader = ({ currentTab, setCurrentTab }: TabHeaderProps) => { setCurrentTab(tabName); }; return ( - + {NOTIFICATIONS_TABS.map((tabName) => { return (
{ 홈 - + A사이드 diff --git a/src/components/commons/Layout/Layout.styles.tsx b/src/components/commons/Layout/Layout.styles.tsx index 53ee7f9..7e05c6b 100644 --- a/src/components/commons/Layout/Layout.styles.tsx +++ b/src/components/commons/Layout/Layout.styles.tsx @@ -2,12 +2,13 @@ import { styled } from 'styled-components'; export const Main = styled.main` position: relative; - display: flex; - flex-direction: column; + + /* display: flex; */ + + /* flex-direction: column; */ max-width: 512px; height: calc(var(--vh, 1vh) * 100); margin: 0 auto; - overflow-y: scroll; &::-webkit-scrollbar { display: none; @@ -28,7 +29,9 @@ export const Header = styled.header` export const HeaderSection = styled.div``; export const ChildrenContainer = styled.div` - flex: 1; + height: calc(100% - 48px); + + /* height: 100%; */ `; export const NavigationContainer = styled.div` diff --git a/src/routes/A/AlphaTopics.tsx b/src/routes/A/AlphaTopics.tsx new file mode 100644 index 0000000..3876f35 --- /dev/null +++ b/src/routes/A/AlphaTopics.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import AlphaTopicCard from '@components/AlphaTopic/AlphaTopicCard'; +import { Col, Row } from '@components/commons/Flex/Flex'; +import Layout from '@components/commons/Layout/Layout'; +import Text from '@components/commons/Text/Text'; + +import { colors } from '@styles/theme'; + +import { ALogoIcon } from '@icons/index'; + +const AlphaTopics = () => { + return ( + } + HeaderCenter={() => 진행중} + > + + + + + + + + + ); +}; + +export default AlphaTopics; diff --git a/src/routes/Notification/Notification.tsx b/src/routes/Notification/Notification.tsx index e1dafbb..d69cbcf 100644 --- a/src/routes/Notification/Notification.tsx +++ b/src/routes/Notification/Notification.tsx @@ -78,7 +78,7 @@ const Notification = () => { > - + {notifications.map((notification, index) => { return ( Date: Mon, 29 Jan 2024 01:03:30 +0900 Subject: [PATCH 07/22] feat: add Chip --- src/components/commons/Chip/Chip.tsx | 49 ++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/components/commons/Chip/Chip.tsx diff --git a/src/components/commons/Chip/Chip.tsx b/src/components/commons/Chip/Chip.tsx new file mode 100644 index 0000000..18de114 --- /dev/null +++ b/src/components/commons/Chip/Chip.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { styled } from 'styled-components'; + +import Text from '../Text/Text'; + +interface ChipProps { + tintColor: string; + label: string; +} + +const Chip = ({ tintColor, label }: ChipProps) => { + return ( + + + + {label} + + + ); +}; + +const Dot = styled.div<{ color: string }>` + width: 14px; + height: 14px; + background-color: ${({ color }) => color}; + border-radius: 50%; +`; + +const Container = styled.button<{ color: string }>` + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + width: fit-content; + padding: 2px 10px; + background-color: ${({ color }) => { + const hexToRgb = (hex: string) => { + const r = parseInt(hex.slice(1, 3), 16), + g = parseInt(hex.slice(3, 5), 16), + b = parseInt(hex.slice(5, 7), 16); + return [r, g, b]; + }; + const [r, g, b] = hexToRgb(color); + return `rgba(${r}, ${g}, ${b}, 0.2)`; + }}; + border-radius: 20px; +`; + +export default Chip; From b6e80e356f5aeb0a2553f6f9049481f801a397e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Mon, 29 Jan 2024 01:03:36 +0900 Subject: [PATCH 08/22] feat: add progress bar --- .../commons/ProgressBar/ProgressBar.tsx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/commons/ProgressBar/ProgressBar.tsx diff --git a/src/components/commons/ProgressBar/ProgressBar.tsx b/src/components/commons/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..a82f7a9 --- /dev/null +++ b/src/components/commons/ProgressBar/ProgressBar.tsx @@ -0,0 +1,74 @@ +import styled from 'styled-components'; + +import { colors } from '@styles/theme'; + +import { Row } from '../Flex/Flex'; +import Text from '../Text/Text'; + +interface ProgressBarProps { + revealed: boolean; + highlighted: boolean; + title: string; + percentage: number; + onClick: () => void; + left?: () => React.ReactNode; +} + +const ProgressBar = ({ + revealed, + highlighted, + title, + percentage, + onClick, + left, +}: ProgressBarProps) => { + const textColor = highlighted ? colors.white : colors.white_40; + const textWeight = revealed ? 600 : 400; + + return ( + + + {left && left()} + + {title} + + + + {percentage}% + + + + ); +}; + +export default ProgressBar; + +const ProgressBarContainer = styled.div` + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + height: 40px; + padding: 10px 16px; + background-color: ${({ theme }) => theme.colors.navy2}; + border-radius: 10px; +`; + +const PercentageBar = styled.div<{ percentage: number; highlighted: boolean }>` + position: absolute; + top: 0; + left: 0; + z-index: 10; + width: ${({ percentage }) => percentage}%; + height: 40px; + background-color: ${({ theme, highlighted }) => + highlighted ? theme.colors.purple : theme.colors.purple_30}; + border-radius: 10px; + transition: 0.2s; + transition-timing-function: ease-in-out; +`; From b07371502b060c15d9bde144d57898f0a7397455 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Mon, 29 Jan 2024 01:03:43 +0900 Subject: [PATCH 09/22] feat: add comment chip --- src/components/commons/Chip/CommentChip.tsx | 38 +++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/commons/Chip/CommentChip.tsx diff --git a/src/components/commons/Chip/CommentChip.tsx b/src/components/commons/Chip/CommentChip.tsx new file mode 100644 index 0000000..8c0ac7a --- /dev/null +++ b/src/components/commons/Chip/CommentChip.tsx @@ -0,0 +1,38 @@ +import styled from 'styled-components'; + +import { colors } from '@styles/theme'; + +import { CommentIcon } from '@icons/index'; + +import Text from '../Text/Text'; + +interface CommentChipProps { + count: number; + onClick: () => void; +} + +const CommentChip = ({ count, onClick }: CommentChipProps) => { + return ( + + + + 댓글 + + + {count} + + + ); +}; + +export default CommentChip; + +const Container = styled.button` + display: flex; + gap: 5px; + align-items: center; + justify-content: center; + padding: 2px 10px; + background-color: ${({ theme }) => theme.colors.black_40}; + border-radius: 20px; +`; From 473d77f88f9ba64d6cbe4c18c45a9057acca1d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Mon, 29 Jan 2024 01:03:55 +0900 Subject: [PATCH 10/22] fix: set default line height to 1.4 --- src/components/commons/Text/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/commons/Text/Text.tsx b/src/components/commons/Text/Text.tsx index 5b6ef00..a42df24 100644 --- a/src/components/commons/Text/Text.tsx +++ b/src/components/commons/Text/Text.tsx @@ -25,7 +25,7 @@ const Text = React.memo((props: TextProps) => { }); const StyledText = styled('div')` - ${({ lineHeight }) => + ${({ lineHeight = 1.4 }) => lineHeight && css` line-height: ${lineHeight}; From 3177e9dda73c1829d9f7952d8fc3c10ed27186db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Mon, 29 Jan 2024 01:04:11 +0900 Subject: [PATCH 11/22] feat: add AlphaTopicCard --- .../AlphaTopic/AlphaTopicCard.styles.tsx | 5 ++ src/components/AlphaTopic/AlphaTopicCard.tsx | 75 +++++++++++++++++++ src/routes/A/AlphaTopics.styles.tsx | 8 ++ src/routes/A/AlphaTopics.tsx | 38 ++++++++-- 4 files changed, 119 insertions(+), 7 deletions(-) create mode 100644 src/components/AlphaTopic/AlphaTopicCard.styles.tsx create mode 100644 src/components/AlphaTopic/AlphaTopicCard.tsx create mode 100644 src/routes/A/AlphaTopics.styles.tsx diff --git a/src/components/AlphaTopic/AlphaTopicCard.styles.tsx b/src/components/AlphaTopic/AlphaTopicCard.styles.tsx new file mode 100644 index 0000000..ae6a3a0 --- /dev/null +++ b/src/components/AlphaTopic/AlphaTopicCard.styles.tsx @@ -0,0 +1,5 @@ +import { styled } from 'styled-components'; + +const Container = styled.div``; + +export { Container }; diff --git a/src/components/AlphaTopic/AlphaTopicCard.tsx b/src/components/AlphaTopic/AlphaTopicCard.tsx new file mode 100644 index 0000000..66e33da --- /dev/null +++ b/src/components/AlphaTopic/AlphaTopicCard.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { styled } from 'styled-components'; + +import Chip from '@components/commons/Chip/Chip'; +import CommentChip from '@components/commons/Chip/CommentChip'; +import { Col, Row } from '@components/commons/Flex/Flex'; +import ProgressBar from '@components/commons/ProgressBar/ProgressBar'; +import Text from '@components/commons/Text/Text'; +import { TopicResponse } from '@interfaces/api/topic'; + +import { colors } from '@styles/theme'; + +import { ALogoIcon, CommentIcon } from '@icons/index'; + +interface AlphaTopicCardProps extends TopicResponse { + chip?: 'popular' | 'close'; +} + +const AlphaTopicCard = (props: AlphaTopicCardProps) => { + const { chip, topicTitle } = props; + + return ( + + {chip && ( + + + + )} + + + {topicTitle} + + + + + ( + + A + + )} + /> + ( + + B + + )} + /> + + + + 방금 + + {}} /> + + + ); +}; + +export default AlphaTopicCard; diff --git a/src/routes/A/AlphaTopics.styles.tsx b/src/routes/A/AlphaTopics.styles.tsx new file mode 100644 index 0000000..5c47d09 --- /dev/null +++ b/src/routes/A/AlphaTopics.styles.tsx @@ -0,0 +1,8 @@ +import { styled } from 'styled-components'; + +const Container = styled.div` + height: 100%; + background-color: ${({ theme }) => theme.colors.navy}; +`; + +export { Container }; diff --git a/src/routes/A/AlphaTopics.tsx b/src/routes/A/AlphaTopics.tsx index 3876f35..5d0c151 100644 --- a/src/routes/A/AlphaTopics.tsx +++ b/src/routes/A/AlphaTopics.tsx @@ -9,6 +9,8 @@ import { colors } from '@styles/theme'; import { ALogoIcon } from '@icons/index'; +import { Container } from './AlphaTopics.styles'; + const AlphaTopics = () => { return ( { HeaderLeft={() => } HeaderCenter={() => 진행중} > - - - - - - - + + + + + + + + + ); }; From 8011ea9ebcf54cc972efed068b0c5867dd77f831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 16:45:34 +0900 Subject: [PATCH 12/22] fix: centerize HeaderCenter and make header sections have same width --- src/components/commons/Layout/Layout.styles.tsx | 4 +++- src/components/commons/Layout/Layout.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/commons/Layout/Layout.styles.tsx b/src/components/commons/Layout/Layout.styles.tsx index 7e05c6b..1ea0c69 100644 --- a/src/components/commons/Layout/Layout.styles.tsx +++ b/src/components/commons/Layout/Layout.styles.tsx @@ -26,7 +26,9 @@ export const Header = styled.header` background-color: ${(props) => props.theme.colors.navy}; `; -export const HeaderSection = styled.div``; +export const HeaderSection = styled.div` + flex: 1; +`; export const ChildrenContainer = styled.div` height: calc(100% - 48px); diff --git a/src/components/commons/Layout/Layout.tsx b/src/components/commons/Layout/Layout.tsx index db82053..3496998 100644 --- a/src/components/commons/Layout/Layout.tsx +++ b/src/components/commons/Layout/Layout.tsx @@ -1,6 +1,7 @@ import React from 'react'; import BottomNavigation from '../BottomNavigation/BottomNavigation'; +import { Row } from '../Flex/Flex'; import { ChildrenContainer, @@ -25,7 +26,11 @@ const Layout = (props: LayoutProps) => {
{HeaderLeft && } - {HeaderCenter && } + + + {HeaderCenter && } + + {HeaderRight && }
{children} From d6871637be37f24f839a5eda13dbfdae283d8fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:31:59 +0900 Subject: [PATCH 13/22] chore: add eslint rules --- .eslintrc.cjs | 98 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 92 insertions(+), 6 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 1b901f2..3489172 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -28,12 +28,98 @@ module.exports = { }, }, rules: { - '@tanstack/query/exhaustive-deps': 'error', - '@tanstack/query/stable-query-client': 'error', - '@typescript-eslint/no-unused-vars': 'warn', - 'no-empty-pattern': 'warn', - 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], - 'import/no-unresolved': 'off', + 'no-implicit-coercion': 'error', + + 'no-undef': 'off', + + indent: 'off', + '@typescript-eslint/indent': 'off', + semi: 'off', + + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-explicit-any': 'off', + + 'no-extra-boolean-cast': 'off', + + 'getter-return': 'warn', + + '@typescript-eslint/explicit-function-return-type': 'off', + + '@typescript-eslint/no-use-before-define': 'off', + + '@typescript-eslint/no-empty-interface': 'off', + + '@typescript-eslint/no-parameter-properties': 'off', + + 'no-restricted-imports': [ + 'error', + { + paths: [ + { + name: 'util', + importNames: ['isArray'], + message: '`Array.isArray`를 대신 사용해주세요!', + }, + ], + }, + ], + + 'no-async-promise-executor': 'warn', + '@typescript-eslint/prefer-as-const': 'warn', + '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn', + '@typescript-eslint/ban-types': 'warn', + '@typescript-eslint/no-inferrable-types': 'warn', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/naming-convention': [ + 'error', + { + format: ['camelCase', 'UPPER_CASE', 'PascalCase'], + selector: 'variable', + leadingUnderscore: 'allow', + }, + { format: ['camelCase', 'PascalCase'], selector: 'function' }, + { format: ['PascalCase'], selector: 'interface' }, + { format: ['PascalCase'], selector: 'typeAlias' }, + ], + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }], + '@typescript-eslint/member-ordering': [ + 'error', + { + default: [ + 'public-static-field', + 'private-static-field', + 'public-instance-field', + 'private-instance-field', + 'public-constructor', + 'private-constructor', + 'public-instance-method', + 'private-instance-method', + ], + }, + ], + 'no-warning-comments': [ + 'warn', + { + terms: ['TODO', 'FIXME', 'XXX', 'BUG'], + location: 'anywhere', + }, + ], + 'prefer-const': 'error', + 'no-var': 'error', + curly: ['error', 'all'], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'import/no-duplicates': 'error', + + 'react/prop-types': 'off', + + 'react/display-name': 'off', + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'error', + + '@typescript-eslint/no-var-requires': 'warn', + 'react/react-in-jsx-scope': 'off', 'import/order': [ 'error', { From 72d81dbee1da7c8676e304d938beffe4b247d9c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:32:05 +0900 Subject: [PATCH 14/22] chore: add react-uid --- package.json | 1 + yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index 6256ef3..824244e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-hook-form": "^7.49.2", "react-modal": "^3.16.1", "react-router-dom": "^6.16.0", + "react-uid": "^2.3.3", "styled-components": "^6.0.8", "styled-normalize": "^8.0.7", "swiper": "^11.0.4", diff --git a/yarn.lock b/yarn.lock index 0bc6545..738b650 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8048,6 +8048,13 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" +react-uid@^2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.3.3.tgz#6a485ccc868555997f3506c6db97a3e735d97adf" + integrity sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ== + dependencies: + tslib "^2.0.0" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" From 5fa47975a44ceeca2e5ad85482476a77c0a48f2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:32:22 +0900 Subject: [PATCH 15/22] feat: add ToggleSwitch --- .../commons/ToggleSwitch/SwitchItem.tsx | 35 +++++++ .../ToggleSwitch/ToggleSwitch.styles.tsx | 64 +++++++++++++ .../commons/ToggleSwitch/ToggleSwitch.tsx | 91 +++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 src/components/commons/ToggleSwitch/SwitchItem.tsx create mode 100644 src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx create mode 100644 src/components/commons/ToggleSwitch/ToggleSwitch.tsx diff --git a/src/components/commons/ToggleSwitch/SwitchItem.tsx b/src/components/commons/ToggleSwitch/SwitchItem.tsx new file mode 100644 index 0000000..1b2eb78 --- /dev/null +++ b/src/components/commons/ToggleSwitch/SwitchItem.tsx @@ -0,0 +1,35 @@ +import { InputHTMLAttributes, Ref, forwardRef } from 'react'; +import { useUID } from 'react-uid'; + +import { OptionContainer, OptionInput, OptionLabel } from './ToggleSwitch.styles'; + +function SwitchItem( + { + className, + children, + checked, + id: elementId, + ...rest + }: Omit, 'type'>, + forwardedRef: Ref +) { + const id = useUID(); + + return ( + + + + {children} + + + ); +} + +export default forwardRef(SwitchItem); diff --git a/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx b/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx new file mode 100644 index 0000000..f13cc70 --- /dev/null +++ b/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx @@ -0,0 +1,64 @@ +import { motion } from 'framer-motion'; +import { styled } from 'styled-components'; + +const Container = styled.div` + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: max-content; + background: rgb(255 255 255 / 10%); + border-radius: 40px; +`; + +const Indicator = styled(motion.div)` + position: absolute; + top: 2px; + bottom: 2px; + left: 2px; + z-index: 0; + background-color: ${({ theme }) => theme.colors.black}; + border-radius: 30px; + + /* box-shadow: 0 2px 4px 0 rgb(0 0 0 / 9%); */ + + /* opacity: 0; */ +`; + +const OptionContainer = styled.div` + z-index: 1; + display: flex; + flex: 1 1; + align-items: center; + justify-content: center; + height: 100%; + padding: 2px; + overflow: hidden; + border-radius: 24px; +`; + +const OptionInput = styled.input` + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + appearance: none; + border: 0; +`; + +const OptionLabel = styled.label` + width: 100%; + padding: 4px 14px; + margin: 0; + color: #6b7684; + text-align: center; + appearance: none; + cursor: pointer; + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); +`; + +export { Container, Indicator, OptionContainer, OptionInput, OptionLabel }; diff --git a/src/components/commons/ToggleSwitch/ToggleSwitch.tsx b/src/components/commons/ToggleSwitch/ToggleSwitch.tsx new file mode 100644 index 0000000..13f283d --- /dev/null +++ b/src/components/commons/ToggleSwitch/ToggleSwitch.tsx @@ -0,0 +1,91 @@ +import { + InputHTMLAttributes, + ChangeEvent, + Children, + cloneElement, + ComponentProps, + ReactElement, + useCallback, + memo, +} from 'react'; + +import SwitchItem from './SwitchItem'; +import { Container, Indicator } from './ToggleSwitch.styles'; + +type RadioOptionElement = ReactElement>; + +interface Props + extends Pick< + InputHTMLAttributes, + 'className' | 'disabled' | 'value' | 'defaultValue' | 'onChange' | 'name' + > { + children: RadioOptionElement | RadioOptionElement[]; +} + +function ToggleSwitch(props: Props) { + const { children, ...otherProps } = props; + + return ( + { + props.onChange?.(event); + }} + > + {children} + + ); +} + +const ControlledRadio = memo(({ children, disabled, value, onChange, name }: Props) => { + const handleChange = useCallback( + (event: ChangeEvent) => { + onChange?.(event); + }, + [onChange] + ); + + const checkedIndex = Children.map(children, (child) => { + return child.props; + }).findIndex((p) => p.value === value); + + const checked = checkedIndex !== -1; + + const numberOfChildren = Children.count(children); + + return ( + + + {Children.map(children, (child) => { + return cloneElement(child, { + name: name, + disabled, + checked: value === child.props.value, + onChange: handleChange, + }); + })} + + ); +}); + +ToggleSwitch.Option = SwitchItem; + +export default ToggleSwitch; From f8b4f72ef7941ec8eb2689969a0f90d025dd0cfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:32:36 +0900 Subject: [PATCH 16/22] chore: remoe unused imports --- src/components/AlphaTopic/AlphaTopicCard.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/AlphaTopic/AlphaTopicCard.tsx b/src/components/AlphaTopic/AlphaTopicCard.tsx index 66e33da..1eef6ec 100644 --- a/src/components/AlphaTopic/AlphaTopicCard.tsx +++ b/src/components/AlphaTopic/AlphaTopicCard.tsx @@ -1,6 +1,3 @@ -import React from 'react'; -import { styled } from 'styled-components'; - import Chip from '@components/commons/Chip/Chip'; import CommentChip from '@components/commons/Chip/CommentChip'; import { Col, Row } from '@components/commons/Flex/Flex'; @@ -10,8 +7,6 @@ import { TopicResponse } from '@interfaces/api/topic'; import { colors } from '@styles/theme'; -import { ALogoIcon, CommentIcon } from '@icons/index'; - interface AlphaTopicCardProps extends TopicResponse { chip?: 'popular' | 'close'; } From d9ab8475479305f256bcbd67d2ed22bd3f5b8de7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:33:32 +0900 Subject: [PATCH 17/22] fix: make HeaderSection ReactNode --- src/components/commons/Layout/Layout.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/commons/Layout/Layout.tsx b/src/components/commons/Layout/Layout.tsx index 3496998..7e4e6ef 100644 --- a/src/components/commons/Layout/Layout.tsx +++ b/src/components/commons/Layout/Layout.tsx @@ -12,9 +12,9 @@ import { } from './Layout.styles'; interface LayoutProps { - HeaderLeft?: () => React.ReactNode; - HeaderCenter?: () => React.ReactNode; - HeaderRight?: () => React.ReactNode; + HeaderLeft?: React.ReactNode; + HeaderCenter?: React.ReactNode; + HeaderRight?: React.ReactNode; hasBottomNavigation?: boolean; children: React.ReactNode; } @@ -25,13 +25,21 @@ const Layout = (props: LayoutProps) => { return (
- {HeaderLeft && } + + + {HeaderLeft} + + - {HeaderCenter && } + {HeaderCenter} + + + + + {HeaderRight} - {HeaderRight && }
{children} {hasBottomNavigation && ( From 816ad6dc56e2e73ce11cc74186dfa56652643ce1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:50:29 +0900 Subject: [PATCH 18/22] chore: add constant path alias --- tsconfig.paths.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tsconfig.paths.json b/tsconfig.paths.json index 2e70244..d306f0b 100644 --- a/tsconfig.paths.json +++ b/tsconfig.paths.json @@ -5,6 +5,7 @@ "@routes/*": ["src/routes/*"], "@components/*": ["src/components/*"], "@interfaces/*": ["src/interfaces/*"], + "@constants/*": ["src/constants/*"], "@styles/*": ["src/assets/styles/*"], "@icons/*": ["src/assets/icons/*"], "@fonts/*": ["src/assets/fonts/*"], From 42420fed0f30ad5d49b1c2bcf07b1a360dff269d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 20:52:34 +0900 Subject: [PATCH 19/22] fix: HeaderSection props --- src/routes/A/AlphaTopics.tsx | 29 ++++++++++++++++++++---- src/routes/Auth/signup/Signup.tsx | 9 ++++---- src/routes/Home/Home.tsx | 2 +- src/routes/Notification/Notification.tsx | 10 ++++---- src/routes/Topic/TopicCreate.tsx | 10 ++++---- src/routes/Topic/TopicSideSelection.tsx | 16 ++++--------- 6 files changed, 44 insertions(+), 32 deletions(-) diff --git a/src/routes/A/AlphaTopics.tsx b/src/routes/A/AlphaTopics.tsx index 5d0c151..5d92cc1 100644 --- a/src/routes/A/AlphaTopics.tsx +++ b/src/routes/A/AlphaTopics.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import { ChangeEvent, useState } from 'react'; import AlphaTopicCard from '@components/AlphaTopic/AlphaTopicCard'; import { Col, Row } from '@components/commons/Flex/Flex'; import Layout from '@components/commons/Layout/Layout'; -import Text from '@components/commons/Text/Text'; +import ToggleSwitch from '@components/commons/ToggleSwitch/ToggleSwitch'; import { colors } from '@styles/theme'; @@ -12,11 +12,17 @@ import { ALogoIcon } from '@icons/index'; import { Container } from './AlphaTopics.styles'; const AlphaTopics = () => { + const [value, setValue] = useState('진행중'); + + const handleTopicStatusChange = (e: ChangeEvent) => { + setValue(e.target.value); + }; + return ( } - HeaderCenter={() => 진행중} + HeaderLeft={} + HeaderCenter={TopicToggleSwitch({ value, onChange: handleTopicStatusChange })} > @@ -51,4 +57,19 @@ const AlphaTopics = () => { ); }; +const TopicToggleSwitch = ({ + value, + onChange, +}: { + value: string; + onChange: (e: ChangeEvent) => void; +}) => { + return ( + + 진행중 + 종료된 + + ); +}; + export default AlphaTopics; diff --git a/src/routes/Auth/signup/Signup.tsx b/src/routes/Auth/signup/Signup.tsx index 9239c75..274e147 100644 --- a/src/routes/Auth/signup/Signup.tsx +++ b/src/routes/Auth/signup/Signup.tsx @@ -1,8 +1,6 @@ import React, { useEffect } from 'react'; import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'; import { useLocation } from 'react-router-dom'; -import { CONFIG, INPUT_TYPE } from 'src/constants/form'; -import { GENDERS, JOBS } from 'src/constants/signup'; import { SingnUpRequestDTO, useSignup } from '@apis/oauth/signup'; import { Col } from '@components/commons/Flex/Flex'; @@ -14,6 +12,9 @@ import Text from '@components/commons/Text/Text'; import TextInput from '@components/commons/TextInput/TextInput'; import useBottomSheet from '@hooks/useBottomSheet/useBottomSheet'; +import { INPUT_TYPE, CONFIG } from '@constants/form'; +import { GENDERS, JOBS } from '@constants/signup'; + import { colors } from '@styles/theme'; import { ResponseError } from '@apis/fetch'; @@ -84,11 +85,11 @@ const Signup = () => { return ( ( + HeaderCenter={ 회원정보 입력 - )} + } > diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx index 84824c8..f1cdbb5 100644 --- a/src/routes/Home/Home.tsx +++ b/src/routes/Home/Home.tsx @@ -21,7 +21,7 @@ const Home = () => { } return ( - }> + }> { diff --git a/src/routes/Notification/Notification.tsx b/src/routes/Notification/Notification.tsx index d69cbcf..5618ec3 100644 --- a/src/routes/Notification/Notification.tsx +++ b/src/routes/Notification/Notification.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { Col, Row } from '@components/commons/Flex/Flex'; +import { Col } from '@components/commons/Flex/Flex'; import Layout from '@components/commons/Layout/Layout'; import Text from '@components/commons/Text/Text'; import NotificationItem from '@components/Notifications/NotificationItem'; @@ -17,12 +17,12 @@ const Notification = () => { NOTIFICATIONS_TABS[0] ); - const notifications: { + const notifications: Array<{ type: 'hit' | 'comment' | 'like' | 'close'; title: string; date: number; checked: boolean; - }[] = [ + }> = [ { // 투표가 마감 되었어요, 지금 바로 결과를 확인해 보세요! type: 'close', @@ -70,11 +70,11 @@ const Notification = () => { return ( ( + HeaderCenter={ 알림 - )} + } > diff --git a/src/routes/Topic/TopicCreate.tsx b/src/routes/Topic/TopicCreate.tsx index 3ef4c90..5a4c102 100644 --- a/src/routes/Topic/TopicCreate.tsx +++ b/src/routes/Topic/TopicCreate.tsx @@ -16,7 +16,6 @@ import { HeaderCenterContainer, SideButton, SideChangeButton, - EmptyDiv, } from './TopicCreate.sytles'; const TopicCreate = () => { @@ -41,12 +40,12 @@ const TopicCreate = () => { return ( ( + HeaderLeft={ navigate(-1)}> - )} - HeaderCenter={() => ( + } + HeaderCenter={ 토픽 만들기 @@ -72,8 +71,7 @@ const TopicCreate = () => { - )} - HeaderRight={() => } + } > {Container} diff --git a/src/routes/Topic/TopicSideSelection.tsx b/src/routes/Topic/TopicSideSelection.tsx index bd60bae..c3b091d 100644 --- a/src/routes/Topic/TopicSideSelection.tsx +++ b/src/routes/Topic/TopicSideSelection.tsx @@ -7,13 +7,7 @@ import Text from '@components/commons/Text/Text'; import { colors } from '@styles/theme'; -import { - ALogoIcon, - BLogoIcon, - BigDownChevronIcon, - RightChevronIcon, - TopicCreatBackgrounIcon, -} from '@icons/index'; +import { ALogoIcon, BLogoIcon, BigDownChevronIcon, TopicCreatBackgrounIcon } from '@icons/index'; import { SelectDescription, @@ -26,7 +20,6 @@ import { Container, Description, DownShevron, - EmptyDiv, ADescription, BDescription, BackgroundBlur, @@ -55,13 +48,12 @@ const TopicSideSelection = () => { return ( } - HeaderCenter={() => ( + HeaderLeft={} + HeaderCenter={ 토픽 생성 - )} - HeaderRight={() => } + } > From 2b226b80fa44be370c889dc048fa7e064cafbdc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 21:02:08 +0900 Subject: [PATCH 20/22] fix: selected label color --- .../commons/ToggleSwitch/SwitchItem.tsx | 2 +- .../ToggleSwitch/ToggleSwitch.styles.tsx | 5 +-- src/routes/A/AlphaTopics.tsx | 31 +++++++++---------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/commons/ToggleSwitch/SwitchItem.tsx b/src/components/commons/ToggleSwitch/SwitchItem.tsx index 1b2eb78..96c5758 100644 --- a/src/components/commons/ToggleSwitch/SwitchItem.tsx +++ b/src/components/commons/ToggleSwitch/SwitchItem.tsx @@ -25,7 +25,7 @@ function SwitchItem( ref={forwardedRef} {...rest} /> - + {children} diff --git a/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx b/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx index f13cc70..884f7e6 100644 --- a/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx +++ b/src/components/commons/ToggleSwitch/ToggleSwitch.styles.tsx @@ -50,15 +50,16 @@ const OptionInput = styled.input` border: 0; `; -const OptionLabel = styled.label` +const OptionLabel = styled.label<{ checked: boolean }>` width: 100%; padding: 4px 14px; margin: 0; - color: #6b7684; + color: ${({ checked, theme }) => (checked ? theme.colors.purple : theme.colors.white_40)}; text-align: center; appearance: none; cursor: pointer; -webkit-tap-highlight-color: rgb(0 0 0 / 0%); + transition: 0.5s; `; export { Container, Indicator, OptionContainer, OptionInput, OptionLabel }; diff --git a/src/routes/A/AlphaTopics.tsx b/src/routes/A/AlphaTopics.tsx index 5d92cc1..639810c 100644 --- a/src/routes/A/AlphaTopics.tsx +++ b/src/routes/A/AlphaTopics.tsx @@ -3,6 +3,7 @@ import { ChangeEvent, useState } from 'react'; import AlphaTopicCard from '@components/AlphaTopic/AlphaTopicCard'; import { Col, Row } from '@components/commons/Flex/Flex'; import Layout from '@components/commons/Layout/Layout'; +import Text from '@components/commons/Text/Text'; import ToggleSwitch from '@components/commons/ToggleSwitch/ToggleSwitch'; import { colors } from '@styles/theme'; @@ -22,7 +23,20 @@ const AlphaTopics = () => { } - HeaderCenter={TopicToggleSwitch({ value, onChange: handleTopicStatusChange })} + HeaderCenter={ + + + + 진행중 + + + + + 종료된 + + + + } > @@ -57,19 +71,4 @@ const AlphaTopics = () => { ); }; -const TopicToggleSwitch = ({ - value, - onChange, -}: { - value: string; - onChange: (e: ChangeEvent) => void; -}) => { - return ( - - 진행중 - 종료된 - - ); -}; - export default AlphaTopics; From 4f546502f63a19cae43c459f02f7447c12f99d43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 21:23:42 +0900 Subject: [PATCH 21/22] feat: add up-down chevron --- src/assets/icons/index.ts | 3 +++ src/assets/icons/up-down.svg | 8 ++++++++ 2 files changed, 11 insertions(+) create mode 100644 src/assets/icons/up-down.svg diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 0206198..9dceeb4 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-unresolved */ import ALogoIcon from './a-logo.svg?react'; import ABLogoIcon from './ab-logo.svg?react'; import ABIcon from './ab.svg?react'; @@ -28,6 +29,7 @@ import RotateIcon from './rotate.svg?react'; import SizeUpIcon from './size-up.svg?react'; import ThumbsIcon from './thumbs.svg?react'; import TopicCreatBackgrounIcon from './topic-create-background.svg?react'; +import UpDownChevronIcon from './up-down.svg?react'; import WriteBoxIcon from './write-box.svg?react'; export { @@ -61,5 +63,6 @@ export { SizeUpIcon, ThumbsIcon, TopicCreatBackgrounIcon, + UpDownChevronIcon, WriteBoxIcon, }; diff --git a/src/assets/icons/up-down.svg b/src/assets/icons/up-down.svg new file mode 100644 index 0000000..3803a60 --- /dev/null +++ b/src/assets/icons/up-down.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file From e42cc6209d47928d44a8ed93c354628cd44c525a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 30 Jan 2024 21:24:01 +0900 Subject: [PATCH 22/22] feat: imeplement filter and sort button --- src/routes/A/AlphaTopics.tsx | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/routes/A/AlphaTopics.tsx b/src/routes/A/AlphaTopics.tsx index 639810c..8fe8e5b 100644 --- a/src/routes/A/AlphaTopics.tsx +++ b/src/routes/A/AlphaTopics.tsx @@ -8,15 +8,17 @@ import ToggleSwitch from '@components/commons/ToggleSwitch/ToggleSwitch'; import { colors } from '@styles/theme'; -import { ALogoIcon } from '@icons/index'; +import { ALogoIcon, UpDownChevronIcon } from '@icons/index'; import { Container } from './AlphaTopics.styles'; const AlphaTopics = () => { - const [value, setValue] = useState('진행중'); + const [topicFilter, setTopicFilter] = useState('진행중'); + const [isMineOnly, setIsMineOnly] = useState(false); + const [isLatest, setIsLatest] = useState(true); const handleTopicStatusChange = (e: ChangeEvent) => { - setValue(e.target.value); + setTopicFilter(e.target.value); }; return ( @@ -24,7 +26,7 @@ const AlphaTopics = () => { hasBottomNavigation HeaderLeft={} HeaderCenter={ - + 진행중 @@ -40,8 +42,30 @@ const AlphaTopics = () => { > - - + +