Merge pull request #325 from boostcampwm2023/develop

[Deploy] Week6 Ver4 배포
boostcampwm2023 · Dec 12, 2023 · 4e66bd8 · 4e66bd8
2 parents 407dbf2 + 7d9f134
commit 4e66bd8
Show file tree

Hide file tree

Showing 17 changed files with 97 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # 별 하나에 글 하나 🌟
 
+# 리드미 정비 중입니다 !!
+
 자신만의 우주에 기억을 담은 별을 띄우는 웹 추억 저장소
 
 <img src="https://github.com/boostcampwm2023/web16-B1G1/assets/80266418/b6f77114-9fdc-44bf-91fc-990edc9a918c" height='100'>

diff --git a/packages/client/index.html b/packages/client/index.html
@@ -5,10 +5,22 @@
 		<link rel="icon" href="./src/assets/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>별 하나에 글 하나 🌟</title>
+		<script
+			async
+			src="https://www.googletagmanager.com/gtag/js?id=G-NVWSQCSKWF"
+		></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('js', new Date());
+
+			gtag('config', 'G-NVWSQCSKWF');
+		</script>
 	</head>
 	<body>
 		<div id="root"></div>
-		<div id="modal-root"></div>
 		<script type="module" src="./src/app/App.tsx"></script>
 	</body>
 </html>
diff --git a/packages/client/src/app/global.css b/packages/client/src/app/global.css
@@ -18,6 +18,7 @@ a {
 }
 
 body {
+	background-color: #070614;
 	overflow: hidden;
 	font-family:
 		Pretendard,

diff --git a/packages/client/src/features/postModal/ui/ImageSlider.tsx b/packages/client/src/features/postModal/ui/ImageSlider.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { CircleDot, Circle } from 'lucide-react';
 import ArrowBigLeft from '@icons/icon-arrow-left-32-white.svg?react';
 import ArrowBigRight from '@icons/icon-arrow-right-32-white.svg?react';
@@ -25,17 +25,17 @@ export default function ImageSlider({ imageUrls }: PropsType) {
 		});
 	};
 
-	const Dots = () => {
+	const Dots = useMemo(() => {
 		return (
 			<>
 				{imageUrls.map((_, index) => (
-					<Dot onClick={() => setImageIndex(index)}>
+					<Dot key={index} onClick={() => setImageIndex(index)} type="button">
 						{index === imageIndex ? <CircleDot /> : <Circle />}
 					</Dot>
 				))}
 			</>
 		);
-	};
+	}, [...imageUrls, imageIndex]);
 
 	return (
 		<Layout>
@@ -44,17 +44,16 @@ export default function ImageSlider({ imageUrls }: PropsType) {
 					return <Image key={url} src={url} index={imageIndex} />;
 				})}
 			</CurrentImage>
+
 			{imageUrls.length > 1 && (
 				<>
-					<Button onClick={handlePrev} style={{ left: 0 }}>
+					<Button onClick={handlePrev} style={{ left: 0 }} type="button">
 						<ArrowBigLeft />
 					</Button>
-					<Button onClick={handleNext} style={{ right: 0 }}>
+					<Button onClick={handleNext} style={{ right: 0 }} type="button">
 						<ArrowBigRight />
 					</Button>
-					<Pagination>
-						<Dots />
-					</Pagination>
+					<Pagination>{Dots}</Pagination>
 				</>
 			)}
 		</Layout>

diff --git a/packages/client/src/pages/Home/Home.tsx b/packages/client/src/pages/Home/Home.tsx
@@ -1,5 +1,5 @@
 import Screen from 'widgets/screen/Screen';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import WarpScreen from 'widgets/warpScreen/WarpScreen';
 import { useEffect, useState } from 'react';
 import { getGalaxy } from 'shared/apis';
@@ -16,6 +16,8 @@ import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import UnderBar from 'widgets/underBar/UnderBar';
 import UpperBar from 'widgets/upperBar/UpperBar';
 import CoachMarker from 'features/coachMarker/CoachMarker';
+import ModalRoot from '../../shared/routes/ModalRoot';
+import { useViewStore } from 'shared/store';
 
 export default function Home() {
 	const [isSwitching, setIsSwitching] = useState<'warp' | 'fade' | 'end'>(
@@ -28,6 +30,15 @@ export default function Home() {
 
 	const { setSpiral, setStart, setThickness, setZDist } = useGalaxyStore();
 	const custom = useCustomStore();
+	const location = useLocation();
+	const { setView } = useViewStore();
+
+	useEffect(() => {
+		const path = location.pathname.split('/');
+		if (path[1] === 'home' && path.length <= 3) setView('MAIN');
+		else if (path[1] === 'guest' && path.length <= 4) setView('MAIN');
+		else if (path[1] === 'search' && path.length <= 4) setView('MAIN');
+	}, [location]);
 
 	useEffect(() => {
 		if (!JSON.parse(sessionStorage.getItem('isReload') ?? 'false'))
@@ -90,7 +101,7 @@ export default function Home() {
 	return (
 		<FullScreen handle={handleFullScreen}>
 			<Outlet />
-
+			<ModalRoot />
 			{status === 'new' && <CoachMarker isFirst={true} />}
 			{isSwitching !== 'end' && (
 				<WarpScreen isSwitching={isSwitching} setIsSwitching={setIsSwitching} />

diff --git a/packages/client/src/pages/Landing/Landing.tsx b/packages/client/src/pages/Landing/Landing.tsx
@@ -2,13 +2,15 @@ import LandingScreen from 'widgets/landingScreen/LandingScreen';
 import { useToastStore } from 'shared/store/useToastStore';
 import { Toast } from 'shared/ui';
 import { Outlet } from 'react-router-dom';
+import ModalRoot from 'shared/routes/ModalRoot';
 
 export default function Landing() {
 	const { text, type } = useToastStore();
 
 	return (
 		<>
 			{text && <Toast type={type}>{text}</Toast>}
+			<ModalRoot />
 			<Outlet />
 			<LandingScreen />
 		</>

diff --git a/packages/client/src/shared/lib/constants/error.ts b/packages/client/src/shared/lib/constants/error.ts
@@ -26,6 +26,7 @@ export const errorMessage: ErrorMessageTypes = {
 		'/auth/signin': '아이디 또는 비밀번호가 일치하지 않습니다.',
 		'/auth/[a-zA-Z]+/signup': '회원가입에 실패했습니다.',
 		'/post': '글 작성에 실패했습니다.',
+		'/sentiment': '감정 분석에 실패했습니다.',
 	},
 
 	patch: {

diff --git a/packages/client/src/shared/routes/ModalRoot.tsx b/packages/client/src/shared/routes/ModalRoot.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export default function ModalRoot() {
+	return <Root id="modal-root" />;
+}
+
+const Root = styled.div``;
diff --git a/packages/client/src/shared/ui/buttons/Button.tsx b/packages/client/src/shared/ui/buttons/Button.tsx
@@ -10,8 +10,16 @@ interface PropsType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	buttonType: 'Button' | 'CTA-icon' | 'warning' | 'warning-border';
 }
 
-export default function Button({ children, ...args }: PropsType) {
-	return <CustomButton {...args}>{children}</CustomButton>;
+export default function Button({
+	children,
+	type = 'button',
+	...args
+}: PropsType) {
+	return (
+		<CustomButton {...args} type={type}>
+			{children}
+		</CustomButton>
+	);
 }
 
 const CustomButton = styled.button<PropsType>`

diff --git a/packages/client/src/shared/ui/buttons/IconButton.tsx b/packages/client/src/shared/ui/buttons/IconButton.tsx
@@ -7,8 +7,16 @@ interface PropsType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	children: React.ReactNode;
 }
 
-export default function IconButton({ children, ...args }: PropsType) {
-	return <CustomButton {...args}>{children}</CustomButton>;
+export default function IconButton({
+	children,
+	type = 'button',
+	...args
+}: PropsType) {
+	return (
+		<CustomButton {...args} type={type}>
+			{children}
+		</CustomButton>
+	);
 }
 
 const CustomButton = styled.button<PropsType>`

diff --git a/packages/client/src/shared/ui/buttons/TextButton.tsx b/packages/client/src/shared/ui/buttons/TextButton.tsx
@@ -9,8 +9,16 @@ interface PropsType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	size: 'm' | 'l';
 }
 
-export default function TextButton({ children, ...args }: PropsType) {
-	return <CustomButton {...args}>{children}</CustomButton>;
+export default function TextButton({
+	children,
+	type = 'button',
+	...args
+}: PropsType) {
+	return (
+		<CustomButton {...args} type={type}>
+			{children}
+		</CustomButton>
+	);
 }
 
 const CustomButton = styled.button<PropsType>`

diff --git a/packages/client/src/widgets/galaxy/lib/constants/index.ts b/packages/client/src/widgets/galaxy/lib/constants/index.ts
@@ -4,13 +4,13 @@ export const DISTANCE_LIMIT = 3000;
 
 export const starTypes = {
 	percentage: [
-		0.07, 0.1, 0.02, 0.14, 0.14, 0.07, 0.07, 0.02, 0.2, 0.2, 0.2, 0.2,
+		0.04, 0.03, 0.01, 0.04, 0.06, 0.06, 0.02, 0.01, 0.04, 0.06, 0.1, 0.1, 0.46,
 	],
 	color: [
 		0xffcece, 0xffe8ce, 0xceffe6, 0xcef9ff, 0xd2ceff, 0xff9d9d, 0xfffa9d,
-		0xb9ff9d, 0x9db9ff, 0xca9dff, 0x6445ff, 0x4570ff,
+		0xb9ff9d, 0x9db9ff, 0xca9dff, 0x6445ff, 0x4570ff, 0xffffff,
 	],
-	size: [0.5, 0.5, 0.3, 0.8, 0.3, 0.5, 0.5, 0.3, 1.3, 1.3, 1.1, 1.1],
+	size: [1, 0.5, 0.1, 0.8, 0.3, 0.5, 0.1, 0.1, 1.3, 1.3, 1.1, 1.1, 0.5],
 };
 
 export const ARMS_X_DIST = 5000;

diff --git a/packages/client/src/widgets/shareModal/ShareModal.tsx b/packages/client/src/widgets/shareModal/ShareModal.tsx
@@ -53,7 +53,7 @@ export default function ShareModal() {
 		<Button
 			buttonType="CTA-icon"
 			size="m"
-			type="submit"
+			type="button"
 			onClick={handleSaveButton}
 		>
 			저장

diff --git a/packages/client/src/widgets/warpScreen/lib/constants.ts b/packages/client/src/widgets/warpScreen/lib/constants.ts
@@ -18,3 +18,13 @@ export const BLOOM_LUMINANCE_THRESHOLD = 0.55;
 export const BLOOM_LUMINANCE_SMOOTHING = 0;
 
 export const AMBIENT_LIGHT_INTENSITY = 15;
+
+export const SPACE_WARP_LINE_COLORS = [
+	'#627BFF',
+	'#3A5AFF',
+	'#6D3AFF',
+	'#9734FF',
+	'#EFE0FF',
+	'#DDDDDD',
+	'#FDFFE2',
+];
diff --git a/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx b/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx
@@ -4,13 +4,13 @@ import { useMemo } from 'react';
 import * as THREE from 'three';
 import {
 	SPACE_WARP_LINES_NUM,
+	SPACE_WARP_LINE_COLORS,
 	SPACE_WARP_LINE_LENGTH,
 	SPACE_WARP_XZ_MAX,
 	SPACE_WARP_XZ_MIN,
 	SPACE_WARP_Y_MAX,
 	SPACE_WARP_Y_MIN,
 } from '../lib/constants';
-import { BACKGROUND_STAR_COLORS } from 'features/backgroundStars/lib/constants';
 import React from 'react';
 
 const geSpaceWarpLinesInfo = () => {
@@ -24,7 +24,7 @@ const geSpaceWarpLinesInfo = () => {
 
 	const colors = Array.from({ length: SPACE_WARP_LINES_NUM }, () => {
 		const color = new THREE.Color(
-			BACKGROUND_STAR_COLORS[getRandomInt(0, BACKGROUND_STAR_COLORS.length)],
+			SPACE_WARP_LINE_COLORS[getRandomInt(0, SPACE_WARP_LINE_COLORS.length)],
 		);
 
 		return [color.r, color.g, color.b];

diff --git a/packages/server/src/app.module.ts b/packages/server/src/app.module.ts
@@ -23,7 +23,7 @@ import { ThrottlerModule } from '@nestjs/throttler';
 		SentimentModule,
 		ThrottlerModule.forRoot([
 			{
-				ttl: 10000, // 10초에
+				ttl: 5000, // 5초에
 				limit: 5, // 5번까지 요청 가능
 			},
 		]),

diff --git a/packages/server/src/main.ts b/packages/server/src/main.ts
@@ -2,10 +2,12 @@ import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
 import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
 import * as cookieParser from 'cookie-parser';
+import { NestExpressApplication } from '@nestjs/platform-express';
 
 async function bootstrap() {
-	const app = await NestFactory.create(AppModule);
+	const app = await NestFactory.create<NestExpressApplication>(AppModule);
 
+	app.set('trust proxy', 1);
 	app.use(cookieParser());
 
 	// cors 허용