diff --git a/components/common/Header.tsx b/components/common/Header.tsx
index c39d4a6..549e9c1 100644
--- a/components/common/Header.tsx
+++ b/components/common/Header.tsx
@@ -96,6 +96,10 @@ const StSearchBar = styled.div`
background: ${({ theme }) => theme.colors.white_opacity_14};
border-radius: 0.8rem;
+ & > svg {
+ cursor: pointer;
+ }
+
input {
height: 2.2rem;
width: 22rem;
diff --git a/components/community/CommunityFloatingBtn.tsx b/components/community/CommunityFloatingBtn.tsx
new file mode 100644
index 0000000..649379f
--- /dev/null
+++ b/components/community/CommunityFloatingBtn.tsx
@@ -0,0 +1,40 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import Link from 'next/link';
+import { IcWriteBtn, IcTopBtn } from '../../public/assets/icons';
+
+export default function CommunityFloatingBtn() {
+ const handleTopScroll = () => {
+ if (!window.scrollY) return;
+
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ };
+ return (
+
+
+
+
+
+
+ );
+}
+
+const StCommunityFloatingBtnWrapper = styled.section`
+ display: flex;
+ flex-direction: column;
+ row-gap: 2.4rem;
+ align-items: cetner;
+ position: sticky;
+ top: 43rem;
+
+ height: 30rem;
+ margin-top: 8.8rem;
+ margin-left: 3.4rem;
+
+ & > svg {
+ cursor: pointer;
+ }
+`;
diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx
index 83fa759..6b5f12c 100644
--- a/components/community/CommunityList.tsx
+++ b/components/community/CommunityList.tsx
@@ -1,6 +1,9 @@
import styled from '@emotion/styled';
+// import { useState } from 'react';
+import { IcCommunitySearchIcon } from '../../public/assets/icons';
import ContentCard from './ContentsCard';
import { CommunityData } from '../../types/community';
+import CommunityFloatingBtn from './CommunityFloatingBtn';
interface CommunityListProps {
contentsList: CommunityData[];
@@ -8,6 +11,9 @@ interface CommunityListProps {
export default function CommunityList(props: CommunityListProps) {
const { contentsList } = props;
+export default function CommunityList() {
+ // const [category, setCategory] = useState('모든 글');
+
return (
{contentsList.map((content, idx) => (
@@ -22,6 +28,42 @@ export default function CommunityList(props: CommunityListProps) {
img={content.image}
/>
))}
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
@@ -34,3 +76,45 @@ const StCommunityListWrapper = styled.section`
margin-bottom: 4.8rem;
`;
+
+ width: 57.6rem;
+ height: 4.5rem;
+ border-bottom: 0.2rem solid ${({ theme }) => theme.colors.gray008};
+ margin-bottom: 7.9rem;
+
+ input {
+ margin-left: 0.9rem;
+
+ width: 60rem;
+ height: 3.3rem;
+
+ font-size: 2.5rem;
+
+ color: ${({ theme }) => theme.colors.gray006};
+ ${({ theme }) => theme.fonts.b10_22_regular_150}
+
+ &::placeholder {
+ font-family: Pretandard;
+ color: ${({ theme }) => theme.colors.gray006};
+ ${({ theme }) => theme.fonts.b10_22_regular_150}
+ }
+
+ :focus::placeholder {
+ opacity: 0;
+ }
+ }
+ & > svg {
+ margin-right: 0.9rem;
+
+ cursor: pointer;
+ }
+`;
+const StMainArticle = styled.article`
+ display: flex;
+`;
+
+const StFloatingBlock = styled.div`
+ width: 9rem;
+`;
+
+const StContentCardList = styled.div``;
diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx
index eb38388..ed14da1 100644
--- a/components/community/ContentsCard.tsx
+++ b/components/community/ContentsCard.tsx
@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import { useState } from 'react';
-import { IcComment, IcHeart } from '../../public/assets/icons';
+import { IcReply, IcHeart } from '../../public/assets/icons';
interface ContentInfoProps {
category: string;
@@ -33,11 +33,13 @@ export default function ContentCard(props: ContentInfoProps) {
{createdAt}
-
+ {/*
+ 12 */}
+
{replyCount}
- {img === undefined ? <> : };
+ {img === undefined ? <> : }
);
}
@@ -49,18 +51,20 @@ const StContentsCardWrapper = styled.div`
margin-bottom: 4.8rem;
padding-bottom: 4.5rem;
- width: 120rem;
+ width: 97.6rem;
height: auto;
border-bottom: 0.1rem solid #d6d6d6;
h1 {
- margin-bottom: 1.1rem;
+ margin-bottom: 0.7rem;
font-style: normal;
font-weight: 500;
font-size: 2.3rem;
line-height: 3.3rem;
+
+ ${({ theme }) => theme.fonts.b9_24_medium_150}
}
p {
@@ -70,6 +74,14 @@ const StContentsCardWrapper = styled.div`
font-weight: 400;
font-size: 1.6rem;
line-height: 2.9rem;
+
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+
+ color: ${({ theme }) => theme.colors.gray009};
+ ${({ theme }) => theme.fonts.t6_17_regular_140}
}
`;
const StContentInfo = styled.section`
@@ -82,10 +94,10 @@ const StCategory = styled.div`
justify-content: center;
align-items: center;
- width: 10.2rem;
- height: 3.2rem;
+ width: 7.6rem;
+ height: 2.6rem;
- margin-bottom: 2.6rem;
+ margin-bottom: 1.6rem;
border-radius: 4.5rem;
@@ -95,19 +107,24 @@ const StCategory = styled.div`
line-height: 2.6rem;
color: ${({ theme }) => theme.colors.white};
+ ${({ theme }) => theme.fonts.b5_14_medium_140}
`;
const StCategoryReview = styled(StCategory)`
background-color: ${({ theme }) => theme.colors.mainGreen};
`;
const StCategoryQuestion = styled(StCategory)`
- background-color: ${({ theme }) => theme.colors.black};
+ color: ${({ theme }) => theme.colors.gray009};
+ background-color: ${({ theme }) => theme.colors.subYellow};
`;
const StCategoryInfo = styled(StCategory)`
background-color: ${({ theme }) => theme.colors.mainDarkgreen};
`;
const StContentImg = styled.img`
- width: 26rem;
- height: 25.5rem;
+ width: 21.6rem;
+ height: 21.6rem;
+
+ border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
+ border-radius: 0.5rem;
`;
const StWriteInfo = styled.div`
margin-bottom: 1.2rem;
@@ -119,6 +136,9 @@ const StWriteInfo = styled.div`
font-weight: 500;
font-size: 1.7rem;
line-height: 2.5rem;
+
+ color: ${({ theme }) => theme.colors.gray008};
+ ${({ theme }) => theme.fonts.b4_15_semibold_146}
}
span:last-child {
@@ -126,6 +146,9 @@ const StWriteInfo = styled.div`
font-weight: 350;
font-size: 1.7rem;
line-height: 2.5rem;
+
+ color: ${({ theme }) => theme.colors.gray008};
+ ${({ theme }) => theme.fonts.b4_15_regular_146};
}
`;
const StReplyInfo = styled.div`
@@ -140,5 +163,8 @@ const StReplyInfo = styled.div`
font-weight: 400;
font-size: 1.76rem;
line-height: 2.5rem;
+
+ color: ${({ theme }) => theme.colors.gray008};
+ ${({ theme }) => theme.fonts.b4_15_medium_140};
}
`;
diff --git a/components/community/index.ts b/components/community/index.ts
index 164b282..d38f26c 100644
--- a/components/community/index.ts
+++ b/components/community/index.ts
@@ -1,3 +1,4 @@
export { default as ReplyContent } from './ReplyContent';
export { default as CommunityList } from './CommunityList';
export { default as Reply } from './Reply';
+export { default as CommunityFloatingBtn } from './CommunityFloatingBtn';
diff --git a/public/assets/icons/CommunitySearchIcon.svg b/public/assets/icons/CommunitySearchIcon.svg
index af3a3fb..8928e63 100644
--- a/public/assets/icons/CommunitySearchIcon.svg
+++ b/public/assets/icons/CommunitySearchIcon.svg
@@ -1,3 +1,3 @@
-