From 7c885e3a489e1bf4160f2731391af6d6f776705a Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 27 Oct 2024 23:13:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=84=A4=EC=A0=95=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20font,=20t?= =?UTF-8?q?heme=20ver3.0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/LanguageDropdown.css.ts | 25 ++++++++++--------- src/app/account/locale.ts | 4 +-- src/app/account/page.css.ts | 9 ++++--- src/app/account/page.tsx | 2 +- src/app/layout.css.ts | 2 +- src/components/Header/Header.tsx | 13 +++++----- src/components/locale.ts | 4 ++- 7 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/app/account/_components/LanguageDropdown.css.ts b/src/app/account/_components/LanguageDropdown.css.ts index ee070065..ef6e587d 100644 --- a/src/app/account/_components/LanguageDropdown.css.ts +++ b/src/app/account/_components/LanguageDropdown.css.ts @@ -1,13 +1,13 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/font.css'; export const container = style({ position: 'relative', }); export const triggerDiv = style([ - fonts.labelMedium, + fonts.LabelSmall, { width: 172, height: 36, @@ -17,37 +17,38 @@ export const triggerDiv = style([ alignItems: 'center', justifyContent: 'space-between', - color: vars.color.gray9, + color: vars.color.black, - border: `2px solid ${vars.color.gray7}`, + border: `2px solid ${vars.color.bluegray8}`, borderRadius: 8, }, ]); export const menuDiv = style([ - fonts.labelMedium, + fonts.LabelSmall, { width: 172, - padding: '8px 0', position: 'absolute', - color: vars.color.gray9, + color: vars.color.black, - border: `2px solid ${vars.color.gray7}`, + border: `2px solid ${vars.color.bluegray8}`, borderTop: 'none', - borderRadius: '0px 0px 8px 8px', + borderRadius: '0.8rem', + backgroundColor: vars.color.bggray, }, ]); export const listDiv = style([ - fonts.labelMedium, + fonts.LabelSmall, { padding: '8px 16px', + borderRadius: '0.8rem', selectors: { '&:hover': { - backgroundColor: vars.color.lightblue, + backgroundColor: vars.color.bluegray6, }, }, }, diff --git a/src/app/account/locale.ts b/src/app/account/locale.ts index 889128a2..4eefd0df 100644 --- a/src/app/account/locale.ts +++ b/src/app/account/locale.ts @@ -15,7 +15,7 @@ export const accountLocale = { introduceError: '소개 에러', profileSetting: '프로필 설정', save: '저장', - myPage: '마이페이지', + settings: '설정', changeLanguage: '언어변경', language: '언어', contact: '문의하기', @@ -50,7 +50,7 @@ export const accountLocale = { profileSetting: 'Profile Settings', save: 'Save', - myPage: 'My Page', + settings: 'Settings', changeLanguage: 'Change language', language: 'Language', contact: 'Contact us', diff --git a/src/app/account/page.css.ts b/src/app/account/page.css.ts index bd684fed..20a4ae19 100644 --- a/src/app/account/page.css.ts +++ b/src/app/account/page.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/__font.css'; -import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; export const container = style({ marginTop: 18, @@ -11,7 +11,7 @@ export const container = style({ }); export const baseDiv = style([ - fonts.titleSmall, + fonts.Label, { padding: '16px 32px', @@ -25,10 +25,11 @@ export const buttonDiv = style([ baseDiv, { cursor: 'pointer', + borderRadius: '1.2rem', selectors: { '&:hover': { - backgroundColor: vars.color.lightblue, + backgroundColor: vars.color.bluegray6, }, }, }, diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index c344e495..c929d8b0 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -34,7 +34,7 @@ export default function AccountPage() { leftClick={() => { router.back(); }} - title={accountLocale[language].myPage} + title={accountLocale[language].settings} />
diff --git a/src/app/layout.css.ts b/src/app/layout.css.ts index 15c317ac..549e458d 100644 --- a/src/app/layout.css.ts +++ b/src/app/layout.css.ts @@ -10,7 +10,7 @@ export const body = style({ position: 'relative', - backgroundColor: vars.color.whiteblue, + backgroundColor: vars.color.bggray, }); export const toastContainer = style([fonts.labelMedium]); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index f0271dcf..f88ef362 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,16 +1,14 @@ 'use client'; import { ReactNode } from 'react'; -import CloseButton from '/public/icons/close_button.svg'; -import BackIcon from '/public/icons/back.svg'; - import * as styles from './Header.css'; import { commonLocale } from '@/components/locale'; import { useLanguage } from '@/store/useLanguage'; +//TODO: left의 close 없애야함. interface HeaderProps { title: string; - left?: 'close' | 'back'; + left?: 'cancel' | 'back' | 'close'; leftClick?: () => void; right?: ReactNode; } @@ -20,14 +18,15 @@ function Header({ title, left, leftClick, right }: HeaderProps) { return (

{title}

-
{right}
+ {right === null ? <> :
{right}
}
); } diff --git a/src/components/locale.ts b/src/components/locale.ts index 242c10e6..e93d8b9c 100644 --- a/src/components/locale.ts +++ b/src/components/locale.ts @@ -30,6 +30,7 @@ export const commonLocale: Record = { make: '를 만들어보세요!', start: '시작하기', cancel: '취소', + back: '뒤로가기', noDataImage: '데이터 없을 때 이미지', imageDescription: '이미지 설명', notSupportedPlatform: '지원하지 않는 플랫폼입니다.', @@ -65,7 +66,8 @@ export const commonLocale: Record = { list: 'your own', make: 'list!', start: 'Getting started', - cancel: 'cancel', + cancel: 'Cancel', + back: 'Back', noDataImage: 'Image displayed when there is no data', imageDescription: 'Image description', notSupportedPlatform: 'This platform is not supported.', From 0c88d4f612fbdaeec7e29d4ddfeef4ca829d2af3 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 28 Oct 2024 19:57:42 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C(=EC=BD=94=EB=93=9C?= =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EB=B0=98=EC=98=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index f88ef362..40b778f3 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -21,12 +21,11 @@ function Header({ title, left, leftClick, right }: HeaderProps) { {left === 'cancel' &&

{commonLocale[language].cancel}

} {left === 'back' &&

{commonLocale[language].back}

} {left === 'close' &&

"닫기"

} - {left === null && <>}

{title}

- {right === null ? <> :
{right}
} +
{right}
); } From 5544b34f23fba62addd7811e082d7331f0e90d43 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 28 Oct 2024 19:59:36 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Design:=20ver3.0=20=ED=8F=B0=ED=8A=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 --- src/components/Header/Header.css.ts | 34 ++++++++++++++++++----------- src/styles/font.css.ts | 6 +++++ 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts index 0cae8d46..0632bf62 100644 --- a/src/components/Header/Header.css.ts +++ b/src/components/Header/Header.css.ts @@ -1,12 +1,12 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/__font.css'; +import * as fonts from '@/styles/font.css'; import { vars } from '@/styles/theme.css'; export const header = style({ width: '100%', - height: '70px', - paddingLeft: '20px', - paddingRight: '20px', + height: '50px', + paddingLeft: '16px', + paddingRight: '16px', position: 'sticky', top: '0', @@ -25,18 +25,26 @@ export const flexChild = style({ }); export const headerTitle = style([ - fonts.titleMedium, + fonts.Subtitle, { textAlign: 'center', }, ]); -export const leftChild = style({ - display: 'flex', - justifyContent: 'left', -}); +export const leftChild = style([ + fonts.BodyRegular, + { + display: 'flex', + justifyContent: 'left', + color: vars.color.bluegray10, + }, +]); -export const rightChild = style({ - display: 'flex', - justifyContent: 'right', -}); +export const rightChild = style([ + fonts.BodyRegular, + { + display: 'flex', + justifyContent: 'right', + color: vars.color.bluegray10, + }, +]); diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index 4d5e4e2b..41bb0071 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -18,6 +18,12 @@ export const BodyBold = style({ letterSpacing: '-0.054rem', }); +export const BodyRegular = style({ + fontSize: '1.6rem', + fontWeight: '400', + letterSpacing: '-0.054rem', +}); + export const Body = style({ fontSize: '1.5rem', fontWeight: '400', From 7384b52a3621523fba79af9401447377090da69e Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 28 Oct 2024 21:39:24 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20SegmentedControl=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B2=A4?= =?UTF-8?q?=ED=86=A0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/locale.ts | 2 +- src/app/account/page.css.ts | 21 +++- src/app/account/page.tsx | 117 ++++++++++-------- .../SegmentedControl/SegmentedControl.tsx | 24 ++++ .../SegmentedControl/SegmentedCotrol.css.ts | 29 +++++ src/styles/font.css.ts | 6 + 6 files changed, 146 insertions(+), 53 deletions(-) create mode 100644 src/components/SegmentedControl/SegmentedControl.tsx create mode 100644 src/components/SegmentedControl/SegmentedCotrol.css.ts diff --git a/src/app/account/locale.ts b/src/app/account/locale.ts index 4eefd0df..6e67a90a 100644 --- a/src/app/account/locale.ts +++ b/src/app/account/locale.ts @@ -25,7 +25,7 @@ export const accountLocale = { withdrawMessage: '위 내용을 확인했으며, 리스티웨이브를 탈퇴하겠습니다.', withdraw: '탈퇴하기', withdrawModalMessage: '확인 버튼 클릭 시 즉시 탈퇴 처리됩니다.', - withdrawal: '회원 탈퇴', + withdrawal: '회원탈퇴', withdrawCheck1: '리스티 탈퇴 전 확인하세요', withdrawCheck2: '탈퇴 시 모든 정보가 사라지며, 되살릴 수 없어요.', withdrawCheck3: diff --git a/src/app/account/page.css.ts b/src/app/account/page.css.ts index 20a4ae19..4c67693f 100644 --- a/src/app/account/page.css.ts +++ b/src/app/account/page.css.ts @@ -8,10 +8,17 @@ export const container = style({ display: 'flex', flexDirection: 'column', gap: 12, + + padding: '0 1.6rem', +}); + +export const section = style({ + backgroundColor: vars.color.white, + borderRadius: '1.2rem', }); export const baseDiv = style([ - fonts.Label, + fonts.LabelBold, { padding: '16px 32px', @@ -40,3 +47,15 @@ export const titleDiv = style({ alignItems: 'center', gap: '16px', }); + +export const accountFooter = style({ + marginTop: '3rem', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '10px', + + color: vars.color.bluegray8, +}); + +export const textButton = style([fonts.Label, { color: vars.color.bluegray8 }]); diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index c929d8b0..9059773d 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -4,21 +4,20 @@ import useBooleanOutput from '@/hooks/useBooleanOutput'; import Header from '@/components/Header/Header'; import useMoveToPage from '@/hooks/useMoveToPage'; +import NavigateIcon from '/public/icons/chevron_right.svg'; import UserIcon from '/public/icons/user.svg'; import GlobeIcon from '/public/icons/globe.svg'; import HelpIcon from '/public/icons/help_circle.svg'; import MessageIcon from '/public/icons/message_square.svg'; -import LogoutIcon from '/public/icons/logout.svg'; -import WithdrawIcon from '/public/icons/withdraw_x.svg'; - +import { useLanguage } from '@/store/useLanguage'; +import { accountLocale } from '@/app/account/locale'; import LogoutModal from './_components/LogoutModal'; import LanguageDropdown from './_components/LanguageDropdown'; import * as styles from './page.css'; -import { accountLocale } from '@/app/account/locale'; -import { useLanguage } from '@/store/useLanguage'; +import SegmentedControl from '@/components/SegmentedControl/SegmentedControl'; export default function AccountPage() { - const { language } = useLanguage(); + const { language, setLanguage } = useLanguage(); const { onClickMoveToPage } = useMoveToPage(); const router = useRouter(); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); @@ -27,6 +26,11 @@ export default function AccountPage() { window.open(url, '_blank'); }; + const handleSelectLanguage = (option: string) => { + if (option === 'Korean' || option === '한국어') setLanguage('ko'); + if (option === 'English' || option === '영어') setLanguage('en'); + }; + return ( <>
-
-
-
- - {accountLocale[language].profileSetting} +
+
+
+
+ + {accountLocale[language].profileSetting} +
+
-
-
-
- - {accountLocale[language].language} +
+
+
+
+ + {accountLocale[language].language} +
+ {/** TODO: 제거하기 */} +
- - -
{ - handleDivLinkClick('https://open.kakao.com/o/saz6DObg'); - }} - > -
- - {accountLocale[language].contact} +
+
+
{ + handleDivLinkClick('https://open.kakao.com/o/saz6DObg'); + }} + > +
+ + {accountLocale[language].contact} +
+
- -
{ - handleDivLinkClick('https://tally.so/r/w51Dpv'); - }} - > -
- - {accountLocale[language].sendFeedback} +
{ + handleDivLinkClick('https://tally.so/r/w51Dpv'); + }} + > +
+ + {accountLocale[language].sendFeedback} +
+
-
-
-
- - {accountLocale[language].logout} -
-
+
+ +
+ + | + {isOn && } -
-
- - {accountLocale[language].withdrawal} -
-
-
+ ); } diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx new file mode 100644 index 00000000..a6de0070 --- /dev/null +++ b/src/components/SegmentedControl/SegmentedControl.tsx @@ -0,0 +1,24 @@ +import * as styles from './SegmentedCotrol.css'; + +interface SegmentedControlProps { + options: string[]; + selected: string; + handleSelect: (option: any) => void; +} + +export default function SegmentedControl({ options, selected, handleSelect }: SegmentedControlProps) { + return ( +
+ {options.map((option) => ( +
handleSelect(option)} + role="button" + > + {option} +
+ ))} +
+ ); +} diff --git a/src/components/SegmentedControl/SegmentedCotrol.css.ts b/src/components/SegmentedControl/SegmentedCotrol.css.ts new file mode 100644 index 00000000..91b8ca13 --- /dev/null +++ b/src/components/SegmentedControl/SegmentedCotrol.css.ts @@ -0,0 +1,29 @@ +import { style } from '@vanilla-extract/css'; +import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; + +export const track = style({ + width: 'auto', + padding: '0.2rem', + + display: 'flex', + borderRadius: '1.2rem', + gap: '0.5rem', + + backgroundColor: vars.color.bggray, +}); + +export const segment = style({ + padding: '1rem 2rem', + + display: 'relative', + + borderRadius: '1.2rem', + ':hover': { + backgroundColor: vars.color.bluegray6, + }, +}); + +export const selectedSegment = style({ + backgroundColor: vars.color.white, +}); diff --git a/src/styles/font.css.ts b/src/styles/font.css.ts index 41bb0071..234b17c9 100644 --- a/src/styles/font.css.ts +++ b/src/styles/font.css.ts @@ -30,6 +30,12 @@ export const Body = style({ letterSpacing: '-0.054rem', }); +export const LabelBold = style({ + fontSize: '1.4rem', + fontWeight: '600', + letterSpacing: '-0.042rem', +}); + export const Label = style({ fontSize: '1.4rem', fontWeight: '400',