[Feat]회원가입 온보딩 페이지 구현 by eileen4505 · Pull Request #25 · Leets-Official/SEEAT-FE

eileen4505 · 2025-07-22T16:34:29Z

🔍 관련된 이슈

closed [Feat] #19 회원가입 및 온보딩 페이지 구현 #19

📝 작업 내용

[온보딩 Step1] 닉네임 입력 화면 UI 및 기능 구현
- 상단 진행 바, 프로필 이미지 영역, Input 필드 구현
- 닉네임 입력값에 따라 '다음' 버튼 활성화/비활성화 처리
[온보딩 Step2] 선호 장르 선택 화면 UI 구현
- 장르 최대 3개까지 선택 가능하도록 로직 처리
- ToggleTab(IMAX / Dolby) UI 컴포넌트 개발 및 적용
[온보딩 Step3] 자주 가는 영화관 선택 화면 UI 구현
- 영화관 리스트 렌더링 및 선택 토글 기능 구현 (최대 3개)
- zustand를 활용한 온보딩 전역 상태 관리 로직 설계 및 적용

📸 스크린샷

2025-07-23.1.29.34.mov

2025-07-23.1.30.23.mov

🚨 이슈

이전에 브랜치를 헷갈려서 작업해서 이미 머지된 부분도 있고 이번에 새로 수정한 부분들도 있는데, 이 부분 참고해서 봐주시면 감사하겠습니다🫶🏻
Inuptr과 Header 컴포넌트 UI가 피그마 디자인과 달라 더 수정이 필요할 것 같습니다,,

📣 리뷰 요구사항

-nickname 페이지의 Input 컴포넌트 위에 *텍스트를 어떻게 처리해야 보이지 않을지 의견 주시면 감사하겠습니다!
-input 컴포넌트의 '+' 아이콘과, Header 컴포넌트의 저장과 좋아요 아이콘도 보이지 않게 처리하는 방법도 의견 주시면 감사하겠습니다,,🥹

✅ 체크리스트

코드가 정상적으로 컴파일되나요?
merge할 브랜치의 위치를 확인했나요?
Label을 지정했나요?
리뷰어를 지정했나요?

…into feat/#19/회원가입-온보딩-페이지-구현

sispo3314

코드도 깔끔하고 디자인 요구 사항에 맞게 잘 구현하신 것 같아요!! 제가 이전 PR에서 공통 컴포넌트 수정해두어서 수정된 항목 확인하시고 적용해주세요!

sispo3314 · 2025-07-22T17:22:23Z

src/pages/onboarding/OnboardingGenrePage.tsx

-      </button>
+    <div className="min-h-screen bg-gray-900 text-white w-full max-w-[375px] mx-auto relative pb-32">
+      {/* 상단 헤더 */}
+      <Header title="" onBackClick={handleBack} />


제 PR에서 헤더 공통 컴포넌트를 수정해두어서 아이콘을 선택적으로 지우실 수 있게 해뒀습니다!
pull 하신 다음에 showLike={false} showBookmark={false} 추가하시면 헤더에서 아이콘이 보이지 않을거예요 👍👍

확인했습니다! showLike, showBookmark props 덕분에 아이콘 잘 제거했습니다 :)

sispo3314 · 2025-07-22T17:23:46Z

src/pages/onboarding/OnboardingGenrePage.tsx

-import ToggleTab from '@/components/common/ToggleTab/ToggleTab';
-import { useOnboardingStore } from '@/store/useOnboardingStore';
+import Header from '@/components/common/Header/Header';
+import Button from '@/components/common/Button';


여기는 import {Header, Button} from '@/components' 이런식으로 더 간단하게 쓰실 수 있습니다!

넵! 통일된 구조로 수정했습니다.

sispo3314 · 2025-07-22T17:24:50Z

src/pages/onboarding/OnboardingNicknamePage.tsx

-import { useOnboardingStore } from '@/store/useOnboardingStore';
+import { Button } from '@/components';
+import Input from '@/components/common/Input/Input';
+import Header from '@/components/common/Header/Header';


여기도 마찬가지로 import {Button, Input, Header} from '@/components' 이런 식으로 써주시면 코드가 더 깔끔해질 것 같습니다👍👍

이 부분도 동일하게 반영했어요! 감사합니다

sispo3314 · 2025-07-22T17:28:23Z

src/pages/onboarding/OnboardingNicknamePage.tsx

+            placeholderColorType="gray"
+            showBackground={true}
+          />
+        </div>


Input 컴포넌트도 제가 onClickPlus prop을 전달받지 않으면 + 버튼 랜더링 되지 않도록 수정해두었습니다! pull하신 후에 잘 적용되는지 한 번 확인해주세요 🙌🙌

dalzzy

수고하셨습니다~ 코멘트 남겨뒀으니 확인 부탁드려요!! 그리고 pull 하셔서 변경사항 확인해주시고 충돌도 해결해주셔야 할 것 같습니다....ㅜㅜ 전체 페이지에 설정된 배경색이나 패딩은 다 제거해주세요. 자세한 건 코멘트 확인 부탁드립니다

그리고 pr 제목도 컨벤션에 맞게 수정부탁드릴게용

dalzzy · 2025-07-23T07:25:15Z

src/pages/signup/LoginPage.tsx

-        <button className="flex items-center justify-center gap-2 w-full h-12 rounded bg-[#FEE500] text-black text-sm font-semibold">
+        {/* 카카오 로그인 */}
+        <button className="flex items-center justify-center gap-2 w-full h-12 rounded bg-[#FEE500] text-black text-body-1 font-semibold">
          <img src={KakaoIcon} alt="Kakao" className="w-5 h-5" />


아이콘은 img 태그가 아닌 컴포넌트 형태로 사용하는 방식으로 통일하면 좋을 것 같아요~
또한, 맨 위 import 문에서 아이콘들은 모두 @/assets 경로를 통해 import하도록 해주시고,
아이콘 파일 네이밍은 스네이크 케이스(ex. kakao_icon) 로 통일하기로 정했습니다~

@/assets/index.ts 파일에 아래와 같이 export를 추가해주시고,

import KakaoIcon from '@/assets/kakao_icon.svg?react'; import NaverIcon from '@/assets/naver_icon.svg?react'; export { KakaoIcon, NaverIcon, ... };

img 태그 대신 처럼 컴포넌트 형태로 사용해주시면 됩니당~

그리고 피그마 디자인이랑 아이콘 위치가 다른 것 같아요~ 그리고 icon 파일 위치도 잘못된 것 같아요 assets가 아니라 assets/icons 폴더 안에 있어야합니당

말씀해주신 대로 아이콘 경로와 네이밍, export 방식 모두 통일했고, 디자인 상 아이콘 위치도 좀 더 아래로 수정했습니다..!

피그마확인해보니까 아이콘위치가 다시 바껴서.. 이 부분은 그대로 둬도 괜찮을 것 같아용..!

dalzzy · 2025-07-23T07:31:09Z

src/pages/signup/LoginPage.tsx

+    <div className="flex flex-col items-center justify-center h-screen bg-gray-900 px-6">
+      {/* 그래픽 자리 */}


기본 배경색은 전역으로 설정해두었기 때문에, 별도로 지정하지 않으셔도 될 것 같아요~

또 올려주신 영상을 확인해보니, 이미 모바일 너비 기준으로 화면이 설정되어 있는데 여기에 추가로 패딩이 들어가서 전체적으로 화면이 조금 좁아 보이는 것 같아요.

혹시 페이지마다 좌우 패딩이나 배경색을 따로 설정해두신 부분이 있다면, 전부 제거해주시는 게 더 깔끔할 것 같습니다!

전역에서 배경색 설정이 이미 되어 있어서 해당 속성들 제거했고,
여백이나 너비 관련한 부분들도 모두 통일감 있게 수정했습니다! 감사합니다 🙇‍♀️

dalzzy · 2025-07-23T07:31:37Z

src/pages/onboarding/OnboardingGenrePage.tsx

+const genreOptions = [
+  '액션', '호러', '스릴러', '코미디',
+  'SF', '로맨스', '판타지', '미스터리',
+  '범죄', '모험', '전쟁', '역사',
+  '뮤지컬', '애니메이션', '드라마',
+] as GenreType[];


이것도 types폴더로 분리해주시는게 깔끔할 것 같습니당~

types 폴더로 각각 분리해서 관리하도록 수정 완료했습니다~! 말씀 감사합니다 🙏

dalzzy · 2025-07-23T07:32:55Z

src/pages/onboarding/OnboardingGenrePage.tsx

-      >
-        다음
-      </button>
+    <div className="min-h-screen bg-gray-900 text-white w-full max-w-[375px] mx-auto relative pb-32">


말씀드렸듯이, 이 부분에서도 배경색, 너비, 높이 관련 속성은 제거해주셔도 괜찮을 것 같아요~~

dalzzy · 2025-07-23T07:36:41Z

src/pages/onboarding/OnboardingTheaterPage.tsx

+const theaterData: Record<CinemaFormat, CinemaType[]> = {
+  IMAX: [],
+  Dolby: [
+    '남양주현대아울렛 스페이스원',
+    '대구 신세계(동대구)',
+    '대전신세계아트앤사이언스',
+    '송도(트리플스트리트)',
+    '수원AK플라자(수원역)',
+    '안성스타필드',
+    '코엑스',
+  ],
+};


이것도 types폴더로 분리하는게 좋을 것 같아용

dalzzy · 2025-07-23T07:46:26Z

src/pages/onboarding/OnboardingNicknamePage.tsx

+      {/* 진행도 바 */}
+      <div className="mt-6 mb-2">
+        <div className="h-2 w-full bg-gray-800 relative">
+          <div className="absolute left-0 top-0 h-full bg-red-400" style={{ width: '33.33%' }} />
+        </div>
+      </div>


진행도 바를 현재 방식처럼 보여주는 것도 간단하고 나쁘지 않다고 생각하지만,
진행바를 컴포넌트로 분리해서 currentStep과 totalSteps를 props로 받아서 width를 계산하도로 하는게 재사용성과 유지보수 측면에서 더 좋을 것 같은데 세렴님 의견은 어떠신가용??

말씀해주신 대로 수정하는게 관리하기에 더 좋을 것 같아서, 진행도 바를 currentStep, totalSteps prop 기반으로 분리했고, 진행 텍스트(1/3, 2/3 등)도 함께 컴포넌트 내부로 이동해서 통합 관리하도록 했습니다!

dalzzy · 2025-07-23T07:49:39Z

src/pages/onboarding/OnboardingNicknamePage.tsx

+        {/* 진행도 */}
+        <div className="text-title-1 text-white mb-3">1/3</div>


추가로, 1/3, 2/3, 3/3과 같은 텍스트도
진행도 바 컴포넌트 안에서

<div className="text-title-1 text-white mb-3"> {currentStep}/{totalSteps} </div>

처럼 함께 관리하면 더 일관성 있게 관리할 수 있을 것 같아요~!

dalzzy · 2025-07-23T07:51:16Z

src/pages/onboarding/OnboardingNicknamePage.tsx

온보딩 페이지에서 공통되는 속성들이 많은데 지민님이 올려주신 pr #23 에 제가 남겼던 리뷰 참고해서 라우팅 방식을 수정하는 것도 좋을 것 같다는 생각이 듭니다~~ 참고해주시면 좋을 것 같아요~

dalzzy · 2025-07-23T07:54:05Z

src/pages/signup/LoginPage.tsx

+        {/* 네이버 로그인 */}
+        <button className="flex items-center justify-center gap-2 w-full h-12 rounded bg-[#03C75A] text-white text-body-1 font-semibold">


카카오 로그인, 네이버 로그인 배경색상은 제가 global.css에 추가해뒀습니다. 직접 색상값을 사용하지 않고 global.css에 선언해둔 값으로 사용하는게 좋을 것 같아용~

global.css에 정의된 색상 변수 활용하도록 수정했습니다!

dalzzy · 2025-07-23T07:54:45Z

src/pages/onboarding/OnboardingTheaterPage.tsx

+import Button from '@/components/common/Button';
+import ToggleTab from '@/components/common/ToggleTab';
+import Header from '@/components/common/Header/Header';


이 부분도 @/components 에서 한번에 import하도록 하면 깔끔할 것 같아용

중복 import 정리하고 @/components 경로에서 한 번에 import 하도록 수정했습니다~!

dalzzy · 2025-07-27T07:02:07Z

src/pages/signup/LoginPage.tsx

+import KakaoIcon from '@/assets/icons/kakao_icon.svg';
+import NaverIcon from '@/assets/icons/naver_icon.svg';

 function LoginPage() {
  return (
-    <div className="flex h-screen flex-col items-center justify-center bg-[#1E1E1E] px-6">
-      <div className="mb-24 text-center">
-        <h1 className="text-white">그래픽,,들어갈 자리,,</h1>
+    <div className="relative h-screen w-full bg-[#1E1E1E]">
+      {/* 중앙 그래픽 자리 */}
+      <div className="flex h-full flex-col items-center justify-center">
+        <h1 className="text-white text-center">그래픽,,들어갈 자리,,</h1>
      </div>

-      <div className="flex w-full max-w-xs flex-col gap-4">
-        <button className="flex h-12 w-full items-center justify-center gap-2 rounded bg-[#FEE500] text-sm font-semibold text-black">
-          <img src={KakaoIcon} alt="Kakao" className="h-5 w-5" />
-          카카오로 시작하기
-        </button>
+      {/* 소셜 로그인 버튼 */}
+      <div className="absolute bottom-40 left-0 w-full px-6">
+        <div className="flex flex-col gap-4 w-full max-w-xs mx-auto">
+          {/* 카카오 로그인 */}
+          <button className="flex h-12 w-full items-center justify-center gap-2 rounded bg-kakao text-sm font-semibold text-black">
+            <img src={KakaoIcon} alt="Kakao" className="h-5 w-5" />
+            카카오로 시작하기
+          </button>



아이콘을 img태그로 사용하지않고 컴포넌트로 사용하는 걸 권장드렸습니다,,,,, ㅜㅜ 제가 남긴 코멘트보고 수정해주시면 돼용

sispo3314

코드 수정해주신 부분 확인했습니다! 공통 컴포넌트가 수정된 부분이 꽤 있어서 바꾸실 부분이 많으셨을 것 같은데 수고 많으셨어용....🫶🫶

eileen4505 added 9 commits July 16, 2025 03:24

fix: route.tsx 수정

347108e

Merge branch 'develop' of https://github.com/Leets-Official/SEEAT-FE …

daa29f3

…into feat/#19/회원가입-온보딩-페이지-구현

refactor: ToggleTab 관련 파일 통합 export 구조 개선

855ed93

feat: 온보딩 닉네임 입력 화면 구현

4e7e8cf

feat: 온보딩 장르,영화관 선택화면 UI구현

e77e9b3

feat: 온보딩 전역 상태관리 store 및 타임 정의

416ab8b

feat: 로그인/회원가입 UI구현_카카오,네이버 버튼 포함

c34270c

feat: 스플래시 페이지 UI 구현

5a6f23f

fis: 설정 업데이트

fac1024

eileen4505 requested review from dalzzy, sispo3314 and soyun-git121 July 22, 2025 16:34

eileen4505 added 🎨Style 스타일 추가 및 수정 ✨Feature 새로운 기능 추가 labels Jul 22, 2025

eileen4505 linked an issue Jul 22, 2025 that may be closed by this pull request

[Feat] #19 회원가입 및 온보딩 페이지 구현 #19

Closed

6 tasks

sispo3314 reviewed Jul 22, 2025

View reviewed changes

dalzzy requested changes Jul 23, 2025

View reviewed changes

eileen4505 changed the title ~~Feat/#19/회원가입 온보딩 페이지 구현~~ [Feat]회원가입 온보딩 페이지 구현 Jul 24, 2025

eileen4505 added 9 commits July 26, 2025 09:14

fix: 병합 충돌 해결

038ac02

style: kakao,naver 버튼 위치 및 색상 수정

1e2a564

refactor: TheaterPage 리팩토링 및 타입 분리적용

c45faff

refactor: GenrePage 리팩토링 및 타입 분리적용

be41cfb

feat: ProgressBar 컴포넌트 추가

9238002

style: ProgressBar 컴포넌트 스타일 수정

e5195e6

style: Onboarding 페이지 ProgressBar 적용 및 스타일 수정

c67cc05

feat: seeatlogo.svg추가

2bc1c65

feat: seeat_logo 재업로드

869141e

dalzzy reviewed Jul 27, 2025

View reviewed changes

fix: 빌드 에러 해결

78ba203

dalzzy approved these changes Jul 27, 2025

View reviewed changes

sispo3314 approved these changes Jul 27, 2025

View reviewed changes

eileen4505 merged commit 70b7aee into develop Jul 28, 2025
1 check passed

dalzzy deleted the feat/#19/회원가입-온보딩-페이지-구현 branch August 8, 2025 15:27

		<div className="flex flex-col items-center justify-center h-screen bg-gray-900 px-6">
		{/* 그래픽 자리 */}

		{/* 진행도 */}
		<div className="text-title-1 text-white mb-3">1/3</div>

		{/* 네이버 로그인 */}
		<button className="flex items-center justify-center gap-2 w-full h-12 rounded bg-[#03C75A] text-white text-body-1 font-semibold">

Conversation

eileen4505 commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 관련된 이슈

📝 작업 내용

📸 스크린샷

🚨 이슈

📣 리뷰 요구사항

✅ 체크리스트

Uh oh!

sispo3314 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dalzzy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dalzzy Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sispo3314 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

eileen4505 commented Jul 22, 2025 •

edited

Loading

dalzzy left a comment •

edited

Loading

dalzzy Jul 23, 2025 •

edited

Loading