From fbd4d9a5b97b267ed79547824418295021f4f909 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 18 Feb 2024 00:47:03 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Feat:=20=EC=96=B8=EC=96=B4=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=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 --- .../_components/LanguageDropdown.css.ts | 58 +++++++++++++++++++ .../account/_components/LanguageDropdown.tsx | 41 +++++++++++++ 2 files changed, 99 insertions(+) create mode 100644 src/app/account/_components/LanguageDropdown.css.ts create mode 100644 src/app/account/_components/LanguageDropdown.tsx 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..5a7cb1fb --- /dev/null +++ b/src/app/account/_components/LanguageDropdown.tsx @@ -0,0 +1,41 @@ +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'); + return ( +
+
+ {language === 'ko' ? '한국어' : 'English'} +
+ {isOn && ( +
+
{ + setLanguage('ko'); + handleSetOff(); + }} + > + 한국어 +
+
{ + setLanguage('en'); + handleSetOff(); + }} + > + English +
+
+ )} +
+ ); +} From 218ffdd3dbfe18c47ce2fe67b1522033d84ba8d0 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 18 Feb 2024 00:47:43 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/globe.svg | 3 ++ public/icons/help_circle.svg | 5 +++ public/icons/logout.svg | 3 ++ public/icons/message_square.svg | 3 ++ public/icons/settings.svg | 11 +++++ public/icons/user.svg | 4 ++ public/icons/withdraw_x.svg | 5 +++ src/app/account/page.tsx | 78 +++++++++++++++++++++++++++++---- src/app/account/style.css.ts | 40 +++++++++++++++++ 9 files changed, 143 insertions(+), 9 deletions(-) create mode 100644 public/icons/globe.svg create mode 100644 public/icons/help_circle.svg create mode 100644 public/icons/logout.svg create mode 100644 public/icons/message_square.svg create mode 100644 public/icons/settings.svg create mode 100644 public/icons/user.svg create mode 100644 public/icons/withdraw_x.svg create mode 100644 src/app/account/style.css.ts 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/page.tsx b/src/app/account/page.tsx index 1d918aee..80576830 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -1,23 +1,83 @@ 'use client'; +import { useRouter } from 'next/navigation'; + 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'; export default function AccountPage() { const { onClickMoveToPage } = useMoveToPage(); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); + const router = useRouter(); return ( <> -
마이페이지
-
- -
-
- -
- {isOn && } +
{ + router.back(); + }} + title="마이페이지" + right={
} //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..367fd991 --- /dev/null +++ b/src/app/account/style.css.ts @@ -0,0 +1,40 @@ +import { style } from '@vanilla-extract/css'; +import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + display: 'flex', + flexDirection: 'column', + gap: 12, +}); + +export const baseDiv = style([ + fonts.titleSmall, + { + margin: '0 16px', + padding: '16px 26px', + + 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', +}); From ceb4ec48cf074c8b6b0aec720f147825c66dcb3a Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 18 Feb 2024 00:49:38 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Fix:=20=ED=97=A4=EB=8D=94=20=EC=99=BC?= =?UTF-8?q?=EC=AA=BD=20=EB=B2=84=ED=8A=BC=20'button'=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=84=A4=EC=A0=95=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20form=20submit=20=EB=90=98=EB=8A=94=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 (
- {isOn && ( - + 링크 추가 {children} From 3122dee74430be4be963d421a49d87768084a0fc Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 19 Feb 2024 10:44:38 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Refactor:=20=ED=95=A8=EC=88=98=20=EC=A0=84?= =?UTF-8?q?=EB=8B=AC=20=EB=B0=A9=EC=8B=9D=20=EA=B0=84=EB=8B=A8=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/_components/LanguageDropdown.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/account/_components/LanguageDropdown.tsx b/src/app/account/_components/LanguageDropdown.tsx index 5a7cb1fb..1811662f 100644 --- a/src/app/account/_components/LanguageDropdown.tsx +++ b/src/app/account/_components/LanguageDropdown.tsx @@ -5,9 +5,7 @@ import useOnClickOutside from '@/hooks/useOnClickOutside'; export default function LanguageDropdown() { const { isOn, toggle, handleSetOff } = useBooleanOutput(); - const { ref } = useOnClickOutside(() => { - handleSetOff(); - }); + const { ref } = useOnClickOutside(handleSetOff); const [language, setLanguage] = useState<'ko' | 'en'>('ko'); return (
From f3e8d361cd90a1fc0b8d2a57af30418452048834 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 19 Feb 2024 10:53:30 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Refactor:=20=EC=96=B8=EC=96=B4=20=EB=93=9C?= =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EA=B3=B5=EC=9A=A9=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EB=B3=84=EB=8F=84=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/_components/LanguageDropdown.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/account/_components/LanguageDropdown.tsx b/src/app/account/_components/LanguageDropdown.tsx index 1811662f..b058f134 100644 --- a/src/app/account/_components/LanguageDropdown.tsx +++ b/src/app/account/_components/LanguageDropdown.tsx @@ -7,6 +7,12 @@ 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 (
@@ -17,8 +23,7 @@ export default function LanguageDropdown() {
{ - setLanguage('ko'); - handleSetOff(); + handleSelectLanguage('ko'); }} > 한국어 @@ -26,8 +31,7 @@ export default function LanguageDropdown() {
{ - setLanguage('en'); - handleSetOff(); + handleSelectLanguage('en'); }} > English From 8b1881998b55b91c535b41ca0ecaa36a8db3a779 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Mon, 19 Feb 2024 10:54:02 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=20ref=20=EC=9E=98=EB=AA=BB=EC=A7=80=EC=A0=95=EB=90=98=EC=96=B4?= =?UTF-8?q?=20trigger=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=8B=AB=ED=9E=98&?= =?UTF-8?q?=EC=97=B4=EB=A6=BC=20=EB=8F=99=EC=8B=9C=20=EB=B0=9C=EC=83=9D=20?= =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/_components/LanguageDropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/account/_components/LanguageDropdown.tsx b/src/app/account/_components/LanguageDropdown.tsx index b058f134..1bf949c4 100644 --- a/src/app/account/_components/LanguageDropdown.tsx +++ b/src/app/account/_components/LanguageDropdown.tsx @@ -14,12 +14,12 @@ export default function LanguageDropdown() { }; return ( -
+
{language === 'ko' ? '한국어' : 'English'}
{isOn && ( -
+
{