Merge branch 'master' of https://github.com/project-creddit/creddit-f…

…rontend into kkm
project-creddit · May 25, 2022 · 33facbe · 33facbe
2 parents 84f1d5b + 8282993
commit 33facbe
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,124 @@
-# creddit
+# Creddit: 웹 소셜 네트워크 서비스
+자신만의 프로필을 만들고 글을 올리고 채팅을 할 수 있는 소셜 네트워크 서비스로 레딧 사이트를 클론한 프로젝트
+<br><br>
 
-레딧의 주요 기능을 클로닝한 프로젝트입니다.
+## Functions
+* 사이트 배경색 2가지 버전
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170044127-66421d33-f287-4da5-9df1-c65bc06f5a78.gif">
+<br>
 
-개발 기간: 22.03.20~
 
+* 로그인 & 회원가입  - Security + JWT를 통한 로그인, 네이버 로그인 , 카카오 로그인
+<img width="700" src="https://user-images.githubusercontent.com/56907015/169650667-8b140062-2bec-4cfe-b6e0-d0debdb36417.gif">
+<br>
+
+
+* 비밀번호 찾기 - 해당 이메일에 새로 발급된 비밀번호를 전송
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170042503-c47afc66-be00-44a3-a3a8-402ee3c1c930.gif">
+<br>
+
+
+
+* 프로필 생성 & 수정 - 프로필 사진, 소개 글을 생성, 수정, 삭제
+<img width="700" src="https://user-images.githubusercontent.com/49304239/170191746-0d3b9269-4720-4a7c-b032-667a262df21b.gif">
+<br>
+
+
+* 팔로우 기능
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170034947-670f0165-8db2-4877-ab24-00e8b4fabecd.gif">
+<br>
+
+
+* 팔로우한 사람과 채팅 - 단체 채팅이 가능
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170034973-b338fea5-b5d3-47e3-bd42-5fd89c6c4cd0.gif">
+<br>
+
+
+* 글 생성 & 수정 & 삭제 - 사진을 포함하거나 포함하지 않고 글을 생성, 수정, 삭제
+
+<img width="700" src="https://user-images.githubusercontent.com/49304239/170073123-323511d1-f3a6-4815-9186-a038729ead7d.gif">
+<br>
+
+* 글 목록 무한 스크롤 - 무한 스크롤을 구현하여 글이 스크롤에 따라 새로 출력
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170036600-59421720-be71-43a3-b4f4-4c874d630e88.gif">
+<br>
+
+
+* 글, 댓글 최신순  & 인기순 정렬 - 인기순일 시 좋아요 순으로 출력
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170036600-59421720-be71-43a3-b4f4-4c874d630e88.gif">
+<br>
+
+* 글 검색
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170044168-928f18a9-ae8f-490f-b736-586e682f84c1.gif">
+<br>
+
+* 팔로우한 사람의 글 모아보기
+<img width="700" src="https://user-images.githubusercontent.com/56907015/170034947-670f0165-8db2-4877-ab24-00e8b4fabecd.gif">
+<br>
+
+* 댓글 생성 & 수정 & 삭제 
+
+<img width="700" src="https://user-images.githubusercontent.com/49304239/170072968-fc272718-617a-4be4-b685-663379fea520.gif">
+<br>
+
+* 답글 생성 & 수정 & 삭제 
+
+<img width="700" src="https://user-images.githubusercontent.com/49304239/170074657-2a51e744-783e-4a62-a311-d36d53a75a68.gif">
+<br>
+
+* 글, 댓글 좋아요 기능 
+
+<img width="700" src="https://user-images.githubusercontent.com/49304239/170073043-89d9fa49-dc4b-4616-8886-f608df229dea.gif">
+
+<br><br>
+
+## SKills
+* Back-end
+  * Language: JAVA 11
+  * Framework: SpringBoot
+  * ORM: JPA
+  * Build Tool: gradle
+  * DBMS: MySQL, NoSQL
+<br>
+
+* Server  
+  * AWS EC2
+  * AWS S3
+<br>
+
+* Front-end
+  * Language: TypeScript
+  * Framework: React, Next.js
+  * State management: Redux, SWR
+  * Package manager: Yarn Berry
+  * Test: Testing Library
+  * Style: Sass
+  * Web Socket: SockJS-client , Stomjs
+
+<br><br>
+
+## Main Server ERD
+<img width="600" alt="ERD" src="https://user-images.githubusercontent.com/56907015/169647831-ff423c03-d4aa-4c23-b283-ad4700570fad.png">
+<br><br>
+
+## Chat Server ERD
+<img width="600" alt="ERD" src="https://user-images.githubusercontent.com/56907015/169647868-cb57ca31-282f-4471-bb54-873f4c9cfd15.png">
+<br><br>
+
+
+## Web App Architecture 
+<img width="700" alt="architecture" src="https://user-images.githubusercontent.com/56907015/169509002-246e0051-7ba3-4439-9b0b-74ab7e4bdcf1.png">
+<br><br>
+
+## Members
+* Front-end : [이우철](https://github.com/woochul2) | [김경민](https://github.com/Kimkyungmin123)
+* Back-end :  [김윤희](https://github.com/kyh1685) | [김영은](https://github.com/YoungEunKim99) | [인세훈](https://github.com/oereo)
+<br><br>
+
+## Development Period
+2022.03.20 ~ 2022.05.20
+<br><br>
+
+
+## Development Rules
 [개발 규칙, 기술 스택과 선택한 이유, 팁, 에러 해결 방법](https://leather-army-577.notion.site/2c9ebed6cc4d44db9a2ba9da99773f82)
diff --git a/src/components/ProfileBox/ProfileBox.tsx b/src/components/ProfileBox/ProfileBox.tsx
@@ -65,11 +65,12 @@ function ProfileBox({ user }: ProfileBoxProps) {
 
             const changeIntroduction = async () => {
               if (introduction !== user.introduction) {
-                await editProfile({ introduction });
+                await editProfile({ introduction, imageFile: new Blob() });
               }
             };
 
-            await Promise.all([changeNickname(), changeIntroduction()]);
+            await changeNickname();
+            await changeIntroduction();
           }}
         />
       ) : (

diff --git a/src/slices/profileSlice.ts b/src/slices/profileSlice.ts
@@ -34,9 +34,10 @@ export async function initProfile(
 ) {
   try {
     const { nickname } = context.query;
-    const { data: user } = await axios.get<User>(
+    const url = encodeURI(
       `${process.env.NEXT_PUBLIC_API_ENDPOINT}/profile/show/${nickname}`
     );
+    const { data: user } = await axios.get<User>(url);
     store.dispatch(setProfile(user));
   } catch (err) {
     console.error(err);

diff --git a/src/utils/editProfile.ts b/src/utils/editProfile.ts
@@ -3,12 +3,12 @@ import api from './api';
 
 type Params = {
   introduction: string;
-  imageFile?: File | null;
+  imageFile?: File | Blob | null;
 };
 
 async function editProfile({ introduction, imageFile }: Params) {
   const formData = new FormData();
-  formData.append('image', imageFile || new Blob());
+  if (imageFile) formData.append('image', imageFile);
   formData.append(
     'profileRequestDto',
     new Blob([JSON.stringify({ introduction })], {