[MyPagePanel] 로그인 분기 처리 및 스타일 수정

com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx

@@ -41,22 +41,12 @@ export default function MyPagePanel() {
     Spotlight.focus(SpotlightIds.TBODY);
     scrollTop();
   }, [panelInfos]);
-  const handleTopButtonClick = useCallback(() => {
-    scrollTop();
-    Spotlight.focus(SpotlightIds.TBODY);
-  }, [scrollTop]);
 
   return (
     <TPanel>
       <THeader title={menuNm} />
       <TBody className={css.tBody} cbScrollTo={getScrollTo}>
-        {SelectedComponent && <SelectedComponent />}
-        <TButton
-          className={css.tButton}
-          onClick={handleTopButtonClick}
-          size={null}
-          type={TYPES.topButton}
-        />
+        {SelectedComponent && <SelectedComponent scrollTop={scrollTop} />}
       </TBody>
     </TPanel>
   );

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx

@@ -1,20 +1,86 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import { useSelector } from "react-redux";
+
+import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
 import ic_profile from "../../../../../assets/images/icons/ic-profile.svg";
 import myinfo_login from "../../../../../assets/images/img-banner-myinfo-login@3x.png";
 import TButton, { TYPES } from "../../../../components/TButton/TButton";
+import TButtonTab, {
+  LIST_TYPE,
+} from "../../../../components/TButtonTab/TButtonTab";
 import { $L } from "../../../../utils/helperMethods";
 import css from "../MyInfo/MyInfo.module.less";
 
+const TabContainer = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
 const Container = SpotlightContainerDecorator(
   {
     enterTo: "last-focused",
   },
   "div"
 );
+
+const getButtonTabList = () => {
+  return [
+    $L("PAYMENT"),
+    $L("BILLING ADDRESS"),
+    $L("SHIPPING ADDRESS"),
+    $L("COUPON"),
+  ];
+};
+
+let buttonTabList = null;
+
 export default function MyInfo() {
+  if (!buttonTabList) {
+    buttonTabList = getButtonTabList();
+  }
+
+  const { userId, userInfo, email } = useSelector(
+    (state) => state.common.appStatus.loginUserData
+  );
+
+  const [tab, setTab] = useState(0);
+
+  let timerRef = useRef();
+
+  useEffect(() => {
+    setTab(0);
+  }, [userInfo]);
+
+  const handleItemClick = useCallback(
+    ({ index }) => {
+      if (index === tab) return;
+
+      setTab(index);
+    },
+    [tab]
+  );
+
+  useEffect(() => {
+    if (userInfo) {
+      const initFoucsedItem = document.querySelector(
+        '[data-spotlight-id="tab-0"]'
+      );
+
+      timerRef.current = setTimeout(() => {
+        Spotlight.focus(initFoucsedItem);
+      }, 0);
+    }
+  }, [userInfo]);
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timerRef);
+    };
+  }, []);
+
   return (
     <Container className={css.myInfoContainer}>
       <div className={css.contentsBox}>
@@ -22,22 +88,48 @@ export default function MyInfo() {
           <div className={css.infoTopBox}>
             <img src={ic_profile} className={css.profileImg} />
             <div className={css.textBox}>
-              {$L("Please log in to use your LG Shoptime.")}
+              {userInfo ? (
+                <>{`${$L("Hi")}, ${userId}`}</>
+              ) : (
+                $L("Please log in to use your LG Shoptime.")
+              )}
             </div>
           </div>
           <div className={css.infoBottomBox}>
             <div className={css.emailBox}>
               <div className={css.email}>Email</div>
-              <div className={css.email}>-</div>
+              <div className={css.email}>{userInfo ? email : "-"}</div>
             </div>
-            <TButton type={TYPES.mypage} className={css.locateBox}>
-              {$L("SIGN IN (LG Account)")}
-            </TButton>
+            {userInfo ? (
+              <TButton type={TYPES.normal} className={css.logoutButton}>
+                {$L("LOG OUT")}
+              </TButton>
+            ) : (
+              <TButton type={TYPES.mypage} className={css.loginButton}>
+                {$L("SIGN IN (LG Account)")}
+              </TButton>
+            )}
           </div>
         </div>
-        <div className={css.downloadImg}>
-          <img src={myinfo_login} />
-        </div>
+        {userInfo ? (
+          <>
+            {buttonTabList && buttonTabList.length > 0 && (
+              <TabContainer>
+                <TButtonTab
+                  contents={buttonTabList}
+                  onItemClick={handleItemClick}
+                  selectedIndex={tab}
+                  listType={LIST_TYPE.medium}
+                />
+                <TButton>{$L("ADD/EDIT")}</TButton>
+              </TabContainer>
+            )}
+          </>
+        ) : (
+          <div className={css.downloadImg}>
+            <img src={myinfo_login} />
+          </div>
+        )}
       </div>
     </Container>
   );

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.module.less

@@ -15,6 +15,8 @@
       display: flex;
       flex-wrap: wrap;
       position: relative;
+      margin-bottom: 42px;
+
       .infoTopBox {
         margin: 42px 0 0 60px;
         display: flex;
@@ -50,7 +52,13 @@
             }
           }
         }
-        .locateBox {
+        .logoutButton {
+          flex: none;
+          min-width: 402px;
+          .size(@w: 402px, @h: 78px);
+          .position(@position: absolute, @top: auto, @right: 60px, @bottom: 48px, @left: auto);
+        }
+        .loginButton {
           flex: none;
           min-width: 402px;
           .size(@w: 402px, @h: 78px);
@@ -60,7 +68,6 @@
       }
     }
     .downloadImg {
-      margin-top: 42px;
       img {
         width: 100%;
       }