feature: [게시글 상세 조회] 게시글 내용 컴포넌트

front/src/components/CategoryAndTime.tsx

@@ -0,0 +1,25 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+import { CategoryAndTimeProps } from "../types/types";
+
+export default function CategoryAndTime({
+  category,
+  time,
+}: CategoryAndTimeProps) {
+  return (
+    <Text style={styles.text}>
+      {category} | {time}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 15,
+    color: "#888888",
+  },
+});

front/src/components/DetailArticle.tsx

@@ -0,0 +1,46 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import DetailTitle from "./DetailTitle";
+import CategoryAndTime from "./CategoryAndTime";
+import DetailContents from "./DetailContents";
+import FavoriteCountAndHit from "./FavoriteCountAndHit";
+
+export default function DetailArticle() {
+  return (
+    <View style={styles.container}>
+      <View style={styles.titleContainer}>
+        <DetailTitle />
+      </View>
+      <View style={styles.subtitleContainer}>
+        <CategoryAndTime category={"디지털/가전"} time={"1분 전"} />
+      </View>
+      <View style={styles.contentsContainer}>
+        <DetailContents />
+      </View>
+      <View style={styles.subtitleContainer}>
+        <FavoriteCountAndHit favoriteCount={5} hit={64} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 15,
+  },
+  titleContainer: {
+    paddingHorizontal: 1,
+    marginTop: 10,
+  },
+  subtitleContainer: {
+    marginVertical: 15,
+  },
+  contentsContainer: {
+    marginTop: 5,
+  },
+});

front/src/components/DetailContents.tsx

@@ -0,0 +1,23 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+
+export default function DetailContents() {
+  return (
+    <Text style={styles.contents}>
+      {
+        "LG 4K 모니터 삽니다.\n급하게 구해 봅니다.\n직거래 택배 거래 상관 없습니다."
+      }
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  contents: {
+    fontSize: 18,
+    fontWeight: "300",
+  },
+});

front/src/components/DetailTitle.tsx

@@ -0,0 +1,17 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+
+export default function DetailTitle() {
+  return <Text style={styles.title}>LG 모니터 삽니다</Text>;
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 23,
+    fontWeight: "bold",
+  },
+});

front/src/components/FavoriteCountAndHit.tsx

@@ -0,0 +1,25 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+import { FavoriteCountAndHitProps } from "../types/types";
+
+export default function FavoriteCountAndHit({
+  favoriteCount,
+  hit,
+}: FavoriteCountAndHitProps) {
+  return (
+    <Text style={styles.text}>
+      찜 {favoriteCount} | 조회 {hit}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 15,
+    color: "#888888",
+  },
+});

front/src/screens/DetailScreen.tsx

@@ -0,0 +1,41 @@
+/**
+ * @author begaonnuri
+ */
+
+import React from "react";
+import { View, StyleSheet, Text, ScrollView } from "react-native";
+import DetailArticle from "../components/DetailArticle";
+
+export default function DetailScreen() {
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <View style={styles.image}>
+        <Text>.</Text>
+      </View>
+      <View style={styles.member}>
+        <Text>.</Text>
+      </View>
+      <View style={styles.article}>
+        <DetailArticle />
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    flex: 5,
+    backgroundColor: "lightblue",
+  },
+  member: {
+    flex: 1,
+    backgroundColor: "lightyellow",
+  },
+  article: {
+    flex: 4,
+    backgroundColor: "white",
+  },
+});

front/src/types/types.ts

@@ -43,3 +43,28 @@ export interface Tag {
 export type TagItemProps = {
   tagBox: Tag;
 };
+
+export type Category =
+  | "디지털/가전"
+  | "가구/인테리어"
+  | "유아동/유아도서"
+  | "생활/가공식품"
+  | "스포츠/레저"
+  | "여성잡화"
+  | "여성의류"
+  | "남성패션/잡화"
+  | "게임/취미"
+  | "뷰티/미용"
+  | "반려동물용품"
+  | "도서/티켓/음반"
+  | "기타 중고물품";
+
+export interface CategoryAndTimeProps {
+  category: Category;
+  time: string;
+}
+
+export interface FavoriteCountAndHitProps {
+  favoriteCount: number;
+  hit: number;
+}