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(profile): complete profile box UI #421

Merged
merged 2 commits into from
Nov 22, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 25 additions & 27 deletions packages/web/src/components/molecules/Profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)]} />
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

gap, margin, 또는 padding으로 5px을 띄우면 해당 간격을 마우스가 지날 때 setHover(false)가 되는 바람에 투명 div를 만들었습니다

뭔가 하드코딩 느낌이라 바꾸고 싶은데 방법을 모르겠어요..

Copy link
Member

Choose a reason for hiding this comment

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

Atom 컴포넌트로 spacer 컴포넌트를 만들어서 이용하는 것도 하나의 방법일 것 같아요

https://seya01.medium.com/how-to-style-margin-with-react-d250d512d0a0

<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>
);
14 changes: 2 additions & 12 deletions packages/web/src/components/organisms/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: "" },
Expand Down Expand Up @@ -70,7 +60,7 @@ export const Header: React.FC = () => {
: null}
</Box>
<div
css={[column, justify.start, align.center, h(32)]}
css={[{ position: "relative" }]}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

여기 {[{...}]}으로 묶는 방법 말고 조금 더 깔끔하게 작성할 수 있는 방법이 있나요?

Copy link
Contributor

Choose a reason for hiding this comment

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

대괄호 생략하고 그냥 쌍중괄호 쓰기...? 아이템이 하나면 대괄호 생략 가능해용

Copy link
Contributor

Choose a reason for hiding this comment

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

아 style={{...}}는 해봣믄데 css={{...}}는 안해봐서 모르겟군 되지 않ㅎ을까 둘다 inline css니까...??

Copy link
Member

Choose a reason for hiding this comment

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

넹 돼요

onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
Expand Down