Skip to content

Commit

Permalink
refactor: style 코드 분리
Browse files Browse the repository at this point in the history
  • Loading branch information
cjy3458 committed Jul 22, 2024
1 parent 79c15c3 commit 80b370a
Show file tree
Hide file tree
Showing 28 changed files with 1,257 additions and 1,243 deletions.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
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
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

This file was deleted.

22 changes: 22 additions & 0 deletions src/components/common/loading/Loading.styled.ts
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
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
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;
}
`;
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
'use client';

import { styled } from 'styled-components';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { token } from '@/app/recoilContextProvider';
import { useRecoilValue } from 'recoil';
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 * as S from './NavBar.styled';

export interface IMenu {
src: string;
Expand All @@ -35,10 +35,10 @@ const NavBar = () => {

return (
<>
<Margin />
<Wrapper>
<S.Margin />
<S.Wrapper>
{isMobile ? (
<LeftWrapper>
<S.LeftWrapper>
<Image
onClick={() => {
router.push('/');
Expand All @@ -48,9 +48,9 @@ const NavBar = () => {
width={100}
height={34}
/>
</LeftWrapper>
</S.LeftWrapper>
) : (
<LeftWrapper>
<S.LeftWrapper>
<Image
onClick={() => {
router.push('/');
Expand All @@ -60,19 +60,19 @@ const NavBar = () => {
width={140}
height={34}
/>
</LeftWrapper>
</S.LeftWrapper>
)}
<RightWrapper>
<S.RightWrapper>
{isMobile ? (
<SearchWrapper>
<S.SearchWrapper>
<SearchHeaderInput />
</SearchWrapper>
</S.SearchWrapper>
) : (
<SearchWrapper>
<S.SearchWrapper>
<SearchHeaderInput />
</SearchWrapper>
</S.SearchWrapper>
)}
<ButtonWrapper>
<S.ButtonWrapper>
{isMobile ? (
<div></div>
) : (
Expand Down Expand Up @@ -114,73 +114,11 @@ const NavBar = () => {
style={{ cursor: 'pointer' }}
/>
)}
</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
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

0 comments on commit 80b370a

Please sign in to comment.