Merge pull request #421 from sparcs-kaist/feat/profile-UI

feat(profile): complete profile box UI
sparcs-kaist · Nov 22, 2023 · 7c3944d · 7c3944d
2 parents 1122a2a + 7dba83f
commit 7c3944d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 39 deletions.
diff --git a/packages/web/src/components/molecules/Profile.tsx b/packages/web/src/components/molecules/Profile.tsx
@@ -21,42 +21,40 @@ type Props = {
 
 export const Profile: React.FC<Props> = ({ displayName, onLogout }) => (
   <div
-    css={[
-      border.gray200,
-      round.md,
-      w(100),
-      column,
-      align.center,
-      gap(4),
-      padding.vertical(5),
-      bg.white,
-      "box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06)",
-      {
-        position: "absolute",
-        top: "80%",
-        left: "96.2%",
-        transform: "translateX(-100%)",
-        zIndex: 1000,
-      },
-    ]}
+    css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]}
   >
+    <div css={[h(5)]} />
     <div
       css={[
+        border.gray200,
         round.md,
         w(100),
-        h(18),
-        padding.horizontal(8),
-        justify.between,
+        column,
         align.center,
+        gap(4),
+        padding.vertical(5),
+        bg.white,
+        "box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06)",
       ]}
     >
-      <div css={[text.option2, text.gray600, "text-align: center"]}>
-        {displayName}
+      <div
+        css={[
+          round.md,
+          w(100),
+          h(18),
+          padding.horizontal(8),
+          justify.between,
+          align.center,
+        ]}
+      >
+        <div css={[text.option2, text.gray600, "text-align: center"]}>
+          {displayName}
+        </div>
       </div>
+      <Divider />
+      <Button w={90} h={20} padHorizontal={8} onClick={onLogout}>
+        <div css={[text.option2, text.blue600]}>로그아웃</div>
+      </Button>
     </div>
-    <Divider />
-    <Button w={90} h={20} padHorizontal={8} onClick={onLogout}>
-      <div css={[text.option2, text.blue600]}>로그아웃</div>
-    </Button>
   </div>
 );
diff --git a/packages/web/src/components/organisms/Header.tsx b/packages/web/src/components/organisms/Header.tsx
@@ -5,17 +5,7 @@ import { LogoIcon } from "@biseo/web/assets";
 import { Box } from "@biseo/web/components/atoms";
 import { HeaderItem, Profile } from "@biseo/web/components/molecules";
 import { useAuth } from "@biseo/web/services/auth";
-import {
-  bg,
-  center,
-  h,
-  w,
-  round,
-  text,
-  justify,
-  align,
-  column,
-} from "@biseo/web/styles";
+import { bg, center, h, w, round, text } from "@biseo/web/styles";
 
 const adminPathList = [
   { name: "유저 모드", path: "" },
@@ -70,7 +60,7 @@ export const Header: React.FC = () => {
           : null}
       </Box>
       <div
-        css={[column, justify.start, align.center, h(32)]}
+        css={[{ position: "relative" }]}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >