Merge pull request #20 from gdsc-ssu/feat/#15

[#15] 가게 상세보기 뷰

.vscode/setting.json

@@ -0,0 +1,6 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.tabSize": 2,
+	"git.pruneOnFetch": true
+}

package.json

@@ -17,7 +17,8 @@
 		"build": "babel --out-dir=dist source",
 		"dev": "babel --out-dir=dist --watch source",
 		"test": "prettier --check . ",
-		"start": "node dist/cli.js"
+		"start": "node dist/cli.js",
+		"format": "prettier --write ."
 	},
 	"files": [
 		"dist"
@@ -32,7 +33,7 @@
 		"meow": "^11.0.0",
 		"mobx": "^6.9.0",
 		"react": "^18.2.0",
-		"prettier": "^2.8.8"
+		"prettier": "3.0.1"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.21.0",

source/api/kakao.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import dotenv from 'dotenv';
+
+export const fetchKakaoShops = (query, category) => {
+	dotenv.config();
+
+	const API_KEY = process.env.KAKAO_API_KEY;
+
+	const url = `https://dapi.kakao.com/v2/local/search/keyword.json?query=${query}&size=3`;
+
+	if (category == 'cafe') {
+		return axios.get(url + '&category_group_code=CE7', {
+			headers: {
+				Authorization: `KakaoAK ${API_KEY}`,
+			},
+		});
+	}
+
+	if (category == 'restaurant') {
+		return axios.get(url + '&category_group_code=FD6', {
+			headers: {
+				Authorization: `KakaoAK ${API_KEY}`,
+			},
+		});
+	}
+
+	return axios.get(url, {
+		headers: {
+			Authorization: `KakaoAK ${API_KEY}`,
+		},
+	});
+};

source/component/shop_detail.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import {Text, Newline, Box} from 'ink';
+
+/**
+ *
+ * @param {Object} data
+ * @description
+ * data = {
+ * 	id: '1',
+ * 	title: 'The 5th Wave',
+ * 	location: '서울시 동작구 상도로 369',
+ * 	nearStation: '상도역',
+ * 	openTime: '09:00',
+ * 	closeTime: '22:00',
+ * 	menu: [
+ * 		{
+ * 			name: '카페라떼',
+ * 			price: 4000,
+ * 		},
+ * 	],
+ * 	starRate: 4.5,
+ * 	reviews: [],
+ * }
+ */
+const ShopDetail = ({data}) => {
+	const starRateRounded = Math.round(data.starRate);
+
+	const starRateString = '⭐'.repeat(starRateRounded);
+
+	return (
+		<>
+			<Text>{'{'}</Text>
+			<Box marginLeft={2}>
+				<Text>
+					<Text>
+						"id" : "{data.id}",
+						<Newline />
+					</Text>
+					<Text>
+						"title" : "{data.title}",
+						<Newline />
+					</Text>
+					<Text marginLeft={2}>
+						"location" : "{data.location}",
+						<Newline />
+					</Text>
+					<Text>
+						"nearStation" : "{data.nearStation}",
+						<Newline />
+					</Text>
+					<Text>
+						"openTime" : "{data.openTime}" - "{data.closeTime}",
+						<Newline />
+					</Text>
+					<Text>
+						"menu" : {'['}
+						<Newline />
+						{data.menu.map((item, index, array) => (
+							<Text key={item.name}>
+								{' '}
+								{'{'} "{item.name}" : {item.price} {'}'}
+								{index !== array.length - 1 ? ',' : ''}
+								<Newline />
+							</Text>
+						))}
+						{']'},
+						<Newline />
+					</Text>
+					<Text>
+						"starRate" : "{starRateString}({data.starRate})",
+						<Newline />
+					</Text>
+					<Text>
+						"reviews" : {'['}
+						<Newline />
+						{data.reviews.map((item, index, array) => (
+							<Text key={item.id}>
+								{' '}
+								{'{'} "{item.writer}" : "{item.content} ({item.starRate})" {'}'}
+								{index !== array.length - 1 ? ',' : ''}
+								<Newline />
+							</Text>
+						))}
+						{']'}
+					</Text>
+				</Text>
+			</Box>
+			<Text>{'}'}</Text>
+		</>
+	);
+};
+export default ShopDetail;