Skip to content

Commit

Permalink
[Feat] #3 업로드 페이지 기능 및 디자인
Browse files Browse the repository at this point in the history
  • Loading branch information
hyeiis authored Jan 22, 2024
2 parents 291419e + e7f0039 commit feb3c34
Show file tree
Hide file tree
Showing 23 changed files with 611 additions and 244 deletions.
57 changes: 57 additions & 0 deletions weatherfit_refactoring/src/Components/Atoms/Box/BoxStore.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Image from 'next/image'
import { MouseEventHandler } from 'react'

export enum BoxStyle {
BOX_WHITE = 'BOX_WHITE',
BOX_YELLOW = 'BOX_YELLOW',
BOX_BLUE = 'BOX_BLUE',
BOX_IMAGE = 'BOX_IMAGE',
}

interface Props {
title?: string
boxStyle: BoxStyle
style?: string
onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
children?: React.ReactNode
}
//높이 조정도 필요하면 가져다 쓰세요

export default function ButtonStore({
boxStyle,
children,
onClickFunction,
style,
}: Props) {
const selectButton = (): React.ReactNode => {
switch (boxStyle) {
case BoxStyle.BOX_WHITE:
return (
<button
className={`${style} bg-white border border-black rounded-2xl `}>
{children}
</button>
)
case BoxStyle.BOX_YELLOW:
return (
<div className={`${style} bg-yellow-200 border-black rounded-2xl `}>
{children}
</div>
)
case BoxStyle.BOX_BLUE:
return (
<div className={`${style} bg-blue-300 rounded-2xl`}>{children}</div>
)
case BoxStyle.BOX_IMAGE:
return (
<div className="border rounded-2xl w-32 h-48 bg-stone-200 flex hover:bg-stone-300 relative flex-shrink-0">
{children}
</div>
)
default:
return null
}
}

return <>{selectButton()}</>
}
19 changes: 8 additions & 11 deletions weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@ export enum ButtonStyle {
CATEGORY_BTN = 'CATEGORY_BTN',
CATEGORY_BTN_Y = 'CATEGORY_BTN_Y',
CATEGORY_BTN_CHECKED = 'CATEGORY_BTN_CHECKED',
SIGNUP_BTN = 'SIGNUP_BTN',
TEXT_BTN = 'TEXT_BTN',
CONFIRM_BTN = 'CONFIRM_BTN',
}

interface Props {
btnText?: string
buttonStyle: ButtonStyle
fontsize?: string //회원가입 버튼에서 사용 회원가입 다 만들고 크기가 지정됐다면 그냥 지정해주고 없애주세요
style?: string
//여기서 w-[100px] h-[50px] m-auto로 적으면 버튼 넓이랑 높이 그리고 마진이나 다른 것들도 지정할 수 있어요
onClickFunction?: MouseEventHandler<HTMLButtonElement> | undefined
children?: React.ReactNode
}
//높이 조정도 필요하면 가져다 쓰세요

export default function ButtonStore({
btnText,
buttonStyle,
fontsize,
children,
onClickFunction,
style,
Expand Down Expand Up @@ -60,15 +60,15 @@ export default function ButtonStore({
case ButtonStyle.CATEGORY_BTN_Y:
return (
<button
className={`${style} bg-yellow-200 border-black rounded-2xl `}
className={`${style} bg-yellow-200 border border-black rounded-2xl px-1.5 py-0.5`}
onClick={onClickFunction}>
{children}
</button>
)
case ButtonStyle.CATEGORY_BTN_CHECKED:
return (
<button
className={`${style} bg-blue-300 rounded-2xl`}
className={`${style} bg-blue-300 border border-blue-300 text-white rounded-2xl px-1.5 py-0.5`}
onClick={onClickFunction}>
{children}
</button>
Expand Down Expand Up @@ -96,13 +96,10 @@ export default function ButtonStore({
</div>
</button>
)
case ButtonStyle.SIGNUP_BTN:
case ButtonStyle.TEXT_BTN:
return (
<button
className={`${style} text-slate-400`}
style={{ fontSize: `${fontsize}px` }}
onClick={onClickFunction}>
회원가입
<button className={`${style}`} onClick={onClickFunction}>
{btnText}
</button>
)
default:
Expand Down
10 changes: 9 additions & 1 deletion weatherfit_refactoring/src/Components/Atoms/Icon/IconStore.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Image from 'next/image'
import { MouseEventHandler } from 'react'

export enum IconStyle {
MY_PROFILE = 'MY_PROFILE',
Expand Down Expand Up @@ -26,9 +27,15 @@ interface Props {
iconStyle: IconStyle
size?: number
style?: string
onClickFunction?: () => void
}

export default function IconStore({ iconStyle, size, style }: Props) {
export default function IconStore({
iconStyle,
size,
style,
onClickFunction,
}: Props) {
const selectIcon = (): React.ReactNode => {
switch (iconStyle) {
case IconStyle.MY_PROFILE_FILL:
Expand Down Expand Up @@ -159,6 +166,7 @@ export default function IconStore({ iconStyle, size, style }: Props) {
width={size}
height={size}
className={`${style}`}
onClick={onClickFunction}
/>
)
case IconStyle.NEXT:
Expand Down
69 changes: 25 additions & 44 deletions weatherfit_refactoring/src/Components/Atoms/Input/InputStore.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,24 @@
import Image from 'next/image'
import {
ChangeEventHandler,
FocusEventHandler,
FormEventHandler,
KeyboardEventHandler,
LegacyRef,
} from 'react'
import { FormEventHandler } from 'react'

export enum InputStyle {
INPUT_WHITE = 'INPUT_WHITE',
INPUT_IMAGE = 'INPUT_IMAGE',
INPUT_TEXTAREA = 'INPUT_TEXTAREA',
}

interface Props {
inputStyle: InputStyle
placeholderContents?: string
value?: string
textAreaRef?: LegacyRef<HTMLTextAreaElement> | undefined
style?: string
onChageFunctionInput?: FormEventHandler<HTMLDivElement> | undefined
onChangeFunctionTextArea?: ChangeEventHandler<HTMLTextAreaElement>
onFocusFunctionTextArea?: FocusEventHandler<HTMLTextAreaElement>
onKeyDownFunctionTextArea?: KeyboardEventHandler<HTMLTextAreaElement>
onChageFunction?: FormEventHandler<HTMLDivElement> | undefined
}

export default function InputStore({
inputStyle,
placeholderContents,
value,
textAreaRef,
style,
onChageFunctionInput,
onChangeFunctionTextArea,
onFocusFunctionTextArea,
onKeyDownFunctionTextArea,
onChageFunction,
}: Props) {
const selectInput = (): React.ReactNode => {
switch (inputStyle) {
Expand All @@ -48,32 +32,29 @@ export default function InputStore({
)
case InputStyle.INPUT_IMAGE:
return (
<div
className="border rounded-2xl w-32 h-48 bg-stone-200 flex cursor-pointer hover:bg-stone-300"
onChange={onChageFunctionInput}>
<Image
className="m-auto"
src={'/icon_svg/add.svg'}
alt="add"
width={20}
height={20}
/>
<input className="hidden" type="file" accept="image/*" multiple />
</div>
)
case InputStyle.INPUT_TEXTAREA:
return (
<textarea
className="w-full h-[125px] text-xs align-text-top border rounded-lg bg-white border-gray-500 p-2 font-NanumSquareRound"
ref={textAreaRef}
rows={6}
value={value}
placeholder={placeholderContents}
onFocus={onFocusFunctionTextArea}
onKeyDown={onKeyDownFunctionTextArea}
onChange={onChangeFunctionTextArea}
/>
<label htmlFor="upload_image">
<div
onChange={onChageFunction}
className="border rounded-2xl w-32 h-48 bg-stone-200 flex cursor-pointer hover:bg-stone-300">
<Image
className="m-auto"
src={'/icon_svg/add.svg'}
alt="add"
width={20}
height={20}
/>
<input
id="upload_image"
className="hidden"
type="file"
accept="image/*"
multiple
onChange={onChageFunction}
/>
</div>
</label>
)

default:
return null
}
Expand Down
55 changes: 0 additions & 55 deletions weatherfit_refactoring/src/Components/Atoms/SelectCategory.tsx

This file was deleted.

41 changes: 41 additions & 0 deletions weatherfit_refactoring/src/Components/Atoms/Store.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { create } from 'zustand'
import { categories } from './CategoryList'

interface State {
content: string
setContent: (content: string) => void
hashTags: string[]
setHashTags: (hashTags: string[]) => void
selectedImages: File[]
setSelectedImages: (selectedImages: File[]) => void
selectedSubCategories: { [category: string]: string[] }
setSelectedSubCategories: (category: string, subCategories: string[]) => void
initialSubCategories: string[][]
setInitialSubCategories: () => void
}

export const useStore = create<State>(set => ({
content: '',
setContent: (content: string) => set(state => ({ ...state, content })),
hashTags: [],
setHashTags: (hashTags: string[]) => set(state => ({ ...state, hashTags })),
selectedImages: [],
setSelectedImages: (selectedImages: File[]) =>
set(state => ({ ...state, selectedImages })),
// 하위 카테고리 관리
selectedSubCategories: {},
setSelectedSubCategories: (category: string, subCategories: string[]) =>
set(state => ({
...state,
selectedSubCategories: {
...state.selectedSubCategories,
[category]: subCategories,
},
})),
initialSubCategories: [],
setInitialSubCategories: () =>
set(state => ({
...state,
initialSubCategories: Array(Object.entries(categories).length).fill([]),
})),
}))
41 changes: 41 additions & 0 deletions weatherfit_refactoring/src/Components/Atoms/TextArea.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
'use client'

import {
ChangeEventHandler,
FocusEventHandler,
KeyboardEventHandler,
LegacyRef,
} from 'react'

interface Props {
placeholder: string
value: string
textAreaRef?: LegacyRef<HTMLTextAreaElement> | undefined
onChangeFunction?: ChangeEventHandler<HTMLTextAreaElement>
// onFocusFunction?: FocusEventHandler<HTMLTextAreaElement>
onKeyDownFunction?: KeyboardEventHandler<HTMLTextAreaElement>
}

export default function TextArea({
textAreaRef,
value,
placeholder,
onChangeFunction,
// onFocusFunction,
onKeyDownFunction,
}: Props) {
return (
<>
<textarea
className="w-full h-[125px] text-xs align-text-top border rounded-lg bg-white border-slave-500 p-2 font-NanumSquareRound resize-none mb-7 placeholder-gray-500"
ref={textAreaRef}
rows={6}
value={value}
placeholder={placeholder}
onChange={onChangeFunction}
// onFocus={onFocusFunction}
onKeyDown={onKeyDownFunction}
/>
</>
)
}
Loading

0 comments on commit feb3c34

Please sign in to comment.