Skip to content

Commit

Permalink
fix style
Browse files Browse the repository at this point in the history
  • Loading branch information
@ojj1123
ojj1123 committed Dec 1, 2024
1 parent 9d529b4 commit c2b2273
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 110 deletions.
85 changes: 21 additions & 64 deletions constants/contentsText/GuideContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,12 @@ const Content = styled.div`
color: var(--gray-2);
`;

function BackButton() {
return (
<Button as="div" color="var(--color-mint)" borderColor="var(--color-mint)" variant="outline">
뒤로
</Button>
);
function BackButton({ children }: PropsWithChildren) {
return <Button variant="outline">{children}</Button>;
}

function NextButton({ children }: PropsWithChildren) {
return (
<Button as="div" colorScheme="mint">
{children}
</Button>
);
return <Button>{children}</Button>;
}

export const STEPS_CONTENTS: Step[] = [
Expand All @@ -35,7 +27,6 @@ export const STEPS_CONTENTS: Step[] = [
title: <Title>웹사이트 이용 가이드</Title>,
locale: {
skip: "나중에",
back: "뒤로",
close: "닫기",

next: <NextButton>보여주세요!</NextButton>,
Expand All @@ -48,9 +39,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>매일 출석체크, 알림 페이지가 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='about_header']",
Expand All @@ -59,9 +48,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>스터디 랭킹을 확인할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='랭킹']",
Expand All @@ -74,9 +61,7 @@ export const STEPS_CONTENTS: Step[] = [
</Content>
),
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='스토어']",
Expand All @@ -85,9 +70,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>동아리 공식 행사, 이벤트를 확인해보세요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='캘린더']",
Expand All @@ -96,9 +79,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>익명 게시판에서 관심있는 주제로 동아리원과 소통해보세요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='게시판']",
Expand All @@ -107,9 +88,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>About 공식 디스코드 채널에 가입할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='디스코드']",
Expand All @@ -119,9 +98,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>동아리원들과의 번개 모임에 참여할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='gather-section']",
Expand All @@ -131,9 +108,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>동아리 모임 관련 리뷰를 확인할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='lounge-section']",
Expand All @@ -143,9 +118,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>동아리에서 열리는 오프라인 모임에 참여해보세요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='offline-group-section']",
Expand All @@ -154,9 +127,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>오프라인 모임 외 온라인 모임에 참여할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='online-group-section']",
Expand All @@ -165,9 +136,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>최근에 열린 소모임 활동에 참여해보세요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='new-group-section']",
Expand All @@ -176,9 +145,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>곧 열릴 소모임 활동을 확인해보세요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='opened-group-section']",
Expand All @@ -188,9 +155,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>About 메인 홈으로 이동할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='홈']",
Expand All @@ -199,9 +164,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>원하는 장소와 시간에서 함께 스터디 활동을 신청해요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='스터디']",
Expand All @@ -210,9 +173,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>About 메인 홈으로 이동할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='소셜링']",
Expand All @@ -221,9 +182,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>About 메인 홈으로 이동할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='소모임']",
Expand All @@ -232,9 +191,7 @@ export const STEPS_CONTENTS: Step[] = [
{
content: <Content>About 메인 홈으로 이동할 수 있어요!</Content>,
locale: {
back: <BackButton />,

close: "닫기",
back: <BackButton>뒤로</BackButton>,
next: <NextButton>다음</NextButton>,
},
target: "[data-joyride-step='내 정보']",
Expand All @@ -253,7 +210,7 @@ export const STEPS_CONTENTS: Step[] = [
},

locale: {
back: null,
back: <BackButton>뒤로</BackButton>,
skip: null,
last: <NextButton>확인</NextButton>,
},
Expand Down
47 changes: 1 addition & 46 deletions pageTemplates/home/HomeInitialSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ function HomeInitialSetting() {
<>
{userInfo && !isGuest && <UserSettingPopUp userInfo={userInfo} />}
{isGuestModal && <FAQPopUp setIsModal={setIsGuestModal} />}
<GlobalStyle />
<Joyride
hideCloseButton
continuous
Expand All @@ -135,6 +134,7 @@ function HomeInitialSetting() {
width: 320,
zIndex: 1000,
beaconSize: 0,
primaryColor: "var(--color-mint)",
},
}}
spotlightPadding={5}
Expand All @@ -144,49 +144,4 @@ function HomeInitialSetting() {
);
}

const GlobalStyle = createGlobalStyle`
.react-joyride__tooltip{
height:180px !important;
padding:16px !important;
display:flex;
flex-direction:column;
>div:nth-child(2){
margin-top:auto !important;
display:flex !important;
align-items:flex-end !important;
>div:first-child{
>button{
font-size:16px !important;
}
}
>button{
margin-left:var(--gap-2) !important;
padding:0 !important;
background-color:inherit !important;
:focus{
outline:none;
}
>div{
font-size:15px;
padding:4px 16px;
}
}
}
}
.react-joyride__beacon {
>span:first-child{
background-color:var(--color-mint) !important;
}
>span:last-child{
border-color:var(--color-mint) !important;
background-color:var(--color-mint-light) !important;
}
}
`;

export default HomeInitialSetting;

0 comments on commit c2b2273

Please sign in to comment.