Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 마이페이지 구현 #36

Merged
merged 9 commits into from
Feb 20, 2024
Merged
3 changes: 3 additions & 0 deletions public/icons/globe.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/icons/help_circle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/icons/logout.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/icons/message_square.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions public/icons/settings.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/icons/user.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/icons/withdraw_x.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions src/app/account/_components/LanguageDropdown.css.ts
Original file line number Diff line number Diff line change
@@ -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,
});
41 changes: 41 additions & 0 deletions src/app/account/_components/LanguageDropdown.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

서영님, 혹시 handleSetOff를 호출하지 않고 바로 보내주면 함수가 제대로 동작하지 않나요??
handleSetOff가 () => void 타입인 것 같아서 바로 보내줘도 가능한지 궁금하여 여쭤봅니다!!

const { ref } = useOnClickOutside(() => {
    handleSetOff;
  });

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉! 바로 보내주는거 완전 가능인데, 습관적으로 저렇게 했나봐요🥹
좋은 피드백 남겨주셔서 감사합니다!! 🙇‍♀️👍

const [language, setLanguage] = useState<'ko' | 'en'>('ko');
return (
<div className={styles.container}>
<div className={styles.triggerDiv} onClick={toggle}>
{language === 'ko' ? '한국어' : 'English'}
</div>
{isOn && (
<div ref={ref} className={styles.menuDiv}>
<div
className={`${styles.listDiv} ${language === 'ko' && styles.selected}`}
onClick={() => {
setLanguage('ko');
handleSetOff();
}}
>
한국어
</div>
<div
className={`${styles.listDiv} ${language === 'en' && styles.selected}`}
onClick={() => {
setLanguage('en');
handleSetOff();
}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClick 안에 있는 함수는 따로 분리해도 좋을 것 같다는 생각이 드는데, 서영님 생각은 어떠신가요?!
분리한다면, 하나의 함수를 만들어서 동일하게 사용하는 것이 좋을 것 같고, 아직 언어변경 기능이 완성되기 전이어서 추후 해당 로직이 더 복잡해질 가능성을 고려했을 때 분리하는 것이 괜찮을 것 같아서 의견드립니다!!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

소현님, 분리하는게 훨씬 좋아 보입니다! 추후 로직까지 고려하면 더더욱 그렇네요!👍👍
감사합니다🩵🦋

>
English
</div>
</div>
)}
</div>
);
}
Loading