Merge pull request #344 from boostcampwm2023/develop

12/14 배포

README.md

@@ -22,13 +22,13 @@
 - [기능 설명](#기능-설명)
 - [프로젝트 실행 방법](#프로젝트-실행-방법)
 
-### [기술 스택](#%EF%B8%8F-기술-스택)
+### [2. 기술 스택](#%EF%B8%8F-기술-스택)
 
-### [기술적 경험](#-기술적-경험)
+### [3. 기술적 경험](#-기술적-경험)
 
-### [팀원 소개](#%EF%B8%8F-팀원-소개)
+### [4. 팀원 소개](#%EF%B8%8F-팀원-소개)
 
-### [팀원 회고](#-팀원-회고)
+### [5. 팀원 회고](#-팀원-회고)
 
 <br />
 
@@ -54,7 +54,7 @@
 
 기억을 담은 별들이 모여 나만의 은하가 만들어집니다.
 
-추억으로 가득 채워진 나의 우주를 소중한 사람들에게 공유해보세요.
+추억으로 가득 채워진 나의 우주를 소중한 사람들에게 공유해보세요 ❤️
 
 <br />
 
@@ -112,14 +112,16 @@
 
 ### [ 은하 수정 ]
 
-<img src="https://github.com/boostcampwm2023/web16-B1G1/assets/80266418/d4d1286d-49d9-4c2b-a429-b21e5e5ed97d">
+<img src="https://github.com/boostcampwm2023/web16-B1G1/assets/80266418/31b6ebb4-ad0e-424d-90bd-4d10a5735f78">
 
 - 내 은하 나선팔 꼬인 정도, 나선팔 두께, 막대 길이, 은하 높이를 조절할 수 있습니다.
 - 오른쪽 위의 되돌리기 버튼을 누르면 수정 이전의 내 은하 스타일로 돌아갑니다.
 - 왼쪽 아래의 초기화 버튼을 누르면 기본 은하 스타일로 돌아갑니다.
 
 ### [ 사용자 우주 설정 ]
 
+<img src="https://github.com/boostcampwm2023/web16-B1G1/assets/80266418/d4d1286d-49d9-4c2b-a429-b21e5e5ed97d">
+
 - 별의 밝기를 조절할 수 있습니다.
 - 블러효과를 주어 우주에 흐림 효과를 줄 수 있습니다.
 - 마우스 휠 속도를 조저할 수 있습니다.
@@ -134,6 +136,8 @@
 
 ### [ 은하 검색 ]
 
+<img src="https://github.com/boostcampwm2023/web16-B1G1/assets/80266418/40f8d4c6-d220-44f8-9abe-34f1f309286b">
+
 - 검색 허용된 사용자들의 우주를 닉네임 검색을 통해 구경할 수 있습니다.
 - 검색해서 들어간 우주에서 왼쪽 위 뒤로가기 버튼을 누르면 다시 내 우주로 돌아옵니다.
 
@@ -201,6 +205,8 @@ yarn workspace server start:dev
 
 이렇듯 저희 팀은 항상 **사용자 경험**을 향상시키기 위해 많은 방법들을 적용해보았으며,이를 위해 다양한 학습과 고민을 이어나갔습니다.
 
+<br />
+
 ### 성능 최적화
 
 한 화면에 매우 많은 오브젝트를 보여줘야 하는 프로젝트 특성상 실행 환경에 많은 영향을 받아 최적화가 필수적이었습니다.
@@ -219,12 +225,16 @@ yarn workspace server start:dev
 
    이를 통해 퍼포먼스가 좋지 않은 경우 `Device Pixel Ratio`을 최대 0.5까지 낮추도록 설정해주었습니다.
 
+<br />
+
 ### FSD 아키텍처 적용
 
 프로젝트가 진행됨에 따라, 파일들이 많아져 각각의 파일들이 명확하게 분리되어야 할 필요성이 느껴졌습니다. 이에 따라 새로운 폴더 구조를 적용해보기로 결심했고, 그중에 눈에 띄었던 [FSD](https://feature-sliced.design/)방식을 적용해보기로 했습니다.
 
 FSD 방식 아키텍쳐는 프로젝트 폴더를 6개의 `layer`로 구분하고, 각각의 레이어들을 다시 `slice`와 `segment`들로 분할하여 관리하는 디자인 입니다. 이를 적용해보는 것으로 각 파일들의 명확한 분리와 한눈에 들어오는 폴더 구조를 가질 수 있게 되었습니다.
 
+<br />
+
 ### 라우팅
 
 <br />

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;