Y_FE_Toy1_Team12 Wikipage TogetherS #11

noSPkeepgoing · 2023-09-22T14:26:43Z

과제 내용

✅ 문서편집, revision 기능을 제공(CRUD 가능하게)하여 업무일지를 작성할 수 있는 직원들을 위한 위키사이트 구현(마크다운 형식)  
✅ firebase database (Firestore) 이용  
✅ 모달을 활용한 근무 시간을 표시하는 시계 및 타이머 창 구현  
✅ 캐러셀을 활용한 회사 공지 페이지  
✅ 갤러리 페이지 / 업무일지 페이지 등 메뉴를 필터링 또는 카테고리화 하는 선택바 구현  
✅ netlify 등을 이용한 정적 페이지 배포  
✅ TypeScript 사용 필수

배포

개발버전 : https://heartfelt-mandazi-9dce7c.netlify.app/
깃 레포지토리 : https://github.com/noSPkeepgoing/Wikipage-team12

팀원소개

고솔미	박은영	배경규	정지오	최선파
@SOL-MI	@SKY-PEY	@kyungkyuBae	@jiohjung98	@noSPkeepgoing
스터디 페이지	갤러리 페이지	위키페이지	메인페이지, 헤더	로그인/회원가입페이지, 에러페이지

프로젝트 소개

“Together + Study”의 의미로 줄여서 “투게더스”라는 웹 서비스를 만들었습니다.
공부를 위한 스터디 모집공간, 공부시간 공유 공간이 있습니다.
공동체 활동을 위한 게시판과 갤러리 공간이 있습니다.

프로젝트 구성

로그인 / 회원가입

로그인 회원가입
메인

캐러셀 스터디 모집
갤러리

네비바 이미지 업로드 상세정보모달
위키

네비바 게시글 생성

게시글 수정 댓글 생성 및 수정
스터디

랭킹 스터디 유저 정보 타이머
에러

에러페이지

기술 스택

프로젝트 문서

노션 : https://www.notion.so/7a5c2df8aaf7413982f8895d96d4db07

헤더와 로그인 및 회원가입 페이지 연결

… into KohSolMi

위키 게시글 댓글 기능 삭제 수정 구현 및 게시글 마크다운 형식 구현

메인페이지 디자인 수정

스터디 모집 모달창 버튼 색상

캐러셀 반응형 추가

게시글상세페이지 댓글 스타일링

… into ParkEunYeong

갤러리 내비바 공통 스타일 적용

… into KohSolMi

위키페이지 폰트 변경 및 스터디 페이지 css애니 추가

투게더스 v1.2.0

…ikipage-team12 into Y_FE_Toy1_Team12

JIYEONGYANGdev

scss를 활용해본 경험이 분명 큰 도움이 될거에요. 다음에는 styled-component로 효율적인 코딩(한 파일 내에서의 일관성이 있어 깔끔하고 가독성이 좋고, 변수사용이 가능하고 등등)을 경험해도 좋을 것 같습니다.
다양한 애니메이션을 활용해보신 것 같네요.
헤더를 별도로 작업해서 그런지 몰라도 모바일반응형 구현이 조금 아쉽네요. 이 부분은 조금만 손보면 처리 가능할 것 같습니다.
사소하지만 사용자경험면에서 팁인데요, 클릭 가능한 부분은 cursor: pointer 지정해주면 사용자가 클릭이 가능한 부분이라는 게 인지가 되어 좋을 것 같아요.
요 스터디 목록 부분은 높이를 고정해주면 좋을 것 같아요. 2번째 페이지가 수가 적으니 넘겼을 때 갑자기 화면이 숭덩 잘리는 느낌이 있네요.

전에 멘토링 시간 때 React.FC 타입에 대해 물어보셨었는데, 그게 이제 이해가 되네요. 저는 React.FC 를 사용하지 않는다고 했는데, 어떤식으로 컴포넌트(인자) 타입을 지정해주는지 중간에 코멘트 달아놓았으니 참고해주세요!

다들 정말 열심히하셨네요. 수고하셨습니다~ 👏👏

JIYEONGYANGdev · 2023-09-29T05:40:07Z

src/components/Gallery/ModalAddImage.tsx

+import './_modal.scss';
+import './ModalAddImage.scss';
+import '../../styles/_common.scss';


typescript config 설정으로 절대경로를 활용하는 방법에 대해 알아보세요!

JIYEONGYANGdev · 2023-09-29T05:40:27Z

src/components/Gallery/ModalAddImage.tsx

+  const modalRef = useRef<HTMLDialogElement | null>(null);
+  return (
+    <div>
+      <button // 이미지 추가하는 버튼 (Modal open)


실제 상용화된 서비스라면 주석은 예외적인 상황외에는 없애는 게 좋습니다!

JIYEONGYANGdev · 2023-09-29T05:42:21Z

src/components/Gallery/ModalAddImage.tsx

+              onClick={async () => {
+                await modalRef.current?.close();
+                location.reload();
+              }}


요 핸들러를 함수로 정의해서 넘겨줘도 좋을 것 같아요.
그리고 async-await 를 꼭 사용해야했던 이유가 있을까요? 모달을 닫고, 새로고침을 하고 싶었던 걸까요?
굳이 그렇다면, setTimeout으로 걸어도 될 것 같고,
사실은 새로고침말고 해당 부분만 새롭게 불러올 수 있도록 설계되어야할 것 같아요. 그게 SPA 구조에 맞는 거니까요.

JIYEONGYANGdev · 2023-09-29T05:43:04Z

src/components/Gallery/ModalCommentList.tsx

+  const [like, setLike] = useState<number>(0);
+  const [comment, setComment] = useState<string>('');
+  const [commentList, setCommentList] = useState<IComment[]>([]);
+  const [isChange, setChange] = useState<boolean>(true);


setIsChange 가 네이밍이 더 정확할 것 같네요.

JIYEONGYANGdev · 2023-09-29T05:43:59Z

src/components/Gallery/ModalCommentList.tsx

+interface IModalComment {
+  image: string;
+  imgId: string;
+  categoryId: string;
+  commentsListData: any;
+  writerId: string;
+  writerName: string;
+  likeData?: number;
+  writerImage: any;
+}


타입 이름 규칙도 정확하고 좋네요. 반드시 interface -> I.. type -> T.. 로 네이밍해야하는 건 아니에요.

저는 Props만 붙여서 활용하기도 합니다. (ex) CommentModalProps

JIYEONGYANGdev · 2023-09-29T05:50:48Z

src/components/Header/Header.tsx

+            <Link
+              to="/"
+              className={`page ${location.pathname === '/' ? 'active' : ''}`}
+            >


Route가 아니라 Link 를 활용하셨네요.

Link 컴포넌트의 특징을 알고있는 것도 좋을 것 같아요!

JIYEONGYANGdev · 2023-09-29T05:52:06Z

src/components/ImageSlider/Slider.tsx

+  link: string | null; // 링크 타입을 string 또는 null로 지정
+}
+
+const Slide: React.FC<ISlideProps> = ({ backgroundColor, text, imageSrc, link }) => {


React.FC 에 대해 질문해주셨던 게 기억나네요.

저는 요렇게 많이 합니다~

const Slide = ({ backgroundColor, text, imageSrc, link }: ISlideProps) => { ..

JIYEONGYANGdev · 2023-09-29T05:54:15Z

src/components/ImageSlider/Slider.tsx

+      <div className="slide-content" onClick={handleSlideContentClick}>
+        <div className="slide-left">
+          {text.map((textItem, index) => (
+            <div key={index} style={{ display: 'block' }}>


key는 index만으로 사용하기보다
프로젝트 전체에서 고유할 수 있도록

<div key={`slide-content-text-${index}`} ..

이런식으로 지어주는 게 좋습니다.

JIYEONGYANGdev · 2023-09-29T05:56:11Z

src/components/SignUp/SignUpNext.tsx

+  // error 핸들링
+  const handleError = (error: any) => {
+    switch (error.code) {
+      case 'auth/email-already-in-use':


에러 핸들링을 신경쓰신 점이 보이네요. 👍

보통 이런 에러코드는 ERR_AUTH_EMAIL_ALREADY_IN_USE 이런 식으로 대문자 + _ 조합으로 만들어서 (백에서 프론트로) 내려주는 편입니다.

JIYEONGYANGdev · 2023-09-29T05:56:54Z

src/components/Wiki/BoardContent.tsx

+          <li className="page-item">
+            <a className="page-link" href="#">
+              1
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link disabled" href="#">
+              2
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link disabled" href="#">
+              3
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link disabled" href="#">
+              4
+            </a>
+          </li>


여기는 map을 돌리면 좋겠네요?

SKY-PEY and others added 30 commits September 16, 2023 20:49

[feat] 댓글리스트 구현

0e0a95c

[refactor] h1 태그 삭제

c523a1c

[feat] 로그인 정보 연결

f40fa93

[feat] 로그인 유지

39d4128

[style] 로그인 정보 css 스타일 설정

4106123

[feat] 작성자 uid & nickname 저장 및 가져오기 구현

63cb1be

[feat] 이미지 db 삭제 구현

f7db005

[feat] like 기능 구현

7cad03d

[fix] 게시글 마크다운 형식으로 변경

1782f14

[feat]게시글 댓글 수정구현

29ccfeb

[fix] like 버그 수정

07646da

[feat]게시판 댓글 삭제구현

ac1d3ab

[fix] 댓글리스트 버그 수정

3c31e09

[fix] 댓글리스트 버그 수정 2

d48bd2c

[feat] slide 1차 구현

4e14e3c

Merge pull request #13 from noSPkeepgoing/JiohJung

89212f4

헤더와 로그인 및 회원가입 페이지 연결

[fix]게시글,댓글 작성자 닉네임+이미지 변경

bc94ab3

[feat] 댓글리스트 실시간 업데이트 구현

b0ff71e

Merge branch 'test' of https://github.com/noSPkeepgoing/Wikipage-team12…

24a7a05

… into KohSolMi

[fix]라우터 아울렛 수정

706cccf

[feat] 본인만 타이머 제어 가능

304ccd7

[design] Study 페이지 초기 디자인

e4a46c0

[style]위키 페이지 넷바 스타일링

5153771

[feat] 닉네임 값이 없으면 next 버튼 비활성화

b24b771

[fix]위키메인페이지에서 넷바 이중랜더링 해결

d53c2a8

[feat] 로그인페이지에 회원가입 페이지 바로가기 링크 연결

65791c8

[feat] 에러 라우터 생성 및 연결

ab7badc

[design] 에러 페이지 스타일 추가

2951ccc

Merge pull request #14 from noSPkeepgoing/BaeKyungGyu

79e32fd

위키 게시글 댓글 기능 삭제 수정 구현 및 게시글 마크다운 형식 구현

[style] 프리티어 적용

0a3b297

jiohjung98 and others added 23 commits September 22, 2023 21:55

[design] 메인페이지

8c29fc9

Merge pull request #64 from noSPkeepgoing/JiohJung

640384c

메인페이지 디자인 수정

[design] 스터디 모집 모달창 버튼 색상

d95ce18

[design] 작성된 모달창 닫는 버튼 위치 조정&첫 번째 슬라이더 url 연결

89d5fea

Merge pull request #65 from noSPkeepgoing/JiohJung

1b2480d

스터디 모집 모달창 버튼 색상

[design] 캐러셀 미디어쿼리 사용

5b79ff6

[design]게시글상세페이지 댓글 스타일링

ad5c710

[docs]위키페이지 제출전 최종 수정

6f7355b

Merge pull request #66 from noSPkeepgoing/JiohJung

c210841

캐러셀 반응형 추가

Merge pull request #67 from noSPkeepgoing/BaeKyungGyu

7cc6ad0

게시글상세페이지 댓글 스타일링

[design]로그인 안했을 때 댓글 버튼 색상 잘못 표기되는 부분 수정

1d1bb60

[style] 모달 스타일 수정

7949e30

Merge branch 'test' of https://github.com/noSPkeepgoing/Wikipage-team12…

13982b7

… into ParkEunYeong

[design] study페이지 랭킹 css애니메이션 추가

eccb625

Merge remote-tracking branch 'sub/BaeKyungGyu' into test

e289d2e

[style] 내비바 공통 스타일 적용

3818b25

Merge pull request #68 from noSPkeepgoing/ParkEunYeong

336715b

갤러리 내비바 공통 스타일 적용

Merge branch 'test' of https://github.com/noSPkeepgoing/Wikipage-team12…

cd8df70

… into KohSolMi

[design] wiki 페이지 폰트 변경

85db19a

[chore] 충돌해결

5e19e3c

Merge pull request #69 from noSPkeepgoing/KohSolMi

5256706

위키페이지 폰트 변경 및 스터디 페이지 css애니 추가

Merge pull request #70 from noSPkeepgoing/test

8e54304

투게더스 v1.2.0

Merge branch 'Y_FE_Toy1_Team12' of https://github.com/noSPkeepgoing/W…

9544e66

…ikipage-team12 into Y_FE_Toy1_Team12

noSPkeepgoing changed the title ~~Y_FE_Toy1_Team12 위키페이지 "투게더스"~~ Y_FE_Toy1_Team12 Wikipage TogetherS Sep 22, 2023

jiohjung98 assigned jiohjung98, SOL-MI, kyungkyuBae, SKY-PEY and noSPkeepgoing Sep 22, 2023

JIYEONGYANGdev reviewed Sep 29, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Y_FE_Toy1_Team12 Wikipage TogetherS #11

Y_FE_Toy1_Team12 Wikipage TogetherS #11

noSPkeepgoing commented Sep 22, 2023 •

edited

Loading

JIYEONGYANGdev left a comment •

edited

Loading

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

JIYEONGYANGdev Sep 29, 2023

Y_FE_Toy1_Team12 Wikipage TogetherS #11

Are you sure you want to change the base?

Y_FE_Toy1_Team12 Wikipage TogetherS #11

Conversation

noSPkeepgoing commented Sep 22, 2023 • edited Loading

과제 내용

배포

팀원소개

프로젝트 소개

프로젝트 구성

기술 스택

프로젝트 문서

JIYEONGYANGdev left a comment • edited Loading

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

noSPkeepgoing commented Sep 22, 2023 •

edited

Loading

JIYEONGYANGdev left a comment •

edited

Loading