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.

Sign up for GitHub

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

refactor: style 코드 분리 #132

Merged
merged 2 commits into from
Jul 22, 2024
+1,286 −1,248
Merged

refactor: style 코드 분리 #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80b370a
refactor: style 코드 분리
cjy3458 Jul 22, 2024
c767dbc
Merge branch 'develop' of https://github.com/cau-likelion-org/kiwi-cl…
cjy3458 Jul 22, 2024
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
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import './global.css';
import StyledComponentsRegistry from './lib/registry';
import NavBar from '@/components/common/NavBar';
import NavBar from '@/components/common/navbar/NavBar';
import type { Metadata } from 'next';
import RecoidContextProvider from './recoilContextProvider';
import ReactQueryProvider from './ReactQueryProvider';
Expand Down
12 changes: 5 additions & 7 deletions src/app/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import Loading from '@/components/common/Loading'
import React from 'react'
import Loading from '@/components/common/loading/Loading';
import React from 'react';

const loading = () => {
return (
<Loading/>
)
}
return <Loading />;
};

export default loading
export default loading;
49 changes: 0 additions & 49 deletions src/components/common/Loading.tsx
View file
Open in desktop

This file was deleted.

22 changes: 22 additions & 0 deletions src/components/common/loading/Loading.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { motion } from 'framer-motion';
import styled from 'styled-components';

export const Container = styled.div`
height: 98vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
`;

export const ImageWrapper = styled(motion.div)`
position: relative;
width: 4vw;
margin-left: 4.5px;
margin-right: 4.5px;
`;
export const ImagesWrapper = styled.div`
position: absolute;
display: flex;
height: 100%;
`;
30 changes: 30 additions & 0 deletions src/components/common/loading/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
'use client';
import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import Image from 'next/image';
import * as S from './Loading.styled';

const Loading = () => {
return (
<S.Container>
<S.ImagesWrapper>
<S.ImageWrapper animate={{ rotate: 360, transition: { duration: 1, repeat: Infinity, repeatDelay: 3 } }}>
<Image src="/img/modallion.png" layout="fill" objectFit="contain" objectPosition="center" alt="이미지" />
</S.ImageWrapper>
<S.ImageWrapper
animate={{ rotate: 360, transition: { duration: 1, delay: 1, repeat: Infinity, repeatDelay: 3 } }}
>
<Image src="/img/modallion.png" layout="fill" objectFit="contain" objectPosition="center" alt="이미지" />
</S.ImageWrapper>
<S.ImageWrapper
animate={{ rotate: 360, transition: { duration: 1, delay: 2, repeat: Infinity, repeatDelay: 3 } }}
>
<Image src="/img/modallion.png" layout="fill" objectFit="contain" objectPosition="center" alt="이미지" />
</S.ImageWrapper>
</S.ImagesWrapper>
</S.Container>
);
};

export default Loading;
63 changes: 63 additions & 0 deletions src/components/common/navbar/NavBar.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import styled from 'styled-components';

export const Margin = styled.div`
width: 100%;
min-height: 64px;
`;

export const Wrapper = styled.div`
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
background-color: white;
top: 0;
z-index: 10;
`;

export const LeftWrapper = styled.div`
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
margin-left: 3%;
@media screen and (max-width: 540px) {
margin-left: 3%;
}
`;

export const RightWrapper = styled.div`
display: flex;
width: 60%;
margin-right: 1%;
justify-content: space-between;
align-items: center;
@media screen and (min-width: 1024px) {
width: 40%;
}
`;

export const SearchWrapper = styled.div`
display: flex;
position: relative;
width: 50%;
@media screen and (max-width: 540px) {
width: 60%;
margin-top: 0.5rem;
}
`;

export const ButtonWrapper = styled.div`
display: flex;
width: 40%;
margin-top: 6px;
margin-right: 1.5rem;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 540px) {
width: 35%;
gap: 0.5rem;
}
`;
130 changes: 46 additions & 84 deletions src/components/common/NavBar.tsx → src/components/common/navbar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
'use client';

import { styled } from 'styled-components';
import Image from 'next/image';
import { usePathname, useRouter } from 'next/navigation';
import { getRandomDoc } from '@/apis/viewer';
import { useEffect, useState } from 'react';
import { useMediaQuery } from 'react-responsive';
import SearchHeaderInput from '../search/searchHeaderInput/searchHeaderInput';
import SearchHeaderInput from '@/components/search/searchHeaderInput/searchHeaderInput';
import { AuthVerify } from '@/apis/authAxois';
import * as S from './NavBar.styled';

export interface IMenu {
src: string;
Expand Down Expand Up @@ -48,22 +48,47 @@ const NavBar = () => {

return (
<>
<Margin />
<Wrapper>
<LeftWrapper onClick={() => router.push('/')}>
<Image
src={isMobile ? '/img/mobileLogo.png' : '/img/logo.png'}
alt={'logo'}
width={isMobile ? 100 : 140}
height={34}
/>
</LeftWrapper>
<RightWrapper>
<SearchWrapper>
<SearchHeaderInput />
</SearchWrapper>
<ButtonWrapper>
{isMobile ? null : (
<S.Margin />
<S.Wrapper>
{isMobile ? (
<S.LeftWrapper>
<Image
onClick={() => {
router.push('/');
}}
src="/img/mobileLogo.png"
alt={'logo'}
width={100}
height={34}
/>
</S.LeftWrapper>
) : (
<S.LeftWrapper>
<Image
onClick={() => {
router.push('/');
}}
src="/img/logo.png"
alt={'logo'}
width={140}
height={34}
/>
</S.LeftWrapper>
)}
<S.RightWrapper>
{isMobile ? (
<S.SearchWrapper>
<SearchHeaderInput />
</S.SearchWrapper>
) : (
<S.SearchWrapper>
<SearchHeaderInput />
</S.SearchWrapper>
)}
<S.ButtonWrapper>
{isMobile ? (
<div></div>
) : (
<Image
onClick={() => {
if (!isLogin) {
Expand Down Expand Up @@ -95,74 +120,11 @@ const NavBar = () => {
style={{ cursor: 'pointer' }}
/>
)}
{/* {isLogin && <button onClick={handleLogoutClick}>로그아웃</button>} */}
</ButtonWrapper>
</RightWrapper>
</Wrapper>
</S.ButtonWrapper>
</S.RightWrapper>
</S.Wrapper>
</>
);
};

export default NavBar;

const Margin = styled.div`
width: 100%;
min-height: 64px;
`;

const Wrapper = styled.div`
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
background-color: white;
top: 0;
z-index: 10;
`;

const LeftWrapper = styled.div`
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
margin-left: 3%;
@media screen and (max-width: 540px) {
margin-left: 3%;
}
`;

const RightWrapper = styled.div`
display: flex;
width: 60%;
margin-right: 1%;
justify-content: space-between;
align-items: center;
@media screen and (min-width: 1024px) {
width: 40%;
}
`;

const SearchWrapper = styled.div`
display: flex;
position: relative;
width: 50%;
@media screen and (max-width: 540px) {
width: 60%;
margin-top: 0.5rem;
}
`;

const ButtonWrapper = styled.div`
display: flex;
width: 40%;
margin-top: 6px;
margin-right: 1.5rem;
justify-content: space-between;
align-items: center;
@media screen and (max-width: 540px) {
width: 35%;
gap: 0.5rem;
}
`;
28 changes: 28 additions & 0 deletions src/components/common/post/dropdown/Dropdown.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import styled from 'styled-components';

export const Wrapper = styled.div`
font-size: 1.5rem;
font-family: Pretendard;
`;

export const BouncingArrow = styled.div`
padding: 2px;
font-size: 1.8rem;
color: blue;
animation: bounce 2s infinite;
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(10px);
}
60% {
transform: translateY(5px);
}
}
`;
Loading