feat: 활동 후기 qa (#1474)

* feat: 34기에게만 인풋 보이도록 수정 * feat: 반응형 수정
sopt-makers · Jul 24, 2024 · eaa9d62 · eaa9d62
1 parent e25a564
commit eaa9d62
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 29 deletions.
diff --git a/src/components/remember/ReviewInput/index.tsx b/src/components/remember/ReviewInput/index.tsx
@@ -1,5 +1,7 @@
+import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
 import { useGetReviewsInfiniteQuery } from '@/api/endpoint/remember/getReviews';
 import { useUploadReviewMutation } from '@/api/endpoint/remember/uploadReview';
+import { LATEST_GENERATION } from '@/constants/generation';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
@@ -14,6 +16,8 @@ export default function ReviewInput() {
   const [inputStatus, setInputStatus] = useState<'error' | 'focus'>();
   const { mutate } = useUploadReviewMutation();
   const { refetch } = useGetReviewsInfiniteQuery();
+  const { data: myData } = useGetMemberOfMe();
+  const is34 = myData?.generation === LATEST_GENERATION;
 
   const handleWrite = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const content = e.target.value;
@@ -54,25 +58,29 @@ export default function ReviewInput() {
   const isFocus = inputStatus === 'focus';
 
   return (
-    <ReviewInputWrapper>
-      <InputBox isFocus={isFocus} isError={isError}>
-        <Input
-          value={content}
-          placeholder='SOPT를 하며 재밌었던 일, 힘들었던 기억 등을 자유롭게 공유해주세요!'
-          maxLength={MAX_LENGTH}
-          onChange={(e) => handleWrite(e)}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-        />
-        <SendButton onClick={handleSubmit}>
-          <SendIcon isActivate={isError || isFocus} />
-        </SendButton>
-      </InputBox>
-      <Bottom>
-        {isError ? <Error /> : <div />}
-        <Length>{content ? content.length.toLocaleString() : 0}/3,000</Length>
-      </Bottom>
-    </ReviewInputWrapper>
+    <>
+      {is34 && (
+        <ReviewInputWrapper>
+          <InputBox isFocus={isFocus} isError={isError}>
+            <Input
+              value={content}
+              placeholder='SOPT를 하며 재밌었던 일, 힘들었던 기억 등을 자유롭게 공유해주세요!'
+              maxLength={MAX_LENGTH}
+              onChange={(e) => handleWrite(e)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+            <SendButton onClick={handleSubmit}>
+              <SendIcon isActivate={isError || isFocus} />
+            </SendButton>
+          </InputBox>
+          <Bottom>
+            {isError ? <Error /> : <div />}
+            <Length>{content ? content.length.toLocaleString() : 0}/3,000</Length>
+          </Bottom>
+        </ReviewInputWrapper>
+      )}
+    </>
   );
 }
 

diff --git a/src/components/remember/reviews/ReviewCard/index.tsx b/src/components/remember/reviews/ReviewCard/index.tsx
@@ -1,4 +1,4 @@
-import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { MOBILE_MEDIA_QUERY, TABLET_MEDIA_QUERY } from '@/styles/mediaQuery';
 import styled from '@emotion/styled';
 import { fonts } from '@sopt-makers/fonts';
 
@@ -10,17 +10,15 @@ interface ReviewCardProp {
 export default function ReviewCard({ id, content }: ReviewCardProp) {
   const cardColor = [
     'rgba(31, 41, 156, 0.6)',
-
     'rgba(255, 110, 29, 0.6)',
     'rgba(255, 202, 0, 0.6)',
     'rgba(93, 219, 255, 0.6)',
     'rgba(255, 255, 255, 0.3)',
-    'rgba(31, 41, 156, 0.6)',
     'rgba(253, 187, 249, 0.6)',
   ];
 
   return (
-    <Card color={cardColor[id % 7]}>
+    <Card color={cardColor[id % 6]}>
       <CardInner>{content}</CardInner>
     </Card>
   );
@@ -31,13 +29,19 @@ const Card = styled.article<{ color: string }>`
   border-radius: 10px;
   background: ${({ color }) => color};
   padding: 16px 20px;
-  width: 100%;
-  max-width: 335px;
+  width: 32%;
+
+  /* max-width: 335px; */
   max-height: 214px;
 
   ${fonts.BODY_16_M};
 
+  @media ${TABLET_MEDIA_QUERY} {
+    width: 49%;
+  }
+
   @media ${MOBILE_MEDIA_QUERY} {
+    width: 100%;
     max-width: 100%;
     max-height: 138px;
   }

diff --git a/src/components/remember/reviews/index.tsx b/src/components/remember/reviews/index.tsx
@@ -27,9 +27,17 @@ export default function Reviews() {
             <ReviewCardMobileWrapper>{renderedReviewData}</ReviewCardMobileWrapper>
           </Responsive>
           <Responsive only='desktop'>
-            <ReviewCardDesktopWrapper align='center' gap={16} column={3}>
-              {renderedReviewData}
-            </ReviewCardDesktopWrapper>
+            <ReviewDesktopContainer>
+              <ReviewCardDesktopWrapper
+                className='container'
+                align='center'
+                gap={16}
+                useFirstRender={true}
+                attributePrefix={'data-grid-'}
+              >
+                {renderedReviewData}
+              </ReviewCardDesktopWrapper>
+            </ReviewDesktopContainer>
           </Responsive>
         </ReviewsWrapper>
       )}
@@ -57,4 +65,12 @@ const ReviewCardMobileWrapper = styled.section`
 
 const ReviewCardDesktopWrapper = styled(MasonryInfiniteGrid)`
   margin-top: 48px;
+  width: 100%;
+  max-width: 1037px;
+`;
+
+const ReviewDesktopContainer = styled.section`
+  display: flex;
+  justify-content: center;
+  width: 100%;
 `;
diff --git a/src/pages/remember/index.tsx b/src/pages/remember/index.tsx
@@ -25,7 +25,7 @@ const StyledRemember34Page = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 64px 0;
+  padding: 64px 16px;
 
   @media ${MOBILE_MEDIA_QUERY} {
     padding: 10px 20px 24px;