Merge pull request #203 from boostcampwm2023/develop

[Deploy] Week4 ver2 배포
boostcampwm2023 · Nov 30, 2023 · 7aee5cd · 7aee5cd
2 parents 9db0c0d + 39d7188
commit 7aee5cd
Show file tree

Hide file tree

Showing 120 changed files with 2,705 additions and 770 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@types-js-cookie-npm-3.0.6-c9126e5b48-173afaf5ea.zip b/.yarn/cache/@types-js-cookie-npm-3.0.6-c9126e5b48-173afaf5ea.zip
diff --git a/.yarn/cache/js-cookie-npm-3.0.5-8fc8fcc9b4-04a0e56040.zip b/.yarn/cache/js-cookie-npm-3.0.5-8fc8fcc9b4-04a0e56040.zip
diff --git a/.yarn/cache/lucide-react-npm-0.294.0-86f24c8068-3c8d05743c.zip b/.yarn/cache/lucide-react-npm-0.294.0-86f24c8068-3c8d05743c.zip
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/Dockerfile-was b/Dockerfile-was
@@ -4,6 +4,7 @@ WORKDIR /app
 
 ADD . /app
 
+RUN SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm_config_arch=x64 npm_config_platform=linux yarn workspace server add sharp
 RUN yarn workspace server build
 
 EXPOSE 3000

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -4,6 +4,7 @@ services:
   was:
     container_name: was
     image: qkrwogk/web16-b1g1-be:GITHUB_SHA
+    restart: always
     ports:
       - 3000:3000
     env_file:
@@ -13,6 +14,7 @@ services:
   web:
     container_name: web
     image: qkrwogk/web16-b1g1-fe:GITHUB_SHA
+    restart: always
     ports:
       - 80:80
       - 443:443

diff --git a/packages/client/index.html b/packages/client/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite + React + TS</title>
+		<title>별 하나에 글 하나🌟</title>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -16,6 +16,7 @@
 		"@react-three/fiber": "^8.15.10",
 		"@types/react-router-dom": "^5.3.3",
 		"axios": "^1.6.2",
+		"lucide-react": "^0.294.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-markdown": "^9.0.1",
@@ -26,6 +27,7 @@
 	"devDependencies": {
 		"@emotion/react": "^11.11.1",
 		"@react-three/postprocessing": "^2.15.11",
+		"@types/js-cookie": "^3.0.6",
 		"@types/node": "^20.9.2",
 		"@types/react": "^18.2.15",
 		"@types/react-dom": "^18.2.7",
@@ -37,6 +39,7 @@
 		"eslint": "^8.45.0",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.3",
+		"js-cookie": "^3.0.5",
 		"leva": "^0.9.35",
 		"three-stdlib": "^2.28.5",
 		"typescript": "^5.0.2",

diff --git a/packages/client/src/app/Router.tsx b/packages/client/src/app/Router.tsx
@@ -6,12 +6,26 @@ import {
 import Home from '../pages/Home';
 import Landing from '../pages/Landing';
 import { WritingModal } from 'features/writingModal';
+import LoginModal from 'widgets/loginModal';
+import SignUpModal from 'widgets/signupModal/SignUpModal';
+import NickNameSetModal from 'widgets/nickNameSetModal/NickNameSetModal';
+import LogoAndStart from 'widgets/logoAndStart';
+import { PostModal } from 'features/postModal';
 
 export const router = createBrowserRouter(
 	createRoutesFromElements(
 		<>
-			<Route index path="/" element={<Landing />} />
+			<Route path="/" element={<Landing />}>
+				<Route index element={<LogoAndStart />} />
+				<Route path="login" element={<LoginModal />} />
+				<Route path="signup" element={<SignUpModal />} />
+				<Route path="nickname" element={<NickNameSetModal />} />
+			</Route>
+
 			<Route path="/home" element={<Home />}>
+				<Route path=":postId">
+					<Route path="detail" element={<PostModal />} />
+				</Route>
 				<Route path="writing" element={<WritingModal />} />
 			</Route>
 		</>,

diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
@@ -6,11 +6,11 @@ import { Html } from '@react-three/drei';
 import styled from '@emotion/styled';
 import { useViewStore } from 'shared/store/useViewStore';
 import * as THREE from 'three';
-import { PostData } from 'shared/lib/types/post';
-import { usePostStore } from 'shared/store/usePostStore';
+import { StarData } from 'shared/lib/types/star';
+import { useNavigate } from 'react-router-dom';
 
 interface PropsType {
-	data: PostData;
+	data: StarData;
 	onClick: () => void;
 	isSelected: boolean;
 }
@@ -19,7 +19,7 @@ export default function Post({ data, onClick, isSelected }: PropsType) {
 	const { targetView, setTargetView } = useCameraStore();
 	const meshRef = useRef<THREE.Mesh>(null!);
 	const { view, setView } = useViewStore();
-	const { setData } = usePostStore();
+	const navigate = useNavigate();
 
 	const handleMeshClick = (e: ThreeEvent<MouseEvent>) => {
 		e.stopPropagation();
@@ -28,16 +28,19 @@ export default function Post({ data, onClick, isSelected }: PropsType) {
 		if (meshRef.current !== targetView) {
 			setView('DETAIL');
 			setTargetView(meshRef.current);
+			navigate(`/home/${data.id}`);
 			return;
 		}
 
-		setData(data);
+		navigate(`/home/${data.id}/detail`);
 		setView('POST');
 	};
 
 	return (
 		<Star
-			position={data.position}
+			position={
+				new THREE.Vector3(data.position.x, data.position.y, data.position.z)
+			}
 			size={data.size}
 			color={data.color}
 			onClick={handleMeshClick}
@@ -53,22 +56,22 @@ export default function Post({ data, onClick, isSelected }: PropsType) {
 }
 
 const Label = styled.div`
-	transform: translate3d(calc(60%), calc(-30%), 0);
+	transform: translate3d(calc(60%), calc(-70%), 0);
 	background: #fff;
 	color: #000;
 	padding: 10px 15px;
 	border-radius: 5px;
 	font-family: 'Noto Sans KR', sans-serif;
-	width: 100%;
+	width: 200px;
 	text-align: center;
 
 	&::before {
 		content: '';
 		position: absolute;
-		top: 20px;
-		left: -30px;
+		top: 10px;
+		left: -100px;
 		height: 2px;
-		width: 50px;
+		width: 100px;
 		background: #fff;
 	}
 `;
diff --git a/packages/client/src/entities/posts/ui/Posts.tsx b/packages/client/src/entities/posts/ui/Posts.tsx
@@ -1,53 +1,23 @@
+import { useFetch } from 'shared/hooks';
 import Post from './Post';
-import * as THREE from 'three';
 import { useState } from 'react';
+import { StarData } from 'shared/lib/types/star';
 
 export default function Posts() {
 	const [post, setPost] = useState(0);
+	const { data } = useFetch<StarData[]>('star');
 
 	return (
 		<>
-			{dummyData.map((data, index) => (
-				<Post
-					key={index}
-					data={data}
-					onClick={() => setPost(index)}
-					isSelected={post === index}
-				/>
-			))}
+			{data &&
+				data.map((data, index) => (
+					<Post
+						key={index}
+						data={data}
+						onClick={() => setPost(index)}
+						isSelected={post === index}
+					/>
+				))}
 		</>
 	);
 }
-
-const dummyData = [
-	{
-		position: new THREE.Vector3(1000, 1000, 1800),
-		size: 100,
-		color: 'red',
-		title: '별글입니당',
-		content: '# 배가고프다',
-		images: [
-			'https://github.com/boostcampwm2023/web16-B1G1/assets/35567292/ed205126-f8c5-4f84-98d9-fade19cd6c1d',
-		],
-	},
-	{
-		position: new THREE.Vector3(1300, 500, 1000),
-		size: 200,
-		color: 'blue',
-		title: '별글입니당',
-		content: '~stroke~',
-		images: [
-			'https://github.com/boostcampwm2023/web16-B1G1/assets/35567292/ed205126-f8c5-4f84-98d9-fade19cd6c1d',
-		],
-	},
-	{
-		position: new THREE.Vector3(3000, 1000, 2500),
-		size: 150,
-		color: 'yellow',
-		title: '별글입니당',
-		content: "- I'm hungry",
-		images: [
-			'https://github.com/boostcampwm2023/web16-B1G1/assets/35567292/ed205126-f8c5-4f84-98d9-fade19cd6c1d',
-		],
-	},
-]; // TODO: 서버로부터 받아온 데이터로 변경 필요
diff --git a/packages/client/src/features/postModal/PostModal.tsx b/packages/client/src/features/postModal/PostModal.tsx
diff --git a/packages/client/src/features/postModal/api/deletePost.ts b/packages/client/src/features/postModal/api/deletePost.ts
@@ -0,0 +1,11 @@
+import instance from 'shared/apis/AxiosInterceptor';
+import { BASE_URL } from '@constants';
+
+export const deletePost = async (postId: string) => {
+	const { data } = await instance({
+		method: 'DELETE',
+		url: `${BASE_URL}/post/${postId}`,
+	});
+
+	return data;
+};