Skip to content

Conversation

@kimisadev27
Copy link
Collaborator

🚀 풀 리퀘스트 제안

[작업 내용을 간략히 적어주세요]

📋 작업 내용

수정한 내용이나 추가한 기능에 대해 자세히 설명해 주세요.

🔧 변경 사항

주요 변경 사항을 요약해 주세요.

📸 스크린샷 (선택 사항)

수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부할 수 있습니다.

📄 기타

추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.

Sonseongoh and others added 30 commits November 5, 2024 14:42
Settings: 코드래빗 설정파일 추가
* feat: 마이프로젝트 개발

* feat: 레이아웃 적용

* feat: 코드리뷰 항목 적용
Sonseongoh and others added 26 commits November 25, 2024 13:09
* feat: 텍스트 파일 가져와서 ".!?" 단위로 끊어서 읽기. tts 페이지와 연동 필요 (#50)

* feat: 텍스트파일 추가 기능 (#50)

* fix: FileContent 파일명 오류수정 (#50)

* fix:불필요한 주석 제거, console문 제거, textInputStore에서 초기값 id:1로수정 (#50)

* fix:.?! 등 기호 출력되게 변경 (#50(

* feat:텍스트 파일 추가시 엔터로도 문단 구분되게 변경 (#50)

* feat:불필요한 주석 제거 (#50)

* feat: 문장 최대 갯수 설정 , 넘길시 경고창 이후 초과 문장 무시 (#50)

* feat: 파일 가져올때 에러처리 추가 (#50)

* fix: 파일 입력 초기화 코드 추가 , 같은 파일 중복 등록 가능 (#50)

* fix: 파일 입력 초기화 코드 추가 , 같은 파일 중복 등록 가능 (#50)
* feature: 로그인박스 레이아웃 (#33)

* feature: 로그인 화면 퍼블리싱 (#33)
* feat: vc 화면 기본배치

* feat: VC 사이드바 와이어프레임 적용

* feat: 코드리뷰 적용
* feature: 로그인박스 레이아웃 (#33)

* feature: 로그인 화면 퍼블리싱 (#33)

* feature:
- 로그인 API연동
- @tanstack/react-query 버전 업데이트
- tailwind.config.js animation 수정
- App.tsx 파일에 QueryClientProvider추가
- main,tsx 파일에 React Router Future Flag Warning 경고 무시 코드 추가
- apiClient.ts 생성하여 Axios 인스턴스화
- utils.ts 파일에 LoginError 클래스 추가
- handlers.ts 수정
(#55)

* feature: aipark_primary 컬러값 추가(#55)
* design: 슬라이더 색상 변경 (#53)

* feat: 파일업로드 진행상황 circularProgress로 나타내기 (#53)

* feat: 성공 실패에 따라 색상있는 점과 함께 완료,오류 표시 (#53)

* feat: 환경변수  ignore 추가 (#53)

* Delete .env
* feat: 프로젝트 생성 모달 적용

* feat: 홈 화면 디자인, 기능 개선

* feat: 코드리뷰 적용
* feat: TTS 작업창 페이지 퍼블리싱(#29)

* feat: TTS 텍스트 선택 삭제 기능(#29)

* feat: 텍스트 입력시에 텍스트 추가 -> 저장/취소 버튼 변경 기능추가(#29)

* feat: 상단 옵션 표시 버튼 추가(#29)

* feat: 상단 옵션 표시 버튼 여백 추가(#29)

* feat: 프로젝트 타이틀 수정할 수 있게 input 으로 변경(#29)

* feat: useOutsideClick, useTextInputs 와 tts 컴포넌트 분리 (#29)

* feat: CustomCheckbox 컴포넌트 추가 (#29)

* fix: CustomCheckbox ui 안나오는 문제 해결 (#29)

* feat: 텍스트 입력 최대 길이와 특수문자 제한 (#29)

* feat: 프로젝트 이름 최대 길이제한 추가(#29)

* feat: 필요없는 props 삭제 (#29)

* fix: TTSControlsProps 추가/TTS.tsx 오류 해결 (#29)

* feat: 텍스트 추가 버튼 클릭 시 옵션값도 한세트로 추가되게 수정 (#30)

* fix: 텍스트 입력시에 저장/취소 버튼으로 안바뀌는 에러 해결 (#30)

* feat: TTS Header 타이틀 수정 아이콘 추가 (#30)

* feat: 버튼 디자인 적용 (#30)

* feat: 텍스트 추가 버튼 디자인 변경 (#30)

* Design: 버튼 디자인 변경 (#30)

* feat: 성우선택 select 수정(#30)

* feat: 성우 선택 select 클릭 후 닫히는 액션 추가 (#30)

* design: 저장/취소 버튼 디자인(#30)

* feat: 목 데이터 추가 (#30)

* feat: 성우선택 select 다시 선택시 초기화되게 수정 (#30)

* feat: 텍스트 추가 버튼 클릭시 텍스트 추가 버튼도 같이 추가되게 수정(#30)

* design: 작업창 overflow:auto 추가(#30)

* fix: 불필요한 주석 제거 (#30)

---------

Co-authored-by: kimisadev27 <[email protected]>
* fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30)

* fix: 버그 수정 (#63)

* fix: 배포 api endPoint 등록 (#63)

---------

Co-authored-by: wonjichoe <[email protected]>
Co-authored-by: Haeun <[email protected]>
* feat: ttsVoice 호출api (#66)

* feat: popover 컴포넌트 분리 (#66)

* feat: ttsSidebar에 voiceSelectPopover 적용

* feat: 개별적용 버튼 생성 및 onclick함수 생성 (#66)

* feat: edit 탭에서 선택한 내용 ttsInputList에 적용 (#66)

* feat: edit에서 설정한 값 tts페이지 태그에 적용 (#66)

* feat: 체크박스 선택한 항목에 edit에서 적용한 설정 적용 (#66)
* fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30)

* fix: 버그 수정 (#63)

* fix: 배포 api endPoint 등록 (#63)

* fix: 재생성->TTS 생성워딩 수정(#30)

* feat: 텍스트 추가 버튼 인풋 영역 호버 시 나타나게 처리 (#30)

* feat: 텍스트 추가 클릭시 클릭한 영역 바로 다음에 새로운 영역 생성 (#30)

* feat: 버튼 양 사이드 영역 라인 추가 (#30)

* fix: 화살표 아이콘 삭제 (#30)

* feat: 저장/취소 버튼 input 옆으로 나오게(#30)

* design: 저장/취소 버튼 인풋창 안으로 수정(#30)

* fix: 타입에러 수정 (#30)

* feat: 선택한 체크박스 개수 표시되게하는 기능 추가(#30)

* fix: 불필요한 부분 삭제 (#30)

---------

Co-authored-by: Haeun <[email protected]>
* fix: TTSHeader.tsx 버튼 스타일 오류 수정(#30)

* fix: 버그 수정 (#63)

* fix: 배포 api endPoint 등록 (#63)

* fix: 재생성->TTS 생성워딩 수정(#30)

* feat: 텍스트 추가 버튼 인풋 영역 호버 시 나타나게 처리 (#30)

* feat: 텍스트 추가 클릭시 클릭한 영역 바로 다음에 새로운 영역 생성 (#30)

* feat: 버튼 양 사이드 영역 라인 추가 (#30)

* fix: 화살표 아이콘 삭제 (#30)

* feat: 저장/취소 버튼 input 옆으로 나오게(#30)

* design: 저장/취소 버튼 인풋창 안으로 수정(#30)

* fix: 타입에러 수정 (#30)

* feat: 선택한 체크박스 개수 표시되게하는 기능 추가(#30)

* fix: 불필요한 부분 삭제 (#30)

* feat: 옵션 값 표시 색상 기본값에서 달라지면 색상 표시 (#30)

* fix: EditContent.tsx

* feat: pencil 아이콘 클릭 시 프로젝트명 수정 (#30)

---------

Co-authored-by: Haeun <[email protected]>
* feature: 로그인박스 레이아웃 (#33)

* feature: 로그인 화면 퍼블리싱 (#33)

* feature:
- 로그인 API연동
- @tanstack/react-query 버전 업데이트
- tailwind.config.js animation 수정
- App.tsx 파일에 QueryClientProvider추가
- main,tsx 파일에 React Router Future Flag Warning 경고 무시 코드 추가
- apiClient.ts 생성하여 Axios 인스턴스화
- utils.ts 파일에 LoginError 클래스 추가
- handlers.ts 수정
(#55)

* feature: aipark_primary 컬러값 추가(#55)

* feature:로그인 API 연결 및 로그인 유지하기 기능추가 (#55)

* feature : 로그인, 로그아웃 api 연동 및 로그인 유지하기 기능개발
- auth.ts에 logoutRequest 추가
- HomeSidebar에 로그아웃 로직 추가
- authStore persist사용하여 로컬스토리지, 세션스토리지 사용
- auth관련 utils함수 위치 변경 (src/lib/utils.ts -> src/utils/auth.ts)

(#55)

* feature: signIn페이지 중복코드 제거(#55)
* feat:popover api 적용 (#73)

* fix: 코드래핏 ttsStyle typescript 조언 사항 수정 (#73)
* fix: 디자인 1차 수정, 레이아웃 색상 변경, 우측 사이드바 밑줄 생성 (#83)

* fix: 전체 선택 버튼 삭제

* fix: popover버튼 에러 발생시 alert 처리 (#83)

* fix: 텍스트 파일 추가 후 리스트에서 아이템간 간격 조절, CircularProgress 크기 조절 (#83)

* fix: 파일명과 상태 크기 조절 (#83)

* fix: cicularProgress 원크기 작게 수정 (#83)

* feat: edit 탭에서 슬라이더 조절에서 숫자 input창에 사용자가 입력도 가능하도록 변경 (#83)
* feature: 레이아웃 수정 (#77)

* feature: 레이아웃 수정 (#77)

* feature : 푸터 수정(#77)
* feat: tts 조회 api 연결 (#79)

* feat: tts 조회 옵션값도 불러오기 (#79)

* fix: 중복되는 id 원인 콘솔 에러 해결 (#79)

* fix: error 메세지 수정 (#79)
* feature: 로그인박스 레이아웃 (#33)

* feature: 로그인 화면 퍼블리싱 (#33)

* feature:
- 로그인 API연동
- @tanstack/react-query 버전 업데이트
- tailwind.config.js animation 수정
- App.tsx 파일에 QueryClientProvider추가
- main,tsx 파일에 React Router Future Flag Warning 경고 무시 코드 추가
- apiClient.ts 생성하여 Axios 인스턴스화
- utils.ts 파일에 LoginError 클래스 추가
- handlers.ts 수정
(#55)

* feature: aipark_primary 컬러값 추가(#55)

* feature:로그인 API 연결 및 로그인 유지하기 기능추가 (#55)

* feature : 로그인, 로그아웃 api 연동 및 로그인 유지하기 기능개발
- auth.ts에 logoutRequest 추가
- HomeSidebar에 로그아웃 로직 추가
- authStore persist사용하여 로컬스토리지, 세션스토리지 사용
- auth관련 utils함수 위치 변경 (src/lib/utils.ts -> src/utils/auth.ts)

(#55)

* feature: signIn페이지 중복코드 제거(#55)

* feature: Concat 기능개발(#72)

* feature: concat 기능개발 (#72)

* feature: concat stash했던 작업내용 병합

* feature: apiClient에 withCredentials true로 수정 (#72)

* feature: accordion 제거, dnd패키지 버전 고정, 오탈자수정(signIn > signin)
* feature: 텍스트 슬라이드 버그수정 (#89)

* feature : 로그인 배경색 꽉차게 수정 (#89)

* feature: useMemo삭제 (#89)

* feature: 로그인 배경확장 버그로 제거, 추후개발 예정(#89)
* feat: 프로젝트 생성 모달 적용

* feat: 홈 화면 디자인, 기능 개선

* feat: 코드리뷰 적용

* feat: vc페이지 디자인

* feat: VC 파일 재생, 다운로드기능 개발

* feat: 타입 지정 추가

* feat: 재생시간 표시

* feat: vc사이드바 기능개발

* feat: vc 텍스트파일 업로드 기능

* feat: 선택삭제 filter 적용

* feat: 원본오디오 등록 기능 추가

* feat: console.log 제거

* feat: merge develop 후 오류 수정

* feat: 홈 화면 수정

* feat: 목데이터 수정

* feat: 홈화면과 내 프로젝트 리스트 filter처리

* feat: 코드래빗 리뷰 반영
* feat: 회원가입 API 연결(#75)

* fix: 에러수정 (#75)

* feat: 약관 데이터 fetch (#75)

* design: 회원가입 페이지 디자인(#75)

* feat: 전체동의 기능 추가 (#75)

* feat: 이메일 인증 번호 api 연결(#75)

* feat: 이메일 인증번호 발송&확인 기능 추가 (#75)

* fix: 콘솔, 주석 삭제 (#75)

* feat: 유효성 검사 알림 (#75)

* feat:에러 정보 수정 (#75)

* feat: 회원가입 넘겨주는 데이터 수정 (#75)

* design: 버튼 색상 변경 (#75)

* fix: 비밀번호 유효성 수정 (#75)

* fix: 회원가입 에러메세지 수정 (#75)
* design: 메인화면 이중 스크롤 수정

* design: 버튼 디자인 통일

* feature: 로그인 화면 꽉차게 수정 (#92)

* design: 디자인 통일화, footer 재생바 수정

* design: 로그인페이지 텍스트 슬라이드 수정, 배경 수정

* design: 텍스트 수정

* feat: tts 효과없음, 초기화 기능

* design: footer 재 적용

* feat: 토스트알림 기능 추가

---------

Co-authored-by: Haeun <[email protected]>
@coderabbitai
Copy link

coderabbitai bot commented Dec 6, 2024

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@iamidlek iamidlek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다.
린트와 타입스크립트 활용이 잘 되지 않은 것 같습니다.
조금 더 타이트한 규칙으로 코드 정리가 필요해 보입니다.
백엔드 연동이 잘 되지 않아
여러 가지 확인이 불가한 점도 있는 것 같아 아쉽습니다.
추가적으로 궁금한 부분은 코멘트 남겨주시면 좋을 것 같습니다.

</p>
</>
)
<div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

불필요합니다.

Comment on lines +31 to +32
"@types/axios": "^0.14.4",
"@types/file-saver": "^2.0.7",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

devDependencies 에 있어야 할 것 같습니다.

import { CSSProperties } from 'react';
import { HomeSidebar } from '@/components/sidebar/HomeSidebar';
import Header from '@/components/header/Header';
import { Toaster } from '@/components/ui/toaster';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용하지 않는 코드 제거

}, [path]);

return (
<div style={style || undefined}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

무슨 의도로 이렇게 작성된 것일까요?


const useLogin = (resetForm: () => void) => {
const navigate = useNavigate();
const [rememberChecked, setrememberChecked] = useState(false);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일반적으로 setRememberChecked 컨벤션에 맞게 쓰면 좋을 것 같습니다.

@@ -0,0 +1,194 @@
"use client"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 설정이 들어간 것 같습니다.

input.id === id ? { ...input, text: newText } : input
),
editingId: prev.editingId === null ? id : prev.editingId,
}));
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prev.editingId ?? id 로 작성하면 보기 더 편할 것 같습니다.

detailAddr: requestData.detailAddr,
passAddr: requestData.passAddr,
termCode: 'TERMS002',
chkValid: requestData.memberTermCheckOrNotRequests.every(term => term.agreed) ? 'Y' : 'N',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

필요한 필드만 처리하는게 좋을 것 같습니다.

export const saveProject = async (props: IProjectProps) => {
try {
const { userData } = useAuthStore.getState();
if (!!!userData) throw new Error('로그인 정보를 불러오는데 실패했습니다.');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!!! 필요한 부분일까요?

@kimisadev27
Copy link
Collaborator Author

안녕하세요 멘토님
전역상태 관리에 대해 궁금한게 있어서 질문 남깁니다!

프로젝트 화면별로 전체적인 구조는 비슷해서 TTS로 예를 들어보겠습니다.
아래는 TTS화면의 구성예시입니다.

  • src\pages\TTS.tsx
  • src\components\tts\TTSHeader.tsx
  • src\components\tts\TTSControls.tsx
  • src\components\tts\TextInputList.tsx
  • src\components\sidebar\TTSSidebar.tsx
image

TextInputList에서 체크된 항목들의 고유번호를 전역상태로 관리해서
TTSControls에서 선택삭제, TTSSidebar에서 옵션설정, TTSHeader에서 저장할때 사용하고 있습니다.

이렇게 전역상태가 많은 컴포넌트에서 사용되도록 관리하는게 이번프로젝트에서 가장 해멨던 부분인데, 이렇게 전역상태를 관리하는 방법이 맞는지, 더 쉬운방법이나, 구조설계등에 대한 팁을 주시면 감사하겠습니다!

@iamidlek
Copy link

전역 상태 사용의 목적을 고려해 보시면 좋을 것 같습니다.
부모 자식의 트리 구조에서 컴포넌트에서 다른 형제 혹은 그 밖의 관계로 특정 상태를 공유하려고 할 때
결국은 관계의 공통 부모까지 상태를 올려야하는 문제가 있습니다.
단순히 상태의 관리가 어려워지는 것 뿐만아니라 그 부모에 딸린 자식 요소들이 전부 리렌더링되는 문제도 있을 수 있습니다.
그런 문제를 해결하고자 하는 것이 사용 목적입니다.

TextInputList에서 체크된 항목들의 고유번호를 전역으로 가지고 있어야 위의 문제들이 해결된다라고 생각되어져
사용하는 것이 맞다고 봅니다. 가장 간단한 방법일 것 같습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants