design: 회원가입 페이지 스타일링 수정 (#69)

brgndyy · Aug 20, 2024 · 4552bde · 4552bde
1 parent 808ffac
commit 4552bde
Show file tree

Hide file tree

Showing 19 changed files with 81 additions and 76 deletions.
diff --git a/front/src/_components/_common/images/vinylImage/VinylImage.tsx b/front/src/_components/_common/images/vinylImage/VinylImage.tsx
@@ -1,16 +1,17 @@
 import WhiteModeVinylImage from '@/assets/images/vinylWhiteMode.svg';
 import DarkModeVinylImage from '@/assets/images/vinylDarkMode.svg';
 import useThemeStore from '@/_store/useThemeStore';
+import { vinylImage } from './vinylImage.css';
 
 export default function VinylImage() {
   const currentTheme = useThemeStore((state) => state.theme);
 
   return (
     <>
       {currentTheme ? (
-        <DarkModeVinylImage width={20} height={20} />
+        <DarkModeVinylImage className={vinylImage} />
       ) : (
-        <WhiteModeVinylImage width={20} height={20} />
+        <WhiteModeVinylImage className={vinylImage} />
       )}
     </>
   );

diff --git a/front/src/_components/_common/images/vinylImage/vinylImage.css.ts b/front/src/_components/_common/images/vinylImage/vinylImage.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const vinylImage = style({
+  width: '3rem',
+  height: '3rem',
+});
diff --git a/front/src/_components/_common/links/playOfModeLink.css.ts b/front/src/_components/_common/links/playOfModeLink.css.ts
@@ -8,15 +8,15 @@ export const container = style({
 });
 
 export const linkContainer = style({
-  padding: '1.5rem',
+  padding: '2.5rem',
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',
   borderRadius: '1rem',
   color: text1,
   fontSize: '2.5rem',
   fontWeight: 'bold',
   background: background2,
   transition: 'all 0.3s ease',
-  minWidth: '17rem',
+  minWidth: '20rem',
   margin: '1rem 0',
   textAlign: 'center',
   ':hover': {

diff --git a/front/src/_components/_header/Header.tsx b/front/src/_components/_header/Header.tsx
@@ -32,10 +32,12 @@ export interface HeaderProps {
 }
 
 export default function Header({ currentTheme, userInfo, chordSetting, accessToken }: HeaderProps) {
-  const { darkTheme, themeToggleHandler } = useTheme(currentTheme);
+  const { darkTheme, handleToggleTheme } = useTheme(currentTheme);
   const { updateChordSetting } = useChordSettingStore();
   const updateAccessToken = useAccessTokenStore((state) => state.updateAccessToken);
 
+  console.log('chordSetting : ', chordSetting);
+
   useEffect(() => {
     updateChordSetting(chordSetting);
     if (accessToken) {
@@ -53,7 +55,7 @@ export default function Header({ currentTheme, userInfo, chordSetting, accessTok
           <div className={loginOrSignUpCategory}>
             {userInfo ? <UserProfile userInfo={userInfo} /> : <LoginModal />}
           </div>
-          <ThemeToggleInput darkTheme={darkTheme} themeToggleHandler={themeToggleHandler} />
+          <ThemeToggleInput darkTheme={darkTheme} handleToggleTheme={handleToggleTheme} />
           <div className={settingCategory}>
             <SettingModal />
           </div>

diff --git a/front/src/_components/_header/header.css.ts b/front/src/_components/_header/header.css.ts
@@ -8,7 +8,7 @@ export const headerContainer = style({
   left: '0',
   right: '0',
   zIndex: '100',
-  width: '80%',
+  width: '90%',
   margin: 'auto',
   height: '80px',
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',

diff --git a/front/src/_components/_play/PageOfSingleChord.tsx b/front/src/_components/_play/PageOfSingleChord.tsx
@@ -9,6 +9,7 @@ import useThemeStore from '@/_store/useThemeStore';
 import { metronomeContainer, text, container, button, input } from './pageOfSingChord.css';
 import VinylImage from '../_common/images/vinylImage/VinylImage';
 import { myStyle } from '@/_styles/vars.css';
+import { myFontClass } from '@/app/font.css';
 
 type PageOfSingleChordProps = {
   whiteChordImages: ChordImageData[];
@@ -49,7 +50,7 @@ export default function PageOfSingleChord({
           <span className={`${text} ${myStyle}`}>현재 박자:</span>
           <Metronome.BPMInput className={`${input}`} />
           <Metronome.Button
-            className={`${button} ${myStyle}`}
+            className={`${button} ${myStyle} ${myFontClass}`}
             buttonContents={['재생', '일시정지']}
           />
         </div>

diff --git a/front/src/_components/_play/pageOfSingChord.css.ts b/front/src/_components/_play/pageOfSingChord.css.ts
@@ -1,17 +1,18 @@
 import { style } from '@vanilla-extract/css';
-import { text1, background3 } from '@/_styles/vars.css';
+import { text1, buttonBackground1 } from '@/_styles/vars.css';
 
 export const metronomeContainer = style({
   padding: '0 1rem',
   display: 'flex',
+  margin: '3rem 0',
 });
 
 export const text = style({
   color: text1,
   display: 'flex',
   alignItems: 'center',
   margin: '0 0.5rem',
-  fontSize: '1.5rem',
+  fontSize: '2.5rem',
 });
 
 export const container = style({
@@ -24,15 +25,16 @@ export const input = style({
   borderRadius: '0.5rem',
   margin: '0 0.5rem',
   textAlign: 'center',
-  fontSize: '1rem',
+  fontSize: '2rem',
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',
 });
 
 export const button = style({
   border: 'none',
   borderRadius: '0.5rem',
-  background: background3,
-  fontSize: '1rem',
+  background: buttonBackground1,
+  fontSize: '2rem',
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',
-  cursor : 'pointer'
+  cursor: 'pointer',
+  padding: '0.5rem',
 });
diff --git a/front/src/_components/_play/slideOfSingleChord.css.ts b/front/src/_components/_play/slideOfSingleChord.css.ts
@@ -2,5 +2,5 @@ import { style } from '@vanilla-extract/css';
 
 export const carouselCard = style({
   width: '80%',
-  margin: 'auto',
+  margin: '0 auto',
 });
diff --git a/front/src/_components/_profile/ProfileMenu.tsx b/front/src/_components/_profile/ProfileMenu.tsx
@@ -1,11 +1,12 @@
 import { myStyle } from '@/_styles/vars.css';
 import Link from 'next/link';
 import { menuContainer, link, linkText, marginText } from './profileMenu.css';
+import { PAGE_ROUTES } from '@/_constants/routes';
 
 export default function ProfileMenu() {
   return (
     <div className={`${menuContainer} ${myStyle}`}>
-      <Link href="/setting" className={link}>
+      <Link href={PAGE_ROUTES.setting} className={link}>
         <div className={`${linkText} ${marginText}`}>계정 설정</div>
       </Link>
       <div className={link}>

diff --git a/front/src/_components/_profile/profileMenu.css.ts b/front/src/_components/_profile/profileMenu.css.ts
@@ -11,17 +11,18 @@ export const menuContainer = style({
 });
 
 export const marginText = style({
-  marginLeft: '1rem',
+  marginLeft: '2rem',
+  marginTop: '1rem',
 });
 
 export const link = style({
-  padding: '1rem',
+  padding: '2rem',
 });
 
 export const linkText = style({
   color: text1,
   transition: 'all 0.3s ease',
-  fontSize: '1.2rem',
+  fontSize: '1.5rem',
 
   ':hover': {
     opacity: 0.7,

diff --git a/front/src/_components/_profile/userProfile.css.ts b/front/src/_components/_profile/userProfile.css.ts
@@ -21,7 +21,7 @@ export const iconContainer = style({
 
 export const icon = style({
   color: text1,
-  fontSize: '1rem',
+  fontSize: '2rem',
 });
 
 export const motionContainer = style({

diff --git a/front/src/_components/_register/UserEmailFunnel.tsx b/front/src/_components/_register/UserEmailFunnel.tsx
@@ -13,13 +13,17 @@ import {
 import Button from '../_common/button/Button';
 import Input from '../_common/input/Input';
 
-type Props = {
+type UserEmailFunnelProps = {
   userEmail: string;
   handleNextStep: () => void;
   handlePreviousStep: () => void;
 };
 
-export default function UserEmailFunnel({ userEmail, handleNextStep, handlePreviousStep }: Props) {
+export default function UserEmailFunnel({
+  userEmail,
+  handleNextStep,
+  handlePreviousStep,
+}: UserEmailFunnelProps) {
   return (
     <div className={`${contentContainer} ${myStyle}`}>
       <h1 className={`${funnelLabel} ${myStyle}`}>이메일</h1>

diff --git a/front/src/_components/_register/WelcomeFunnel.tsx b/front/src/_components/_register/WelcomeFunnel.tsx
@@ -8,7 +8,7 @@ import {
   second,
   third,
   fourth,
-  nextButton,
+  buttonContainer,
 } from './welcomFunnel.css';
 import Button from '../_common/button/Button';
 
@@ -32,13 +32,8 @@ export default function WelcomeFunnel({ handleNextStep }: Props) {
         </div>
       </div>
 
-      <div>
-        <Button
-          variant="primary"
-          type="button"
-          onClick={handleNextStep}
-          className={`${nextButton} ${myStyle} ${fourth}`}
-        >
+      <div className={buttonContainer}>
+        <Button variant="primary" type="button" onClick={handleNextStep} className={fourth}>
           회원가입 하러 가기
         </Button>
       </div>

diff --git a/front/src/_components/_register/funnel.css.ts b/front/src/_components/_register/funnel.css.ts
@@ -6,16 +6,14 @@ export const funnelContainer = style({
   justifyContent: 'center',
   alignItems: 'center',
   flexDirection: 'column',
-  height: '30rem',
-  width: '30rem',
   borderRadius: '1rem',
   position: 'absolute',
 });
 
 export const contentContainer = style({
   background: background2,
-  width: '26rem',
-  height: '18rem',
+  width: '43rem',
+  height: '22rem',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -35,7 +33,7 @@ export const funnelButton = style({
   color: text1,
   background: background2,
   border: 'none',
-  fontSize: '1.2rem',
+  fontSize: '2rem',
   padding: '0.5rem',
   margin: '1rem 0',
   cursor: 'pointer',
@@ -48,7 +46,7 @@ export const funnelButton = style({
 export const funnelLabel = style({
   color: text1,
   fontWeight: 'bold',
-  fontSize: '1.8rem',
+  fontSize: '3rem',
   margin: '1rem 0',
 });
 
@@ -65,8 +63,8 @@ export const funnelInput = style({
   margin: '1rem 0',
   borderRadius: '0.5rem',
   border: 'none',
-  width: '80%',
-  fontSize: '1.2rem',
+  width: '60%',
+  fontSize: '1.8rem',
   boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',
   ':focus': {
     outline: 'none',
@@ -76,11 +74,11 @@ export const funnelInput = style({
 export const funnelImageInput = style({
   padding: '0.9rem',
   margin: '1rem 0',
-  marginLeft: '4rem',
+  marginLeft: '8rem',
   borderRadius: '0.5rem',
   border: 'none',
   width: '80%',
-  fontSize: '1rem',
+  fontSize: '2rem',
   color: text1,
 });
 
@@ -93,7 +91,7 @@ export const drag = style({
 
 export const alertText = style({
   color: text4,
-  fontSize: '1.2rem',
+  fontSize: '2rem',
 });
 
 export const emailCard = style({
@@ -104,7 +102,7 @@ export const emailCard = style({
 
 export const userEmailContainer = style({
   color: text1,
-  fontSize: '1.25rem',
+  fontSize: '2rem',
   margin: '1rem 0',
   padding: '0.9rem',
   borderRadius: '0.5rem',
@@ -122,4 +120,5 @@ export const alertContainer = style({
 
 export const lockIcon = style({
   color: text1,
+  fontSize: '1.5rem',
 });
diff --git a/front/src/_components/_register/welcomFunnel.css.ts b/front/src/_components/_register/welcomFunnel.css.ts
@@ -47,16 +47,6 @@ export const fourth = style({
   opacity: 0,
 });
 
-export const nextButton = style({
-  margin: '2rem 0',
-  padding: '1rem',
-  borderRadius: '1rem',
-  border: 'none',
-  cursor: 'pointer',
-  fontSize: '1rem',
-  background: background2,
-  boxShadow: 'rgba(0, 0, 0, 0.08) 0px 0px 8px',
-  transition: 'all 0.3s',
-  color: text4,
-  opacity: 0,
+export const buttonContainer = style({
+  marginTop: '2rem',
 });
diff --git a/front/src/_components/_theme/ThemeToggleInput.tsx b/front/src/_components/_theme/ThemeToggleInput.tsx
@@ -1,18 +1,20 @@
+import Input from '../_common/input/Input';
 import { toggleInput, toggleLabel, toggleLabelChecked } from './themeToggleInput.css';
 
 export interface ThemeToggleInputProps {
   darkTheme: boolean;
-  themeToggleHandler: () => void;
+  handleToggleTheme: () => void;
 }
 
-export default function ThemeToggleInput({ darkTheme, themeToggleHandler }: ThemeToggleInputProps) {
+export default function ThemeToggleInput({ darkTheme, handleToggleTheme }: ThemeToggleInputProps) {
   return (
     <>
-      <input
+      <Input
+        variant="default"
         type="checkbox"
         id="darkmodeToggle"
         className={toggleInput}
-        onChange={themeToggleHandler}
+        onChange={handleToggleTheme}
       />
       <label
         htmlFor="darkmodeToggle"