diff --git a/public/icons/globe.svg b/public/icons/globe.svg new file mode 100644 index 00000000..59e83da9 --- /dev/null +++ b/public/icons/globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/help_circle.svg b/public/icons/help_circle.svg new file mode 100644 index 00000000..3b1dd7ce --- /dev/null +++ b/public/icons/help_circle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/logout.svg b/public/icons/logout.svg new file mode 100644 index 00000000..b1dc8f00 --- /dev/null +++ b/public/icons/logout.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/message_square.svg b/public/icons/message_square.svg new file mode 100644 index 00000000..c3424a90 --- /dev/null +++ b/public/icons/message_square.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/settings.svg b/public/icons/settings.svg new file mode 100644 index 00000000..cdbed0ef --- /dev/null +++ b/public/icons/settings.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/icons/user.svg b/public/icons/user.svg new file mode 100644 index 00000000..5ddff3dc --- /dev/null +++ b/public/icons/user.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/withdraw_x.svg b/public/icons/withdraw_x.svg new file mode 100644 index 00000000..a0dc3ca9 --- /dev/null +++ b/public/icons/withdraw_x.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/account/_components/LanguageDropdown.css.ts b/src/app/account/_components/LanguageDropdown.css.ts new file mode 100644 index 00000000..faec5db9 --- /dev/null +++ b/src/app/account/_components/LanguageDropdown.css.ts @@ -0,0 +1,58 @@ +import { style } from '@vanilla-extract/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, + { + width: 172, + height: 36, + padding: '6px 12px', + + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + + color: vars.color.gray9, + + border: `2px solid ${vars.color.gray7}`, + borderRadius: 8, + }, +]); + +export const menuDiv = style([ + fonts.labelMedium, + { + width: 172, + padding: '8px 0', + + position: 'absolute', + + color: vars.color.gray9, + + border: `2px solid ${vars.color.gray7}`, + borderTop: 'none', + borderRadius: '0px 0px 8px 8px', + }, +]); + +export const listDiv = style([ + fonts.labelMedium, + { + padding: '8px 16px', + + selectors: { + '&:hover': { + backgroundColor: vars.color.lightblue, + }, + }, + }, +]); + +export const selected = style({ + color: vars.color.blue, +}); diff --git a/src/app/account/_components/LanguageDropdown.tsx b/src/app/account/_components/LanguageDropdown.tsx new file mode 100644 index 00000000..1bf949c4 --- /dev/null +++ b/src/app/account/_components/LanguageDropdown.tsx @@ -0,0 +1,43 @@ +import { useState } from 'react'; +import * as styles from './LanguageDropdown.css'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import useOnClickOutside from '@/hooks/useOnClickOutside'; + +export default function LanguageDropdown() { + const { isOn, toggle, handleSetOff } = useBooleanOutput(); + const { ref } = useOnClickOutside(handleSetOff); + const [language, setLanguage] = useState<'ko' | 'en'>('ko'); + + const handleSelectLanguage = (language: 'ko' | 'en') => { + setLanguage(language); + handleSetOff(); + }; + + return ( +
+
+ {language === 'ko' ? '한국어' : 'English'} +
+ {isOn && ( +
+
{ + handleSelectLanguage('ko'); + }} + > + 한국어 +
+
{ + handleSelectLanguage('en'); + }} + > + English +
+
+ )} +
+ ); +} diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 1d918aee..5955b22f 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -1,23 +1,81 @@ 'use client'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -import LogoutModal from './_components/LogoutModal'; import useMoveToPage from '@/hooks/useMoveToPage'; +import Header from '@/components/Header/Header'; +import LogoutModal from './_components/LogoutModal'; + +import UserIcon from '/public/icons/user.svg'; +import SettingIcon from '/public/icons/settings.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 * as styles from './style.css'; +import LanguageDropdown from './_components/LanguageDropdown'; +import { useUser } from '@/store/useUser'; export default function AccountPage() { + const { user } = useUser(); + const userId = user.id; const { onClickMoveToPage } = useMoveToPage(); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); return ( <> -
마이페이지
-
- -
-
- -
- {isOn && } +
} //TODO: 공용HEADER 수정후 DIV없애기 + /> +
+
+
+ + 프로필설정 +
+
+
+
+ + 리스트 관리 +
+
+
+
+ + 언어 +
+ +
+
+
+ + FAQ +
+
+
+
+ + 의견 보내기 +
+
+
+
+ + 로그아웃 +
+
+ {isOn && } +
+
+ + 회원탈퇴 +
+
+
); } diff --git a/src/app/account/style.css.ts b/src/app/account/style.css.ts new file mode 100644 index 00000000..b75b7602 --- /dev/null +++ b/src/app/account/style.css.ts @@ -0,0 +1,42 @@ +import { style } from '@vanilla-extract/css'; +import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + marginTop: 18, + + display: 'flex', + flexDirection: 'column', + gap: 12, +}); + +export const baseDiv = style([ + fonts.titleSmall, + { + margin: '0 16px', + padding: '16px 16px', + + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }, +]); + +export const buttonDiv = style([ + baseDiv, + { + cursor: 'pointer', + + selectors: { + '&:hover': { + backgroundColor: vars.color.lightblue, + }, + }, + }, +]); + +export const titleDiv = style({ + display: 'flex', + alignItems: 'center', + gap: '16px', +}); diff --git a/src/app/list/create/_components/item/LinkModal.tsx b/src/app/list/create/_components/item/LinkModal.tsx index 1b544aa2..da936656 100644 --- a/src/app/list/create/_components/item/LinkModal.tsx +++ b/src/app/list/create/_components/item/LinkModal.tsx @@ -41,7 +41,7 @@ export default function LinkModal({ {isOn && ( - + 링크 추가 {children} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index c71ee03d..fbd01a9d 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { function Header({ title, left, leftClick, right }: HeaderProps) { return (
-