Y_FE_Toy1_Team7 - FASTUDY #5

seungjun222 · 2023-09-22T10:08:44Z

📌 프로젝트 소개

FASTUDY는 프로젝트 및 스터디원 모집 및 정보 공유 서비스입니다

📌 배포 사이트

https://2weeks-team-mzbe-c7xmzksqc-2weeks.vercel.app/

야놀자 테크 캠프 토이 프로젝트 설명

📅 직원들을 위한 위키 사이트

직원들을 위한 위키 사이트를 만들어보세요!
위키 사이트에는 위키 뿐 아니라 여러 기능이 추가되어야 합니다!

[과제 수행 및 제출 방법]

현재 저장소를 로컬에 클론(Clone)합니다.
자신의 팀명으로 브랜치를 생성합니다.(구분 가능하도록 팀명을 꼭 파스칼케이스로 표시하세요, git branch Y_FE_Toy1_Team13)
자신의 팀명 브랜치에서 과제를 수행합니다.
과제 수행이 완료되면, 자신의 팀명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin Y_FE_Toy1_Team13)
저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== Y_FE_Toy1_Team13)
Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사님께 얘기하세요!

[필수 구현사항]

[x] 문서편집, revision 기능을 제공하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)
[x] firebase database (Firestore) 이용
[x] 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현
[x] 캐러셀을 활용한 회사 공지 페이지
[x] 갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현
[x] netlify 등을 이용한 정적 페이지 배포
[x] TypeScript 사용 필수
[x] 과제에 대한 설명을 포함한 README.md 파일 작성
[x] 팀원별로 구현한 부분 소개

[선택 구현사항]

[x] React 사용은 선택
[x] 기타 동작이 완료되기 전에 로딩 애니메이션 구현
[x] 페이지네이션
[x] 관련된 기타 기능도 고려
[x] eslint 설정, 커밋컨벤션, 문서화 등 팀프로젝트시 필요한 추가 작업들

📌 팀 소개


어승준 팀장 (FE)	박성후 팀원 (FE)	진정민 팀원 (FE)	백상원 팀원 (FE)	서예빈 팀원 (FE)

📌 Contributor

@JeongMin83 (진정민) : 메인페이지, 로그인, 모집

@seungjun222 (어승준) : 사이드바, 모집

@Yamyam-code (백상원) : 마이페이지

@HOOOO98 (박성후) : 갤러리

@syb0127 (서예빈) : 위키

📌 기술 스택

Environment

FrontEnd

DB

Deploy

Communication

📌 주요 화면 및 기능

메인페이지

위키

모집

갤러리

마이페이지

📌 DB 스키마

📌 유저 플로우

📌 파일 구조

2weeks-team/
├── src/
│   ├── common/
│   │    ├── Footer/
|   |    |   .
|   |    |   .
│   │    └── Header/
│   │    
│   ├── components/    
│   │    ├── ChannelModal/
│   │    ├── SidebarGallery/
|   |    |   .
|   |    |   .
|   |    |   .
│   │    └── Slider/
│   │    
│   ├── fonts/                  # 추후 assets로
│   ├── pages/     
│   │    ├── Gallery/
│   │    ├── Home/
|   |    |   .
|   |    |   .
|   |    |   .
│   │    └── Wiki/     
│   │    
│   ├── utils/           
│   │    ├── firebase.ts
│   │    └── recoil.ts
│   │    
│   ├── App.tsx
│   ├── index.tsx
│   ├── GlobalStyle.tsx
│   ├── fonts.d.ts
│   └── custom.d.ts
│
├── public/
│   └── index.html
│  
├── node_modules/
├── package.json
├── tsconfig.json
├── .eslintrc
├── README.md
└── ...

📌 개발 기간 : `2주` `23.09.11 ~ 23.09.22`

…Channel TW-37--feature/sidebar/deleteChannel

Tw 27 feature/modal/show

…Channel Feat: 채널 수정 기능 구현

…SubChannel Feat: 서브채널 추가 기능 구현

…SubChannel Feat: 서브채널 삭제 기능 구현

…SubChannel Feat: 서브채널 수정 기능 구현

Tw 23 feature/gallery/recruit

Tw 44 feature/login/auth

Tw 8 feature/main 병합

Tw 43 feature/login -> dev 병합

… TW-5--feature/gallery

Tw 5 feature/gallery

Fix: 버그 수정

Feat: 메인 페이지 디자인 마무리

…_Toy1_Team7

Test: PR테스트용 커밋

로그인 성공 시 유저 데이터 생성

.env 파일 연결 오류를 수정한다.

Feat: 프로젝트 페이지 마크업

…into feature/#5

Feature/#5

iamidlek

고생하셨습니다.

전반적으로 배포된 사이트는 문제 없이 동작하는 것을 확인 하였습니다.
로그인 등 가진 데이터를 활용하여 주요한 기능을 잘 구현해 주신 것 같습니다.

다만 타입이 any로 되어있는 부분이 많고
컴포넌트 내에 너무 많은 로직이 몰려있는 경우가 많고
불필요한 import나 state선언 등 코드의 질적인 면이 아쉬운 것 같습니다.
컴포넌트, 함수의 복잡성을 줄이고
어떤한 처리를 하는지 명확하게 분리하는 것이 필요해 보입니다.
일반적인 폴더 컨벤션을 찾아 보시는 것을 추천드립니다.

iamidlek · 2023-09-26T16:39:13Z

PULL_REQUEST_TEMPLATE.md

+
+Plz check if your code fulfills the following requirements.
+
+-   [ ] The Commit message follows our conventions.


크게 상관은 없지만 md 작성 방법이 맞지 않는 것 같습니다.

그리고 template파일은 .github 폴더 내부에 있어야 할 것 같습니다.

iamidlek · 2023-09-26T16:41:37Z

src/App.tsx

+        <ThemeProvider theme={theme}>
+            <GlobalStyle />


스타일 관련 폴더가 없는 것 같습니다.
theme과 globalstyle을 별도로 분리하여 불러오는 것이 좋을 것 같습니다.
theme 변수도 컴포넌트 내부에 위치하지 않아도 될 것 같습니다.

iamidlek · 2023-09-26T16:42:57Z

src/common/Footer/fastuslogo-2-2.svg

사용되는 파일일까요?

iamidlek · 2023-09-26T16:45:00Z

src/utils/recoil.ts

+export const UserId = atom({
+    key: 'userId',
+    default: '',
+    effects_UNSTABLE: [persistAtom],
+});
+
+export const channelState = atom({
+    key: 'channelState',
+    default: '',
+});


각 atom을 분리하는 것이 좋을 것 같습니다.
utils 폴더 내부에 store관련 코드가 있는 것도 어색한 것 같습니다.

iamidlek · 2023-09-26T16:45:51Z

src/utils/firebase.ts

+import { getAuth } from 'firebase/auth';
+import { Snapshot } from 'recoil';
+
+const firebaseConfig = {


firebase 연결 및 요청은 util 폴더에 있는 것이 어색한 것 같습니다.
또한 모든 요청이 한 파일에 되어있어 분리가 필요해 보입니다.

iamidlek · 2023-09-26T17:08:21Z

src/components/modal/MyPage/MyPageTimelog.tsx

+                <ChangeTimer value={showModal}>
+                    <TimerIcon
+                        onClick={() => {
+                            handleTimerModal(1);


나중에 1이 어떤 의미인지 알 수 없을 것 같습니다. magic number는 지양하는 것이 좋습니다.

iamidlek · 2023-09-26T17:09:29Z

src/components/modal/MyPage/MyPageReadLog.tsx

+                    readTimelog.map((e: string, i) => {
+                        e = e.replace('|', '\n');
+                        return (
+                            <TimelogEl key={i}>


key의 값을 index로 주는 것은 지양하는 것이 좋습니다.

iamidlek · 2023-09-26T17:11:37Z

src/components/SidebarGallery/index.tsx

+
+                    <div style={{ marginLeft: '20px' }}>
+                        {item.docKeys.map((item2, index2) => (
+                            <SubChannelFlexDiv


key를 주는 것이 빠져있는 것 같습니다.

iamidlek · 2023-09-26T17:12:29Z

src/components/SidebarGallery/index.tsx

+                    </ChannelFlexDiv>
+
+                    <div style={{ marginLeft: '20px' }}>
+                        {item.docKeys.map((item2, index2) => (


item2 index2과 같은 네이밍은 지양하는 것이 좋을 것 같습니다.

iamidlek · 2023-09-26T17:16:24Z

src/pages/Home/index.tsx

+            e.preventDefault();
+
+            const { deltaY } = e;
+            const { scrollTop } = outerDivRef.current!;


타입 가드를 통해 있는지 없는지 여부를 확인 한 후 사용하면 될 것 같습니다.
if (!outerDivRef.current) { 처리 }

HOOOO98 and others added 30 commits September 14, 2023 12:15

Pull Request 템플릿 생성

382aaac

FEAT: 갤러리의 각 사이드바에 해당하는 컴포넌트 연결, 초기화 값은 채널을 고르도록 유도하는 문구 렌더링

04b9541

Feat: 채널 삭제 기능 구현

c2c3cd0

Merge pull request #10 from 2weeks-team/TW-37--feature/sidebar/delete…

b8e51b5

…Channel TW-37--feature/sidebar/deleteChannel

Merge pull request #8 from 2weeks-team/TW-27--feature/modal/show

af3bb30

Tw 27 feature/modal/show

Feat: 채널 수정 기능 구현

aff3c78

Feat: Header,Footer z-index 및 position 수정 / Home viewfort 100 고정

d7d2e8e

Merge pull request #12 from 2weeks-team/TW-38--feature/sidebar/update…

f45ac3d

…Channel Feat: 채널 수정 기능 구현

FEAT: 취업 링크 및 서비스 링크 연결

0836334

FEAT: 취업 링크 및 서비스 링크 연결

a5710ff

Feat: 서브채널 추가 기능 구현

a769607

Merge pull request #13 from 2weeks-team/TW-39--feature/sidebar/create…

883b81d

…SubChannel Feat: 서브채널 추가 기능 구현

Feat: 서브채널 삭제 기능 구현

1dc3b4f

Merge pull request #14 from 2weeks-team/TW-41--feature/sidebar/delete…

9580aa6

…SubChannel Feat: 서브채널 삭제 기능 구현

Feat: signin 기능 추가

69b460a

Feat: LogIn 기능 및 컴포넌트 추가

f023960

Feat: recoil을 활용한 로그인 상태 관리 및 헤더 전환 구현

4e76a62

FEAT : 취업 업로드 모달 및 목업데이터 연결

872ffaf

FEAT: 취업 코드 정리

197b944

Feat: signin Anchor 추가

90403ba

Feat: 서브채널 수정 기능 구현

9a922fc

Merge pull request #17 from 2weeks-team/TW-40--feature/sidebar/update…

0c0b54f

…SubChannel Feat: 서브채널 수정 기능 구현

Merge branch 'dev' into TW-8--feature/main

9e9afbf

Merge pull request #16 from 2weeks-team/TW-23--feature/gallery/recruit

fed3fc4

Tw 23 feature/gallery/recruit

Merge pull request #15 from 2weeks-team/TW-44--feature/login/Auth

461a92a

Tw 44 feature/login/auth

Merge pull request #18 from 2weeks-team/TW-8--feature/main

fa96bcb

Tw 8 feature/main 병합

MERGE : 충돌 수동 수정

332661d

Merge pull request #19 from 2weeks-team/TW-43--feature/login

161e984

Tw 43 feature/login -> dev 병합

Merge branch 'dev' of https://github.com/2weeks-team/2weeks-team into…

5401721

… TW-5--feature/gallery

Merge pull request #20 from 2weeks-team/TW-5--feature/gallery

4c2db5c

Tw 5 feature/gallery

Yamyam-code and others added 11 commits September 22, 2023 12:03

Fix: 로고 삭제

b3a9ead

Fix: 디데이 아이콘 배경제거 및 로그인 화면 폰트 수정

60a3dfe

Merge branch 'dev' into sangwon

983fe4e

Merge pull request #84 from 2weeks-team/sangwon

c74b466

Fix: 버그 수정

Feat: 메인 페이지 디자인 마무리

fd74f4a

Fix: conflict 방지 파일명 수정

cd4e6df

Merge pull request #85 from 2weeks-team/TW-110--feature/last

b367327

Feat: 메인 페이지 디자인 마무리

Fix: 로그인 버튼 한글화

e7c4680

Docs: README 작성

c51c553

Fix: vercel 에러 해결2 (이미지 경로)

5af6e66

Merge branch 'main' of https://github.com/KDT1-FE/Y_FE_Toy1 into Y_FE…

cff2112

…_Toy1_Team7

seungjun222 self-assigned this Sep 22, 2023

seungjun222 changed the title ~~Y fe toy1 team7~~ Y_FE_Toy1_Team7 - FASTUDY Sep 22, 2023

wowba pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #5 from wowba/feature_NoticePage

53383cb

Test: PR테스트용 커밋

seungjun222 added 2 commits September 22, 2023 19:15

Docs: "Update README.md"

d0d4230

Update README.md

a40e2ca

seungjun222 assigned syb0127, JeongMin83, HOOOO98 and Yamyam-code Sep 22, 2023

noSPkeepgoing pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #5 from noSPkeepgoing/ChoiSunPa

7faf9c6

로그인 성공 시 유저 데이터 생성

Update README.md

4ab06f2

Sinary00 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #5 from JSH99/feat/config

df01a5e

.env 파일 연결 오류를 수정한다.

im-na0 pushed a commit that referenced this pull request Sep 22, 2023

Merge branch 'deploy' into feature/#5

2289101

im-na0 pushed a commit that referenced this pull request Sep 22, 2023

Merge pull request #13 from im-na0/feature/#5

2207131

Feat: 프로젝트 페이지 마크업

TaePoong719 added a commit that referenced this pull request Sep 22, 2023

Merge branch 'dev' of https://github.com/TaePoong719/fastcampus-wiki …

c1a7342

…into feature/#5

TaePoong719 added a commit that referenced this pull request Sep 22, 2023

Merge branch 'dev' into feature/#5

f5e7c76

TaePoong719 added a commit that referenced this pull request Sep 22, 2023

Merge branch 'dev' into feature/#5

0ab4a54

TaePoong719 added a commit that referenced this pull request Sep 22, 2023

Merge pull request #14 from TaePoong719/feature/#5

df11a78

Feature/#5

iamidlek reviewed Sep 26, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Y_FE_Toy1_Team7 - FASTUDY #5

Y_FE_Toy1_Team7 - FASTUDY #5

seungjun222 commented Sep 22, 2023 •

edited

Loading

iamidlek left a comment

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023

iamidlek Sep 26, 2023


		Plz check if your code fulfills the following requirements.

		- [ ] The Commit message follows our conventions.

Y_FE_Toy1_Team7 - FASTUDY #5

Are you sure you want to change the base?

Y_FE_Toy1_Team7 - FASTUDY #5

Conversation

seungjun222 commented Sep 22, 2023 • edited Loading

📌 프로젝트 소개

📌 배포 사이트

📅 직원들을 위한 위키 사이트

[과제 수행 및 제출 방법]

[필수 구현사항]

[선택 구현사항]

📌 팀 소개

📌 Contributor

📌 기술 스택

Environment

FrontEnd

DB

Deploy

Communication

📌 주요 화면 및 기능

로그인

메인페이지

위키

모집

갤러리

마이페이지

📌 DB 스키마

📌 유저 플로우

📌 파일 구조

📌 개발 기간 : 2주 23.09.11 ~ 23.09.22

iamidlek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seungjun222 commented Sep 22, 2023 •

edited

Loading

📌 개발 기간 : `2주` `23.09.11 ~ 23.09.22`