style : 디자인 시안에 맞게 작성 페이지 수정 (#204)

* style : 버튼 색상 추가 * style : button 스타일 수정 * story : 버튼 스토리 수정 * chore : 선택 로직 수정 * style : select item 스타일 수정 * style : modal 페이지 스타일링 * chore : 버튼 위치 수정
prgrms-web-devcourse-final-project · Dec 3, 2024 · 4455220 · 4455220
1 parent 1e50eca
commit 4455220
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 58 deletions.
diff --git a/src/components/Common/BottleLetter/Label/Label.tsx b/src/components/Common/BottleLetter/Label/Label.tsx
@@ -4,13 +4,11 @@ import { LabelProps } from '@/types/label';
 export const Label = ({ imgSrc, isActive }: LabelProps) => {
     return (
         <div
-            className={`w-full h-full flex justify-center items-center  ${
-                isActive
-                    ? 'bg-slate-500 rounded-lg'
-                    : 'bg-transparent rounded-none'
+            className={`w-full h-full flex justify-center items-center border-[1px] rounded-2xl ${
+                isActive ? 'border-sample-blue' : 'border-transparent'
             }`}
         >
-            <img src={`/${imgSrc}`} className="object-contain w-full h-full" />
+            <img src={`/${imgSrc}`} className="object-contain h-[80px] p-1 " />
         </div>
     );
 };
diff --git a/src/components/Common/KeywordToggleButton/KeywordToggleButton.tsx b/src/components/Common/KeywordToggleButton/KeywordToggleButton.tsx
@@ -12,7 +12,7 @@ export const KeywordToggleButton = ({
     return (
         <button
             onClick={onClick}
-            className={`border border-gray-600 border-solid rounded-full px-3 py-1 ${isActive ? 'bg-slate-500' : 'bg-white'} ${isActive ? 'text-white' : 'text-black'}`}
+            className={`border-[1px] border-sample-blue border-solid rounded-full px-3 py-1 text-black ${isActive && 'bg-[rgba(34,171,239,0.13)]'}`}
         >
             {keyword}
         </button>

diff --git a/src/components/Letter/CreateButton/CreateButton.stories.tsx b/src/components/Letter/CreateButton/CreateButton.stories.tsx
@@ -6,14 +6,33 @@ const meta: Meta<typeof CreateButton> = {
     component: CreateButton,
     title: 'CreateButton',
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <div style={{ width: '300px' }}>
+                <Story />
+            </div>
+        )
+    ]
 };
 export default meta;
 
 type Story = StoryObj<typeof CreateButton>;
 
-export const Default: Story = {
+export const Active: Story = {
     args: {
+        children: '활성',
+        isActive: true,
+        handleClickHandler: () => {
+            alert('즐겁다');
+        }
+    }
+};
+
+export const NonActive: Story = {
+    args: {
+        children: '비활성',
+        isActive: false,
         handleClickHandler: () => {
             alert('즐겁다');
         }

diff --git a/src/components/Letter/CreateButton/CreateButton.tsx b/src/components/Letter/CreateButton/CreateButton.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type CreateButtonProps = {
+    children: ReactNode;
     isActive: boolean;
     handleClickHandler: () => void;
 };
 
 export const CreateButton = ({
+    children,
     isActive,
     handleClickHandler
 }: CreateButtonProps) => {
@@ -17,14 +19,11 @@ export const CreateButton = ({
         <div className="flex items-center justify-center ">
             <button
                 onClick={handleClick}
-                className={`border m-auto text-xl w-[95%] h-[51px] rounded-3xl  bottom-24 ${
-                    isActive
-                        ? 'bg-slate-500 text-white'
-                        : 'bg-slate-200 text-black'
-                }`}
+                className={`border m-auto text-xl w-[95%] h-[51px] rounded-3xl  
+                    ${isActive ? 'bg-sample-blue text-white hover:bg-sample-hoverblue' : 'bg-sample-gray text-sample-textgray'}`}
                 type="button"
             >
-                Button
+                {children}
             </button>
         </div>
     );

diff --git a/src/components/Letter/KeywordList/KeywordList.tsx b/src/components/Letter/KeywordList/KeywordList.tsx
@@ -6,7 +6,7 @@ export type KeywordListProps = {
     title: string;
     subTitle: string;
     keywordGroup: KeywordProps[];
-    selectedKeywords: number[];
+    selectedKeywords: number | null;
     onKeywordSelect: (index: number) => void;
 };
 
@@ -31,7 +31,7 @@ export const KeywordList = ({
                     >
                         <KeywordToggleButton
                             keyword={keyword.content}
-                            isActive={selectedKeywords.includes(idx)}
+                            isActive={selectedKeywords === idx}
                         />
                     </li>
                 ))}

diff --git a/src/components/Letter/LabelList/LabelList.tsx b/src/components/Letter/LabelList/LabelList.tsx
@@ -4,7 +4,7 @@ import { Label } from '@/components/Common/BottleLetter/Label/Label';
 
 type LableListProps = {
     labels: LabelProps[];
-    selectedLabels: number[];
+    selectedLabels: number | null;
     onLabelSelect: (index: number) => void;
 };
 
@@ -14,7 +14,7 @@ export const LabelList = ({
     onLabelSelect
 }: LableListProps) => {
     return (
-        <div className="grid grid-cols-4 gap-4 mt-5">
+        <div className="grid grid-cols-4 gap-2 px-1 mt-5">
             {labels.map((label, idx) => (
                 <div
                     key={idx}
@@ -23,7 +23,7 @@ export const LabelList = ({
                 >
                     <Label
                         imgSrc={label.imgSrc}
-                        isActive={selectedLabels.includes(idx)}
+                        isActive={selectedLabels === idx}
                     />
                 </div>
             ))}

diff --git a/src/components/Letter/SelectItem/SelectItem.tsx b/src/components/Letter/SelectItem/SelectItem.tsx
@@ -14,35 +14,27 @@ type SelectItemProps = {
 
 export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
     const [isLabel, setIsLabel] = useState(true);
-    const [selectedLabels, setSelectedLabels] = useState<number[]>([]);
-    const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
+    const [selectedLabels, setSelectedLabels] = useState<number | null>(null);
+    const [selectedKeywords, setSelectedKeywords] = useState<number | null>(
+        null
+    );
 
     const navigate = useNavigate();
 
     useEffect(() => {
-        if (selectedLabels.length > 0 && selectedKeywords.length > 0) {
+        if (selectedLabels && selectedKeywords) {
             setIsActive(true);
         } else {
             setIsActive(false);
         }
     }, [selectedLabels, selectedKeywords]);
 
-    // 라벨 선택 핸들러
     const handleLabelSelection = (label: number) => {
-        setSelectedLabels((prev) =>
-            prev.includes(label)
-                ? prev.filter((l) => l !== label)
-                : [...prev, label]
-        );
+        setSelectedLabels(label);
     };
 
-    // 키워드 선택 핸들러
     const handleKeywordSelection = (keyword: number) => {
-        setSelectedKeywords((prev) =>
-            prev.includes(keyword)
-                ? prev.filter((k) => k !== keyword)
-                : [...prev, keyword]
-        );
+        setSelectedKeywords(keyword);
     };
 
     const testLable: LabelProps[] = [
@@ -80,15 +72,24 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
     return (
         <div className="relative">
             <SliderMenuContainer
-                snapPoints={() => [
-                    window.innerHeight * 0.08,
-                    window.innerHeight * 0.6
-                ]}
+                snapPoints={() => [80, window.innerHeight * 0.6]}
+                header={
+                    <CreateButton
+                        isActive={isActive}
+                        handleClickHandler={() => {
+                            if (isActive) {
+                                navigate('/letter/success');
+                            }
+                        }}
+                    >
+                        {'보내기'}
+                    </CreateButton>
+                }
             >
                 <Margin top={15} />
                 <div className="relative flex w-full overflow-hidden text-xl align-middle h-[50px] ">
                     <div
-                        className="absolute bottom-0 w-1/2 h-[2px] transition-transform duration-500 ease-in-out bg-gray-500"
+                        className="absolute bottom-0 w-1/2 h-[2px] transition-transform duration-500 ease-in-out bg-sample-blue"
                         style={{
                             transform: `translateX(${isLabel ? '0%' : '100%'})`
                         }}
@@ -126,16 +127,6 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
                 )}
                 <Margin bottom={30} />
             </SliderMenuContainer>
-            <div className="inset-0 w-[90%] m-auto">
-                <CreateButton
-                    isActive={isActive}
-                    handleClickHandler={() => {
-                        if (isActive) {
-                            navigate('/letter/success');
-                        }
-                    }}
-                />
-            </div>
         </div>
     );
 };
diff --git a/src/components/Letter/SuccessModal/SuccessModal.tsx b/src/components/Letter/SuccessModal/SuccessModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 export const SuccessModal = () => {
     return (
-        <div className="flex flex-col items-center justify-center w-56 h-40 m-auto text-xl rounded-3xl animate-fade-up bg-slate-200 ">
+        <div className="flex flex-col items-center justify-center w-[60%] h-40 m-auto text-xl rounded-3xl animate-fade-up bg-slate-200 mt-[55%]">
             <img src="/public/폭죽.png" className="w-12 h-12" />
             <Margin top={10} />
             <span>성공적으로</span>

diff --git a/src/pages/Letter/Success/SuccessLetterPage.tsx b/src/pages/Letter/Success/SuccessLetterPage.tsx
@@ -1,4 +1,3 @@
-import { Margin } from '@/components/Common/Margin/Margin';
 import { CreateButton } from '@/components/Letter/CreateButton/CreateButton';
 import { SuccessModal } from '@/components/Letter/SuccessModal/SuccessModal';
 import React from 'react';
@@ -11,11 +10,16 @@ export const SuccessLetterPage = () => {
         navigate('/');
     };
     return (
-        <div className="">
-            <Margin top={210} />
-            <SuccessModal />
-            <Margin top={230} />
-            <CreateButton isActive={true} handleClickHandler={handleClick} />
+        <div className="relative flex flex-col justify-between h-screen">
+            <div className="absolute inset-0 flex items-center justify-center">
+                <SuccessModal />
+            </div>
+
+            <div className="absolute w-full bottom-[34px]">
+                <CreateButton isActive={true} handleClickHandler={handleClick}>
+                    {'확인'}
+                </CreateButton>
+            </div>
         </div>
     );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,14 @@ export default {
         extend: {
             colors: {
                 primary: '#D1D5DB',
-                sample: { blue: '#22B8EF', gray: '#F5F3F1', black: '#5C5C5C' }
+                sample: {
+                    blue: '#22B8EF',
+                    gray: '#F5F3F1',
+                    black: '#5C5C5C',
+                    hoverblue: '#1882A8',
+                    textgray: '#C3C3C3',
+                    select: '#22ABEF'
+                }
             },
             maxWidth: {
                 DEFAULT: '768px'