Merge pull request #9 from dnd-side-project/OZ-35-F-pick-page

Feat : 포즈픽 페이지 구현
dnd-side-project · Aug 5, 2023 · 8301fc2 · 8301fc2
2 parents de0ddfd + f277398
commit 8301fc2
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 28 deletions.
diff --git a/public/images/sample.png b/public/images/sample.png
diff --git a/src/app/(Main)/layout.tsx b/src/app/(Main)/layout.tsx
@@ -5,7 +5,7 @@ import { Spacing } from '@/components/Spacing';
 export default function MainLayout({ children }: StrictPropsWithChildren) {
   return (
     <>
-      <Spacing size={140} />
+      <Spacing size={120} />
       <MainHeader />
       {children}
     </>

diff --git a/src/app/(Main)/pick/components/PickSection.tsx b/src/app/(Main)/pick/components/PickSection.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { BottomFixedButton } from '@/components/Button';
+import Image from 'next/image';
+import { useState } from 'react';
+
+const countList = ['1인', '2인', '3인', '4인', '5인+'];
+
+export default function PickSection() {
+  const [countState, setCountState] = useState<string>('1인');
+
+  return (
+    <section className="flex flex-col ">
+      <div className="my-16 flex h-40 justify-evenly rounded-8 px-20">
+        {countList.map((count) => (
+          <CountItem
+            key={count}
+            onClick={() => setCountState(count)}
+            isSelected={count === countState}
+            count={count}
+          />
+        ))}
+      </div>
+      <div className="relative h-520 grow bg-black">
+        <Image src="/images/sample.png" fill alt="image" />
+      </div>
+      <BottomFixedButton text="포즈 pick!" className="bg-main-violet text-white" />
+    </section>
+  );
+}
+
+interface CountItemProps {
+  isSelected: boolean;
+  count: string;
+  onClick: () => void;
+}
+
+function CountItem({ isSelected, count, onClick }: CountItemProps) {
+  return (
+    <div
+      className={`flex grow cursor-pointer items-center justify-center first:rounded-l-8 last:rounded-r-8 ${
+        isSelected
+          ? 'border-1 border-main-violet bg-main-violet-bright'
+          : 'border-1 border-default bg-sub-white'
+      }`}
+      onClick={onClick}
+    >
+      <h6 className={isSelected ? 'text-main-violet-dark' : ''}>{count}</h6>
+    </div>
+  );
+}
diff --git a/src/app/(Main)/pick/page.tsx b/src/app/(Main)/pick/page.tsx
@@ -1,3 +1,9 @@
+import PickSection from './components/PickSection';
+
 export default function Pick() {
-  return <>포즈픽s</>;
+  return (
+    <>
+      <PickSection />
+    </>
+  );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -14,6 +14,10 @@
   display: none;
 }
 
+html {
+  font-size: 4vw;
+}
+
 @media (min-width: 420px) {
   html {
     font-size: 16px;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -47,7 +47,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="ko">
       <body className="flex h-[100dvh] w-screen touch-none justify-center bg-slate-100 py-px">
-        <div className="h-full w-full max-w-440 bg-white px-20 text-black drop-shadow-2xl">
+        <div className="h-full w-full max-w-440 bg-white text-black drop-shadow-2xl">
           {children}
         </div>
       </body>

diff --git a/src/components/BottomFixedDiv/index.tsx b/src/components/BottomFixedDiv/index.tsx
@@ -0,0 +1,9 @@
+import type { StrictPropsWithChildren } from '@/types';
+
+export default function BottomFixedDiv({ children }: StrictPropsWithChildren) {
+  return (
+    <div className="fixed inset-x-0 bottom-0 mx-auto max-w-440">
+      <div className="px-20 pb-20">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/Button/BottomFixedButton.tsx b/src/components/Button/BottomFixedButton.tsx
@@ -0,0 +1,10 @@
+import BottomFixedDiv from '../BottomFixedDiv';
+import Button, { type ButtonProps } from './Button';
+
+export default function BottomFixedButton({ ...props }: ButtonProps) {
+  return (
+    <BottomFixedDiv>
+      <Button {...props} />
+    </BottomFixedDiv>
+  );
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, PropsWithChildren } from 'react';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  type?: 'button' | 'submit';
+  className?: string;
+  props?: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>;
+}
+
+export default function Button({ text, type = 'button', className, ...props }: ButtonProps) {
+  return (
+    <button
+      className={`flex h-60 w-full items-center justify-center rounded-xl py-14 text-center text-16 ${className}`}
+      type={type}
+      {...props}
+    >
+      <h5>{text}</h5>
+    </button>
+  );
+}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { default as BottomFixedButton } from './BottomFixedButton';
diff --git a/styles/theme/colors.ts b/styles/theme/colors.ts
@@ -1,32 +1,32 @@
 import { COLOR } from "../../src/constants/color";
 
 export const colors = {
-    // bg
-    "white": COLOR.white,
-    "sub-white": COLOR.gray[50],
-    "divider": COLOR.gray[100],
+  // bg
+  white: COLOR.white,
+  'sub-white': COLOR.gray[50],
+  divider: COLOR.gray[100],
 
-    // border
-    "default": COLOR.gray[300],
-    "active": COLOR.gray[900],
-    "disabled": COLOR.gray[100],
+  // border
+  default: COLOR.gray[300],
+  active: COLOR.gray[900],
+  disabled: COLOR.gray[100],
 
-    // brand colors
-    "main-violet-light": COLOR.violet[300],
-    "main-violet": COLOR.violet[500],
-    "main-violet-dark": COLOR.violet[700],
+  // brand colors
+  'main-violet-bright': COLOR.violet[100],
+  'main-violet-light': COLOR.violet[300],
+  'main-violet': COLOR.violet[600],
+  'main-violet-dark': COLOR.violet[700],
 
-    // text
-    "cto": COLOR.black,
-    "brand": COLOR.violet[500],
-    "primary":COLOR.gray[900],
-    "secondary": COLOR.gray[700],
-    "tertiary": COLOR.gray[500],
-    "caption": COLOR.gray[400],
-
-    // icon
-    "icon-default": COLOR.gray[800],
-    "icon-hover": COLOR.gray[600],
-    "icon-disabled": COLOR.gray[500],
+  // text
+  cto: COLOR.black,
+  brand: COLOR.violet[500],
+  primary: COLOR.gray[900],
+  secondary: COLOR.gray[700],
+  tertiary: COLOR.gray[500],
+  caption: COLOR.gray[400],
 
-} as const
+  // icon
+  'icon-default': COLOR.gray[800],
+  'icon-hover': COLOR.gray[600],
+  'icon-disabled': COLOR.gray[500],
+} as const;
diff --git a/styles/typography.css b/styles/typography.css
@@ -34,6 +34,13 @@ h5 {
     letter-spacing: -0.2px;
 }
 
+h6 {
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    letter-spacing: 0;
+}
+
 p {
     font-weight: 400;
     font-size: 1rem;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as Button } from './Button';
		export { default as BottomFixedButton } from './BottomFixedButton';