Merge pull request #22 from wanted-pre-onboarding-frontend-12team/fea…

…ture/issue

[#15] 이슈 컴포넌트 구현

src/components/feature/Issue/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import CommonTitle from '../../../shared/Title';
+import { IssueWriter, IssueComment, IssueTime, IssueNumber } from '../../';
+import { IssueLayout, BorderLine } from './styled';
+
+export default function Issue({ issueItem, userItem }: any) {
+	const style = {};
+	const { comments, number, title, created_at, updated_at } = issueItem;
+	const { login, html_url, avatar_url } = userItem;
+
+	return (
+		<IssueLayout>
+			<div className="title">
+				<CommonTitle style={style}>
+					{title}
+					<IssueNumber issueNumber={number} />
+				</CommonTitle>
+			</div>
+			<IssueWriter writerName={login} />
+			<div className="IssueInfo">
+				<IssueTime writeTime={created_at} />
+				<IssueComment commentCount={comments} />
+			</div>
+			<BorderLine />
+		</IssueLayout>
+	);
+}

src/components/feature/Issue/styled.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const IssueLayout = styled.section`
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	.title {
+		display: flex;
+		align-items: end;
+	}
+	gap: 7px;
+	@media ${({ theme }) => theme.device.laptop} {
+		gap: 12px;
+	}
+	font-size: ${({ theme }) => theme.fontSizes.normal};
+	@media ${({ theme }) => theme.device.laptop} {
+		font-size: ${({ theme }) => theme.fontSizes.large};
+	}
+	.IssueInfo {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+`;
+
+export const BorderLine = styled.div`
+	height: 1px;
+	background: #000000;
+	margin: 10px 0;
+	@media ${({ theme }) => theme.device.laptop} {
+		margin: 20px 0;
+	}
+`;

src/components/feature/IssueComment/index.tsx

@@ -0,0 +1,15 @@
+import CommentIcon from './speech-bubble.svg';
+import { CommentLayout } from './styled';
+
+type Prop = {
+	commentCount: number;
+};
+
+export default function IssueComment({ commentCount }: Prop) {
+	return (
+		<CommentLayout>
+			<img className={'speechIcon'} src={CommentIcon} />
+			<p>{commentCount}</p>
+		</CommentLayout>
+	);
+}

src/components/feature/IssueComment/styled.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const CommentLayout = styled.section`
+	display: flex;
+	gap: 7px;
+	font-size: ${({ theme }) => theme.fontSizes.normal};
+	@media ${({ theme }) => theme.device.laptop} {
+		font-size: ${({ theme }) => theme.fontSizes.large};
+	}
+	.speechIcon {
+		width: 20px;
+		height: 20px;
+		@media ${({ theme }) => theme.device.laptop} {
+			width: 30px;
+			height: 30px;
+		}
+	}
+`;

src/components/feature/IssueNumber/index.tsx

@@ -0,0 +1,9 @@
+import { NumberLayout } from './styled';
+
+type Props = {
+	issueNumber: number;
+};
+
+export default function IssueNumber({ issueNumber }: Props) {
+	return <NumberLayout>#{issueNumber}</NumberLayout>;
+}

src/components/feature/IssueNumber/styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const NumberLayout = styled.span`
+	font-size: ${({ theme }) => theme.fontSizes.normal};
+	padding-left: 7px;
+	color: ${({ theme }) => theme.colors.gray};
+	@media ${({ theme }) => theme.device.laptop} {
+		font-size: ${({ theme }) => theme.fontSizes.large};
+		padding-left: 10px;
+	}
+`;

src/components/feature/IssueTime/index.tsx

@@ -0,0 +1,10 @@
+import DateFormat from '../../../utils/dateFormat';
+import { TimeLayout } from './styled';
+
+type Prop = {
+	writeTime: string;
+};
+
+export default function IssueTime({ writeTime }: Prop) {
+	return <TimeLayout>{DateFormat({ writeTime })}에 열림</TimeLayout>;
+}

src/components/feature/IssueTime/styled.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const TimeLayout = styled.p`
+	color: ${({ theme }) => theme.colors.gray};
+	font-size: ${({ theme }) => theme.fontSizes.normal};
+	@media ${({ theme }) => theme.device.laptop} {
+		font-size: ${({ theme }) => theme.fontSizes.large};
+	}
+`;

src/components/feature/IssueWriter/index.tsx

@@ -0,0 +1,9 @@
+import { WriterLayout } from './styled';
+
+type Prop = {
+	writerName: string;
+};
+
+export default function IssueWriter({ writerName }: Prop) {
+	return <WriterLayout>{writerName}</WriterLayout>;
+}

src/components/feature/IssueWriter/styled.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const WriterLayout = styled.p`
+	font-size: ${({ theme }) => theme.fontSizes.normal};
+	@media ${({ theme }) => theme.device.laptop} {
+		font-size: ${({ theme }) => theme.fontSizes.large};
+	}
+`;

src/components/index.ts

@@ -5,3 +5,10 @@ export { default as Header } from './layout/Header';
 // Shared Components
 export { default as Avatar } from './shared/Avatar';
 export { default as Anchor } from './shared/Anchor';
+
+// Issue Components
+export { default as IssueComment } from './feature/IssueComment';
+export { default as IssueNumber } from './feature/IssueNumber';
+export { default as IssueTime } from './feature/IssueTime';
+export { default as IssueWriter } from './feature/IssueWriter';
+export { default as Issue } from './feature/Issue';

src/pages/IssueList/index.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import Issue from '../../components/feature/Issue';
+import { IssueContext } from '../../constants/IssueProvider';
+
+export default function IssueList() {
+	const { issueList, newUserList }: any = useContext(IssueContext);
+
+	return (
+		<>
+			{issueList &&
+				issueList.map((issueItem: any, index: number) => {
+					return <Issue key={index} issueItem={issueItem} userItem={newUserList[index]} />;
+				})}
+		</>
+	);
+}

src/router/index.tsx

@@ -1,15 +1,18 @@
 import { Route, Routes } from 'react-router-dom';
 import styled from 'styled-components';
 import { Avatar } from '../components';
+
 import { checkArray } from '../utils/checkArray';
 import ROUTE_PATH from './routePath';
+import Error from '../pages/Error';
+import IssueList from '../pages/IssueList';
 
 export default function Router() {
 	const routeList = [
 		{
 			id: 1,
 			path: ROUTE_PATH.MAIN,
-			element: <div>메인 페이지</div>,
+			element: <IssueList />,
 		},
 		{
 			id: 2,
@@ -27,7 +30,7 @@ export default function Router() {
 		{
 			id: 3,
 			path: ROUTE_PATH.ERROR,
-			element: <div>에러 페이지</div>,
+			element: <Error />,
 		},
 	];
 

src/shared/Title/index.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from 'styled-components';
 import { TitleLayout } from './styled';
 
 type Props = {
-	children: string;
+	children: React.ReactNode;
 	style?: CSSProperties;
 };
 

src/styles/GlobalStyle.tsx

@@ -12,6 +12,7 @@ const GlobalStyle = styled.createGlobalStyle`
 
 	body {
 		font-size: 16px;
+		background-color: ${({ theme }) => theme.colors.lightgray};
 	}
 `;
 

src/styles/styled.d.ts

@@ -22,6 +22,7 @@ declare module 'styled-components' {
 		};
 		colors: {
 			white: '#FFFFFF';
+			gray: '#808080';
 			lightgray: '#D9D9D9';
 			deepgray: '#383535';
 			black: '#000000';

src/styles/theme.ts

@@ -11,7 +11,7 @@ const theme: DefaultTheme = {
 		small: pixelToRem(12),
 		normal: pixelToRem(16),
 		medium: pixelToRem(20),
-		large: pixelToRem(24),
+		large: pixelToRem(25),
 	},
 	fontWeights: {
 		light: 300,
@@ -23,6 +23,7 @@ const theme: DefaultTheme = {
 	},
 	colors: {
 		white: '#FFFFFF',
+		gray: '#808080',
 		lightgray: '#D9D9D9',
 		deepgray: '#383535',
 		black: '#000000',

src/utils/dateFormat.ts

@@ -0,0 +1,8 @@
+type Prop = {
+	writeTime: string;
+};
+
+export default function DateFormat({ writeTime }: Prop) {
+	const [year, month, day] = new Date(writeTime).toLocaleDateString().split('.').slice(0, 3);
+	return `${year}년 ${month}월 ${day}일`;
+}