Feat: 마이페이지 구현

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,
+});

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 (
+    <div ref={ref} className={styles.container}>
+      <div className={styles.triggerDiv} onClick={toggle}>
+        {language === 'ko' ? '한국어' : 'English'}
+      </div>
+      {isOn && (
+        <div className={styles.menuDiv}>
+          <div
+            className={`${styles.listDiv} ${language === 'ko' && styles.selected}`}
+            onClick={() => {
+              handleSelectLanguage('ko');
+            }}
+          >
+            한국어
+          </div>
+          <div
+            className={`${styles.listDiv} ${language === 'en' && styles.selected}`}
+            onClick={() => {
+              handleSelectLanguage('en');
+            }}
+          >
+            English
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}