[FE] refactor: 랜딩 페이지 리팩토링 및 서비스 소개 section 제작 #371

ImxYJL · 2024-08-15T14:05:59Z

resolves [FE] LandingPage에 새로운 폼 형식을 도입하고, 서비스 소개 section을 추가한다. #354

🚀 어떤 기능을 구현했나요 ?

기존 URLGeneratorForm을 리팩토링했습니다.
- 비밀번호 Input 추가
ReviewAccessCode를 사용하는 부분을 제거했습니다.
URL 생성 후 등장하는 모달을 리팩토링했습니다.
페이지의 이름을 Landing에서 Home으로 변경했습니다.
리뷰미 프로세스를 소개하는 Section을 만들었습니다.
비밀번호를 확인할 수 있는 EyeButton 컴포넌트를 만들었습니다.

🔥 어떻게 해결했나요 ?

비밀번호에 4~20자 제한이 있는데, 현재 코드에서 에러 메세지를 띄울 때 길이 검사를 하면 페이지에 처음 들어왔을 때부터 input이 0자이므로 길이 에러가 뜬다는 문제점이 있었습니다.
이를 위해 포커스 된 이후에 에러 메세지를 띄우도록 onFocus와 onBlur 관련 이벤트를 처리해야 하지만 현재 시급한 부분은 아니라고 생각해서 다음과 같이 코드를 작성했습니다.
- URL 생성 버튼이 활성화되는 유효성 검사에서는 4~20자 검사를 수행합니다.
- 에러 메세지를 띄우는 검사에서는 20자 이하인지만 체크합니다.
- 이와 관련된 기능은 추후 textarea처럼 별도의 훅으로 관리할 예정입니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

소개 페이지에서 각 단계별 내용을 소개하는 div의 배경색이 sidebarBackground로 나와있는데, 실제로 이 색상을 적용하면 피그마와 달리 어둡게 나옵니다. 아마 투명도가 적용돼서 그런 것 같습니다.
~~css는 적당히 깎았는데 크게 거슬리는 부분이 있다면 말씀해주세용~~
ㄴ 얘기 나왔던 대로 서비스 소개 Section은 임시로 놔두기로 했습니다. 현 디자인상 한 화면에 다 들어오게 하려면 글씨가 너무 작아지는 문제가 있습니다

📚 참고 자료, 할 말

…eview-me into fe/refactor/354-new-landing-page

Co-authored-by: badahertz52 <[email protected]>

BadaHertz52 · 2024-08-16T08:42:34Z

frontend/src/components/common/EyeButton/styles.ts

+  top: calc((100% - 1.6rem) / 2);
+  right: 1rem;
+
+  width: 1.6rem;


추후에 width, height를 상수로 빼도 좋을 듯!

BadaHertz52 · 2024-08-16T08:44:52Z

frontend/src/pages/HomePage/components/OverviewItem/styles.ts

+  justify-content: center;
+  gap: 2rem;
+
+  background-color: white;


background-color 에서 theme에 있는 white를 사용하는 것은 어떨까요?

BadaHertz52 · 2024-08-16T08:46:05Z

frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx

@@ -74,7 +73,7 @@ const ReviewAccessForm = () => {
          />
          <Button
            type="button"
-            styleType={isValidAccessCodeInput(groupAccessCode) ? 'primary' : 'disabled'}
+            // styleType={isValidAccessCodeInput(groupAccessCode) ? 'primary' : 'disabled'}


이 부분을 주석처리한 이유가 뭘까요?

아마 groupAccessCode를 사용하지 않으니 제거하고 무언의 테스트를 해보려다가 다시 살린 것 같네요..ㅋㅋㅋ 이제 사용하지 않는 컴포넌트라 아예 삭제했습니다.

…eview-me into fe/refactor/354-new-landing-page

BadaHertz52 · 2024-08-16T08:49:21Z

frontend/src/pages/HomePage/components/ReviewMeOverview/index.tsx

+        />
+
+        <OverviewItem
+          direction="column"


OvervieItem 이라는 멋진 컴포넌트를 만들었내요.

추후에 리팩토링을 한다면, OverviewItem 에 사용하는 내용들을 객체로 관리하면 좋을 듯해요.

soosoo22 · 2024-08-16T08:48:37Z

frontend/src/pages/HomePage/components/ReviewAccessForm/index.tsx

@@ -74,7 +73,7 @@ const ReviewAccessForm = () => {
          />
          <Button
            type="button"
-            styleType={isValidAccessCodeInput(groupAccessCode) ? 'primary' : 'disabled'}
+            // styleType={isValidAccessCodeInput(groupAccessCode) ? 'primary' : 'disabled'}


주석 지워주면 좋을 것 같아요!

사용하지 않는 컴포넌트라 아예 삭제했습니당

soosoo22

지금 홈 페이지에서 세로로 스크롤이 생기는데, 처음 화면에 들어왔을 때 스크롤이 생기는 것 보다는 이미지와 글씨가 작더라도 한 화면에 다 나오는 게 좋다고 생각하는데 올리는 어떻게 생각하시나요???

BadaHertz52

올리 페이지 작성하느라 고생했어요

코멘트 남겼지만, 아직은 문제될 사항은 아니라서 approve할게요
onFocus,onBlur 시 에레메세지는 데모데이안에 구현해야할 것 같아서 이 부분은 월요일 프론트회의에서 다뤄봐요

BadaHertz52 · 2024-08-17T10:32:22Z

frontend/src/pages/HomePage/components/OverviewItem/index.tsx

+  description: string[];
+}
+
+const OverviewItem: React.FC<OverviewItemProps> = ({ direction, imageSrc, title, description }) => {


Suggested change

const OverviewItem: React.FC<OverviewItemProps> = ({ direction, imageSrc, title, description }) => {

const OverviewItem: = ({ direction, imageSrc, title, description }:OverviewItemProps) => {

이라고 하지 않고 React.FC<OverviewItemProps> 을 사용한 이유가 있나요?

BadaHertz52 · 2024-08-17T10:33:44Z

frontend/src/pages/HomePage/components/ReviewURLModal/index.tsx

+
+  const handleCloseButtonClick = () => {
+    if (isChecked) closeModal();
+    return;


return 을 한 이유가 있나요?

FC랑 쓸데없는 리턴 지웠어요~!

BadaHertz52 · 2024-08-17T10:39:33Z

frontend/src/pages/HomePage/components/ReviewURLModal/index.tsx

+        <S.WarningWrapper>
+          <S.CheckContainer>
+            <Checkbox
+              id="is-confirmed-checkbox"


is-confrimed-checkbox id는 어디서 사용하는 건가요?

id는 유일한 값이여아하는데 'is-confrimed-checkbox' 는 어디선가 또 쓸 수 있어서 useId를 사용해보는 것도 좋을 것 같아요

id를 따로 사용하는 곳은 없고 checkbox에서 id를 필수로 받고 있어서 기입했던 것 같아요
useId는 무엇일까요?!

BadaHertz52 · 2024-08-17T10:48:44Z

frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx

+  confirm: 'CONFIRM',
+};
+
+const URLGeneratorForm = () => {


input개수 만큼 state가 있고 URLGeneratorForm 의 태그가 현재는 section이네요

리뷰생성을 위한 데이터를 하나의 state에서 관리할 수 있는 방법도 있고 input 개수 만큼의 state로 관리하는 방법이 있는데
각 방법의 장단점이 있죠

이 부분이 어떻게 리팩토링 될지 (좋은 방향으로) 기대됩니다! 😆

URLGeneratorForm은 section이고, 그 자식 컴포넌트인 FormLayout이 form인 상태입니다.

예전 레이아웃에서는 URL 생성, 리뷰 확인의 폼 배치가 달라서 FormLayout에 폼 정렬 속성(row, col)을 받을 수 있는 컴포넌트로 특화시키고, 그 FormLayout을 사용하는 최상위 컴포넌트(Container 느낌)로 URLGeneratorForm을 뒀었는데 폼이 하나만 있는 지금은 불필요한 코드일 수 있겠다는 생각이 들었어요.
하지만 일단은 업보로 달아두는 것으로..,😶

soosoo22

랜딩 페이지 한층 업그레이드~ 됐네요! 수고했어요!!

soosoo22

올리 수고했어요!

soosoo22 · 2024-08-17T12:33:39Z

frontend/src/pages/HomePage/components/ReviewMeOverview/styles.ts

+  margin-bottom: 3rem;
+`;
+
+export const OverviewTitle = styled.h2`


저번에 바다가 말해줬던 것 처럼 현재 h1 태그가 사용되고 있지 않아서 h2 보다는 span으로 변경해주시면 좋을 것 같아요!

타이틀은 제목인 만큼 줄바꿈 및 강조가 있어야 한다고 생각해서 p태그로 수정했습니다~~

soosoo22 · 2024-08-17T12:39:38Z

frontend/src/pages/HomePage/components/ReviewURLModal/index.tsx

+        <S.WarningWrapper>
+          <S.CheckContainer>
+            <Checkbox
+              id="is-confirmed-checkbox"
+              isChecked={isChecked}
+              handleChange={handleCheckboxClick}
+              $style={{ width: '2.3rem', height: '2.3rem' }}
+            />
+            <S.CheckMessage>URL을 저장해두었어요!</S.CheckMessage>
+          </S.CheckContainer>
+          <S.Warning>* 창이 닫히면 URL을 다시 확인할 수 없어요!</S.Warning>
+        </S.WarningWrapper>


코드컨벤션보면 Wrapper가 하나의 요소를 감쌀 때 사용되고, Container가 여러 개의 요소를 감쌀 때 사용된다고 적혀있어요. Wrapper가 Container보다 상위에 있어서 조금 어색한 것 같아요!

반영했습니다~

soosoo22 · 2024-08-17T12:43:22Z

frontend/src/pages/HomePage/styles.ts

+export const HomePage = styled.div`
+  display: flex;
+  min-height: 100vh;
+  width: 100vw;
+`;


지금 첫 화면 들어왔을 때 세로 스크롤이 생기는 이유 중 하나가 min-hiehgt: 100vh 인 것 같다는 느낌이? 살짝 드네요.

리팩토링 초기에는 min-hiehgt: 100vh가 없으면 보라색 배경이 화면 끝까지 닿지 못하고 잘리는 문제가 있었는데, 지금 코드에서는 없애도 잘 동작하네요~
하지만 스크롤바가 생기는 이유는 해당 section 안의 요소 크기 때문인거라 이 요소들의 크기를 줄여야 하는데 스크롤바가 없을 정도로 줄이면 안내의 의미가 없어질 정도로 작아져야 해서 문제입니다 😢

soosoo22 · 2024-08-17T12:44:44Z

frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx

+  const getCompleteURL = (reviewRequestCode: string) => {
+    return `${window.location.origin}/user/review-writing/${reviewRequestCode}`;
+  };


리뷰 작성 경로를 constants/routes.ts 에 정의되어 있는 상수들을 활용해보는 건 어떨까요

상수 도입 전에 작성한 코드라 하드코딩이 남아있네요 수정할게요~~

soosoo22 · 2024-08-17T12:45:12Z

frontend/src/pages/index.tsx

-export { default as LandingPage } from './LandingPage';
+export { default as HomePage } from './HomePage';


와우! 랜딩에서 홈으로 바로 변경해주셨네요👍

chysis

리뷰만 달아놓고 Finish를 안 했었네요😅 고생했어요!

chysis · 2024-08-16T08:48:30Z

frontend/src/pages/HomePage/utils/validateInput.test.ts

input 유효성 검사 테스트까지 진행하셨네요👍

BadaHertz52 · 2024-08-18T05:45:14Z

frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx

+  };
+
+  const getCompleteURL = (reviewRequestCode: string) => {
+    return `${window.location.origin}/user/review-writing/${reviewRequestCode}`;


이제 url이 리뷰 작성 페이지가 아니라 리뷰 연결 페이지로 이동하게 해서 수정해야겠어요.!

ImxYJL added 9 commits August 15, 2024 14:45

chore: LandingPage를 HomePage로 변경

848b56c

refactor: 새 HomePage의 Form 부분 퍼블리싱

60f1902

refactor: 문자열 길이 검증 함수에서 최소 길이도 검증할 수 있도록 변경

5a064a6

test: 변경된 문자열 길이 검증 함수에 대한 테스트 추가

827a481

refactor: 컴포넌트에 비밀번호 유효성 검사 추가

5fd81d9

refactor: ReviewGroupDataModal 스타일 조정

d69b555

refactor: URL을 안내하는 모달 이름 수정

8c3e235

feat: 리뷰미 소개 페이지 1차 퍼블리싱

e19ec0e

chore: 불필요한 페이지 삭제

b070350

ImxYJL added 🍀 FE 우선순위: 중 🚀 기능 🛠️ 리팩터링 labels Aug 15, 2024

ImxYJL added this to the 4차 스프린트: 최종 milestone Aug 15, 2024

ImxYJL requested review from chysis, BadaHertz52 and soosoo22 August 15, 2024 14:05

ImxYJL self-assigned this Aug 15, 2024

ImxYJL linked an issue Aug 15, 2024 that may be closed by this pull request

[FE] LandingPage에 새로운 폼 형식을 도입하고, 서비스 소개 section을 추가한다. #354

Closed

ImxYJL and others added 11 commits August 16, 2024 10:40

refactor: 스타일 수정

5b80f51

refactor: 폼 멘트 수정

1488b6d

Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…

7f3fe82

…eview-me into fe/refactor/354-new-landing-page

feat: 입력한 비밀번호를 확인할 수 있는 EyeButton 컴포넌트 작성

b720ca0

refactor: URLGeneratorForm에 EyeButton 적용

441cb51

refactor: EyeButton 위치 수정

834ad40

chore: 불필요한 import 제거

f85dbf9

fix: EyeButton 위치 고정

332374d

refactor: 소개 페이지의 화살표 위치 조정

3b16f3e

fix: EyeButton 위치 에러 수정

c911242

Co-authored-by: badahertz52 <[email protected]>

refactor: EyeButton 크기 조정

a79d31c

BadaHertz52 reviewed Aug 16, 2024

View reviewed changes

Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…

1c75f74

…eview-me into fe/refactor/354-new-landing-page

BadaHertz52 reviewed Aug 16, 2024

View reviewed changes

ImxYJL added 3 commits August 16, 2024 17:50

chore: 사용하지 않는 파일 삭제

d3656e7

fix: h3 삭제

353b4ad

chore: 사용하지 않는 파일을 index에서 제거

775b8dc

soosoo22 requested changes Aug 16, 2024

View reviewed changes

soosoo22 reviewed Aug 16, 2024

View reviewed changes

ImxYJL added 2 commits August 17, 2024 15:14

refactor: EyeButton 사이즈 상수화

88616ec

refactor: OverviewItem의 배경색을 theme의 배경색으로 변경

eed9e44

BadaHertz52 approved these changes Aug 17, 2024

View reviewed changes

ImxYJL added 2 commits August 17, 2024 20:11

fix: React.FC 제거

924d05e

refactor: 불필요한 리턴 제거

7e80417

soosoo22 approved these changes Aug 17, 2024

View reviewed changes

ImxYJL added 3 commits August 17, 2024 23:34

refactor: 불필요한 css 삭제

e5e1bf7

refactor: 불필요한 스타일 컴포넌트 삭제

94cd8cd

fix: 상위 태그가 없는 h태그 삭제

c405f0f

chysis approved these changes Aug 17, 2024

View reviewed changes

frontend/src/pages/HomePage/utils/validateInput.test.ts Outdated

Copy link

Contributor

chysis Aug 16, 2024

Choose a reason for hiding this comment

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

input 유효성 검사 테스트까지 진행하셨네요👍

BadaHertz52 reviewed Aug 18, 2024

View reviewed changes

ImxYJL merged commit fb2ecce into develop Aug 18, 2024
3 checks passed

donghoony deleted the fe/refactor/354-new-landing-page branch August 23, 2024 02:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] refactor: 랜딩 페이지 리팩토링 및 서비스 소개 section 제작 #371

[FE] refactor: 랜딩 페이지 리팩토링 및 서비스 소개 section 제작 #371

ImxYJL commented Aug 15, 2024 •

edited

Loading

BadaHertz52 Aug 16, 2024

BadaHertz52 Aug 16, 2024

BadaHertz52 Aug 16, 2024

ImxYJL Aug 17, 2024

BadaHertz52 Aug 16, 2024

soosoo22 Aug 16, 2024

ImxYJL Aug 17, 2024

soosoo22 left a comment

BadaHertz52 left a comment

BadaHertz52 Aug 17, 2024

BadaHertz52 Aug 17, 2024

ImxYJL Aug 17, 2024

BadaHertz52 Aug 17, 2024

ImxYJL Aug 17, 2024

BadaHertz52 Aug 17, 2024

ImxYJL Aug 17, 2024

soosoo22 left a comment

soosoo22 left a comment

soosoo22 Aug 17, 2024

ImxYJL Aug 17, 2024

soosoo22 Aug 17, 2024

ImxYJL Aug 17, 2024

soosoo22 Aug 17, 2024

ImxYJL Aug 17, 2024 •

edited

Loading

soosoo22 Aug 17, 2024

ImxYJL Aug 17, 2024

soosoo22 Aug 17, 2024

chysis left a comment

chysis Aug 16, 2024

BadaHertz52 Aug 18, 2024

	const OverviewItem: React.FC<OverviewItemProps> = ({ direction, imageSrc, title, description }) => {
	const OverviewItem: = ({ direction, imageSrc, title, description }:OverviewItemProps) => {

		export { default as LandingPage } from './LandingPage';
		export { default as HomePage } from './HomePage';

[FE] refactor: 랜딩 페이지 리팩토링 및 서비스 소개 section 제작 #371

[FE] refactor: 랜딩 페이지 리팩토링 및 서비스 소개 section 제작 #371

Conversation

ImxYJL commented Aug 15, 2024 • 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

soosoo22 left a comment

Choose a reason for hiding this comment

BadaHertz52 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

soosoo22 left a comment

Choose a reason for hiding this comment

soosoo22 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

ImxYJL Aug 17, 2024 • 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

chysis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ImxYJL commented Aug 15, 2024 •

edited

Loading

ImxYJL Aug 17, 2024 •

edited

Loading