[DEV] 새매거진 인풋 박스 UI 제작 #80
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import {type KeyboardEvent } from 'react' | ||
|
|
||
| interface MagazineInputProps { | ||
| topic: string | ||
| userMood: string | ||
| onTopicChange: (value: string) => void | ||
| onUserMoodChange: (value: string) => void | ||
| onSubmit: () => void | ||
| } | ||
|
|
||
| export default function MagazineInput({ | ||
| topic, | ||
| userMood, | ||
| onTopicChange, | ||
| onUserMoodChange, | ||
| onSubmit, | ||
| }: MagazineInputProps) { | ||
| const handleKeyDown = (e: KeyboardEvent <HTMLInputElement>) => { | ||
| if (e.key === 'Enter' && !e.shiftKey) { | ||
| e.preventDefault() | ||
| onSubmit() | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="relative mx-auto flex flex-col w-192.5"> | ||
| <div | ||
| className="flex items-center w-full border border-b-0 border-gray-500 bg-gray-100-op30" | ||
| style={{ | ||
| height: '54px', | ||
| padding: '20px 28px', | ||
| borderRadius: '20px 20px 0 0', //Tailwind 미지원 값 | ||
| }} | ||
| > | ||
| <div className="flex flex-col flex-1"> | ||
| <span className="text-gray-100/50 font-medium12">주제</span> | ||
| <input | ||
| value={topic} | ||
| onChange={(e) => onTopicChange(e.target.value)} | ||
| onKeyDown={handleKeyDown} | ||
| placeholder="관심있는 주제를 입력해 주세요." | ||
| className="w-full bg-transparent font-regular16 text-gray-100 outline-none placeholder-gray-100/40" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| className="flex items-center w-full border border-gray-500 bg-gray-100-op30" | ||
| style={{ | ||
| height: '54px', | ||
| padding: '20px 12px 20px 28px', | ||
| borderRadius: '0 0 20px 20px', //Tailwind 미지원 값 | ||
| }} | ||
eun0903 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| > | ||
| <div className="flex flex-col flex-1"> | ||
| <span className="text-gray-100/50 font-medium12">분위기</span> | ||
| <input | ||
| value={userMood} | ||
| onChange={(e) => onUserMoodChange(e.target.value)} | ||
| onKeyDown={handleKeyDown} | ||
| placeholder="원하는 분위기를 입력해 주세요." | ||
| className="w-full bg-transparent font-regular16 text-gray-100 outline-none placeholder-gray-100/40" | ||
| /> | ||
| </div> | ||
| <button | ||
| onClick={onSubmit} | ||
| disabled={!topic.trim()} | ||
| className={`flex shrink-0 items-center justify-center transition-all duration-200 ${ | ||
| topic.trim() ? 'bg-gray-500-op70' : '' | ||
| }`} | ||
| style={{ | ||
| width: '53px', | ||
| height: '30px', | ||
| padding: '8px 16px', | ||
| borderRadius: '40px', //Tailwind 미지원 값 | ||
| background: topic.trim() ? undefined : 'rgba(80, 80, 80, 0.40)', //디자인 시스템 변수 미지원 값 | ||
| boxShadow: topic.trim() | ||
| ? '0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 16px 32px 0 rgba(0, 0, 0, 0.20)' //디자인 시스템 변수 미지원 값 | ||
| : 'none', | ||
| }} | ||
eun0903 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| > | ||
| <span className="text-gray-100 whitespace-nowrap font-medium14">입력</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,8 +2,9 @@ import { useNavigate, useParams } from 'react-router-dom' | |
| import SectionCover from './components/SectionCover' | ||
| import useGetMagazineDetail from '../../hooks/useGetMagazineDetail' | ||
| import { GridContainor } from './components/GridContainor' | ||
| import useSidebarStore from '../../stores/sidebar' | ||
| import MagazineInfo from './components/MagazineInfo' | ||
| import { MagazineProvider } from './MagazineProvider' | ||
|
|
||
| const isValidUrl = (url?: string) => { | ||
| if (!url) return false | ||
|
|
@@ -32,31 +33,35 @@ export default function MagazinePage() { | |
| const content = data?.sections | ||
|
|
||
| return ( | ||
| <MagazineProvider id={Number(magazineId)}> | ||
| <div | ||
| style={{ backgroundImage: safeCoverImageUrl ? `url(${safeCoverImageUrl})` : 'none' }} | ||
| className="bg-cover overflow-hidden" | ||
| > | ||
| <div className={`flex flex-col transition-all duration-300 ${isOpen ? 'ml-60' : 'ml-15'}`}> | ||
| {data.user && ( | ||
| <div className="mt-9 pr-7 pl-10.5"> | ||
| <MagazineInfo | ||
| nickname={data.user.nickname} | ||
| profileImage={data.user.profileImageUrl} | ||
| magazineId={data.magazineId} | ||
| mode="magazine" | ||
| /> | ||
| </div> | ||
| )} | ||
| <div className="flex justify-center items-start p-20 h-screen overflow-auto"> | ||
| <GridContainor> | ||
| {content?.map((item) => ( | ||
| <SectionCover | ||
| key={item.sectionId} | ||
| imageUrl={item.thumbnailUrl} | ||
| onclick={() => handleSectionClick(Number(magazineId), item.sectionId)} | ||
| /> | ||
| ))} | ||
| </GridContainor> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </MagazineProvider> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| import React from 'react' | ||
| import { GRID_ITEM_LAYOUT_PRESETS, GRID_LAYOUT_PRESENT } from '../../../style/gridpattern' | ||
|
|
||
| export const GridContainor = ({ children }: { children: React.ReactNode }) => { | ||
| const count = React.Children.count(children) | ||
| const itemPattern = GRID_ITEM_LAYOUT_PRESETS[count] || [] | ||
| const layoutClass = GRID_LAYOUT_PRESENT[count] || 'grid-cols-4' | ||
| return ( | ||
| <div className={`w-full h-125 grid gap-2 grid-flow-dense overflow-hidden ${layoutClass}`}> | ||
| {React.Children.map(children, (child, index) => ( | ||
| <div key={index} className={itemPattern[index] || 'col-span-1'}> | ||
| {child} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,9 +4,10 @@ import Heart from '../../../icon/heart.svg?react' | |
| interface HeartCountProps { | ||
| hearts?: number | ||
| magazineId?: number | ||
| classname?: string | ||
| } | ||
|
|
||
| export default function HeartCount({ hearts, magazineId, classname }: HeartCountProps) { | ||
| // const [localLikeCount, setLocalLikeCount] = useState(Number(hearts)) | ||
| const postMutation = usePostHeart() | ||
| const handleHeartClick = async () => { | ||
|
|
@@ -15,9 +16,9 @@ export default function HeartCount({ hearts, magazineId }: HeartCountProps) { | |
| } | ||
|
|
||
| return ( | ||
| <div className={`flex items-center gap-1 cursor-pointer ${classname}`}> | ||
| <Heart className="text-gray-400" onClick={handleHeartClick} /> | ||
| <div className="text-gray-400">{hearts}</div> | ||
| </div> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,9 +8,12 @@ import { useMagazine } from '../MagazineProvider' | |
| interface MagazineInfoProps { | ||
| nickname?: string | ||
| profileImage?: string | ||
| magazineId?: number | ||
| sectionId?: number | ||
| mode: 'section' | 'magazine' | ||
| onClick?: (magazineId: number) => void | ||
| } | ||
| export default function MagazineInfo({ nickname, profileImage, sectionId, mode, onClick }: MagazineInfoProps) { | ||
| const magazinedata = useMagazine() | ||
| const [modalPos, setModalPos] = useState({ top: 0, left: 0 }) | ||
| const [isHamburgerOpen, setIsHamburgerOpen] = useState(false) | ||
|
|
@@ -25,10 +28,15 @@ export default function MagazineInfo({ nickname, profileImage, sectionId }: Maga | |
| openHamburger() | ||
| } | ||
| return ( | ||
| <div className="flex w-full justify-between items-center self-stretch"> | ||
| <div className="flex items-center gap-2 basis-100"> | ||
| <div | ||
| className={`cursor-pointer ${mode === 'section' ? 'font-regular16 font-notoserif text-gray-600' : 'font-semibold20 font-pretendard text-gray-100'}`} | ||
| onClick={() => magazinedata?.magazineId && onClick?.(magazinedata.magazineId)} | ||
| > | ||
| {magazinedata?.title} | ||
| </div> | ||
| <Hamburger className="rotate-90 text-black-icon cursor-pointer" onClick={handleHamburger} /> | ||
| {isHamburgerOpen && magazinedata?.magazineId !== undefined && sectionId !== undefined && ( | ||
| <SectionHamburgerModal | ||
| handleClose={closeHamburger} | ||
|
|
@@ -40,8 +48,12 @@ export default function MagazineInfo({ nickname, profileImage, sectionId }: Maga | |
| /> | ||
| )} | ||
| </div> | ||
| <HeartCount | ||
| hearts={magazinedata?.likeCount} | ||
| magazineId={magazinedata?.magazineId} | ||
| classname="basis-1 justify-center" | ||
| /> | ||
| <ProfileBox nickname={nickname} profileImage={profileImage} mode={mode} classname="basis-100 justify-end" /> | ||
| </div> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ interface ProfileBoxProps { | |
| export default function ProfileBox({ nickname, profileImage, classname, mode }: ProfileBoxProps) { | ||
| return ( | ||
| <div className={`flex gap-2 items-center ${classname}`}> | ||
| <div className={`${mode === 'magazine' ? 'text-gray-100' : 'text-gray-600'} font-regular16`}> | ||
| {nickname} | ||
| </div> | ||
| <img src={profileImage} className="w-12.5 h-12.5 rounded-full object-cover" /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ import MagazineInfo from './MagazineInfo' | |
| import SectionIndexList from './SectionIndexList' | ||
| import ParagraphPart from './ParagraphPart' | ||
| import useSidebarStore from '../../../stores/sidebar' | ||
| import { useNavigate } from 'react-router-dom' | ||
|
|
||
| interface SectionContentProps { | ||
| sectionId: number | ||
|
|
@@ -13,10 +14,14 @@ interface SectionContentProps { | |
| export default function SectionContent({ sectionId, magazineId }: SectionContentProps) { | ||
| const { isOpen } = useSidebarStore() | ||
| const magazinedata = useMagazine() | ||
| const navigate = useNavigate() | ||
| const { data, isLoading } = useGetSectionDetail(Number(magazineId), Number(sectionId)) | ||
| const user = magazinedata?.user | ||
| const content = data?.paragraphs | ||
|
|
||
| const handleClick = (magazineId: number) => { | ||
| navigate(`/magazine/${magazineId}`) | ||
| } | ||
| if (isLoading) { | ||
| return <></> | ||
| } | ||
|
|
@@ -27,11 +32,13 @@ export default function SectionContent({ sectionId, magazineId }: SectionContent | |
| className={`flex justify-center w-275 h-full bg-white relative transition-all duration-200 ${isOpen ? 'ml-60' : 'ml-15'}`} | ||
| > | ||
| <SectionIndexList sectionId={Number(sectionId)} /> | ||
| <div className="flex flex-col w-245 items-center gap-14 mt-9 mb-60 z-10"> | ||
| <MagazineInfo | ||
| nickname={user?.nickname} | ||
| profileImage={user?.profileImageUrl} | ||
| sectionId={Number(sectionId)} | ||
| mode="section" | ||
| onClick={handleClick} | ||
| /> | ||
|
|
||
| {content?.map((content) => ( | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.