diff --git a/src/components/auth/register/verify/view/ByPhoneView.tsx b/src/components/auth/register/verify/view/ByPhoneView.tsx index 738b25ade..f0b67f85f 100644 --- a/src/components/auth/register/verify/view/ByPhoneView.tsx +++ b/src/components/auth/register/verify/view/ByPhoneView.tsx @@ -65,7 +65,7 @@ const ByPhoneView: FC = (props) => { = ({}) => { return ( {/* 이 밑에 노출할 배너를 넣으세요. */} - + {/* */} {/* ==== */} ); diff --git a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx index 6108fb237..61654e8e7 100644 --- a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx +++ b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx @@ -1,10 +1,3 @@ -import styled from '@emotion/styled'; -import { colors } from '@sopt-makers/colors'; -import { fonts } from '@sopt-makers/fonts'; -import { Flex } from '@toss/emotion-utils'; -import Link from 'next/link'; -import { FC } from 'react'; - import { useGetEntryWordchain } from '@/api/endpoint/wordchain/getWordchain'; import Loading from '@/components/common/Loading'; import Responsive from '@/components/common/Responsive'; @@ -17,6 +10,12 @@ import IconMessageChat from '@/public/icons/icon-message-chat.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; import { SwitchCase } from '@/utils/components/switch-case/SwitchCase'; +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; +import { fonts } from '@sopt-makers/fonts'; +import { Flex } from '@toss/emotion-utils'; +import Link from 'next/link'; +import { FC } from 'react'; interface WordChainEntryProps { className?: string; @@ -46,9 +45,9 @@ const WordChainEntry: FC = ({ className }) => { {wordList && ( <> - {/* + - */} +
= ({ className }) => { caseBy={{ start: ( <> - {/* + {lastWinner ? ( {lastWinner?.roomId}번째 우승자는 @@ -71,76 +70,76 @@ const WordChainEntry: FC = ({ className }) => { )} - */} - - - - - 끝말잇기 - - {lastWinner ? ( - - 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' - {data.nextSyllable}'(으)로 시작하는 단어는? - - ) : ( - 우승하고 명예의 전당에 올라가보세요! - )} - -
- -
-
- {/*
*/} + + + + + + 끝말잇기 + + {lastWinner ? ( + + 이번 우승자는 {lastWinner?.winner.name}님 입니다! ' + {data.nextSyllable}'(으)로 시작하는 단어는? + + ) : ( + 우승하고 명예의 전당에 올라가보세요! + )} + +
+ +
+
+
), progress: ( <> - {/* + 현재 {`'${data?.currentWinner?.name}'`}님이
끝말잇기를 이기고 있어요!
- */} - - - - - 끝말잇기 - - {lastWord != null && ( - - {`${data?.currentWinner?.name}`}님이 {data.nextSyllable}(으)로 - 끝냈어요. 끝말을 이어주세요! - - )} - -
- -
-
- {/*
*/} + + + + + + 끝말잇기 + + {lastWord != null && ( + + {`${data?.currentWinner?.name}`}님이 {data.nextSyllable}(으)로 + 끝냈어요. 끝말을 이어주세요! + + )} + +
+ +
+
+
), }} />
- {/* + {(lastWinner?.roomId ?? 0) + 1}번째 끝말잇기 우승자 도전하러 가기 - */} +
- {/* + {status === 'start' && } {lastUser && } - */} + )} @@ -157,7 +156,7 @@ const LoadingContainer = styled.div` width: 100%; height: 92px; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { height: 91.5px; } `; @@ -177,7 +176,7 @@ const Container = styled(Link)` background-color: ${colors.gray800}; } - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { flex-direction: column; align-items: center; justify-content: center; @@ -196,7 +195,7 @@ const Container = styled(Link)` const TitleWrapper = styled.div` white-space: nowrap; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { display: flex; gap: 4px; align-items: center; @@ -204,7 +203,7 @@ const TitleWrapper = styled.div` `; const StyledIconMessageChat = styled(IconMessageChat)` - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { width: 20px; height: 20px; } @@ -214,7 +213,7 @@ const LeftSection = styled.div` display: flex; gap: 12px; width: 100%; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { display: contents; gap: 0; } @@ -224,7 +223,7 @@ const StyledTitle = styled(Text)` display: block; ${fonts.HEADING_18_B} - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { margin: 0; ${textStyles.SUIT_20_B}; } @@ -238,7 +237,7 @@ const WordchainText = styled(Text)` white-space: nowrap; ${fonts.LABEL_12_SB} - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { display: flex; align-items: center; justify-content: center; @@ -262,7 +261,7 @@ const RightSection = styled.div<{ isStart: boolean }>` justify-content: ${({ isStart }) => (isStart ? 'flex-start' : 'flex-end')}; width: 100%; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { gap: 10px; margin-top: 16px; } @@ -286,7 +285,7 @@ const GotoWordChainWrapper = styled.aside` padding: 16px; width: 100%; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { gap: 8px; border-radius: 14px; padding: 18px 17px; @@ -302,7 +301,7 @@ const GotoWordChainContents = styled.div` display: flex; gap: 20px; - @media ${TEMPORARY_MEDIA_QUERY} { + @media ${MOBILE_MEDIA_QUERY} { gap: 16px; } `; diff --git a/src/pages/remember/index.tsx b/src/pages/remember/index.tsx index 971067eb7..4d3d214a9 100644 --- a/src/pages/remember/index.tsx +++ b/src/pages/remember/index.tsx @@ -3,16 +3,13 @@ import styled from '@emotion/styled'; import { FC } from 'react'; import AuthRequired from '@/components/auth/AuthRequired'; -import RememberPage from '@/components/remember'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { setLayout } from '@/utils/layout'; const Remember34Page: FC = () => { return ( - - - + {/* */} ); };