search

DS-Volare / front-end

Plotter, 자연어 처리 기반 소설 IP 확장 솔루션
0 stars 0 forks source link

[Feat/main page] 메인페이지 샘플 데이터 변환 API 연결, 이외 css 스타일 및 애니메이션 수정 #42

Closed otcroz closed 1 month ago

otcroz commented 1 month ago

✨ 이 PR에서 핵심적으로 변경된 사항은 무엇일까요?

문제를 해결하면서 주요하게 변경된 사항들을 적어 주세요.

  • 샘플 데이터 API 연결

🔖 핵심 변경 사항 외에 추가적으로 변경된 부분이 있나요?

없으면 "없음" 이라고 기재해 주세요

  • 나브바 로고 변경
  • 메인페이지 첫 번째 박스 로고 애니메이션 적용
  • 인디케이터 hover시에 애니메이션 적용
  • image 태그 인식되지 않는 경고 -> img 태그로 수정

🙏 Reviewer 분들이 이런 부분을 신경써서 봐 주시면 좋겠어요

개발 과정에서 다른 분들의 의견은 어떠한지 궁금했거나 크로스 체크가 필요하다고 느껴진 코드가 있다면 첨부해주세요.

  • 백엔드 팀 왈, pre 태그를 사용하면 프론트 단에서 텍스트에 /t /n이 string으로 출력되지 않고 잘 적용된다고 했습니다. 하지만 저는 css의 설정으로 해결했답니다.
  • input의 width가 고정되어 있어서 /t /n을 적용해도 가독성이 좋은 편은 아니네요.
  • 이대로 사용자에게 보여줘도 괜찮을지?
  • overflow-x를 주면 사용자가 스크롤을 해야 하지만 우리가 원하는 출력 결과로 보여줄 수 있어요.
  • 입력값은 아직 샘플내용 1, 샘플내용2 ...로 보이는 것이 맞습니다. 백엔드 단에서 샘플 API 요청시 사용한 원본 소설을 받지 못했어요. 아마 어떤 샘플을 사용할지 정해지면 백엔드 팀에서 보내줄 것 같습니다.

➕ 관련 이슈 링크

otcroz commented 1 month ago

현재 백엔드 서버 및 DB가 배포되지 않아 샘플 데이터 API의 동작을 확인하려면 DB에 샘플 데이터를 넣어줘야 합니다.

1. pdAdmin4 열기

image

2. script 테이블 누르고 아이콘(1)을 누른 뒤 입력창에 아래 SQL문 실행

INSERT INTO public.scripts (created_at, modified_at, script_id, novel_id, script_file, type) VALUES ('2024-08-04 20:17:32.936160', '2024-08-04 20:17:32.936160', 1, null, e'
#1. 길 위 (D)

늑대      (문을 닫고 할머니 침대 속으로 들어가 빨간 모자를 쓴 아이를 기다렸어요.) 거기 누구냐?
      (가능한 한 가장 부드러운 목소리로 아이에게 소리쳤어요.) 저 할머니 손녀딸, 빨간 모자를 쓴 아이에요, 엄마가 할머니께 핫케이크 하나랑 버터 작은 병 하나를 가져다드리라고 심부름 보내셨어요.
엄마      (핀을 끌어당기니 문이 열렸어요.) 열쇠를 돌리면, 그럼 자물쇠가 돌아갈 게다.
늑대      (옷을 벗고 침대 속으로 들어갔어요.) 케이크와 버터 병은 빵 저장통 속에 두고, 넌 우선 이리와 나와 함께 누우렴.
', 'SAMPLE1');

✅ SQL문의 SAMPLE1을 SAMPL2, SAMPLE3, SAMPL4로 바꿔가면서 실행해주면 4개의 샘플 데이터가 들어갑니다.

3. 2. 스키마 데이터를 확인할 수 있는 창에서 Script에 값이 잘 들어갔는지 확인

image