Merge pull request #340 from boostcampwm2023/feature/type

[FE] 타입 사용, 오류 해결, 폰트 적용
boostcampwm2023 · Dec 13, 2023 · 67b16cd · 67b16cd
2 parents f238ae3 + c0c212f
commit 67b16cd
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 24 deletions.
diff --git a/packages/client/src/app/global.css b/packages/client/src/app/global.css
@@ -37,23 +37,78 @@ body {
 		sans-serif;
 }
 
+button {
+	font-family:
+		Pretendard,
+		-apple-system,
+		BlinkMacSystemFont,
+		system-ui,
+		Roboto,
+		'Helvetica Neue',
+		'Segoe UI',
+		'Apple SD Gothic Neo',
+		'Noto Sans KR',
+		'Malgun Gothic',
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		sans-serif;
+}
+
+input {
+	font-family:
+		Pretendard,
+		-apple-system,
+		BlinkMacSystemFont,
+		system-ui,
+		Roboto,
+		'Helvetica Neue',
+		'Segoe UI',
+		'Apple SD Gothic Neo',
+		'Noto Sans KR',
+		'Malgun Gothic',
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		sans-serif;
+}
+
+textarea {
+	overflow: hidden;
+	font-family:
+		Pretendard,
+		-apple-system,
+		BlinkMacSystemFont,
+		system-ui,
+		Roboto,
+		'Helvetica Neue',
+		'Segoe UI',
+		'Apple SD Gothic Neo',
+		'Noto Sans KR',
+		'Malgun Gothic',
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		sans-serif;
+}
+
 @font-face {
-	font-family: 'pretendard_medium';
+	font-family: 'Pretendard_Medium';
 	src:
-		url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'),
-		url('/assets/fonts/Pretendard-Medium.woff') format('woff'),
-		url('/assets/fonts/Pretendard-Medium.otf') format('otf');
+		url('../assets/fonts/Pretendard-Medium.woff2') format('woff2'),
+		url('../assets/fonts/Pretendard-Medium.woff') format('woff'),
+		url('../assets/fonts/Pretendard-Medium.otf') format('otf');
 	font-display: swap;
 	font-weight: 500;
 	font-style: normal;
 }
 
 @font-face {
-	font-family: 'pretendard_bold';
+	font-family: 'Pretendard_Bold';
 	src:
-		url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'),
-		url('/assets/fonts/Pretendard-Bold.woff') format('woff'),
-		url('/assets/fonts/Pretendard-Bold.otf') format('otf');
+		url('../assets/fonts/Pretendard-Bold.woff2') format('woff2'),
+		url('../assets/fonts/Pretendard-Bold.woff') format('woff'),
+		url('../assets/fonts/Pretendard-Bold.otf') format('otf');
 	font-display: swap;
 	font-weight: 700;
 	font-style: normal;

diff --git a/packages/client/src/entities/posts/ui/Post.tsx b/packages/client/src/entities/posts/ui/Post.tsx
@@ -4,15 +4,16 @@ import { ThreeEvent, useFrame } from '@react-three/fiber';
 import { Star } from 'features';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { StarType } from 'shared/lib';
+import { StarStateType, StarType } from 'shared/lib';
 import { useCameraStore, useViewStore } from 'shared/store';
+import { theme } from 'shared/styles';
 import * as THREE from 'three';
 
 interface PropsType {
 	data: StarType;
 	postId: number;
 	title: string;
-	state?: 'created' | 'normal' | 'deleted';
+	state?: StarStateType;
 }
 
 export default function Post({
@@ -26,9 +27,7 @@ export default function Post({
 
 	const meshRef = useRef<THREE.Mesh>(null!);
 	const [isHovered, setIsHovered] = useState(false);
-	const [starState, setStarState] = useState<'created' | 'normal' | 'deleted'>(
-		'normal',
-	);
+	const [starState, setStarState] = useState<StarStateType>('normal');
 	const [size, setSize] = useState(0);
 
 	const navigate = useNavigate();
@@ -122,9 +121,9 @@ const Label = styled.div`
 	width: fit-content;
 	max-width: 200px; // TODO: 수정 예정
 	text-align: center;
-	background-color: ${({ theme: { colors } }) => colors.background.bdp01_80};
-	border: ${({ theme: { colors } }) => colors.stroke.sc};
-	color: ${({ theme: { colors } }) => colors.text.secondary};
+	background-color: ${theme.colors.background.bdp01_80};
+	border: ${theme.colors.stroke.sc};
+	color: ${theme.colors.text.secondary};
 	transform: translate3d(calc(-50%), calc(-250%), 0); // TODO: 수정 예정
 
 	overflow: hidden;

diff --git a/packages/client/src/pages/Home/Home.tsx b/packages/client/src/pages/Home/Home.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { Outlet, useLocation, useParams } from 'react-router-dom';
 import { getGalaxy } from 'shared/apis';
 import { useCheckNickName } from 'shared/hooks';
+import { WarpStateType } from 'shared/lib';
 import {
 	useCustomStore,
 	useGalaxyStore,
@@ -19,9 +20,7 @@ import {
 } from 'widgets/galaxy/lib/constants';
 
 export default function Home() {
-	const [isSwitching, setIsSwitching] = useState<'warp' | 'fade' | 'end'>(
-		'end',
-	);
+	const [isSwitching, setIsSwitching] = useState<WarpStateType>('end');
 	const { text, type } = useToastStore();
 	const { nickName, status } = useCheckNickName();
 

diff --git a/packages/client/src/shared/lib/types/button.ts b/packages/client/src/shared/lib/types/button.ts
@@ -0,0 +1 @@
+export type ButtonType = 'Button' | 'CTA-icon' | 'warning' | 'warning-border';
diff --git a/packages/client/src/shared/lib/types/index.ts b/packages/client/src/shared/lib/types/index.ts
@@ -1,3 +1,5 @@
+export * from './button';
 export * from './post';
 export * from './star';
 export * from './view';
+export * from './warp';
diff --git a/packages/client/src/shared/lib/types/star.ts b/packages/client/src/shared/lib/types/star.ts
@@ -11,3 +11,5 @@ export interface StarData {
 	title: string;
 	star: StarType;
 }
+
+export type StarStateType = 'created' | 'normal' | 'deleted';
diff --git a/packages/client/src/shared/lib/types/warp.ts b/packages/client/src/shared/lib/types/warp.ts
@@ -0,0 +1 @@
+export type WarpStateType = 'warp' | 'fade' | 'end';
diff --git a/packages/client/src/shared/ui/buttons/Button.tsx b/packages/client/src/shared/ui/buttons/Button.tsx
@@ -1,13 +1,14 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import React from 'react';
+import { ButtonType } from 'shared/lib';
 import { Body02BD, Body02ME, Body03BD, Body03ME } from 'shared/styles';
 
 interface PropsType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	onClick?: () => void;
 	children: React.ReactNode;
 	size: 'm' | 'l';
-	buttonType: 'Button' | 'CTA-icon' | 'warning' | 'warning-border';
+	buttonType: ButtonType;
 }
 
 export default function Button({

diff --git a/packages/client/src/shared/ui/buttons/generateButtonStyle.ts b/packages/client/src/shared/ui/buttons/generateButtonStyle.ts
@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
+import { ButtonType } from 'shared/lib';
 import { Body02BD, Body02ME, Body03BD, Body03ME } from 'shared/styles';
 
 export const generateButtonStyle = (
 	size: 'm' | 'l',
-	buttonType: 'Button' | 'CTA-icon' | 'warning' | 'warning-border',
+	buttonType: ButtonType,
 	colors: any,
 ) => {
 	switch (buttonType) {

diff --git a/packages/client/src/widgets/warpScreen/WarpScreen.tsx b/packages/client/src/widgets/warpScreen/WarpScreen.tsx
@@ -2,6 +2,7 @@ import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Canvas } from '@react-three/fiber';
 import { Bloom, EffectComposer } from '@react-three/postprocessing';
+import { WarpStateType } from 'shared/lib';
 import {
 	AMBIENT_LIGHT_INTENSITY,
 	BLOOM_INTENSITY,
@@ -16,8 +17,8 @@ import BrightSphere from './ui/BrightSphere';
 import SpaceWarp from './ui/SpaceWarp';
 
 interface PropsType {
-	isSwitching: 'warp' | 'fade' | 'end';
-	setIsSwitching: React.Dispatch<React.SetStateAction<'warp' | 'fade' | 'end'>>;
+	isSwitching: WarpStateType;
+	setIsSwitching: React.Dispatch<React.SetStateAction<WarpStateType>>;
 }
 
 export default function WarpScreen({ isSwitching, setIsSwitching }: PropsType) {

diff --git a/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx b/packages/client/src/widgets/warpScreen/ui/SpaceWarp.tsx
@@ -11,6 +11,7 @@ import {
 	SPACE_WARP_Y_MAX,
 	SPACE_WARP_Y_MIN,
 } from '../lib/constants';
+import { WarpStateType } from 'shared/lib';
 
 const geSpaceWarpLinesInfo = () => {
 	const positions = Array.from({ length: SPACE_WARP_LINES_NUM }, () => {
@@ -33,7 +34,7 @@ const geSpaceWarpLinesInfo = () => {
 };
 
 interface PropsType {
-	setIsSwitching: React.Dispatch<React.SetStateAction<'warp' | 'fade' | 'end'>>;
+	setIsSwitching: React.Dispatch<React.SetStateAction<WarpStateType>>;
 }
 
 export default function SpaceWarp({ setIsSwitching }: PropsType) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type ButtonType = 'Button' \| 'CTA-icon' \| 'warning' \| 'warning-border';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type WarpStateType = 'warp' \| 'fade' \| 'end';