Feat: SegmentedControl 컴포넌트 추가 및 설정 페이지 벤토 디자인 적용

8-Sprinters · Oct 28, 2024 · 7384b52 · 7384b52
1 parent 5544b34
commit 7384b52
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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 (
     <>
       <Header
@@ -36,56 +40,67 @@ export default function AccountPage() {
         }}
         title={accountLocale[language].settings}
       />
-      <section className={styles.container}>
-        <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
-          <div className={styles.titleDiv}>
-            <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
-            {accountLocale[language].profileSetting}
+      <div className={styles.container}>
+        <section className={styles.section}>
+          <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">
+            <div className={styles.titleDiv}>
+              <UserIcon width={24} height={24} alt={accountLocale[language].profileSetting} />
+              {accountLocale[language].profileSetting}
+            </div>
+            <NavigateIcon width={16} height={16} />
           </div>
-        </div>
-        <div className={styles.baseDiv}>
-          <div className={styles.titleDiv}>
-            <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
-            {accountLocale[language].language}
+        </section>
+        <section className={styles.section}>
+          <div className={styles.baseDiv}>
+            <div className={styles.titleDiv}>
+              <GlobeIcon width={24} height={24} alt={accountLocale[language].changeLanguage} />
+              {accountLocale[language].language}
+            </div>
+            {/** TODO: <LanguageDropdown /> 제거하기 */}
+            <SegmentedControl
+              options={[accountLocale[language].korean, accountLocale[language].english]}
+              selected={language === 'ko' ? accountLocale[language].korean : accountLocale[language].english}
+              handleSelect={handleSelectLanguage}
+            />
           </div>
-          <LanguageDropdown />
-        </div>
-        <div
-          className={styles.buttonDiv}
-          onClick={() => {
-            handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
-          }}
-        >
-          <div className={styles.titleDiv}>
-            <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
-            {accountLocale[language].contact}
+        </section>
+        <section className={styles.section}>
+          <div
+            className={styles.buttonDiv}
+            onClick={() => {
+              handleDivLinkClick('https://open.kakao.com/o/saz6DObg');
+            }}
+          >
+            <div className={styles.titleDiv}>
+              <HelpIcon width={24} height={24} alt={accountLocale[language].contact} />
+              {accountLocale[language].contact}
+            </div>
+            <NavigateIcon width={16} height={16} />
           </div>
-        </div>
-        <div
-          className={styles.buttonDiv}
-          onClick={() => {
-            handleDivLinkClick('https://tally.so/r/w51Dpv');
-          }}
-        >
-          <div className={styles.titleDiv}>
-            <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
-            {accountLocale[language].sendFeedback}
+          <div
+            className={styles.buttonDiv}
+            onClick={() => {
+              handleDivLinkClick('https://tally.so/r/w51Dpv');
+            }}
+          >
+            <div className={styles.titleDiv}>
+              <MessageIcon width={24} height={24} alt={accountLocale[language].sendFeedback} />
+              {accountLocale[language].sendFeedback}
+            </div>
+            <NavigateIcon width={16} height={16} />
           </div>
-        </div>
-        <div className={styles.buttonDiv} onClick={handleSetOn} role="button">
-          <div className={styles.titleDiv}>
-            <LogoutIcon width={24} height={24} alt={accountLocale[language].logout} />
-            {accountLocale[language].logout}
-          </div>
-        </div>
+        </section>
+      </div>
+      <div className={styles.accountFooter}>
+        <button className={styles.textButton} onClick={handleSetOn}>
+          {accountLocale[language].logout}
+        </button>
+        <span>|</span>
+        <button className={styles.textButton} onClick={onClickMoveToPage('account/withdraw')}>
+          {accountLocale[language].withdrawal}
+        </button>
         {isOn && <LogoutModal handleSetOff={handleSetOff} />}
-        <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/withdraw')} role="button">
-          <div className={styles.titleDiv}>
-            <WithdrawIcon width={24} height={24} alt={accountLocale[language].withdrawal} />
-            {accountLocale[language].withdrawal}
-          </div>
-        </div>
-      </section>
+      </div>
     </>
   );
 }
diff --git a/src/components/SegmentedControl/SegmentedControl.tsx 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 (
+    <div className={styles.track}>
+      {options.map((option) => (
+        <div
+          key={option}
+          className={`${styles.segment} ${option === selected && styles.selectedSegment}`}
+          onClick={() => handleSelect(option)}
+          role="button"
+        >
+          {option}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/SegmentedControl/SegmentedCotrol.css.ts 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
@@ -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',