diff --git a/src/app/community/gwangya/page.tsx b/src/app/community/gwangya/page.tsx new file mode 100644 index 00000000..2ee3e04b --- /dev/null +++ b/src/app/community/gwangya/page.tsx @@ -0,0 +1,12 @@ +import { Gwangya } from '@/pageContainer'; + +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: '광야', + description: '익명으로 자유롭게 소통할 수 있는 광소마의 넓은 들판입니다.', +}; + +const GwangyaPage = () => ; + +export default GwangyaPage; diff --git a/src/assets/MyPageIcon.tsx b/src/assets/MyPageIcon.tsx new file mode 100644 index 00000000..264ee530 --- /dev/null +++ b/src/assets/MyPageIcon.tsx @@ -0,0 +1,67 @@ +const MyPageIcon = () => ( + + + + + + + + + + + + + + + + + + + + + +); + +export default MyPageIcon; diff --git a/src/assets/PersonImg0.tsx b/src/assets/PersonImg0.tsx index 301e0ad7..a18c8a3f 100644 --- a/src/assets/PersonImg0.tsx +++ b/src/assets/PersonImg0.tsx @@ -1,68 +1,68 @@ const PersonImg0 = () => ( - + - - + + diff --git a/src/assets/PersonImg1.tsx b/src/assets/PersonImg1.tsx index ce87ca24..f4d2320b 100644 --- a/src/assets/PersonImg1.tsx +++ b/src/assets/PersonImg1.tsx @@ -1,83 +1,83 @@ -const PersonImg0 = () => ( +const PersonImg1 = () => ( - + - - + + ); -export default PersonImg0; +export default PersonImg1; diff --git a/src/assets/PersonImg2.tsx b/src/assets/PersonImg2.tsx index 5974d1ef..64604836 100644 --- a/src/assets/PersonImg2.tsx +++ b/src/assets/PersonImg2.tsx @@ -1,91 +1,83 @@ -const PersonImg0 = () => ( +const PersonImg2 = () => ( - + - - - - + + - - + + ); -export default PersonImg0; +export default PersonImg2; diff --git a/src/assets/PersonImg3.tsx b/src/assets/PersonImg3.tsx index 94c84726..64899053 100644 --- a/src/assets/PersonImg3.tsx +++ b/src/assets/PersonImg3.tsx @@ -1,83 +1,91 @@ -const PersonImg0 = () => ( +const PersonImg3 = () => ( - + + + + + - - - - + + ); -export default PersonImg0; +export default PersonImg3; diff --git a/src/assets/PersonImg4.tsx b/src/assets/PersonImg4.tsx index 6c8bc048..7129628b 100644 --- a/src/assets/PersonImg4.tsx +++ b/src/assets/PersonImg4.tsx @@ -1,67 +1,67 @@ -const PersonImg0 = () => ( +const PersonImg4 = () => ( - + - - + + ); -export default PersonImg0; +export default PersonImg4; diff --git a/src/assets/index.ts b/src/assets/index.ts index f974775e..0b37dcae 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -13,6 +13,7 @@ export { default as LogoIcon } from './LogoIcon'; export { default as MenteeSelectIcon } from './MenteeSelectIcon'; export { default as MentorSelectIcon } from './MentorSelectIcon'; export { default as MoreIcon } from './MoreIcon'; +export { default as MyPageIcon } from './MyPageIcon'; export { default as NotExistEmailIcon } from './NotExistEmailIcon'; export { default as NotExistSNSIcon } from './NotExistSNSIcon'; export { default as PenIcon } from './PenIcon'; diff --git a/src/components/CommunityCard/index.stories.tsx b/src/components/CommunityCard/index.stories.tsx new file mode 100644 index 00000000..c5959e95 --- /dev/null +++ b/src/components/CommunityCard/index.stories.tsx @@ -0,0 +1,28 @@ +import CommunityCard from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + component: CommunityCard, + args: { + index: 1, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + content: + '커뮤니티는 다양한 사람들이 모여 소통하고 공유하는 공간으로, 서로의 경험과 지식을 나누며 유대감을 형성합니다.', + }, +}; + +export const LongContent: Story = { + args: { + content: + '커뮤니티는사람들이모여서서로의관심사를공유하고소통하는공간으로다양한경험과지식을교환하며서로를돕고이해하는장소입니다온라인이나오프라인에서형성되며멤버들은공동의목표를달성하거나지식을나누며함께성장합니다이는문화적사회적차원에서다양성을존중하고유대감을형성하며새로운아이디어를육성하고진보하는데중요한역할을합니다상호작용과협력을통해커뮤니티는멤버들의참여와기여를촉진하며함께하는경험을즐기고배우는공간으로자리매깁니다', + }, +}; diff --git a/src/components/CommunityCard/index.tsx b/src/components/CommunityCard/index.tsx new file mode 100644 index 00000000..91fd0fbb --- /dev/null +++ b/src/components/CommunityCard/index.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import * as S from './style'; + +interface Props { + index: number; + content: string; +} + +const CommunityCard: React.FC = ({ index, content }) => ( + + + #{index} + + {/* TODO: 추후에 api 연동 시, Date 핸들링 구체화 하겠습니다. */} + 2020.01.01 + 12:12 + + + {content} + +); + +export default CommunityCard; diff --git a/src/components/CommunityCard/style.ts b/src/components/CommunityCard/style.ts new file mode 100644 index 00000000..8bc23cd5 --- /dev/null +++ b/src/components/CommunityCard/style.ts @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +export const CardWrapper = styled.div` + padding: 0.75rem 1rem; + display: flex; + flex-direction: column; + gap: 0.37rem; +`; + +export const Header = styled.div` + display: flex; + align-items: center; + gap: 0.75rem; +`; + +export const Index = styled.p` + ${({ theme }) => theme.typo.body2} + color: ${({ theme }) => theme.color.black}; +`; + +export const DateBox = styled.p` + ${({ theme }) => theme.typo.caption} + color: ${({ theme }) => theme.color.grey[500]}; + display: flex; + align-items: center; + gap: 0.5rem; +`; + +export const Date = styled.p``; + +export const Time = styled.time``; + +export const Content = styled.p` + ${({ theme }) => theme.typo.body1} + color: #000000; +`; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index ab1271ca..16d98959 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -48,7 +48,7 @@ const Header: React.FC = ({ clearList }) => { {data?.profileUrl ? ( profile img ) : ( - + )} diff --git a/src/components/MentorCard/index.tsx b/src/components/MentorCard/index.tsx index 6f4eb676..d22bf818 100644 --- a/src/components/MentorCard/index.tsx +++ b/src/components/MentorCard/index.tsx @@ -37,7 +37,12 @@ const MentorCard: React.FC = ({ worker }) => { {worker.profileUrl ? ( - {worker.name} + {worker.name} ) : ( )} diff --git a/src/components/MentorCard/style.ts b/src/components/MentorCard/style.ts index 00483a4f..4b929b6f 100644 --- a/src/components/MentorCard/style.ts +++ b/src/components/MentorCard/style.ts @@ -93,13 +93,13 @@ export const WorkerImgBox = styled.div` justify-content: center; align-items: end; width: 100%; - height: 6.8125rem; + height: 10rem; position: relative; overflow: hidden; border: 0.0625rem solid ${({ theme }) => theme.color.grey[50]}; & > img { - object-fit: contain; + object-fit: cover; } `; diff --git a/src/components/MentorList/style.ts b/src/components/MentorList/style.ts index 7bdd1efc..317e0275 100644 --- a/src/components/MentorList/style.ts +++ b/src/components/MentorList/style.ts @@ -6,7 +6,6 @@ export const WorkerList = styled.div` // 100vh - (리스트 상단 height + 하단 여백 2.5rem) height: calc(100dvh - 14.189rem); grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(auto-fill, 14.0625rem); gap: 2.5rem 1.13rem; overflow-y: scroll; diff --git a/src/pageContainer/gwangya/index.tsx b/src/pageContainer/gwangya/index.tsx new file mode 100644 index 00000000..73748832 --- /dev/null +++ b/src/pageContainer/gwangya/index.tsx @@ -0,0 +1,21 @@ +'use client'; + +import * as S from './style'; + +import { Header } from '@/components'; + +const Gwangya = () => ( + <> +
+ + + 광야 + + 익명으로 자유롭게 소통할 수 있는 광소마의 넓은 들판입니다. + + + + +); + +export default Gwangya; diff --git a/src/pageContainer/gwangya/style.ts b/src/pageContainer/gwangya/style.ts new file mode 100644 index 00000000..67b7c0a0 --- /dev/null +++ b/src/pageContainer/gwangya/style.ts @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding-top: 4.375rem; + position: relative; + + @media (max-width: 600px) { + padding: 7.5rem 1rem 0 1rem; + } +`; + +export const TitleBox = styled.div` + display: flex; + align-items: end; + gap: 0.75rem; + margin-top: 2.5rem; +`; + +export const Title = styled.h1` + ${({ theme }) => theme.typo.h4}; + color: ${({ theme }) => theme.color.black}; +`; + +export const Description = styled.p` + ${({ theme }) => theme.typo.caption}; + color: ${({ theme }) => theme.color.grey[500]}; +`; diff --git a/src/pageContainer/index.ts b/src/pageContainer/index.ts index 4c834d8e..fbc5379e 100644 --- a/src/pageContainer/index.ts +++ b/src/pageContainer/index.ts @@ -1,3 +1,4 @@ +export { default as Gwangya } from './gwangya'; export { default as MentorRegister } from './register/mentor'; export { default as MyInfoPage } from './mypage'; export { default as SignIn } from './signin';